HTML简介（二）

最新推荐文章于 2023-07-17 16:47:14 发布

橙子

最新推荐文章于 2023-07-17 16:47:14 发布

阅读量312

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43403215/article/details/97789745

版权

列表标签与表格标签

1.列表标签
什么是列表？
把…制成表,以表显示容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是整齐、整洁、有序。
（1）无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

例如：

<ul type="circle"> <!--无符号列表-->
			<li >列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>

结果：
在这里插入图片描述
（2）有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下，所有特性基本与ul 一致。

列表项1
列表项2
列表项3
......

<ol type="A"> <!--有序列表-->
			<li>列表项1</li> <!--列表项-->
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ol>

（3）自定义列表：
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

2.表格标签
在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

表格标签的属性：
在这里插入图片描述

表单标签

表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

在这里插入图片描述

label标签(理解)

label 标签为 input 元素定义标注（标签）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

<select></select>中至少应包含一对<option></option>。
在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 表单域</title>
	</head>
	<body>
		<!--表单一定要以表单域<form></form>开始和结束
		也就是写表单一般有表单域，除非不想提交-->
		<form enctype="multipart/form-data" action="index2.html">
			<div>
				<!--
				<label></label>：<label> 标签为 input 元素定义标注（标记）。
            	<Input>标签
            -->
            <label for="name">姓名：</label>
            <!-- size 设置文本框长度-->
            <input id="name" name="name" type="text" value="文明本" size="20"/>
			</div>
            <div>
				<!--
				<label></label>
            	<Input>标签
            -->
            <label for="pwd">密码：</label>
            <input id="pwd" name="pwd" type="password" value="*****"maxlength="8" />
			</div>
			<div>
				<!--
				<label></label>
            	<Input>标签
            -->
            <label for="sex">性别：</label>
            <!--radio单选按钮-->
            <input id="sex" name="sex" type="radio" value="男" checked="true"/>男
            <input id="sex" name="sex" type="radio" value="女" />女
			</div>
			<div>
				<!--
				<label></label>
            	<Input>标签
            -->
            <label for="fav">爱好：</label>
            <!--checkbox复选按钮-->
            <input id="fav" name="fav" type="checkbox" value="吹" checked="true"/>吹
            <input id="fav" name="fav" type="checkbox" value="拉" />拉
            <input id="fav" name="fav" type="checkbox" value="弹" checked="true"/>弹
            <input id="fav" name="fav" type="checkbox" value="唱" />唱
			</div>
			
			<div>
				<!--
				<label></label>
            	<Input>标签
            	如果上传文件，使用type=file的属性值，但是普通表单只能上传字符数据
            	如果要上传文件，必须在<from></from>表单域标签中添加enctype="multipart/from-date"
            	此时为多部分上传表单数据，可以上传字节数据
            	-->
            <label for="photo">上传：</label>
            <!--上传文件-->
            <input id="photo" name="photo" type="file"/>
			</div>
			<div>
				<!--
				<label></label>
            	<Input>标签
            -->
            <input id="image" name="image" type="image" src="img/timg.jpg" />
            <input id="submit" name="submit" type="submit" value="发送" />
            <input id="reset" name="reset" type="reset" value="重置" />
			</div>
			
			<div>
				<!--
				<label></label>
            	<Input>颜色标签
            	-->
            <label for="color">颜色：</label>
            <!--上传文件-->
            <input id="color" name="color" type="color"/>
			</div>
			<div>
				<!--
				<label></label>
            	<Input>日期时间标签
            	-->
            <label for="datetime">日期：</label>
            <!--上传文件-->
            <input id="datetime" name="datetime" type="datetime"/>
			</div>
			<div>
				<!--
				<label></label>
            	<Input>电子邮件标签
            	-->
            <label for="email">邮件：</label>
            <input id="email" name="email" type="email"/>
			</div>
			<div>
				<!--
				<label></label>
            	<Input>hidden 隐藏域 服务器端
            	-->
            <input id="hidden" name="hidden" type="hidden" value="hidden"/>
			</div>
			
			<div>
				<!--
				<label></label>
            	<textarea></textarea>
            	-->
	            <label for="articel">文章：</label>
	            <textarea id="articel" name="articel" rows="20" cols="40"></textarea>
			</div>
			<div>
				<!--
				<label></label>
            	<select></select>
            	-->
	            <label for="year">年份：</label>
	            <select id="year" name="year"><option>1990</option>
	            <option>1991</option>
	            <option>1992</option>
	            <option>1993</option>
	            <option selected="true">2019</option></select>
			</div>
			<div>
				<!--
				<label></label>
            	<textarea></textarea>
            	-->
	            <label for="year">多选年份：</label>
	            <select id="year" name="year" multiple="true"><option>1990</option>
	            <option>1991</option>
	            <option>1992</option>
	            <option>1993</option>
	            <option selected="true">2019</option></select> <!--默认选中-->
			</div>
		</form>
	</body>
</html>

页面呈现：
在这里插入图片描述

橙子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML简介（二）

列表标签与表格标签1.列表标签什么是列表？把…制成表,以表显示容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是整齐、整洁、有序。（1）无序列表无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：<ul> <li>列表项1</li> <li>列表项2</li> <li&...
复制链接

扫一扫