为什么说HTML是一门标签语言

HTML历史回顾

万维网的三大组成：html、http、url

诞生于1990年，Tim Berners-Lee 李爵士

除a标签，其他标签受SGMlguid影响

SGMLguid称为“ CERN SGML”，基于滑铁卢的「SGML」和「SGML」，1986年至1990年之间在CERN开发和使用的早期SGML应用程序。最早的HTML规范的模型。

常用标签

章节

首先要理解一个理念，HTML为标签语言，使用标签去标识内容。90%以上的内容需要用头尾的「标签」包裹起来，如<h1>标题一</h1>

理解这一理念后查看各类标签能有一个概念的认识。

<h1> ~ <h6> 解析为「header 1~6」用于表达标题1 ~ 6
section为章节标签
<p>为段落标签（Paragraph）
<main>为主要内容
<div>为划分标签。只要不知道要什么标签完成需求，可以使用万能的div，不过不建议这么干
其他包括：<header> <footer> <aside>分别是「头部」、「尾部」、「旁支内容」

严格上可以分为头部、标题、章节、主要内容、段落、旁支内容、尾部。

看到这些标签，其实和写文章的定义差不多。你想写得越规范就必须遵循以上规则，当然有时候我们写文章都不会这么严格，初学者严谨些不容易出错。

文本

a ：anchor 锚点。实现链接跳转，用处非常大。看下一个小节介绍
strong : 强调，表重点
em ：语气上强调，实则优先级没那么高
code ：为了不让代码生效产生错误，专门用于完整显示代码
pre ：以等宽字体显示，中文一般都等宽，主要是英文的格式显示更加整齐规范，如：iiii QQQQ
```
iiii  我我我
QQQQ  你你你
```

a 标签

href的使用

链接网址

https://google.com> 或 http://google.com
//google.com

<a href="www.google.com">点击转到Google</a>  	  <!-- 下面为实际显示效果 -->

点击转到Google

链接路径

/a/b/c 或 a/b/c

/ 代表根目录，./代表当前目录 / 在浏览器中同样代表是根目录，当服务开启的时候，当前的目录就代表服务器的根目录

==主要是实现同一个文件夹里面的页面之间的跳转，需要理解路径的基本知识==

伪协议

javascript:;

历史版本里，在:;中间可以输入js代码，现在基本废弃当href="javascript:;"，用户点击后不会进行变动，只会报错说访问了空js代码

mailto:xxx@xxx.com
tel:999

移动设备点击可调用系统的对应接口，点击后弹出是否拨号之类的效果

id跳转

href=#段落1

绑定ID可以在页面进行跳转，像目录一样的跳转。如果在同一页面则不用重新刷新页面，直接跳到对应的位置

<a href="#段落一">点击转到段落一</a>  	  <!-- 实际开发不要用中文 -->
<p  id="段落一">段落一</p>

HTML的起手式

起手式，可以定义为上机新建文件后必须做的一件事情，每一种语言都有它自己的规则。首先看看HTML的起手式是什么样的，这是默认状态下，用vs code生成的HTML起手式。

新建文件保存后缀名为.html。之后用vs code打开，在第一行输入!按下tab键即可生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

声明文档为html，内容主要由「en = 英语」解读，由“UTF-8”来进行解码等等

知识延展：网页头部声明应该用 lang="zh" 还是 lang="zh-cn" 贺师俊的回答 - 知乎

声明标签内容很多，不一一解说，主要主要是告诉浏览器需要对文档进行什么样的处理

<!-- 文档声明 -->        <!DOCTYPE html>
<!-- 内容解读标识 -->     <html lang="en">
<!-- 头部标签开始 -->       <head>
<!-- 文件编号 -->               <meta charset="UTF-8">
<!-- 声明标签 -->               <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网站标题 -->           <title>Document</title>
<!-- 头部标签结束 -->       </head>
<!-- 内容标签开始 -->       <body>
<!-- 输入要显示的内容 -->
<!-- 内容标签结束 -->       </body>
<!-- html结束 -->       </html>

然后根据国内本地化的情况，可以自己修改起手式，如将英文改为中文等。同时由于浏览器自己会有自己的默认样式user agent stylesheet，后期涉及到css时会导致样式不好调整，也可以加入网上流传的样式初始化的代码css reset去初始化样式。

以下是我个人的HTML起手式，每一次新建文件都可以通过命令行组合命令生成，需要将命令添加到环境变量里才可以，超出了html范围故略过。。。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 初始化css样式，文档链接：https://yuilibrary.com/yui/docs/cssreset/ -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="./src/css/style.css">
    <title>Document</title>
</head>
<body>

    <script type="text/javascript" src="./src/js/main.js"></script>
</body>
</html>

全局属性

全局属性一般写在html标签里面，如<h1 id="">标题一</h1>。这一属性不仅仅会影响标签内部的内容，只要在标签内部标识过的都会受到影响。

一般使用的全局属性有：class、hidden、id、style、tabindex、tittle、contenteditable等

class

专门用于css添加样式（相当于人为了更好看而去化妆）

hidden

用于隐藏标签、数据或做一些交互（通过js添加事件「点击后隐藏」），甚至隐藏彩蛋也是可以的

id

用于绑定ID，具有唯一性，像人的名字，用于标识你是我的，我的还是我的

tabindex

当用户按下「tab」键时切换下一个焦点，可以赋值，从1到无限大顺序切换，0是最后，-1以下是永不达到。想象一下电商场景，每按一下键盘就可以方便剁手：立即购买 → 添加收藏夹 → 查看推荐 → ...

tittle

当鼠标悬浮在该标签时显示的标题「这段文字不可点击」

contenteditable

**用户可修改内容，例如在支付宝的余额里添加10个0。**纯粹好玩，开开脑洞

列表标签

ol + li ul + li dl + dt +dd 看到这些字符，可能会想「这是什么？」但是理解英文意思就能明白其中含义。

ol ：ordered			序号列表
ul ：unordered		无序号列表
li  ：list item

dl ：description list 	定义列表
dt ：description term    定义为..
dd : data(有可能)		数据

使用方法

使用 ol、ul、dl标签包裹着内容即可

<ul>
    <li>123</li>
    <li>456</li>
</ul>

<ol>
    <li>123</li>
    <li>456</li>
</ol>

<dl>
    <dt>我是一只小小小小鸟</dt>
    <dd>这是一首歌</dd>
    <dt>吴彦祖是我 </dt>
    <dd>没错，的确是我</dd>
</dl>

我是一只小小小小鸟: 这是一首歌
吴彦祖是我: 没错，的确是我

==dt 为某项人/事，dd 用于解析 dt 的定义==

图片标签

img标签：image，通常简写会将除字首的元音 a e i o u 去掉。 img标签不需要闭合，直接就可以引用。src是指引用的地址，可以是本地链接，也可以是网络链接

<img src="foo.jpg" alt="假如图片无法加载，要显示的文字">

==前端最头痛的事是「图片变形」==不要同时设计宽高，只设置宽度，浏览器会自动适配对应的高度。当学到css的时候可根据样式进行调整。

表格标签

表格分为：表头、主体、表尾等

主体分为：行、表头单元格、数据

<table>
    <thead>
        <tr>				<!-- 一个标签对应一“行”的开始，一行里面的标签代表“列” -->
            <th>年份</th>
            <th>电影</th>
            <th>导演</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1978</th>	     <!-- th标签对应“表头单元格”，不使用表头可使用“td”数据来定义 -->
            <td>《新绿野仙踪》</td> <!-- 两者的区别在于th为固定的头部信息，而td是动/静态的数据 -->
            <td>希德尼·鲁迈特</td>
        </tr>
        <tr>
            <th>1986</th>
            <td>《伊奥船长》</td>
            <td>弗朗西斯·科波拉</td>
        </tr>
        <tr>
            <th>1988</th>
            <td>《月球漫步者》</td>
            <td>杰瑞·克雷默</td>
        </tr>
    </tbody>
</table>

年份	电影	导演
1978	《新绿野仙踪》	希德尼·鲁迈特
1986	《伊奥船长》	弗朗西斯·科波拉
1988	《月球漫步者》	杰瑞·克雷默

其他想法

经过一系列的学习，可以总结出HTML是一项标签定义的「文本」格式，和它自身的定位一致。“超文本标记语言”，利用一些标签去标记信息的层级，将信息更好的归类和展示。而且利用好这类标签，在往后的css、js的学习中可以增加更丰富的交互效果。

重点关注在「标记」的行为上，如果我们写文章没有分层级，信息将会极度混乱，过一段时间甚至连自己也看不明白当时怎么得出这样的结果，而标记这个行为会为我们更好归类和统一信息的展示。

有时候你看两个「定义」dt和dd标签，就会问“为何看上去没什么不一样”。即便有些标签看上去一样，实际上他们之间的定义完全不一样，所以我们学习HTML更多的应该关注在「标记的行为、定义的标准」上，你需要理解为何要定义这个标签，你的标准是什么？分好层级，一切的问题都会迎刃而解！

为什么说HTML是一门标签语言

HTML历史回顾​

常用标签​

章节​

文本​

a 标签​

href的使用​

链接网址​

链接路径​

伪协议​

id跳转​

href=#段落1​

HTML的起手式​

全局属性​

class​

hidden​

id​

tabindex​

tittle​

contenteditable​

列表标签​

使用方法​

图片标签​

表格标签​

其他想法​