HTML知识点总结-简略
1.HTML常用标签
1.1表格标签(双标签)
表格是实际开发中非常常用的标签
1.1.1表格的主要作用
表格不是用来布局页面的,而是主要用于展示数据
1.1.2表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table></table>
用来定义表格的标签<tr></tr>
标签用于定义表格中的行,必须嵌套在<table></table>
标签中<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列表的分类
- 无序列表(重点)
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意:
①无序列表中的各个列表之间没有顺序,是并列的
② <ul></ul>
中只能嵌套<li></li>
,但是<li></li>
中可以放任何标签
- 有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
注意:
①各个列表之间有顺序
② <ol></ol>
中只能嵌套<li></li>
,但是<li></li>
中可以放任何标签
- 自定义列表(重点)
要注意和无序列表的区别
<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表单元素(单标签)
<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是用户可以在表单元素中输入的最大字符数
<label>
标签(双标签)
与<input>
标签搭配使用
<label>
标签用于绑定一个表单元素,当点击<label>
标签内的文本时,浏览器就会自动将光标转到或者选择对应的表单元素上,用来增加用户体验
<!--当点击“男”这个字时,就会选中按钮-->
<lable for="sex1">男</label>
<input type="radio" name="sex" id="sex1">
注意:
<label>
标签的for属性应当和相关元素的id属性相同
<select>
标签(双标签)(下拉表单元素)
如果有多个选项让用户选择,我们可以使用<select>
标签控件定义下拉列表,例如日期、地区等信息的输入时
<select>
<option>北京</option>
<option>天津</option>
<option>四川</option>
<option>湖北</option>
</select>
注意:
①<select>
中至少包含一对<option>
②在<option>
中定义selected = "selected"时,当前项即为默认选中项,没有时默认选中项为第一个
<option selected="selected">
<textarea>
标签(双标签)(文本域表单元素)
<textarea>
标签用来定义多行文本输入的控件,当用户输入内容较多时,就不能使用文本框表单了,这时可以使用<textarea>
标签
<textarea>
请输入你的的文字
</textarea>
注意:
①可以通过cols和rows属性来分别指定文本域的每行中的字符数,以及显示的行数,实际开发使用CSS来改变大小