01、HTML基础简介

HTML (HyperText Markup Language，超文本标记语言) 不是一门编程语言，而是一种用于定义内容结构的标记语言，用来描述网页内容，文件格式为.html。HTML 由一系列的元素（elements）组成，这些元素用来实现不同的内容。HTML5是HTML新的修订版本，2014年由W3C制定发布，增加了很多语义化标签。

W3C：World Wide Web Consortium，万维网联盟组织，是一个国际互联网标准化组织，1994年成立，核心目的是制定WEB规范标准。

WEB标准主要包括三个方面：

• 结构标准（HTML）：超文本标记语言（HyperText Markup Language），定义网页内容的组织结构。
• 表现标准（CSS）：层叠样式表（Cascading Style Sheets），用于设置网页元素的版式、颜色、大小等外观样式。
• 行为标准（JS）：JavaScript，用于实现网页的交互和行为。

1.1、HTML知识结构

详见前端技术路线图

1.2、<基础语法>

HTML 是一种格式的标记语言，每一个标签都是以尖括号“<>”来定义的。HTML不区分大小写，HTML中的标签名、属性名都统一小写，都按照小写来处理，就是说如果你大写的也会被转换为小写，??自定义标签、属性时需注意。

<标签名 属性名=“属性值”>内容

一个元素主要部分：开始标签、结束标签与内容相结合，开始标签中还包括属性/值。

• 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围，表示元素从这里开始或者开始起作用。
• 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠/，这表示元素的结尾。
• 内容（Content）：元素的内容，元素标签内的内容。
• 属性：属性定义元素的一些额外信息，一个属性就是一个键值对组成属性名="属性值"，值必须添加引号，多个属性空格隔开。

??单标签（空元素）：<标签名>，<标签名 属性名="属性值">。大部分元素标签都是是双标签的形式，具有开始标签、结束标签。也有小部分元素没有结束标签，称为单标签，或空元素。HTML5中的单标签不需要写斜杠/，可兼容斜杠，如

---

，
，，，，，、table中的、，...

??HTML中的注释格式：

1.3、转义字符

HTML中的有些字符是内置的特殊关键字或特殊符号，如 <>、"、'、空格 、换行（用
元素）、tab，不能直接在HTML中显示。需要用转义字符（特殊编码），以符号&开始，以分号(;结束。如下表，HTML中用实体名称、实体编码（字符的unicode编码）都可以。

元素内容中空格（空白字符、换行），HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

    一个段落，转移字符添加空格
<一个段落，转移字符添加尖括号>

• 更多：HTML特殊转义字符对照表

1.4、MIME 媒体类型

媒体类型MIME（ Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。在很多需要引入资源、申明资源类型的地方使用。

通用结构：type/subtype，大小写不敏感，一般都小写

• 媒体类型页面中找到最新的完整列表

02、网页结构/骨架

2.1、网页结构

• H5版本申明：，文档（第一行）必备的文档类型申明，避免浏览器怪异行为，这不是一个标签。
• 主根元素：整个网页，定义html文档，也限定了文档的开始和结束点。
• 头部元素：网页头部信息，当前网页的一些元数据信息，用于描述文档的各种属性和信息，包括文档标题。这部分内容是给浏览器、开发者使用的，不用向用户显示。
• 内容根元素：网页内容区域，文档内容的主体，包含文档所有的正式内容，用于给用户显示。

body有背景色bgcolor、前景色text等属性，不过样式一般用css管理样式。

??快捷键（VSCode）：半角的叹号!快速输入HTML的主体网页结构内容，然后Tab键切换修改（预置）参数值，或Esc。

2.2、头部标签

• ：用于描述HTML文档的属性、关键词等元数据的元素，如文档编码字符集charset。
• <script src="js文件路径" type="text/javascript" charset="utf-8"></script> 无标签的不规范内容，这行文字会被自动处理到body中

  2.3、元数据

  （ /?met?/元）元数据就是描述数据的数据，支持多种属性值，用来设置当前网页的各种参数和行为。
  如 ，该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符，基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
  ?

  meta类型	描述	值
  charset	文档的字符编码，一般用"utf-8"
  name	指定元数据的类型，配合content使用，标准元数据名称	?? description：文档的描述 ?? keywords：关键词，逗号分割，用于SEO ?? viewport：设置视口的大小等属性，主要用于移动端 ?? referrer(/r??f??r?/ 推荐人，来历)：控制http的 Referer 请求头。
  http-equiv	定义了一个编译指示指令	?? content-type(过时)：推荐使用meat的charset属性代替。 ?? default-style：默认样式（首选样式） ?? x-ua-compatible( /k?m?p?t?bl/ 兼容的)：设置兼容性 ?? refresh：页面载入的时间间隔设置 ?? Cache-Control：控制HTTP缓存，常用content值如下： ??● no-cache：和服务器确认没修过过才缓存 ??● no-store：不存储，每次都重新请求 ??● public可以被任意缓存，private只在运行的浏览器缓存 ??● max-age：缓存时长（s） ??● no-transform：中间代理不允许格式转换，避免中间被压缩转换 ??Expires：过期时间（GMT），推荐用上面的max-age ?? Content-Security-Policy：CSP内容安全策略，可配置安全权限
  content	http-equiv 或name 属性的值

  请求头Referer实际上是 "referrer"，属于拼写错误（少了一个r），上个世纪制定HTTP/1.0协议时发生的拼写错误，后来被大量服务使用就没有改了。

  2.4、外部资源

  <link>用于加载外部资源，并指定当前文档与外部资源的关系（relationship）。一般都是放在在head中使用，常用于引入样式资源，ref为stylesheet时也可以放到body中。

  属性	描述	值/备注
  rel	关系（relationship），表示引入的文件与前文件与的关系	?? stylesheet：样式文件css，比较常用；icon：网站图标； ?? preload：预加载。更多链接类型
  href	外部文件路径，支持url、文件路径的资源地址	参考资源路径
  type	被连接文件的MIME 类型	text/css（样式文件，常用）、text/html等MIME类型
  media	媒体查询，满足媒体条件才会被加载	media="screen and (max-width: 600px)"
  disabled	禁用该样式资源
  charset	字符编码，已淘汰的属性

  ?注意： 如果你的网站使用了内容安全策略（Content Security Policy，CSP）来增加安全性，这个策略会应用在图标上。如果你遇到了图标没有被加载的问题，你需要确认 Content-Security-Policy 响应头的 img-src 指令有没有禁止访问图标。

  2.5、< script>脚本

  <script>元素用于嵌入或引用可执行脚本，通常指向 JavaScript 代码。除了放到head，也可以放到其他位置，一般推荐放到body后，等html加载完成再执行，因为<script>默认是阻塞式的，要等他加载、执行完才会继续网页后面的内容。

  属性	描述	值/备注
  src	外部资源地址，与嵌入脚本代码不可同时使用	资源路径
  type	定义脚本语言类型，可空，默认为JavaScript类型	支持的MIME类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript
  async	（异步）并行加载，加载完后执行	注意：多个async脚本加载完成的顺序不确定
  defer	告诉浏览器在解析完成 HTML 后再加载 JavaScript	是个懂事的孩子！注意：多个defer脚本是顺序加载执行的

  <script src="js文件路径" type="text/javascript" defer></script>
  <script>
      console.log("hello world!");
  </script>
  

  ---

  03、HTML常见属性

  3.1、全局公共属性

  全局公共属性是所有 HTML 元素共有的属性，它们可以用于所有元素，即使属性可能对某些元素不起作用。

  属性	描述	值/备注
  id	唯一标识符（ID），表示整个文档唯一的元素，重复则第一个有效，可用来定位元素。
  name	名称，给元素一个名分，建议填写，很有用的： ?? 可用来定位元素：document.getElementsByName(name) ?? 表单单选radio、多选checkbox用name来分组 ?? form表单提交数据用元素的name作为参数名（key），也可form.inputName ?? a标签的name可以用来做为锚点：
  class	样式类名，类选择器（.classname），多个空格分割，可用来定位元素。
  style	行内样式，在属性上快速写css样式。	style="color:red;"
  title	提示文本，鼠标悬浮显示
  hidden	隐藏元素，不显示，同display: none，但hidden只兼容IE11以上
  lang	语言，元素所用的语言，zh（中文）、en（英文）
  tabindex	Tab键焦点排序，通过Tab键切换元素焦点	整数
  contenteditable	元素是否可编辑，启用后可以编辑元素内容	bool值
  inputmode	输入模式，输入的虚拟键盘，用于元素，及contenteditable模式下的任何元素
  draggable	元素拖动，HTML 拖放 API	bool值
  dir	文本方向，枚举值：ltr（左到右）、rtl（右到左）、auto	dir="rtl"
  accesskey	键盘快捷键，需配合浏览器的快捷键使用，一般为Alt+设置的快捷键	accesskey="W"

  • MDN的全局属性

  3.2、资源路径src/href

  资源文件路径，如img的src指向一个外部资源文件，一般有下面三种路径方式。

  • <script>标签的src
  • 的src
  • 标签的href
  • 标签的href

  路径	描述
  绝对路径	在电脑磁盘上的文件绝对（完整）路径：如 "D:\\Project_Files\\res\\png-0078.png"。注意需要WEB服务器对该文件有访问权限。
  相对路径	在当前Web项目目录内，进行资源路径定位的相对路径。如父级、同级/子级、根目录等，通过相对与自己的位置去定位目标文件路径，相对路径是使用最频繁的路径方式了！ ?? 父级../：父级目录，向上一级，可多个组合向上多级，如../../向上2级。 ?? 同级/子级./：同级目录（包含子级），可以省略。 ?? 跟目录/：表示当前Web项目的根目录。
  网络路径	http网络地址

  ---

  04、HTML元素分类

  HTML5之前，经常把元素分为块元素、行内元素。HTML5有了新的分区方式，按照内容模型来区分，包括元数据模型、区块型、标题型、文档流性、语句型、内嵌型、交互型、混合型等。但块元素、行内元素依然作为一种常用的分类方式使用。

  	块元素-块元素	行内元素-行内元素
  是否换行	独占一行，从新的一行开始，其后也另起一行	和其他元素在同一行
  大小设置	元素的高、宽、行高、边距、对齐都可调整，宽度默认100%	元素高、宽、外边距不可设置，宽度根据内容自适应
  包含元素	一般可包含其他行内元素和块元素	一般可包含其他行内元素，不可包含块元素
  常见元素	div，hr、br，form、table，h1-6，p，pre，ul/ol	span，font，span，input，textarea，label，img，a，button，select

  • 还有一种混合型“行内块元素”，和其他元素在一行，但元素的高、宽、外边距都可以设置，如button、img、input。
  • 通过CSS样式的display属性可以更改元素的类型，如可设置为一个块元素布局display: block;

  • HTML所有元素的在线清单
  • HTMl元素清单（中文版）

  05、关于HTML5

  2014年正式发布的HTML5是一个里程碑版本，他将HTML5当做WEB应用开发平台，制定了一些列新的标准。不仅仅是HTML标准的升级，还包括CSS、JavaScript，是一整套的新一代WEB应用解决方案。HTML5定义了一系列新元素，如新语义元素、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用。

  IE8 及以下版本的浏览器不支持 H5 和 CSS3，解决方法是引入html5shiv.js文件。

  

  我们现在常用的如在线画图、在线表格、Office365、网页游戏等富WEB应用，以及基于WEB的混合技术客户端，都是HTML5的佳作。

  ---

  ??版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址