HTML-基础 | Treecatee

HTML

Publish Date: 2019-03-09

Word Count: 9.3k

Read Times: 39 Min

Read Count:

使用HTML标记实际上也就是使用标签和其属性 ( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾

HTML 基础

一. HTML 初识

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。

HTML标签编写规范

HTML标记不区分大小写。如：<font>、<Font>、<fOnt>。单特殊符号必须小写，如&nbsp。

HTML标记属性可有可无。有的标记是没有属性的，如：<html>、<head>、<title>等

双边标记的内容在开始和结束标签之间，单边标记没有内容。

HTML标记可以相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层。

HTML，Hypertext Markup Language ,超文本标注语言。HTML是一种规范，是一种标准，编写网页的一种标准。

超文本：就是网页上不光有文本，还有图片、音乐、视频等。
标注：是一种记号，是一种标志。如：红绿灯
语言：这里的“语言”就是代码，跟所谓“程序语言”一点关系都没有。

HTML的主要目的：就是用来显示网页的不同效果、不同部分。如：<b>文本</b>

1.1 HTML文件结构

<!DOCTYPE HTML>
<html>
<head>
<title>php.cn</title>
</head>
<body>
这里是存放网页内容的
</body>
</html>

HTML 页面整体构成
用浏览器打开任意一个网页，右键选择查看网页源码，就可以看到网站的HTML代码，总结一下，整体结构如下图：

一、HTML文件结构的说明：

<!DOCTYPE HTML>：html5标准网页声明，必须放在 HTML 文档的第一行，位于<html>标签之前。声明有助于浏览器中正确显示网页。
<html></html>：告诉浏览器，其中的代码用什么格式(图片、视频)来编译。
<head></head>：头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
1. 下面这些标签可用在 head 部分：<title>,<meta>, <base>, <link>, <script>, <style>。
2. 头部中最常用的标记符是标题标记符<title>页面标题</title>和<meta>标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。
3. 设置文档标题和其它在网页中不显示的信息，比如direction方向、语言代码Language Code（实体定义!ENTITY % i18n）、指定字典中的元信息、等等。
<body></body>：是网页主要内容的显示区域。网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。网页中99%的内容都必须放在<body>。只有放在<body>中，最终浏览器翻译以后，才能看见结果。

二、关于头部<head></head>中常用的两个标签<title></title>和<meta>：

<title>纯文本</title>中只能是纯文本，任何标记都会原封不动的显示。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">功能：告诉浏览器，如何翻译汉字。
1. http-equiv：模拟http协议的文件头原信息，主要目的是服务器向客户端返回时，用什么格式显示。
2. Content-type：内容类型。
3. Content：详细内容类型介绍。
4. Text/html：网页是text格式，html是文本中的小格式。
5. Charset：字符集，主要控制汉字如何显示。
6. Utf-8：多国语言编码，什么国家的语言都可以正常显示。

1.2 HTML文件组成

HTML 是什么

HTML 是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>。也有单边标签，只有开始标签，而没结束标签，单边标签一般是没有内容。如：<br>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

标签语法格式：

双边标签：<标签属性1 = “值1” 属性2 = “值2”>内容</标签>

单边标签：<标签属性1 = “值1” 属性2 = “值2”>

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:<p>这是一个段落。</p>

HTML元素是组成HTML文档最基本的部件，它是用标签来表现的，一般来说，“起始标签”表示元素的开始，“结束标签”表示元素的结束。
HTML元素分为“有内容的元素”和“空元素”两种。
“有内容的元素”是由起始标签、结束标签以及两者之间的元素内容组成的，其中元素内容既可以是需要显示在网页中的文字内容，也可以是其它元素。

HTML 元素属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

HTML的元素属性提供了对HTML元素的描述和控制信息，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。
例如要设置<p>元素中文字内容的颜色为红色，字号为30像素，这时就需要用到HTML元素属性了。如在<p>元素名称的尖括号内添加了style="color:#ff0000;font-size:30px"内容，浏览器就会按照设定的效果来显示内容。

二. HTML 标签

2.1 标签介绍

按功能排序HTML的标签请参考：《HTML 标签参考手册- (HTML5 标准)》

HTML标签分两类：双边标签和单边标签。

1. 双边标签

双边标签，是指有开始和结束标签，内容放在开始和结束标签之间。如：<b>内容</b>

“属性”的通俗理解：一个东西总是有一些特征，重量，体积等，这就是一个东西的“属性”
语法格式：<标签属性1 = “值1” 属性2 = “值2”>内容</标签>

2. 单边标签

单边标签，只有开始标签，而没结束标签，单边标签一般是没有内容。如：<br>
单边标签一般起一个特殊的功能。
单边标签常用的有10多个标记。
语法格式：<标签属性1 = “值1” 属性2 = “值2”>

先来看一下双边标签例子，观察<font></font>标签

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>directoree.top</title>
    </head>
    <body <body background="https://i.loli.net/2019/03/08/5c82461ac1553.png">>
        <h1>第一个，哈哈哈哈</h1>
       <font size="6" color="red">看看我有什么特别的</font></font>
    </body>
</html>

运行如下图：

再来看一下单边标签例子，观察<br>标签

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>treecatee.github.io</title>
    </head>
    <body <body background="https://i.loli.net/2019/03/08/5c82461ac1553.png">>
        <h1>第二个，哈哈哈哈</h1>
        <br><br><br>
       <font size="6" color="red">再看看我有什么特别的</font>
       <br><br><br>
       <font size="6" color="red">再看看我有什么特别的</font>
    </body>
</html>

运行如下图：

HTML标签编写规范

HTML标记不区分大小写。如：<font>、<Font>、<fOnt>。单特殊符号必须小写，如&nbsp。

HTML标记属性可有可无。有的标记是没有属性的，如：<html>、<head>、<title>等

双边标记的内容在开始和结束标签之间，单边标记没有内容。

HTML标记可以相互嵌套，但一定注意是顺序嵌套，外层套内层，一层套一层，不能交叉嵌套。

2.2 常用标签-文本

<!DOCTYPE HTML> html5标准网页声明（必须有）
<html></html> 声明代码格式（必须有）
<head></head> 文件头（必须有）
- <title></title> 标题（必须有）
- <meta> 元数据 …..
<body></body> <h1> - <h6>（必须有）
文本标签
- <b></b> 加粗
- <i></i> 斜体
- <u></u> 下划线
- <s></s> 删除线
- <sup></sup> 上标
- <sub></sub> 下标
- <font></font> 字体标记
  - size 大小(1 -> 7)
  - color 颜色
  - face 字体
<p></p> 表示一个段落
<br> 换行
<hr> 段落分割线
<pre></pre> <code></code> 定义预格式化的文本和格式代码块
<strong>和<em> 加粗和斜体（强调）
<span></span> 对文档中的行内元素进行组合

1. <head></head>头标签

<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。
可添加到head部分的标签：<title>、<base>、<meta>、<link>、<script>、<style>:

<title>：指定整个网页的标题，在浏览器最上方显示。

<base>：为页面上的所有链接规定默认地址或默认目标(target)。

<meta>：提供有关页面的基本信息。

<script>：定义客户端脚本，如JavaScript。

<style>：定义内部样式表与网页的关系。

<title></title>：标签定义文档的标题。
1. title 元素在所有 HTML/XHTML 文档中都是必需的，无属性；
2. <title>纯文本</title>中间只能是纯文本；
3. title 元素能够：
  1. 定义浏览器工具栏中的标题
  2. 提供页面被添加到收藏夹时显示的标题
  3. 显示在搜索引擎结果中的页面标题
  4. 告诉用户和搜索引擎这个网页的主要内容是什么，
  5. 搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

<meta>：标签
1. <meta> 标签提供关于 HTML 文档的元数据。
2. 元数据不会显示在页面上，但是对于机器是可读的。
3. 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
4. <meta> 标签始终只能位于 head 元素中。但是头部可以有多个<meta> 标签。
5. 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
6. 包含属性：（有属性就必须有对应的值(content)）
  1. content：必须属性。
    1. 定义与 http-equiv 或 name 属性相关的元信息，content中的内容其实就是各个参数的变量值。
    2. 变量值可以有多个，用半角逗号,隔开。
  2. http-equiv：可选属性。可选值：
    1. content-type，内容类别，用于设置页面的类别和语言字符集。编写格式<meta http-equiv=“content-type” context=“text/html”；charset=“gb2312”/>，content属性的值代表页面采用HTML代码输出，字符集为gb2312（简体中文），国际化网站开发的话，为了字符统一，建议charset采用utf-8.
    2. refresh。刷新，用于设置多长时间内网页自己刷新一次，或者用一段时间自动跳转到其他页面，第一种编写格式<meta http-equiv=“refresh” context=“30”/>表示隔30秒刷新一次，第二种编写格式<meta http-equiv=“refresh” context=“30；url=www.google.com”/>，表示30秒后页面自动跳转到www.google.com网站
  3. name：可选属性。
    1. 用于页面的关键字和描述，是写给搜索引擎看的；
    2. 与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
    3. 主要用于描述网页的内容，用于对搜索引擎的优化，必须重点掌握。正确地设置name属性，以便搜索引擎（比如google，baidu）的搜索机器人查找，分类，搜索引擎一般都会自动查找meta值来给网页分类。name的取值(content)如下：
      1. keywords。即关键字，用于说明网页所包含的关键字等信息，从而提高被搜索引擎搜索到的概率。编写格式为<meta name="keywords" content =“关键字”/>，content属性的值为用户所设置的具体关键字。（一般可设置多个关键字，他们之间用英文半角的逗号分开，搜索引擎都限制关键字的数量，所以关键字内容要简洁精练）
      2. description。中文意思为”描述”，用于描述网页的主要内容、主题等，合理设置也可以提高被搜索引擎搜索到的概率。格式为<meta name="description" content =“对页面的描述”/>，content属性值为用户所设置的页面具体描述的内容，最多容纳1024个字符，但搜索引擎一边只显示约前175个字符。
      3. author。作者，用于设置网站作者的名称，比较专业的网站经常用到。格式为<meta name="author" content =“作者名称”/>

可参读：《HTML <head> 元素》、《HTML-head头部浅析》

例1：打开该网页后每隔20秒刷新一次

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="refresh" content="20">
    </head>
    <body>
        <h1>这是个展示网页hhh</h1>
        <h2>希望你能够在这里学的开心</h2>
    </body>
</html>

例2：打开该网页20秒后跳转到百度首页

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="refresh" content="2;url=http://www.baidu.com">
    </head>                  '注意这里的2后是分号“;” '
    <body>
        <h1>跳转网页hhh</h1>
        <h2>希望你能够在这里学的开心</h2>
    </body>
</html>

<base>：标签

<base> 标签为页面上的所有链接设置默认的地址或默认的目标（target）

<link>：标签

<link> 标签定义文档与外部资源之间的关系。

<style>：标签

<style> 标签用于为 HTML 文档定义样式信息。

<script></script>：标签

<script> 标签用于定义客户端脚本，比如JavaScript。

2. <body>标签和标题

HTML 标题（Heading）是通过<h1> - <h6>标签来定义的。

body用法如下：

用法	作用	可选属性/是否赞成使用该属性
`<body>内容</body>`	定义文档的主体	alink：规定文档中活动链接（active link）的的颜色不赞成使用。请使用样式取代它。 background URL：规定文档的背景图。不赞成使用。请使用样式取代它。 bgcolor：规定文档的背景颜色不赞成使用。请使用样式取代它。 link：规定文档中未访问链接的默认颜色不赞成使用。请使用样式取代它。 text：规定文档中所有文本的颜色不赞成使用。请使用样式取代它。 vlink：规定文档中已被访问链接的颜色不赞成使用。请使用样式取代它。

<body>的常用属性

bgColor：网页背景色。如：<body bgColor = “red”>

background：网页背景图片地址。如：<body background = “images/01.jpg”>

示例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>demook.hhh</title>
    </head>
    <body background="https://i.loli.net/2019/03/08/5c82461ac1593.png">
        <h1>Nice优秀啊....</h1>
       <h2>是的呢 ヾ(๑╹◡╹)ﾉ" </h2>
    </body>
</html>

运行结果：

3. 文本修饰标签

用法	作用
`<b></b>`	加粗字体。如：`<b>HTML文件</b>` ----> HTML文件
`<i></i>`	斜体italic。如：`<i>HTML文本</i>`----> HTML文本
`<u></u>`	下划线underline。如：`<u>HTML文本</u>`----> HTML文本
`<s></s>`	删除线strike。如：`<s>删除线</s>`----> ~~删除线~~
`<sup></sup>`	上标，如：`3<sup>x</sup>` ----> 3^x
`<sub></sub>`	下标，如：`6<sub>5</sub>` ----> 6₅
`<font></font>`	字体标记，如：`<font size="4" color="red" face="Comic sans MS">Demo</font>`Demo
`size`	`<font><font>`的属性。文本大小，取值1-7（1小，7大）
`color`	`<font><font>`的属性。颜色值
`face`	`<font><font>`的属性。字体，楷体、黑体、宋体

4. <p></p>表示一个段落

属性及取值如下：

属性	值	描述
align	left right center justify	HTML5不支持。 HTML 4.01已废弃。不赞成使用。请使用样式取代它。规定段落中文

5. <br> 标签

<br> 标签插入一个简单的换行符。<br> 标签是一个空标签，意味着它没有结束

提示：在写地址信息或者写诗词时 <br> 标签非常有用。

注释： 请使用 <br> 标签来输入空行，而不是分割段落。

在 HTML 中，<br> 标签没有结束标签。

在 XHTML 中，<br> 标签必须被正确地关闭，比如这样：<br /> 。

6. <hr> 标签

7. <pre></pre> <code></code>

<pre>预排版标记

功能：将保留所有的空白字符(空格、换行符)，换句话说：就是原封不动输出。
可参读：《html <.code>&<.pre>》

8. <strong>和 <em>

有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。
但两者在强调的语气上有区别:<em> 表示强调，<strong>表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
<em>的内容在浏览中显示为斜体，<strong>显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用css样式去改变它。

9. <span></span>>

<span> 标签被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

2.3 常用标签-链接和图像

一. image图像

注：这是一个单边标签

<img> 单边标签，它只包含属性，并且没有闭合标签。
- 必须属性 ↓↓
  - src：地址。src 指 “source”。源属性的值是图像的 URL 地址。语法：<img src="url" alt="some_text">
  - alt：图像替代文本，在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像。语法：<img src="../style/images/boat.gif" alt="Big Boat">
- 可选属性 ↓↓
  - height：图像高度，默认单位为像素
  - width ：图像宽度，默认单位为像素
  - ismap ：为图像定义为服务器端图像映射

注：可以尝试输入其他属性看看效果，想要让图片居中，只能通过CSS。

示例：

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <p>Life was like a box of chocolates, you never know what you're gonna get.（生命就像一盒巧克力，结果往往出人意料。）---《阿甘正传》 
 </p>
 <img src="https://s2.ax1x.com/2019/03/04/kOxQJS.jpg" width="200">
 </body>
</html>

二. 超级链接

请注意超级链接和锚点链接是不一样滴……

网站中随处可见超级链接的身影，打开百度新闻，任意点击一段话，就会打开新闻详情页，这全部都是超级链接

语法格式：<a 属性 = “值”>……</a>
注：<a>中不能再套<a>标记

1. 标签

<a></a> 超级链接，中间是文本提示，常用属性:
- href：目标文件的地址URL（该URL可以是相对地址，也可以是绝对地址）
- target：目标文件的显示窗口的方法：
  - _blank：在新窗口中打开目标文件。
  - _self：在当前窗口中打开目标文件(默认打开)，相当于“替换”当前页面操作。
  - _parent：在父级窗口来打开目标文件。常用框架网页中
  - _top：在最顶级窗口来打开目标文件。常用框架网页中

2. 绝对地址URL

（1）远程的绝对地址：直接输入远程绝对路径

访问远程的文件，总是以<a href="http://域名/主机名..">提示文本</a>
如：<a href="https://Treecatee.github.io" target="_blank">Treecatee.github.io</a>

（2）本地的绝对地址(很少使用)：访问本地绝对的路径文件

访问本地的绝对地址，是以<a href="http://file:///开头的绝对地址。">file:///开头的绝对地址。</a>
如：<a href="file:///D:/image.html" target="_blank">

示例：

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
     <a href="https://treecatee.github.io"  target="_blank">远程绝对路径访问，哈哈哈😁</a> 
      <br><br>
  <a href="file:///D:/image.html" target="_blank">(。・∀・)ノ本地绝对路径访问，不要忘记“/ / /”</a> 
 </body>
</html>

3. 相对地址URL（项目中路径一般是相对路径）

（1）当前文件和目标文件是同级关系，链接地址直接写目标文件名。

（2）当前文件与目标文件所在的文件夹是同级关系，先找“文件夹名”，然后再找“文件名”。

（3）目标文件位于上一层目录中，往上找对应的目录，再找目录中的文件。

注意：
1. ./代表当前目录，默认使用
2. ../代表上一级目录
3. ../../代表上两级目录

示例：

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
    <br><br><br><br>
     <a href="./tina.html"  target="_blank">同级目录下的本地相对路径链接，哈哈哈😁</a> 
      <br><br>
   <a href="../test/2.html" target="_blank">上级目录下的本地相对路径链接 (。・∀・)ノ</a> 
   <a href="../../dream/hap.mp3" target="_blank">上上级目录下的本地相对路径链接 ♪(´▽｀)</a> 
 </body>
</html>

4. 特殊的链接

(1) 下载链接

这些文件网页可以直接执行，如：.jpg、.png、.gif、.html、.htm、.txt等。
大部分文件，浏览器是不能直接执行的。如：.doc、.xls、.ppt、.rar、.psd……

(2) 邮箱链接

(3) 普通空链接（#）如：<a href="#">这是一个空链接</a>

三. 锚点链接

<a id="锚点名称"></a> ：定义锚点，做个记号
<a href="[文件名]#锚点名称">提示文本（必须有）</a> ：记号，功能是跳到做记号的地方

分为当前页面跳转和跨页面跳转，页内跳转时不用文件名，跨页跳转时用。

锚点是什么？

为什么要用锚点？

锚点怎么用？

锚点是什么？

如我们在做一个很长的网页时，需要在页面内做一个导航，点击导航里的链接不是新开一个窗口或者跳转到其他网址，而是跳转到当前页的某一个位置。那么所要跳转到的那个位置，我们就叫做锚点，它是一种在页面内部定位的方式。

为什么要用锚点？

在写项目的时候，页面比较长，这时候需要设置锚点进行快速定位到某个段落或某个位置。

锚点怎么用？

分为当前页面跳转或者跨页面跳转：

定义锚点(作个记号)：用于定位的目的地。不管是当前当前页面内还是跨页跳转定义方法都一样；
- 定义方法：<a id="锚点名称"></a>或<h2 id="锚点名称"></h2>或…..
- 锚点名称命名规则：
  - 可以包含字母、数字、下划线，但只能以字母开头。
锚点（触发），也称为记号。
- 跳到当前页面定义方法：<a href="#锚点名称">提示文本（必须有）</a>
- 跨页面跳转定义方法：<a href="目标页面路径#锚点名称">提示文本（必须有）</a>
id或name：定义锚点链接的名称。
- name是老方法，id是在name基础上发明的，后来才有的。
- 使用name属性设置锚点很方便但只能针对a标签来使用，具有一定的局限性。而对div等其他没有name属性的标签就不能起到作用了。
- id兼容性很好。

示例（页内跳转）：

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body> 
      <a id="top"></a>
            <!--设置锚点，索引功能-->
      <a href="#a">点击我就会跳到第一段</a>  
      <a href="#b">点击我就会跳到第二段</a>
      <a href="#c">点击我就会跳到第三段</a>
                   .
                   .
                   .
                   .
              <!--做记号-->
      <h2 id="a">我是标题一</h2>
      <h2 id="b">我是标题二</h2>
      <h2 id="c">我是标题三</h2>
  　　
      <a href="#top">返回新闻顶部</a>
　　
  </body>
</html>

示例（跨内跳转）：

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body> 
                <!--设置锚点，索引功能,然后在目的页面做好记号-->
       <a href="https://treecatee.github.io#a">点击我就会跳到第一段</a>  
       <a href="https://directoree.top#b">点击我就会跳到第二段</a>
       <a href="https://taobao.com#c">点击我就会跳到第三段</a>　　
  </body>
</html>

2.4 HTML字符实体

HTML 中的预留字符必须被替换为字符实体。

1. HTML 实体

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
注：记得加上半角分号;符号啊，不然识别不出来

如需显示小于号，我们必须这样写：< 或 <
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

2. 不间断空格（non-breaking space）

HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个，因此，要使用10个空格的话就需要写10个  。（如需在页面中增加空格的数量，您需要使用   字符实体）

3. HTML 中有用的字符实体

注释：实体名称对大小写敏感！半角分号不要忘记！
如果想要输出 而不被转义为空格，可这样：&nbsp;，因为&对应$--> 

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
“	引号	`"`	`"`
‘	撇号	`'`(IE不支持)	`'`
￠	分（cent）	`¢`	`¢`
£	镑（pound）	`£`	`£`
¥	元（yen）	`¥`	`¥`
€	欧元（euro）	`€`	`€`
§	小节	`§`	`§`
©	版权（copyright）	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

完整的实体符号参考：[HTML ISO-8859-1 参考手册]

三. HTML 列表

列表就是像word里面的标题一样，顺着往下数的标题。

HTML 支持无序列表ul(unordered list）、有序列表ol（ordered list）和自定义列表dl（definition list）

<ul></ul> 无序列表
- <li></li> 列表项
- type 列表项属性，放在<ul type=””>里，取值有：
  - disc 小黑点
  - circle 空心圆
  - square 实心方块
<ol></ol> 有序列表
- <li></li> 列表项
- type 编号类型，放在<ol type=””>里，取值有：
  - 1 整数有序列表
  - a 字母小写有序列表
  - A 字母大写有序列表
  - i 罗马小写有序列表
  - I 罗马大写有序列表
- start 从第几个开始编号(数字)，放在<dl type=”” start=””>里。
<dl></dl> 自定义列表
- <dt></dt> 自定义列表项
  - <dd></dd> 自定义列表项的描述

列表展示如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
<body background="https://i.loli.net/2019/03/09/5c8320e82a362.jpg">
  <ol type="1" start="1">          <!--有序列表开始-->
    <li>哈哈，这里是第一条有序列表</li>

     <ul type="circle">            <!--无序列表开始-->
          <li>这里是第一条无序列表</li>   
          <li>这里是第二条无序列表</li>
     </ul>                         <!--无序列表结束-->

     <ul type="disc">
          <li>这里是第三条无序列表</li>   
          <li>这里是第四条无序列表</li>
     </ul>
  <br>  
  <li>哈哈，这里是第二条有序列表</li>

     <ul type="square">
          <li>这里是第五条无序列表</li>   
          <li>这里是第六条无序列表</li>
     </ul>  
  </ol>                             <!--有序列表结束-->

  <ol type="a" start="a">
     <li>哈哈，这里是第三条有序列表</li>
   <br>
     <li>哈哈，这里是第四条有序列表</li>
  </ol>

  <dl>
            <dt>我是第一个自定义列表的列表项</dt>
                <dd>我是第一个自定义列表的列表项的描述</dd>          
  </dl>

</body>
</html>

可参读博文：《HTML表格与列表》

四. HTML 表格

一、表格

网页中有类似word里面的功能，当然，也会有类似excel里面的功能，表格就是其中之一。

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

二、表格的结构

<table>                         <!--定义表格-->

        <tr>                    <!--定义一行-->

                <th></th>       <!--定义一个标题单元格-->

                <th></th>

                <th></th>

                <th></<th>

        </tr>

        <tr>

                <td></td>       <!--定义一个单元格-->

                <td></td>

                <td></td>

                <td></td>

        </tr>

</table>

二、表格标签及属性

注：属性是区分大小写的，bgColor如果写成bgcolor是没有效果的

<table></table> 表，---->可选属性： ↓↓
- Width：表格宽度，单位可以是百分比，也可以是固定值。取值： ↓↓
  - pixels
  - %
- Height：表格高度。取值： ↓↓
  - pixels
  - %
- Align：表格水平对齐方式（不赞成使用该属性），取值： ↓↓
  - left
  - center
  - right
- Border：边框粗细。取值： ↓↓
  - pixels
- Bordercolor：边框颜色。取值：rgb(x,x,x)、#xxxxxx、colorname
- bgColor：表格背景色（不赞成使用该属性）。取值： rgb(x,x,x)、#xxxxxx、colorname
- background：背景图片，取值：URL
- cellpadding：单元格边线到内容间的距离(填充距离)。取值： ↓↓
  - pixels
  - %
- cellspacing：单元格与单元格之间的距离(间距)，默认是双线，这个很重要
  取值： ↓↓
  - pixels
  - %
- rules：合并单元格边框线，取值：all。注意：rules兼容性不好，请使用CSS来取代它。
- summary：摘要，使搜索引擎更好的读懂表格内容，更好的帮助特殊用户读取表格内容。取值： ↓↓
  - text
<caption></caption>：定义表格标题。可选属性： ↓↓
- Align：表格水平对齐方式（不赞成使用该属性），取值： ↓↓
  - left
  - top
  - rightbottom
  - bottom
<tr></tr>：行标记。可选属性： ↓↓
- bgColor：行的背景色。取值： rgb(x,x,x)、#xxxxxx、colorname
- Height：行高度。取值： ↓↓
  - pixels
  - %
- Align：表格内容对齐方式。取值： ↓↓
  - left
  - center
  - right
  - justify
  - char
- valign：属性趋向于垂直对齐，其值包含：top、bottom、middle、baseline
<th></th>：标题单元格（每列第一行），居中加粗显示。
<td></td>：普通单元格。<th>和<td>可选属性： ↓↓
- height：单元格高度
- width：单元格宽度
- bgColor：单元格背景色
- background：单元格背景图片
- align：水平对齐
- valign：垂直水齐
- rowspan：上下单元格合并。合并属性必须放在第一个单元格中。
- colspan：左右单元格合并。合并时，有增就得有减，要保证每一行单元格的个数不变。

三、表格标签示例

<table>、<tr>、<th>、<td>示例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" 
            cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <th>工号</td>
             <th>姓名</td>
             <th>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

<caption></caption>表格标题示例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" 
            cellspacing="0" cellpadding="2" rules="all">
         <caption>2019.3月日历</caption>   <!--放在<table></table>中间-->
         <tr>
             <th>工号</td>
             <th>姓名</td>
             <th>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

空表格、跨行或者跨列表格示例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
    <table>   <!--建立空表，无属性-->

    <tr>
         <td>zdd</td>
         <td>30</td>
    </tr>

    <tr>
         <td>ddz</td>
         <td>27</td>
    </tr>

   </table>

<br>         <!--合并左右单元格-->
     <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" 
            cellspacing="0" cellpadding="2" rules="all">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>

    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>

     </table> 

<br>         <!--合并上下单元格-->
   <table border="2" width="400" height="100" bordercolor="blue" bgColor="#88cc66" 
          cellspacing="0" cellpadding="2" rules="all">

    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>

    <tr>
        <th rowspan="2">电话</th>
        <td>555 77 854</td>
    </tr>

    <tr>
        <td>555 77 855</td>
    </tr>

   </table> 
    </body>
</html>