HTML知识概括

HTML常用标签

标题标签

HTML提供了6个等级的标题标签，即 <h1> - <h6> 。字体变粗，字号加大，逐级递减，独占一行。

<h1>这是一级标题标签</h1>

段落标签

<p>标签把HTML分为几个段落，根据浏览器窗口自动换行，段落与段落之间有空隙。

<p>这是段落标签</p>

换行标签

<br/>标签将某段文本强制换行，单标签。、

文本格式化标签

在网页中，文本格式化标签为字体设置加粗、倾斜或下划线等效果。

语义	标签	说明
加粗	<strong></strong>或<b></b>	推荐strong，语义更加强烈
倾斜	<em></em>或<i></i>	推荐em，语义更加强烈
删除线	<del></del>或<s></s>	推荐del，语义更加强烈
下划线	<ins></ins>或<u></u>	推荐ins，语义更加强烈

<div>标签和<span>标签

<div>标签和<span>标签是没有语义的，是个盒子，用用来装内容。

<div>这是大盒子</div>
<span>这是小盒子</span>

<div>标签是大盒子，块元素，独占一行。
<span>标签是小盒子，行内元素，一行可放多个。

图像标签

<img/>标签用于定义HTML页面中的图像。

<img src="图像URL"/>

alt属性和title属性的区别：
1.alt为替换文本，在网页的图像无法显示时，显示设置的文字。alt的值是百度搜索关键词。
2.title为提示文本，当鼠标点击图像时，显示设置的提示信息。

相对路径和绝对路径

1.相对路径
相对路径：以引用文件所在位置为参考基础，建立的路径。即相对于HTML文件的所在位置。

2.绝对路径
绝对路径：指目录的绝对位置，直接到达目标目录，通常从盘符开始的路径。
例如：“D:\web\log.jpg"或者"https://i0.hdslb.com/bfs/logo.jpg”。

链接标签

<a>标签用于定义超链接，作用是从一个页面转到另一个页面。

<a href="跳转的目标" target="目标窗口弹出的方式">

链接分类：
1.外部链接。如：<a href="http://www.baidu.com"></a>。
2.内部链接：网站内部页面之间的相互链接。如<a href="index.html"></a>
3.空链接：<a href="#">首页</a>
4.下载链接：如果href里面的链接是一个文件或者压缩包，则会下载这个文件或者压缩包。
5.网页元素链接：在网页中的各种元素，如文本、图像、视频等都可以添加超链接。
6.锚点链接：点击链接时，可以快速定位到网页中的某个位置。

• 在href属性中，设置值为"#名字"。如<a href="#two">第二季</a>。
• 在目标位置的标签里面添加 id=“名字”。如<h2 id="two">第二季</h2>。

表格标签

表格主要用于显示、展示数据的。<tr>为行标签，<th>为表头单元格标签，<td>为单元格标签。

<table>
	<tr>
		<th>姓名</th>
		<th>学号</th>
		...
	</tr>
	<tr>
		<td>新垣结衣</td>
		<td>01</td>
		...
	</tr>
</table>

表格结构标签：
1.<thead>标签表示表格的头部区域。
2.<tbody>标签表示表格的主体区域。

合并单元格：
1.跨行合并：rowspan = “合并单元格的个数”。
2.跨列合并：colspan = “合并单元格的个数”。

目标单元格
1.跨行：最上侧单元格为目标单元格。
2.跨列：最左侧单元格为目标单元格。

合并步骤：
1.确定跨行还是跨列。
2.选择目标单元格。如：<td rowspan = "2"></td> 。
3.删除多余的单元格。

列表标签

列表用来布局的，最大的特点是整齐、整洁、有序。分为三类：无序列表、有序列表和自定义列表。
1.无序列表：
<ul>标签表示HTML页面中的无序列表，<li>标签表示列表项。

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

特点：列表项之间没有顺序级别之分，是并列的。<ul></ul>之间只能嵌套<li></li>。<li>相当于一个容器，可以装所有元素。
2.有序列表：
<ol>标签表示HTML页面中的有序列表，<li>标签表示列表项。

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

特点：列表项按照顺序排列。<ol></ol>之间只能嵌套<li></li>。<li>相当于一个容器，可以装所有元素。
3.自定义列表：
<dl>标签表示HTML页面中的有序列表，<dt> 和 <dd>标签表示列表项。

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

特点：<dl></dl> 之间只能嵌套 <dt></dt> 和 <dd></dd> 。<dt> 和 <dd> 里面可以容纳所有元素。

表单标签

一个完整的表单由表单域、表单控件（表单元素）和提示信息组成，用于收集用户信息。
表单域：
表单域是一个包含表单元素的区域，用 标签定义表单域，实现用户信息的收集和传递。

<form action = "URL地址" method = "提交方式" name = "表单域名称">
	各种表单元素
</form>

表单控件：

• input输入表单元素
• select下拉表单元素
• textarea文本域元素

**1.input表单元素**

<input type = "属性值"/>

type 的属性值：

input 的其它属性：

<label>标签：
用来绑定一个表单元素，当点击 <label> 标签里的文本时，浏览器会自动的将光标转到或者选择对应的表单元素，增加用户体验。

<label for = "sex"> 男 </label>
<input type = "radio" name = "sex" id = "sex" />

for 属性值与对应的表单元素的 id 属性值一致。
2.select 下拉表单元素

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

在 <option> 中定义 selected = “selected” 时，当前项即为默认选中项。
3.textarea文本域元素

<textarea rows = "3" cols = "20" >
文本内容
</textarea>

rows 表示行数， cols 表示每行中的字符数。