HTML 标签和属性
一些标签
单双标签
双标签。双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用
<标签名>表示，结束标签用</标签名>表示，只有一对标签一起使用才能表示一个具体的含义。例如<html></html>表示一个 HTML 文档。单标签。单标签指标签不是成对出现的，也就是只用一个标签就能表示一个具体的含义，例如
<br>表示换行、<hr>表示创建一条水平线。为了符合 W3C 规范，单标签必须在标签后面加一个斜杠，即<br/>、<hr/>，所以单标签通用格式为<标签名/>。
段落标签
<p> </p>
换行标签
<br/>
水平横线
<hr />
标题标签
<h1 align="center"></h1>
h1-h6
文本样式标签
<font 属性="属性值"> </font>
属性：face字体 size大小 color颜色等
<font face="宋体"> </font>
文本格式化标签
粗体 <strong></strong> 或 <b></b>
文字下画线 <ins></ins> 或 <u></u>
文字斜体 <em></em> 或 <i></i>
文字删除线 <del></del> 或 <s></s>
图像标签
<img src="图像路径"/>
alt 图像不能显示时显示文本
title 鼠标悬停图片显示文本
HTML注释
<!-- 在此处写注释 -->
特殊符号
| HTML 原代码 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
|   | 半个空白位 | |
|   | 一个空白位 | |
| | 不断行的空白 |
HTML基本结构
<html>包含<head>、<body>等其他标签
</html><head>头部标签元素
</head><body>主体内容
</body>常用的头部标签：
| 标 签 | 描 述 |
|---|---|
<title> | 定义页面标题内容（唯一必须的头部标签）。 |
<base> | 当前文档的基准地址，其他相对地址都建立在此基准地址之上。 |
<meta> | 有关文档本身的元信息，例如文档的作者，用于查询的关键词，关于文档的描述等。 |
<style> | 定义 CSS 层叠样式表的内容。 |
<link> | 定义外部文件的链接，最常见的用途是链接外部样式表。 |
<script> | 定义页面中程序脚本的内容。 |
设定关键字、描述和字符集
Keywords 表示关键字定义，content 属性值表示关键字内容，关键字之间要用逗号分隔。
<meta name="Keywords" content="value" />Description 表示描述定义，content 属性值表示描述内容
<meta name="Description" content="value" />在中国大陆地区，常用的编码是 GB 码，表示简体中文，字符集应设置为 gb2312 ；中国台湾地区常用的编码是 BIG5 码，表示繁体中文；欧洲地区常用 ISO8859-1 表示英文……
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />HTML5 字符集设置简化写法
<meta charset="UTF-8" />HTML 块级标签
大多数 HTML 元素被定义为块级元素或内联元素，“块级元素”译为 block level element，“内联元素”译为 inline element。两种元素都有各自的特点。其中块级标签的特点为：
总是以新行开始；
高度、行高、外边距和内边距都可以控制；
宽度缺省是它所在容器的 100%，除非设定一个宽度；
可以容纳行内元素和其他块元素。
<div>其他标签或文档</div><p>段落内容</p>对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。align 属性有四个可取值，每个可取值的含义如表所示：
| 值 | 描 述 |
|---|---|
| left | 段落左对齐 |
| right | 段落右对齐 |
| center | 段落居中对齐 |
| justify | 对行进行伸展，每行都可以有相等的长度 |
<!DOCTYPE html>
<html><head><meta charset="utf-8" /></head><body><p>学习前端哪里好？</p><p style="width: 200px; background-color: darkgray" align="center">蓝桥软件学院</p></body>
</html> 
有序列表
<ol><li>项目一</li><li>项目二</li><li>项目三</li>…
</ol>对于 <ol> 标签有两个可选的属性，下表列出了每个属性、可取值和简单描述。
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| type | A、a、I、i、1 | 规定列表的类型，默认为数字 |
| start | start_number | 规定列表中的起始点，默认为 1 |
<ol type="A" start="3"><li>华为</li><li>小米</li><li>苹果</li><li>oppo</li><li>三星</li>
</ol>
无序列表
在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。
在无序列表中，各个列表项之间没有顺序之分。无序列表由 <ul> 和 </ul> 标签对实现，每个列表项也是由 <li> 标签定义的。
无序列表与有序列表非常类似，不同点在于因为无序列表是无序的，所以不存在 start 这个规定列表起始点的属性。
无序列表的 type 属性可以设置为 disc、circle、square，其中 disc 代表实心圆 ●（默认），circle 代表空心圆 ○、square 代表实心方块 ■。
<ul type="disc"><li>华为</li><li>小米</li><li>苹果</li><li>oppo</li><li>三星</li>
</ul>
定义列表
<dl><dt>列表项</dt><dd>列表描述</dd>
</dl>HTML 行内标签
超链接
<a href="连接地址或文本">文本或者图片</a><a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作：
| 值 | 描述 |
| _blank | 浏览器总在一个新打开、未命名的窗口中载入目标文档。 |
| _self | 浏览器在当前窗口载入目标文档。 |
| _parent | 浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中，那么它与 _self 等效。 |
| _top | 浏览器在最顶端的框架窗体载入目标文档。 |
文档书签
当一个页面内容特别多时，可以通过给页面建立书签的方式，对同一页面里的内容进行链接。这样用户在浏览网页时，可以通过书签进行页面内的内容跳转，提高浏览者的用户体验效果。
<a name="书签名称">文字</a>定义了书签后，链接到该书签的超链接的基本语法为：
<a href="#书签名称">链接点</a>下面通过一个案例，演示使用超链接跳转至本文档的另一个位置，即当用户单击“查看本文档第三部分”这个内部链接时，即可链接到本页面的第三部分位置
<body><p><a href="#d3">查看本文档第三部分</a></p><h2>第一部分</h2><p>这是第一部分的内容！</p><h2>第二部分</h2><p>这是第二部分的内容！</p><h2><a name="d3">第三部分</a></h2><p>这是第三部分的内容</p><h2>第四部分</h2><p>这是第四部分的内容！</p><h2>第五部分</h2><p>这是第五部分的内容！</p><h2>第六部分</h2><p>这是第六部分的内容！</p><h2>第七部分</h2><p>这是第七部分的内容！</p><h2>第八部分</h2><p>这是第八部分的内容！</p><h2>第九部分</h2><p>这是第九部分的内容！</p><h2>第十部分</h2><p>这是第十部分的内容！</p>
</body><span> 标签
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为：<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<span>选中的文本</span>短语标签
| 标签 | 描述 |
| <em> | 呈现为被强调的文本。 |
| <strong> | 用来定义重要的文本。 |
| <dfn> | 定义一个定义项目。 |
| <code> | 定义计算机代码文本。 |
| <samp> | 定义样本文本。 |
| <kbd> | 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
| <var> | 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |