HTML知识点2

1.HTML常用标签

1.1表格标签（双标签）

表格是实际开发中非常常用的标签

1.1.1表格的主要作用

表格不是用来布局页面的，而是主要用于展示数据

1.1.2表格的基本语法

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

1. <table></table>用来定义表格的标签
2. <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3. <td></td>用预定于表格中的单元格，必须嵌套在<tr></tr>标签中

 <table>
        <tr>
            <td>姓名</td> <td>性别</td> <td>年纪</td>    
        </tr>
        <tr>
            <td>姓名</td> <td>性别</td> <td>年纪</td>    
        </tr>
        <tr>
            <td>dad</td> <td>dasdas</td> <td>dasda</td>
        </tr>
    </table>

1.1.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里的文本内容加粗、居中显示

<table>
	<tr>
		<th>姓名</th>
	...
	</tr>
	...
</table>

1.1.4表格属性（HTML不常用，由CSS来设置）

在table标签里设置，如下所示
<table align="center" border="1" ...>

1.1.5表格结构标签

为了更好的表示表格的语义，结构更清晰，可以将表格分割成
表格头部<thead></thead>
表格主体<tbody></tbody>
注意：这两个标签都必须嵌套在<table></table>标签中

<table>
	<thead>
		<tr>
			<th>姓名</th>
		...
	</thead>
	<tbody>
		</tr>
			<td>张三</td>
		...
	</tbody>
</table>

1.1.6合并单元格

将多个单元格合并为一个单元格

• 跨行合并：最上侧单元格为目标单元格，写合并代码，colspan=“合并的个数”
• 跨列合并：最左侧单元格为目标单元格，写合并代码,rowspan=“合并的个数”

    <table align="center" border="1"  cellspacing="0" width="500" height="250" >
        <tr>
            <td></td>
            <td colspan="2"></td>

        </tr>

        <tr>
            <td rowspan="2"></td> 
            <td></td>
            <td></td>
        </tr>
        
        <tr>

            <td></td>
            <td></td>
        </tr>
    </table>

1.2列表标签（双标签）

1.2.1列表的主要作用

列表是用来布局的

1.2.2列表的分类

1. 无序列表（重点）

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

注意：
①无序列表中的各个列表之间没有顺序，是并列的
② <ul></ul>中只能嵌套<li></li>，但是<li></li>中可以放任何标签

2. 有序列表

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

注意：
①各个列表之间有顺序
② <ol></ol>中只能嵌套<li></li>，但是<li></li>中可以放任何标签

3. 自定义列表（重点）
   要注意和无序列表的区别

<dl>
  <dt>列表项1</dt>
  <dd>列表项2</dd>
  <dd>列表项3</dd><!--dd是对dt的描述说明-->
  ...
</dl>

注意：
①<dl></dl>里面只能包含<dt>和<dd>
②<dt>和<dd>没有个数限制，一个<dt>通常包含多个<dd>，<dt>和<dd>里可以放任何标签

1.3表单标签

1.3.1为什么需要表单

常用于注册页面，用于收集用户信息

1.3.2表单的组成

在HTML中，一个完整的表单由表单域、表单控件（也叫表单元素）和提示信息三部分构成

1.3.2.1表单域（双标签）

表单域是一个<form></form>包含表单元素的区域，会把表单域内的表单元素送到服务器

属性	属性值	作用
action	URL地址	用于指定接收并处理表单数据的服务器的URL地址
method	get/post	用于指定表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一页面中的多个表单域

1.3.2.2表单元素（单标签）

1. <input>表单元素（单标签）
   用于收集用户信息
   <input type="属性值" name="名称" value="值" checked="checked" .../>

属性	属性值	描述
type	见下表	定义不同的形式
name	用户自定义	定义input元素的名称，区别不同的表单元素
value	用户自定义	规定input元素的值，文本框等默认显示的文字
checked	checked	规定此input元素首次加载时被选中，用于单选和复选按钮
maxlength	正整数	规定输入字段中的字符的最大长度

type属性值	描述
button	定义可点击按钮，结合JavaScript搭配使用
checkbox	定义复选框
file	定义输入字段和“浏览”按钮（文件域），供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，会清除表单中的所有数据
submit	定义提交按钮，会把当前表单域中的表单数据发送给服务器
text	定义单行的输入字段的文本框，用户可在其中输入文本，默认20字符

注意：
①name属性值用于区别表单中不同元素，单选、复选必须是相同的name
②name和value是每个元素都有的属性值，给后台人员使用
③checked属性主要针对单选和复选按钮，主要作用是一打开页面，就可以默认选择某元素
④maxlength是用户可以在表单元素中输入的最大字符数

2. <label>标签（双标签）
   与<input>标签搭配使用
   <label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或者选择对应的表单元素上，用来增加用户体验

<!--当点击“男”这个字时，就会选中按钮-->
<lable for="sex1">男</label>
<input type="radio" name="sex" id="sex1">

注意：
<label>标签的for属性应当和相关元素的id属性相同

3. <select>标签（双标签）（下拉表单元素）
   如果有多个选项让用户选择，我们可以使用<select>标签控件定义下拉列表，例如日期、地区等信息的输入时

<select>
	<option>北京</option>
	<option>天津</option>
	<option>四川</option>
	<option>湖北</option>
</select>

注意：
①<select>中至少包含一对<option>
②在<option>中定义selected = "selected"时，当前项即为默认选中项，没有时默认选中项为第一个
<option selected="selected">

4. <textarea>标签（双标签）（文本域表单元素）
   <textarea>标签用来定义多行文本输入的控件，当用户输入内容较多时，就不能使用文本框表单了，这时可以使用<textarea>标签

<textarea>
	请输入你的的文字
</textarea>

注意：
①可以通过cols和rows属性来分别指定文本域的每行中的字符数，以及显示的行数，实际开发使用CSS来改变大小