We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HTML指的是超文本标记语言 (Hyper Text Markup Language)，HTML文档就是我们常说的网页，一个标准的HTML文档由文档元素和元数据元素组成，二者用来创建HTML文档以及其内容。
顺便说一下什么是元数据元素: 用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示，它们本身不是文档内容，但提供了关于后面文档内容的信息。包含在head内，如title、base、meta等都是元数据元素。本文不做重点介绍。
文档元素一共有四个DOCTYPE、html、head、body
每一个HTML文档都必须由DOCTYPE元素开头，告诉浏览器要处理的是HTML文档，在HTML5中DOCTYPE 声明变得非常简单而且唯一，不用写版本号浏览器也能识别这是HTML5文档，因为和之前的HTML版本有所差异 //HTML5声明
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。--W3school
HTML4中声明如下:
HTML 4.01 Strict(不允许使用框架集):
HTML 4.01 Frameset(允许使用框架集):
html表示根元素，表示HTML文档的开始，必须需要的元素，html具有如下属性:
包含文档的元数据，向浏览器提供文档内容和标记的信息，还包括脚本和对外资源的引用，如引入外联.css文件、js文件等。
<DOCTYPE html> <html> <head> <base href="https://segmentfault.com/"> </head> <body> <a href="page2.html">跳转</a> </body> </html>
正常点击a链接，浏览器将从"https://segmentfault.com/page2.html"中加载文档 如果不包含元素，浏览器将从"https://segmentfault.com/demo/index.html"中加载文档地址
style元素拥有局部属性:type、scoped、media，其对应作用如下:
1.指定内嵌样式，type属性是高速浏览器文档所定义的类型、这个值只有一种text/css
<style> .box { width: 200px; height: 200px; background: red; } </style>
2.指定样式范围，scoped属性的作用为style元素内定义的样式只作用于该元素的父级及其所有兄弟元素
3.media属性表明文档在指定的设备下显示其定义的样式
<style media="screen" type="text/css"> .box { width: 200px; height: 200px; background: red; } </style>
media属性所有的设备值如下表(--HTML5权威指南)，很多在工作中几乎都用不上，列出来了解一下及以备查阅:
media不只能规定设备，还能定义更具体的使用条件，举例如下:
<style media="screen AND (max-width:500px)" type="text/css"> //只在浏览器宽度小于500px的情况下生效 .box { width: 200px; height: 200px; background: red; } </style>
<style media="screen AND (mix-width:500px)" type="text/css"> //只在浏览器宽度大于500px的情况下生效 .box { width: 200px; height: 200px; background: blue; } </style>
除了用AND来定义具体条件，还可以使用NOT和OR(','表示)，另外还有其他供media使用的特性就不列举了，大家可以自己去百度了，再补充一个吧，device-width，这些特性都可以结合max-/mix-来使用
拥有的局部属性如下表:
rel属性常用值rel值列表及其表示的link元素功能
1.引入外联样式表
2.添加网站图标 //href属性值为图片路径 3.预先获取关联的资源 rel属性值设置为prefetch，可以预先加载demo.html，如果页面存在链接如下，为需要demo.html页面的操作做好准备
<a href="demo.html">demo</a>
script元素可以定义页面内嵌脚本、引入外部文件脚本并通过script本身局部属性值设定加载脚本的各种方式
script的常用局部属性及其说明如下表:
1.定义文档内嵌脚本
<script> window.onload = function() { alert('页面加载完成'); } </script>
一般情况下script元素应该放在文档最后，等页面全部加载完成后才去执行，保证脚本文件内可以获取到当前页面的全部内容。
如果script元素在head内，如果是当前内嵌脚本，则可以添加window.onload来告诉浏览器当所有页面全部加载完成才去执行。
2.载入外部脚本 <script src="index.js"></script>
3.使用defer属性延迟加载外部脚本 <script defer src="index.js"></script>
如果在head中使用script元素，defer属性将会在HTML文档所有元素都解析完毕之后才加载和执行。
注意:defer属性只能处理外部脚本，对内嵌脚本无效。
4.使用async属性异步执行脚本 <script async src="index.js"></script>
浏览器在解析script元素时的默认行为是加载和执行脚本的时候暂停处理页面，各script元素按顺序同步执行。
使用async属性可以使外部脚本在加载HTML时异步执行，如何使用需结合具体产品功能需求，不过带来的影响是，页面中的脚本不能再按次序同步执行，所以如果当前脚本中与其他脚本有关联，则不适合使用async属性
HTML文档的元数据和文档信息都包含在head内，文档内容包含在body内，body紧跟在head后面，具体不在赘述！
本文很多概念和属性表格结合《HTML5权威指南》、W3school、MDN，由于博主能力有限，很多概念直接拿过来引用，并附上相关链接，以保证其正确性，对HTML文档的相关知识作一个简单的总结，希望能帮助到需要的人，同时也方便自己后续查阅。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
HTML文档
顺便说一下什么是元数据元素: 用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示，它们本身不是文档内容，但提供了关于后面文档内容的信息。包含在head内，如title、base、meta等都是元数据元素。本文不做重点介绍。
文档元素
文档元素一共有四个DOCTYPE、html、head、body
DOCTYPE
每一个HTML文档都必须由DOCTYPE元素开头，告诉浏览器要处理的是HTML文档，在HTML5中DOCTYPE 声明变得非常简单而且唯一，不用写版本号浏览器也能识别这是HTML5文档，因为和之前的HTML版本有所差异
//HTML5声明
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。--W3school
HTML4中声明如下:
HTML 4.01 Strict(不允许使用框架集):
HTML 4.01 Frameset(允许使用框架集):
html
html表示根元素，表示HTML文档的开始，必须需要的元素，html具有如下属性:
head
如果在浏览器地址为"https://segmentfault.com/demo/index.html"中载入一个文档，代码如下:
正常点击a链接，浏览器将从"https://segmentfault.com/page2.html"中加载文档
如果不包含元素，浏览器将从"https://segmentfault.com/demo/index.html"中加载文档地址
style元素拥有局部属性:type、scoped、media，其对应作用如下:
1.指定内嵌样式，type属性是高速浏览器文档所定义的类型、这个值只有一种text/css
2.指定样式范围，scoped属性的作用为style元素内定义的样式只作用于该元素的父级及其所有兄弟元素
3.media属性表明文档在指定的设备下显示其定义的样式
media属性所有的设备值如下表(--HTML5权威指南)，很多在工作中几乎都用不上，列出来了解一下及以备查阅:
media不只能规定设备，还能定义更具体的使用条件，举例如下:
除了用AND来定义具体条件，还可以使用NOT和OR(','表示)，另外还有其他供media使用的特性就不列举了，大家可以自己去百度了，再补充一个吧，device-width，这些特性都可以结合max-/mix-来使用
拥有的局部属性如下表:
rel属性常用值rel值列表及其表示的link元素功能
1.引入外联样式表
2.添加网站图标
//href属性值为图片路径
3.预先获取关联的资源
rel属性值设置为prefetch，可以预先加载demo.html，如果页面存在链接如下，为需要demo.html页面的操作做好准备
script的常用局部属性及其说明如下表:
1.定义文档内嵌脚本
一般情况下script元素应该放在文档最后，等页面全部加载完成后才去执行，保证脚本文件内可以获取到当前页面的全部内容。
如果script元素在head内，如果是当前内嵌脚本，则可以添加window.onload来告诉浏览器当所有页面全部加载完成才去执行。
2.载入外部脚本
<script src="index.js"></script>
3.使用defer属性延迟加载外部脚本
<script defer src="index.js"></script>
如果在head中使用script元素，defer属性将会在HTML文档所有元素都解析完毕之后才加载和执行。
注意:defer属性只能处理外部脚本，对内嵌脚本无效。
4.使用async属性异步执行脚本
<script async src="index.js"></script>
浏览器在解析script元素时的默认行为是加载和执行脚本的时候暂停处理页面，各script元素按顺序同步执行。
使用async属性可以使外部脚本在加载HTML时异步执行，如何使用需结合具体产品功能需求，不过带来的影响是，页面中的脚本不能再按次序同步执行，所以如果当前脚本中与其他脚本有关联，则不适合使用async属性
body
HTML文档的元数据和文档信息都包含在head内，文档内容包含在body内，body紧跟在head后面，具体不在赘述！
本文很多概念和属性表格结合《HTML5权威指南》、W3school、MDN，由于博主能力有限，很多概念直接拿过来引用，并附上相关链接，以保证其正确性，对HTML文档的相关知识作一个简单的总结，希望能帮助到需要的人，同时也方便自己后续查阅。
The text was updated successfully, but these errors were encountered: