读HTML5秘籍 -- 总结1-CSDN博客

本文链接：https://blog.csdn.net/XiaoningZhu/article/details/92742163

虽然会写html网页，但是很多html5的基础，还是打的不牢，因此，想要在空闲时间补充一下html5的基础知识。

声明html5文档：<!DOCTYPE html>。注意：其中不是html5 ，只是html即可。
使用<head>和<body>来分块避免避免混乱。于是html文件结构变成了：
```
<!DOCTYPE html>
<head>
</head>
 <body>
</body>
```
<title>标签用于表示网页的标题。是位于浏览器最上方的tab内。注意：有一个属性也叫做title，属性title标签的作用是提示，当鼠标划过就会显示出title属性的内容，title=“提示文字”。

最后使用html标签来封装整个文档。

<!DOCTYPE html>
<html>
<head>
<title>这是一个测试网页</title>
</head>
<body>
</body>
</html>

为什么一定html5要有文档声明呢？

保留文档声明，主要是历史原因。html4.0和xhtml的文档声明特别长,文档声明表明以什么样的标准去解析html，而html5是html的统一标准，所以不再存在用不同标准解析html，因为html标准统一为html5。那么为什么不干脆去掉文档声明？因为如果没有文档声明，那么由于历史原因，大多数浏览器为了支持以前的网页，将会转换到一种混杂模式。混杂模式是说浏览器会以浏览器自己本身独特的标准去解析文档，以便兼容很久以前的网页，而不同浏览器混杂模式解析的标准不一样。加了文档声明后，所有浏览器会用标准模式解析，标准模式解析的的标准是一样的。

网页编码方式。

一般来说，经过配置的服务器会告诉浏览器它提供的网页采用了什么编码，但并非所有的都会。因此为了避免引起一些说不清的安全问题和更方便解析，最好在自己的文档中加上网页的编码信息。utf-8是一种非常广泛使用的编码方式，utf-8编码简洁，转换速度快，而且支持所有非英文字符。<meta charset = "utf-8">不需闭合。注意:这是指网页被保存或传输时，网页本身的编码方式，因为文本要转化为字节序列才能保存在计算机中，或被传输。

页面语言。

页面语言指的是呈现在浏览器上，人们所看到的的文字的语言，比如中文页面和英文页面。指明网页中所使用的语言，对于其他人可能很有用，比如搜索引擎可以通过它来筛选搜索结果，确保只向搜索者返回页面语言与他使用的语言相同的页面。使用方法是为整个页面添加语言说明<html lang="en">。如果页面包含多种语言，那么这个信息对屏幕阅读器非常有用，可以为不同的部分指定lang属性，屏幕阅读器就可以选择适当的语言阅读文本了。注意lang是属性，不是标签，可以在任何标签上加lang属性。

样式表

给页面添加样式的方法有三种:（1）内联方式：写在style属性值里。（2）嵌入方式：写在HTML 头部的<style>标签的内容里。（3）外链方式：用外链的方式引入样式表，将样式写在css文件里，通过link标签引入，通常写在head标签内，以防页面出现抖动，因为这样一般是先渲染了页面内容，再渲染样式，可能会导致页面内容的位置的改变。（4）导入方式：导入方式指的是使用 CSS 规则引入外部 CSS 文件，使用@import。
注意：其中（1）的样式优先级高于其他三种，其他三种的样式没有优先级区别，按渲染顺序，排在最后面的样式起作用。
参考资料

<style>
    @import url(style.css);
</style>

比较链接方式和导入方式：
（1）链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。
（2） link 属于 HTML，通过标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
（3）@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
（4）当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

外链引入样式表，使用<link href="" rel="stylesheet">。rel是relation的意思，这个属性表示文档和被链接的外部资源的关系。比如样式表和html文件的rel属性值是stylesheet，表明外链的是一个样式表。

选择器的优先级：
为了避免混淆，这里加一下选择器的优先级：
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
参考资料

关于属性src和href，有什么区别？为什么有些链接用href，有些用src？
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

加入JavaScript。
在html文档中加入JS有两种方式：
（1）使用<script>JS代码</script>
（2）使用<script src=""></script>引入外部JS代码文件。注意:这里虽然不在<script>标签内写代码，但仍然要写闭合标签</script>，否则，页面将不会执行该脚本。因为script标签不能自闭合。<iframe>类似也必须写</iframe>。如果自闭合标签，在开始标签中关闭的话，斜杠前最好留有空格——很多时候人们会很容易漏掉这个空格，据说这样某些浏览器的解析也会出问题，而且加空格看起来格式也更好。 type=“text/javascript”是可选的，type可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。
html5对html文档的格式要求很松。首先其实html和head和body并不是必须的，空元素也不必须使用闭合斜杠，<br> ,</br>，<br />都是可以的，标签不区分大小写<em>和<EM>都可以。
但最好是拥有良好的书写html5的格式：
（1）页面包含html、head、body标签，这样文档结构非常好。
（2）标签全部用小写。
（3）属性要加引号值。
（4）属性名与属性值相同情况下，不需再写很长的形式了。比如<input type="checkbox" checked="checked">写成<input type="checkbox" checked>即可。
（5）空元素的闭合斜杠（/）也没有必要写。