##HTML常用标签

学习标签的时候，最重要的是记住标签的含义，即这个标签是用来干什么的！合理的添加标签，可以让网页界面更清晰易读！

标题标签

HTML提供了6个等级的网页标题，即<h1> - <h6> 。

语法规范：<h1> 一级标题 </h1>h1>

单词head缩写，意为头部、标题。

**语义：**作为标题使用，根据重要性递减。

###段落标签

语法规范：<p> </p>

单词：paragraph

**语义：**把HTML分成若干段落。

**特点：**双标签，段落之间会插入一些垂直间距。

换行标签

语法规范：<br />

单词：break

语义：强制换行

特点：是一个单标签，在显示上与段落标签不一样，段落之间会插入一些垂直间距。

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体、下划线等效果。这时候就需要使用文本格式化标签。

语义 标签 说明
加粗 <strong> </strong> 或者 <b> </b> 推荐使用第一个,语义更强烈
倾斜 <em> </em> 或者 <i> </i> 同上
删除线 <del> </del> 或者 <s> </s> 同上
下划线 <ins> </ins> 或者 <u> </u> 同上

<div>, <span>标签

这两个双标签是没有语义的，它们就是一个盒子，用来装内容。

特点：

  1. <div> 标签用来布局，但是一行只能放一个<div>。大盒子
  2. <span> 标签用来布局，一行上可以放多个<span>标签。小盒子

图像标签和路径

图像标签：<img src="图像URL” />。单标签

单词：image

src 是图像标签的必须属性，用于指定图像文件的路径和文件名。

属性 属性值 说明
src 图片路径 必须属性
alt 文本 当图像不能正常显示，替换成文本
title 文本 当鼠标放在图像上，显示提示文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细 
1
2

<img src="图像的URL" alt="当图像显示不出来替换的文字" />
<img src="图像的URL" alt="当图像显示不出来替换的文字" title="当鼠标放在图像上时提示的文字" height="" />

tip：当修改图像的高度 或 宽度 时只修改一个，这样会等比缩放避免图像失真。

注意：

  1. 图像标签可以拥有多个属性，但必须写在标签名img后面
  2. 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
  3. 属性采取键值对形式

相对路径和绝对路径，其实跟物理中的相对参考系，绝对参考系一样的概念。在电脑中相对于电脑磁盘的路径是绝对路径，相对于磁盘上任意文件夹的路径是相对路径。

超链接标签

语法：<a href="跳转目标” target="目标窗口的弹出方式"> 文本或图像 </a>

单词：anchor锚

属性：

属性 作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接功能
target 用于指定链接页面的打开方式，其中_self为默认值当前页面打开，_blank为在新窗口中打开方式

分类：

  1. 外部链接：<a href="https://google.com” target=”_blank"> Google </a>
  2. 内部链接：<a href=”/xxx.html” target=”_blank"> 文字或图像 </a>
  3. 空链接：<a href=”#” target=”_blank"> 文字或图像 </a>
  4. 下载链接：<a href="待下载文件路径” target=”_blank"> 文字或图像 </a>
  5. 网页元素链接：网页中各种元素，如文本、图像、表格、音频、视频等都可以添加超链接。<a href="待下载文件路径” target=”_blank"> <img src="图片” /> </a>
  6. 锚点链接：可以快速定位到页面中某个位置。
    • 在链接文本的href属性中，设置属性值为**#名字**，如<a href=”#two"> 第二集 </a>
    • 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two"> 第二集介绍 </h3>

HTML注释

语法实现：<!–注释内容–>，快捷键control+/。

特殊字符：

特殊字符 字符代码
空格 &nbsp
< &lt
> &gt

tips：在html文件中使用方式 &nbsp; 重点记住这三个，其余可以查阅手册。

表格标签

语法：

1
2
3
4
5
6
7

<table>
	<tr>
		<td>单元格内的文字</td>
		···
	</tr>
	···
</table>
  1. <table> </table> 是用于定义表格的标签
  2. <tr> </tr> 用于定义表格中的行，必须嵌套在<table> </table> 标签中
  3. <td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr> 标签中
  4. 字母td指数据表格（table data），即数据单元格的内容

表头标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文件内容加粗居中显示，这是与普通td单元格的区别。

语法：<th> </th>，table head

表格属性

表格标签这部分属性在一般的实际开发中不常用到，后面通过CSS来设置。在此介绍主要是为了理解表格有那些形态，并为CSS作准备。

属性名 属性值 描述
align left, center, right 规定表格对齐方式
border 1或”” 规定表格是否拥有边框，默认为 "” 没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值 规定表格的宽度
height 像素值 规定表格的高度

这些属性要写到表格标签table里面

单元格里面可以放任何网页元素：文本、图片、链接等

**表格结构：**在实际应用中，表格可能会很长，为了简洁的显示表格代码，可以将表格分为 表格头部 和 表格主体 两部分。

1
2
3

表格头部：<thead> </thead>，用于定义表格头部，里面必须包含<tr>标签，一般在第一行
表格主体：<tbody> </tbody>，用于定义表格主体，放数据本体
以上两个标签都放在表格<table></table>标签中

注：这两个标签只是将表格语句划分成两个区域，只对html代码有效。

合并单元格

方式：

  1. 跨行合并：rowspan="合并单元格个数”，上面的单元格作为目标单元格，写此代码
  2. 跨列合并：colspan="合并单元格个数”，左侧单元格作为目标单元格，写此代码

步骤：先确定是那种方式合并，找到目标单元格，删除被合并的单元格。

列表标签

根据情景不同可以分为：无需列表（重点）、有序列表和自定义列表（重点）。

无序列表语法：

1
2
3
4
5
6

<ul>
	<li>列表1</li>
	<li>列表2</li>
	...
</ul>
注：<ul></ul>标签只能放<li></li>标签；<li></li>标签可以放任何元素。

详细见CSS

有序列表语法：

1
2
3
4
5

<ol>
	<li></li>
	...
</ol>
注：会按照列表顺序添加1，2，3等。

除了带列表标签以外，与无序列表基本一样。

自定义列表语法：

1
2
3
4
5
6
7

<dl>
	<dt>项目名字</dt>
	<dd>项目分支</dd>
	<dd>项目分支</dd>
	...
</dl>
注：有三组标签。<dl></dl>只能包含<dt><dd>,<dt>, <dd>可以包含任何元素。

表单标签

用户填写表单可以用来收集用户信息。最常见于注册页面或者调查页面。

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

####表单域

**表单域：**包含表单元素的区域。会把范围内的表单元素信息提交给服务器。

表单域语法：

1
2

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

表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容。

**<input>表单元素：**用于收集用户信息。包含一个type属性，不同的属性值对应不同的输入方式。

语法：

1

<input type="属性值" />, 是一个单标签

type属性及属性值：

属性值 描述
button 定义可点击按钮
checkbox 定义复选框
file 定义输入字段和 浏览 按钮，供文件上传
hidden 定义隐藏的输入字段
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮。重置按钮会清楚表单中所有数据
submit 定义提交按钮。会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其中输入文本。默认宽度20字符。
image 定义图像形式的提交按钮

示例：

1
2
3
4

<form>
		用户名：<input type="属性值" /> <br>
		密码：<input type="属性值" />
</form>

其他属性值使用可以参考视频内容教程。pink老师HTML教程

其他常用属性值及其含义

属性 属性值 描述
name 用户自定义 定义input元素名称
value 用户自定义 定义input元素的值
checked checked 规定此input元素首次加载时默认被选中
maxlength 正整数 规定输入字段中的字符的最大长度
  1. name 和 value是每个表单元素都有的属性值，主要供后台人员使用。
  2. name 表单元素名字，要求单选按钮 和 复选框 都要有相同的name值
  3. checked属性主要针对单选按钮和复选框，checked="checked”，一打开网页默认某个选项被勾选。
  4. maxlength用户可以输入的最大字符数

###<label>标签

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

语法：

1
2
3

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
注意：for 和 id要相同，这样才会对准光标

select下拉标签

在页面中如果一个表单元素有多个选项让用户选择，并且想要节约空间时，可以使用该标签。

语法：

1
2
3
4
5
6

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

注意：select至少包含一对option标签；在option标签里面，可以设置属性selected="selected”，则该选项为默认选项。如果不设置改属性，则第一个选项为默认选项。

textarea表单元素

在用户输入内容较多的情况下，使用该标签可以定义多行文本输入。常见于留言板，评论等表单元素。

语法：

1
2
3

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

cols="每行中的字符个数”；rows="显示的行数”。实际开发中用CSS完成。

Reference:

pink老师HTML基础教学

遇到不会的问题。可以查阅W3C，MDN Web Doc。