标签

1.可以嵌套
2.不区分大小写
image.png

=====================

Html注释


一般编辑器里面Crtl + /就能出来

=====================

优先级

就近原则（离被设置元素越近优先级别越高）

=====================

网页基本结构

  1. <!DOCTYPE html>  文档声明
  2. <html>  根标签
  3.   <head>
  4.       网页头部信息
  5.   </head>
  6.   <body>
  7.     可见的页面内容
  8.   </body>
  9. </html>

<!DOCTYPE html>

声明网页是什么版本的，<!DOCTYPE html>这个就是Html5版本，告诉浏览器后面按Html5的版本进行解析

（1）称为根标签，所有的网页标签都在中。
（2）建议里面增加一个属性lang，用于根据不同国家访问页面时，自动重定向到对应的语言页面

  1. <html lang="zh-CN">
  3. </html>

头部

标签用于定义文档的头部，它是所有头部元素的容器。
（1）头部元素有、<script>、 <style>、<link>、 <meta>等标签。<br />（2）文档的头部描述了文档的各种属性和信息，包括文档的标题等。<br />（3）绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<br /></p> <p><a name="BmrMr"></a></p> <h3 id="40qnom"><a name="40qnom" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3cschool.cn/htmltags/tag-title.html"><title></a>标题（必要）</h3><p>定义浏览器工具栏中的标题<br />提供页面被添加到收藏夹时的标题<br />显示在搜索引擎结果中的页面标题</p> <p><a name="pUi2Q"></a></p> <h3 id="1bss5q"><a name="1bss5q" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3cschool.cn/htmltags/tag-style.html"><style></a>CSS样式</h3><p><style> 标签定义 HTML 文档的样式信息。<br />在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。<br />每个 HTML 文档能包含多个 <style> 标签。</p> <p><a name="sRKTk"></a></p> <h3 id="1a6qg0"><a name="1a6qg0" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3cschool.cn/htmltags/tag-base.html"><base></a>默认连接或默认目标</h3><p><base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。<br />在一个文档中，最多能使用一个 <base> 元素。 <base> 标签必须位于 <head> 元素内部。</p> <p><a name="XLYNN"></a></p> <h3 id="fob1t9"><a name="fob1t9" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3cschool.cn/htmltags/tag-link.html"><link></a>引入外部资源</h3><p><link> 标签定义文档与外部资源的关系。<br /><link> 标签最常见的用途是链接样式表。<br />例如引入网站小图标，最好是32*32以内的ico或png格式</p> <pre><code class="lang-html">*设置网站小图标 <link rel="shortcut icon" href="xxx.ico"/> </code></pre> <p><a name="daRkW"></a></p> <h3 id="6tv2xr"><a name="6tv2xr" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3cschool.cn/htmltags/tag-meta.html"><meta></a>描述数据的数据</h3><p>元数据（Metadata）是数据的数据信息。<br /><meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。<br />META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。<br />元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。<br />注意：<meta> 标签中的元数据无法使用其他的元相关标签表示，例如：<base>、<link>，<script>、<style>或<title>。</p> <pre><code class="lang-html">实例 1 - 定义文档关键词，用于搜索引擎： <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 实例 2 - 定义web页面描述： <meta name="description" content="Free Web tutorials on HTML and CSS"> 实例 3 - 定义页面作者： <meta name="author" content="Hege Refsnes"> 实例 4 - 每30秒刷新页面： <meta http-equiv="refresh" content="30"> *设置网页编码(重要) <meta charset="utf-8"> </code></pre> <p><a name="YtmYh"></a></p> <h3 id="59j1e"><a name="59j1e" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3cschool.cn/htmltags/tag-script.html"><script></a>脚本</h3><p><script> 标签用于定义客户端脚本，比如 JavaScript。<br /><script> 元素既可包含脚本语句，也可以通过 “src” 属性指向外部脚本文件。<br />JavaScript 通常用于图像操作、表单验证以及动态内容更改。</p> <p><a name="ziZQO"></a></p> <h3 id="anotkn"><a name="anotkn" class="reference-link"></a><span class="header-link octicon octicon-link"></span><a rel="nofollow" href="https://www.w3cschool.cn/htmltags/tag-noscript.html"><noscript></a>不支持脚本时提示</h3><p>noscript 元素用来定义在脚本未被执行时的替代内容（文本）。<br />此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器。</p> <hr> <p><a name="IfchD"></a></p> <h2 id="c2wqlf"><a name="c2wqlf" class="reference-link"></a><span class="header-link octicon octicon-link"></span><body></body>内容</h2><p>（1）在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。<br />（2）无视空格和回车</p> <p>按功能分类：</p> <p><a name="KEsdc"></a></p> <h1 id="8rnj5g"><a name="8rnj5g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>==================</h1><p><a name="qTMOF"></a></p> <h1 id="dkilrr"><a name="dkilrr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>H5新增</h1><p><a name="KT5SR"></a></p> <h2 id="fk6iuc"><a name="fk6iuc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>语义化标签</h2><p><img src="https://cdn.nlark.com/yuque/0/2020/png/725902/1588610337743-3b198116-4bfa-4387-873b-b1ce2672390e.png#align=left&display=inline&height=171&margin=%5Bobject%20Object%5D&name=image.png&originHeight=257&originWidth=488&size=60958&status=done&style=none&width=325" alt="image.png"><br />都只是普通的块级元素，只是推荐你这样语义化布局<br /><img src="https://cdn.nlark.com/yuque/0/2020/png/725902/1588610396953-17700b6e-f6b3-454e-b538-05577aac47bf.png#align=left&display=inline&height=394&margin=%5Bobject%20Object%5D&name=image.png&originHeight=557&originWidth=438&size=76265&status=done&style=none&width=310" alt="image.png"> <a name="vrGcA"></a></p> <h2 id="965rqf"><a name="965rqf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>媒体</h2><p><img src="https://cdn.nlark.com/yuque/0/2020/png/725902/1588610532979-ff426c2b-2423-4e7d-a988-201c89611414.png#align=left&display=inline&height=58&margin=%5Bobject%20Object%5D&name=image.png&originHeight=84&originWidth=233&size=12744&status=done&style=none&width=160" alt="image.png"> <a name="ij9LS"></a></p> <h3 id="4swbye"><a name="4swbye" class="reference-link"></a><span class="header-link octicon octicon-link"></span>video 视频</h3><p><img src="https://cdn.nlark.com/yuque/0/2020/png/725902/1588610548732-7d068ad2-72d4-4a75-8a1f-64b4b669019d.png#align=left&display=inline&height=304&margin=%5Bobject%20Object%5D&name=image.png&originHeight=304&originWidth=1282&size=190012&status=done&style=none&width=1282" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2020/png/725902/1588613462155-b9107b30-a40d-459d-b961-9d21e1660628.png#align=left&display=inline&height=78&margin=%5Bobject%20Object%5D&name=image.png&originHeight=128&originWidth=887&size=52092&status=done&style=none&width=538" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2020/png/725902/1588613445089-bd21b396-3ed0-44cf-afe5-47d18a65186c.png#align=left&display=inline&height=180&margin=%5Bobject%20Object%5D&name=image.png&originHeight=231&originWidth=642&size=148828&status=done&style=none&width=500" alt="image.png"></p> <p><a name="zFkA2"></a></p> <h3 id="cxy74k"><a name="cxy74k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>audio 音频</h3><p><img src="https://cdn.nlark.com/yuque/0/2020/png/725902/1588613610296-55c17eea-58ed-472c-96a1-1ee6f79ddfa4.png#align=left&display=inline&height=344&margin=%5Bobject%20Object%5D&name=image.png&originHeight=344&originWidth=975&size=159308&status=done&style=none&width=975" alt="image.png"></p>