2021-05-05

HTML标签总结

head标签：文档头部（描述文档的各种属性和信息，包含文档的标题、在Web
中的位置以及其他文档的关系等；其中必须设置的标签是title）；
title标签：文档的标题（让页面拥有属于自己的标题）；
body标签：文档的主体（包含文档的所有内容）；

标签语法
双标签
语法：<标签名>...</标签名>
例如：title标签，head标签，body标签；
单标签（也称空标签，指一个标签符号即可完整地描述某个功能的标签）
语法：<标签名/>
例如：meta/ ；br/ ；hr/ ；

标签关系
并列关系
例如head和body平级关系，都在同一个html标签中；
嵌套关系
例如html中嵌套了head标签（建议使用table键区分）；

标题标签
head的缩写 h ；分为1-6 六个级别；
<h1>标题</h1>

段落标签
<p>内容</p> 表示一个段落；

盒子标签
页面布局主要的两个盒子：css+div；
div就是divsion的缩写，分割、分区的意思；
<div></div>
span，跨度、跨距；
<span></span>

文本表现标签
<b></b>或<strong></strong> 粗体显示
<i></i>或<em></em> 斜体显示
<s></s>或<del></del> 加删除线显示
<u></u>或<ins></ins> 加下划线显示
 b i s u 只有使用，没有强调意思； strong em del ins 语义强烈；

图片标签
标签属性
语法：<标签名 属性值1 = "值" 属性值2 = "值">内容</标签名>
标签可用拥有多个属性，必须写在开始标签中，位于标签名后；
属性不分先后顺序，标签名与属性、属性与属性之间均以空格分开；
任何标签的属性都有默认值，省略该属性则取默认值；

图片标签的使用
属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停显示的内容
width	像素	图像宽度
height	像素	图像高度
若仅设置一个，宽或高，另一个等比例缩放。
border	数字	图像边框的宽度

路径
相对路径
图像文件和HTML文件位于同一级文件夹；下一级用 / ；上一级用 ../ ;
绝对路径
完整的网络地址

超链接标签
标签属性
<a href = "跳转目标" target = "目标窗口弹出方式">文本或者图像</a>
target的属性值：
_self 当前窗口打开；
_blank 新窗口打开；
title：鼠标悬停提示文字

外部链接需要添加全域名路径，比如http://www.baidu.com，（必须添加协议）
内部链接直接链接内部页面名称即可，#表示空连接

base标签
位于head标签中，可以指定页面中所有a 标签的跳转方式
<base target = "_blank"/>

锚点
页面内容较多时，可以通过锚点快速到达指定位置；
例如：回到顶端；
使用 <a href = "id名">标题</a>
例如：<a href = "#one">
使用相应的id跳转到指定位置
<h3 id = "one">内容</h3>

列表
容器里装载着文字或者图标的一种形式；
特点：整齐、整洁、有序；

无序列表
<ul></ul>中只能嵌套<li></li>
直接输入其他标签或者文字是不允许的
<li></li>之间相当于一个容器，容纳所有的元素
带有自己的样式属性

有序列表
自定义列表
<dl>
	<dt></dt>
	<dd></dd>
</dl>

创建表格（展示数据）
<table>
	<tr>
		<td></td>
		...
	</tr>
	...
</table>

table 定义一个表格
tr 定义表格中的一行
td 定义表格中的单元格

<tr></tr>中只能嵌套<td></td>
<td></td> 相当于一个容器，可以容纳所有元素

表格属性		含义				常用属性值
border		设置表格边框			像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认2px）
cellpadding	设置单元格内容和边框之间的空白间距	像素值（默认1px）
width		设置表格宽度			像素值
height		设置表格高度			像素值
align		设置表格在网页中的水平对齐方式		left、center、right

表格结构
头部、主体和页脚（兼容性问题）
<thead></thead>：定义表格头部，必须位于<table></table>标签中
一般包含网页的logo和导航等头部信息；
<tbody></tbody>：定义表格主体，必须位于<table></table>标签中
一般包含网页中除头部和底部之外的其他内容；

表头标签：<th></th>替代相应单元格标签<td></td>即可；
表格标题：
<table>
	<caption>我是表格标题</caption>
</table>

合并单元格
跨列合并：rowspan
跨行合并：colspan
合并单元格步骤：
1.先判断跨行合并还是跨列合并
2.讲rowspan或者colspan写在第一个要合并的单元格上
3.将合并的行数和列数写在指定的属性值上
4.讲多余的单元格注释掉

表单标签、表单域、表单按钮
form标签用于定义表单域；
<from action ="url地址" method="提交方式" name="表单名称">
各种表单控件
</from>

action属性指定接收处理表单数据的服务器程序url地址；
method用于设置表单数据的提交方式，其值为get或post；
get 明文传输；
post 非明文传输，有请求体；
name 用于指定表单的名称，区分同一个页面中多个表单；

input 控件（单标签）
属性	属性值		描述
	text		单行文本输入框
	password		密码输入框
	radio		单选按钮
	checkbox		复选框
type	button		普通按钮
	submit		提交按钮
	reset		重置按钮
	image		图像形式的提交按钮
	file		文件域