HTML简介
1. 什么是HTML
HTML，即超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。
- HTML 是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML 文档也叫做 web 页面
- HTML 文件后缀可以是 .html 或者 .htm，二者没有区别，都可以使用
2. HTML标签
HTML 标记标签通常被称为 HTML 标签（HTML Tag）。HTML 标签是由尖括号包围的关键字，比如；HTML 标签通常是成对出现的，标签中的第一个标签叫做开始标签（也叫开放标签），第二个标签被叫做结束标签（也叫闭合标签）。比如
“HTML 元素”和“HTML 标签”通常描述的是同样的意思，但是严格来讲，一个 HTML 元素包含了开始标签与结束标签，如下示例：
<p>这是一个段落</p>
3. WEB浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。
4. HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML实例</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析：
- <!DOCTYPE html> 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
元素描述了文档的标题</li><li><body> 元素包含了可见的页面内容</li><li><h1> 元素定义一个大标题</li><li><p> 元素定义一个段落</li></ul> <p><a name="c0pJj"></a></p> <h2 id="e74rca"><a name="e74rca" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5. 通用说明</h2><p><strong>HTML5</strong></p> <pre><code class="lang-html"><!DOCTYPE html> </code></pre> <p><strong>HTML4.01</strong></p> <pre><code class="lang-html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </code></pre> <p><strong>XHTML 1.0</strong></p> <pre><code class="lang-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </code></pre> <p><a name="mCfSS"></a></p> <h2 id="1gxgm8"><a name="1gxgm8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6. 中文编码</h2><p>目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。</p> <pre><code class="lang-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html> </code></pre> <p><a name="tXGyD"></a></p> <h2 id="atimhs"><a name="atimhs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7. HTML编辑器推荐</h2><p>可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：</p> <ul> <li><strong>Notepad++</strong>：<a rel="nofollow" href="https://notepad-plus-plus.org/">https://notepad-plus-plus.org/</a></li><li><strong>Sublime Text</strong>：<a rel="nofollow" href="http://www.sublimetext.com/">http://www.sublimetext.com/</a></li><li><strong>VS Code</strong>：<a rel="nofollow" href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></li><li><strong>WebStorm</strong></li></ul> <hr> <p><a name="OQ6oF"></a></p> <h1 id="2kcqet"><a name="2kcqet" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML块级元素和内联元素</h1><p>在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。 <a name="Dclx7"></a></p> <h2 id="6kg7lz"><a name="6kg7lz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块级元素</h2><blockquote> <p>块级元素是指本身属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。</p> </blockquote> <p><a name="hrLQ5"></a></p> <h3 id="f9p4u"><a name="f9p4u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块级元素的特点：</h3><ul> <li>独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布</li><li>可以直接控制宽度、高度以及盒子模型的相关css属性</li><li>在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度</li><li>在不设置高度的情况下，块级元素的高度是它本身内容的高度 <a name="ZO0Se"></a><h3 id="em98b5"><a name="em98b5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>常用的块级元素</h3>| 标签 | 描述 | | :—-: | :—-: | | div | 常用块级容器，也是css layout的主要标签 | | h1 | 大标题 | | h2 | 副标题 | | h3 | 三级标题 | | h4 | 四级标题 | | h5 | 五级标题 | | h6 | 六级标题 | | hr | 水平分隔线 | | menu | 菜单列表 | | ol | 有序列表 | | ul | 无序列表 | | li | 列表项 | | dl | 定义列表 | | dt | 定义术语 | | dd | 定义描述 | | table | 表格 | | p | 段落 | | form | 交互表单 |</li></ul> <p><a name="qtPIg"></a></p> <h2 id="39uvoz"><a name="39uvoz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>内联元素</h2><blockquote> <p>内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。</p> </blockquote> <p><a name="ythJD"></a></p> <h3 id="2p707c"><a name="2p707c" class="reference-link"></a><span class="header-link octicon octicon-link"></span>内联元素的特点：</h3><ul> <li>和其他内联元素从左到右在一行显示</li><li><strong>不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的</strong></li><li>内联元素的宽高是由本身内容的大小决定（文字、图片等）</li><li>内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）</li></ul> <p>内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a"><code><a></code></a>或者强调元素<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/em"><code><em></code></a>和 <a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/strong"><code><strong></code></a>。<br />看一看下面的例子：</p> <pre><code class="lang-html"><em>第一</em><em>第二</em><em>第三</em> <p>第四</p><p>第五</p><p>第六</p> </code></pre> <p><a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/em"><code><em></code></a> 是一个内联元素，所以就像你在下方可以看到的，第一行代码中的三个元素都没有间隙的展示在了同一行。而<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p"><code><p></code></a>是一个块级元素，所以第二行代码中的每个元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着默认的展示<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p"><code><p></code></a>元素的<a rel="nofollow" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a>）。<br /><img src="https://cdn.nlark.com/yuque/0/2019/png/163557/1558878539112-1b88ed3d-22cf-405b-bd69-a335afb620f1.png#align=left&display=inline&height=162&name=image.png&originHeight=162&originWidth=622&size=5109&status=done&width=622" alt="image.png"> <a name="Rxx7v"></a></p> <h3 id="43217y"><a name="43217y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>常用的内联元素</h3><table> <thead> <tr> <th style="text-align:center">标签</th> <th style="text-align:center">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:center">span</td> <td style="text-align:center">常用内联容器，定义文本内区块</td> </tr> <tr> <td style="text-align:center">a</td> <td style="text-align:center">锚点</td> </tr> <tr> <td style="text-align:center">b</td> <td style="text-align:center">加粗</td> </tr> <tr> <td style="text-align:center">strong</td> <td style="text-align:center">加粗强调</td> </tr> <tr> <td style="text-align:center">i</td> <td style="text-align:center">斜体</td> </tr> <tr> <td style="text-align:center">em</td> <td style="text-align:center">斜体强调</td> </tr> <tr> <td style="text-align:center">s</td> <td style="text-align:center">中划线（不推荐使用）</td> </tr> <tr> <td style="text-align:center">strike</td> <td style="text-align:center">中划线</td> </tr> <tr> <td style="text-align:center">del</td> <td style="text-align:center">文档中已被删除的文本</td> </tr> <tr> <td style="text-align:center">br</td> <td style="text-align:center">强制换行</td> </tr> <tr> <td style="text-align:center">u</td> <td style="text-align:center">下划线</td> </tr> <tr> <td style="text-align:center">textarea</td> <td style="text-align:center">多行文本输入框</td> </tr> <tr> <td style="text-align:center">input</td> <td style="text-align:center">输入框</td> </tr> <tr> <td style="text-align:center">select</td> <td style="text-align:center">下拉列表</td> </tr> <tr> <td style="text-align:center">label</td> <td style="text-align:center">input 元素定义标注（标记）</td> </tr> <tr> <td style="text-align:center">img</td> <td style="text-align:center">引入图片</td> </tr> <tr> <td style="text-align:center">sub</td> <td style="text-align:center">下标</td> </tr> <tr> <td style="text-align:center">sup</td> <td style="text-align:center">上标</td> </tr> <tr> <td style="text-align:center">big</td> <td style="text-align:center">大字体文本</td> </tr> <tr> <td style="text-align:center">small</td> <td style="text-align:center">小字体文本</td> </tr> </tbody> </table> <p><a name="b1GY6"></a></p> <h1 id="2naozh"><a name="2naozh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>空元素和闭合元素</h1><p>不是所有元素都拥有开始标签，内容和结束标记. 一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img"><code><img></code></a>是用来在元素<a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img"><code><img></code></a>所在位置插入一张指定的图片。例子如下：</p> <pre><code class="lang-html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"> </code></pre> <p>显示如下：<br /><img src="https://cdn.nlark.com/yuque/0/2019/png/163557/1558878694062-42cd1b23-48cf-4609-a5b2-7b1b08976ff1.png#align=left&display=inline&height=256&originHeight=256&originWidth=256&size=0&status=done&width=256" alt=""></p> <p><a name="Np9w7"></a></p> <h1 id="2td6v6"><a name="2td6v6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML属性</h1><p>属性是HTML元素提供的附加信息<br />注意：HTML属性对大写不明感，但是一般的约定使用小写</p> <p><a name="nQRPE"></a></p> <h2 id="5u1ijb"><a name="5u1ijb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. HTML属性简介</h2><ul> <li>HTML 元素可以设置<strong>属性</strong></li><li>属性可以在元素中添加<strong>附加信息</strong></li><li>属性一般描述于<strong>开始标签</strong></li><li>属性总是以名称/值对的形式出现，<strong>比如：name=”value”</strong>。</li></ul> <p>比如：</p> <pre><code class="lang-html"><a href="http://www.runoob.com">这是一个链接</a> </code></pre> <p>其中，HTML 链接有<a>标签定义，链接的地址在 href 属性中指定。</p> <p><a name="1SpZF"></a></p> <h2 id="cgkgee"><a name="cgkgee" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 适用于大多数标签的属性</h2><table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>class</td> <td>为html元素定义一个或多个类名（classname）(类名从样式文件引入)</td> </tr> <tr> <td>id</td> <td>定义元素的唯一id</td> </tr> <tr> <td>style</td> <td>规定元素的行内样式（inline style）</td> </tr> <tr> <td>title</td> <td>描述了元素的额外信息 (作为工具条使用)</td> </tr> </tbody> </table> <p><a name="Zl1OW"></a></p> <h2 id="850ve8"><a name="850ve8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. HTML全局属性</h2><table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>accesskey</td> <td>设置访问元素的键盘快捷键。</td> </tr> <tr> <td>class</td> <td>规定元素的类名（classname）</td> </tr> <tr> <td>contenteditable</td> <td>（New） 规定是否可编辑元素的内容。</td> </tr> <tr> <td>contextmenu</td> <td>（New） 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单</td> </tr> <tr> <td>data-*</td> <td>（New） 用于存储页面的自定义数据</td> </tr> <tr> <td>dir</td> <td>设置元素中内容的文本方向。</td> </tr> <tr> <td>draggable</td> <td>（New） 指定某个元素是否可以拖动</td> </tr> <tr> <td>dropzone</td> <td>（New） 指定是否将数据复制，移动，或链接，或删除</td> </tr> <tr> <td>hidden</td> <td>（New） hidden 属性规定对元素进行隐藏。</td> </tr> <tr> <td>id</td> <td>规定元素的唯一 id</td> </tr> <tr> <td>lang</td> <td>设置元素中内容的语言代码。</td> </tr> <tr> <td>spellcheck</td> <td>（New） 检测元素是否拼写错误</td> </tr> <tr> <td>style</td> <td>规定元素的行内样式（inline style）</td> </tr> <tr> <td>tabindex</td> <td>设置元素的 Tab 键控制次序。</td> </tr> <tr> <td>title</td> <td>规定元素的额外信息（可在工具提示中显示）</td> </tr> <tr> <td>translate</td> <td>（New） 指定是否一个元素的值在页面载入时是否需要翻译</td> </tr> </tbody> </table> <blockquote> <p>（New）标注HTML5的新属性</p> </blockquote> <p><a name="JkpwU"></a></p> <h2 id="9n8b4k"><a name="9n8b4k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4. 布尔属性</h2><p>有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如<code>[disabled](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-disabled)</code> 属性，他们可以标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。</p> <pre><code class="lang-html"><input type="text" disabled="disabled"> </code></pre> <p>采用如下简写更佳(下面一句为可用可输入数据的文本框，以作为对比)：</p> <pre><code class="lang-html"><input type="text" disabled> <input type="text"> </code></pre> <p>上面两个文本框显示如下：<br /><img src="https://cdn.nlark.com/yuque/0/2019/png/163557/1558878845073-d6fae2fe-e1a1-46cb-ab0e-d6a71d128263.png#align=left&display=inline&height=55&name=image.png&originHeight=55&originWidth=402&size=733&status=done&width=402" alt="image.png"></p> <p><a name="9MfJK"></a></p> <h1 id="6s1ec9"><a name="6s1ec9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML样式</h1><p>style属性用于改变 HTML 元素的样式 <a name="3PCmM"></a></p> <h2 id="7nnixd"><a name="7nnixd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. HTML的style属性</h2><p>style属性的作用：提供了一种作用改变所有 HTML 元素的样式的通用方法。</p> <p>样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。</p> <p>常用的style属性：<br /><strong>background-color</strong> 属性为元素定义了背景颜色，<br /><strong>font-family</strong>、<strong>color </strong>以及 <strong>font-size</strong> 属性分别定义元素中文本的字体系列、颜色和字体尺寸<br /><strong>text-align</strong> 属性规定了元素中文本的水平对齐方式</p> <p>比如：</p> <pre><code class="lang-html"><html> <body style="background-color:yellow"> <h1 style="text-align:center; font-family:verdana; background-color:red">heading</h1> </body> </html> </code></pre> <p><a name="rAewV"></a></p> <h2 id="vo3ez"><a name="vo3ez" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 不赞成使用的标签和属性</h2><p>在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。<br /><strong>尽量避免使用这些被废弃的标签和属性，如果需要使用到下面的这些标签或属性，请使用style属性代替。</strong></p> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><center></td> <td>定义居中的内容。</td> </tr> <tr> <td><font> 和 <basefont></td> <td>定义 HTML 字体。</td> </tr> <tr> <td><s> 和 <strike></td> <td>定义删除线文本</td> </tr> <tr> <td><u></td> <td>定义下划线文本</td> </tr> </tbody> </table> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>align</td> <td>定义文本的对齐方式</td> </tr> <tr> <td>bgcolor</td> <td>定义背景颜色</td> </tr> <tr> <td>color</td> <td>定义文本颜色</td> </tr> </tbody> </table> <p><a name="tlsoL"></a></p> <h1 id="1vz8o2"><a name="1vz8o2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML注释</h1><p><strong>注释标签 <!-- 与 --> 用于在 HTML 插入注释。</strong><br /><strong>HTML注释 ： </strong></p> <ol> <li>在开始标签中有一个感叹号，但是结束标签中没有</li><li>浏览器中不会显示注释，但是能够记录您的 HTML 文档</li><li>可以利用 HTML 注释放置通知或提示信息</li><li>HTML注释不直接显示在浏览器上，但是通过开发者工具可以看到，所以不应该放置敏感信息</li></ol> <pre><code class="lang-html"><!-- 此刻不显示图片： <img border="0" src="/i/tulip_ballade.jpg" alt="Tulip"> --> </code></pre> <hr> <p><a name="7YDP2"></a></p> <h1 id="ewiet3"><a name="ewiet3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML头部</h1><p><a name="k4Q00"></a></p> <h2 id="61wg3"><a name="61wg3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. HTML头部元素</h2><table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><head></td> <td>定义关于文档的信息。</td> </tr> <tr> <td><title></td> <td>定义文档标题。</td> </tr> <tr> <td><base></td> <td>定义页面上所有链接的默认地址或默认目标。</td> </tr> <tr> <td><link></td> <td>定义文档与外部资源之间的关系。</td> </tr> <tr> <td><meta></td> <td>定义关于 HTML 文档的元数据。</td> </tr> <tr> <td><script></td> <td>定义客户端脚本。</td> </tr> <tr> <td><style></td> <td>定义文档的样式信息。</td> </tr> </tbody> </table> <p><a name="wZJ1l"></a></p> <h2 id="a4152a"><a name="a4152a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. HTML head元素</h2><p><head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。<br />以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。</p> <p><a name="WTDLC"></a></p> <h2 id="4vyh6x"><a name="4vyh6x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. HTML title元素</h2><p><title> 标签定义文档的标题。<br />title 元素在所有 HTML/XHTML 文档中都是必需的。<br />title 元素能够：</p> <ul> <li>定义浏览器工具栏中的标题</li><li>提供页面被添加到收藏夹时显示的标题</li><li>显示在搜索引擎结果中的页面标题</li></ul> <p>一个简化的 HTML 文档：</p> <pre><code class="lang-html"><!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> </code></pre> <p><a name="d9LGF"></a></p> <h2 id="6k3zto"><a name="6k3zto" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4. HTML base元素</h2><p><base> 标签为页面上的所有链接规定默认地址或默认目标（target）<br /><strong>但是避免使用base标签规定默认地址，很危险！</strong></p> <pre><code class="lang-html"><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <base target="_blank" /> </head> <body> <p> <a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载，因为 target 属性被设置为 "_blank"。 </p> <p> <a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载，即使没有 target 属性。 </p> </body> </html> </code></pre> <p><a name="jsdbg"></a></p> <h2 id="3q0fe0"><a name="3q0fe0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5. HTML link元素</h2><p><link> 标签定义文档与外部资源之间的关系。<br /><link> 标签最常用于连接样式表：</p> <pre><code class="lang-html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> </code></pre> <p><a name="Ia1LQ"></a></p> <h2 id="9ewmk8"><a name="9ewmk8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6. HTML style元素</h2><p><style> 标签用于为 HTML 文档定义样式信息。<br />您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：</p> <pre><code class="lang-html"><head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> </code></pre> <p><a name="Xc64M"></a></p> <h2 id="eyq9kg"><a name="eyq9kg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7. HTML meta元素</h2><ul> <li>元数据（metadata）是关于数据的信息。</li><li><meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。</li><li>典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。</li><li><meta> 标签始终位于 head 元素中。</li><li>元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。</li></ul> <p><strong>针对搜索引擎的关键词</strong><br />**一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。</p> <p>下面的 meta 元素定义页面的描述：</p> <pre><code class="lang-html"><meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> </code></pre> <p>下面的 meta 元素定义页面的关键词：</p> <pre><code class="lang-html"><meta name="keywords" content="HTML, CSS, XML" /> </code></pre> <p>name 和 content 属性的作用是描述页面的内容。</p> <p><a name="UDJFj"></a></p> <h2 id="ayrv19"><a name="ayrv19" class="reference-link"></a><span class="header-link octicon octicon-link"></span>8. HTML script元素</h2><p><script> 标签用于定义客户端脚本，比如 JavaScript。</p> <hr> <p><a name="JKfaP"></a></p> <h1 id="3p1u2m"><a name="3p1u2m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML字符实体</h1><p><strong>HTML中的预留字段必须被替换成字符实体</strong><br />在 HTML 中，某些字符是预留的。<br />比如，在 HTML 中不能使用大于号(<)和大于号(>)，这是因为浏览器会误认为它们是标签，必须使用<或>代替<br />另外，浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。<br /><strong>HTML 中有用的字符实体（注意：实体名称对大小写敏感！）</strong></p> <table> <thead> <tr> <th>显示结果</th> <th>描述</th> <th>实体名称</th> <th>实体编号</th> </tr> </thead> <tbody> <tr> <td></td> <td>空格</td> <td> </td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> <td>&</td> </tr> <tr> <td>“</td> <td>引号</td> <td>"</td> <td>"</td> </tr> <tr> <td>‘</td> <td>撇号</td> <td>' (IE不支持)</td> <td>'</td> </tr> <tr> <td>￠</td> <td>分（cent）</td> <td>¢</td> <td>¢</td> </tr> <tr> <td>£</td> <td>镑（pound）</td> <td>£</td> <td>£</td> </tr> <tr> <td>¥</td> <td>元（yen）</td> <td>¥</td> <td>¥</td> </tr> <tr> <td>€</td> <td>欧元（euro）</td> <td>€</td> <td>€</td> </tr> <tr> <td>§</td> <td>小节</td> <td>§</td> <td>§</td> </tr> <tr> <td>©</td> <td>版权（copyright）</td> <td>©</td> <td>©</td> </tr> <tr> <td>®</td> <td>注册商标</td> <td>®</td> <td>®</td> </tr> <tr> <td>™</td> <td>商标</td> <td>™</td> <td>™</td> </tr> <tr> <td>×</td> <td>乘号</td> <td>×</td> <td>×</td> </tr> <tr> <td>÷</td> <td>除号</td> <td>÷</td> <td>÷</td> </tr> </tbody> </table> <hr> <p><a name="yLTjv"></a></p> <h1 id="g1oq0t"><a name="g1oq0t" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML颜色</h1><p>颜色由红色、绿色、蓝色混合而成。 <a name="RyeMH"></a></p> <h2 id="fw6nph"><a name="fw6nph" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. 颜色值</h2><p>颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。<br />每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。<br />这个表格给出了由三种颜色混合而成的具体效果：<br /><img src="https://cdn.nlark.com/yuque/0/2019/png/163557/1558874430517-8ea4a331-8bab-49e8-b1dd-e3296f184f78.png#align=left&display=inline&height=620&originHeight=620&originWidth=1622&size=0&status=done&width=1622" alt=""> <a name="wOsqy"></a></p> <h2 id="30kb60"><a name="30kb60" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 颜色名</h2><p>大多数的浏览器都支持颜色名集合。<br />提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。<br />如果需要使用其它的颜色，需要使用十六进制的颜色值。</p> <hr> <p><a name="8F4CE"></a></p> <h1 id="cdx3ye"><a name="cdx3ye" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML URL</h1><p><a name="ycYAg"></a></p> <h2 id="103rws"><a name="103rws" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. 统一资源定位符(URL)</h2><p>当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。<br />统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。<br />网址，比如 <a rel="nofollow" href="http://www.w3school.com.cn/html/index.asp">http://www.w3school.com.cn/html/index.asp</a>，遵守以下的语法规则：</p> <blockquote> <p>scheme://host.domain:port/path/filename</p> </blockquote> <p>解释：</p> <ul> <li>scheme - 定义因特网服务的类型。最常见的类型是 http</li><li>host - 定义域主机（http 的默认主机是 www）</li><li>domain - 定义因特网域名，比如 w3school.com.cn</li><li>:port - 定义主机上的端口号（http 的默认端口号是 80）</li><li>path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。</li><li>filename - 定义文档/资源的名称</li></ul> <p><a name="klfeJ"></a></p> <h2 id="37q3yh"><a name="37q3yh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 主流的协议</h2><table> <thead> <tr> <th>Scheme</th> <th>访问</th> <th>用于…</th> </tr> </thead> <tbody> <tr> <td>http</td> <td>超文本传输协议</td> <td>以 http:// 开头的普通网页。不加密。</td> </tr> <tr> <td>https</td> <td>安全超文本传输协议</td> <td>安全网页。加密所有信息交换。</td> </tr> <tr> <td>ftp</td> <td>文件传输协议</td> <td>用于将文件下载或上传至网站。</td> </tr> <tr> <td>file</td> <td></td> <td>您计算机上的文件。</td> </tr> </tbody> </table> <p><a name="35M1B"></a></p> <h2 id="b490xd"><a name="b490xd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. 相对路径</h2><ul> <li>图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/></li><li>图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/></li><li>图像文件位于HTML文件的上一级，在文件名之前加 “ ../ “, 上两级则使用 “ ../../ “,依次类推。<img src="../image/logo.gif"/></li></ul> <p><a name="ahPFh"></a></p> <h2 id="2abybe"><a name="2abybe" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4. 绝对路径</h2><ul> <li>本地绝对路径： D:\web\img\logo.gif</li><li>网络绝对路径：<a rel="nofollow" href="https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700">https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700</a></li></ul> <hr> <p><a name="twFxs"></a></p> <h1 id="fb0ev7"><a name="fb0ev7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML脚本</h1><p><a name="pbCsq"></a></p> <h2 id="1g7x3s"><a name="1g7x3s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. HTML script元素</h2><ul> <li><script> 标签用于定义客户端脚本，比如 JavaScript。</li><li>script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。</li><li>必需的 type 属性规定脚本的 MIME 类型。</li><li>JavaScript 最常用于图片操作、表单验证以及内容动态更新。</li></ul> <p>下面的脚本会向浏览器输出“Hello World!”：</p> <pre><code class="lang-html"><script type="text/javascript"> document.write("Hello World!") </script> </code></pre> <p><a name="tAzL4"></a></p> <h2 id="3625m6"><a name="3625m6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. noscript标签</h2><p><noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<br />noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。<br />只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：</p> <pre><code class="lang-html"><script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript> </code></pre> <hr> <p><a name="QfmVA"></a></p> <h1 id="g4hdmf"><a name="g4hdmf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML标签闭合</h1><p>你在写 HTML5 代码的时候，是否纠结过应该写 <code><br /></code> 还是 <code><br></code>，是写 <code><input /></code> 还是写<code><input></code>。写 <code><script src="script.js" /></code> 为什么是错的呢？反正我纠结过，而且我发现这个话题其实比我想象中有意思的多。</p> <p><a name="-void-elements-"></a></p> <h2 id="9oczey"><a name="9oczey" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无内容元素（Void elements）</h2><p>无内容元素是一种不能包含任何内容的特殊元素。而其他元素，比如 <code><div></code>，则既可以不包含任何内容，又可以包含另一个元素或者文字。<br />比较常见的无内容元素有：<br /><code><br></code> <code><hr></code> <code><img></code> <code><input></code> <code><link></code> <code><meta></code><br />不太常见的无内容元素有：<br /><code><area></code> <code><base></code> <code><col></code> <code><command></code> <code><embed></code> <code><keygen></code><br /><code><param></code> <code><source></code> <code><track></code> <code><wbr></code><br />现存所有的无内容元素就是以上这些了。<br /><code><br></br></code> 这样的写法是不合法的 HTML 写法，因为它暗示 <code>br</code> 可以包含内容（但 <code><br>你好！</br></code> 是完全没有意义的）。而 <code><br></code> 和 <code><br /></code> 这两种写法都很常见。<br />尽管我们都知道 XHTML 强制你必须写成 <code><br /></code>，但 HTML 里却没有明文规定。 <a name="-"></a></p> <h2 id="5jyixx"><a name="5jyixx" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2><p><a name="4NyPC"></a></p> <h2 id="2o6ex1"><a name="2o6ex1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>追溯历史</h2><p>为了完全地了解无内容元素，我们有必要了解一下它的历史。<br />HTML、XML 和 XHTML 都是基于 SGML 的，SGML 的全称是“标准通用标记语言”，起草于1986年。<br />HTML 和 XML 都派生自 SGML，其中 XML 是 SGML 的约束性子集，而 XHTML 是基于 XML 的。</p> <blockquote> <p>XHTML 基本上和 HTML 一样，但是是基于 XML 的。</p> </blockquote> <p>知道这层关系后，接下来进入本文最有意思的部分。<br />SGML 有一个特性叫做“无尾标签（NET，Null End Tag）”。当标签内只有简单的文字的时候，使用无尾标签就可以无须再闭合这个标签了。比如你可以把 <code><quote>Quoted text</quote></code> 写成<code><quote/Quoted text/</code>。（你没有看错，这个标签中不含 <code>></code>。）<br />那么，不包含任何内容的标签就可以写成 <code><quote//</code> 了，其中 quote 是标签名，第一个 <code>/</code> 用于启用无尾标签，第二个 <code>/</code> 表示无尾标签结束。<br />如果按照这个逻辑，<code><br//</code> 中的前半部分 <code><br/</code> 会被解析为 <code><br></code>，那么 <code><br/></code> 岂不是要被解析为<code><br>></code> 了吗？如果你和我想得一样，你肯定也会觉得这种语法很蠢。<br />不幸的是 HTML4 规范的制定者们不这么认为，并且把它写进规范里了。不过显然当时的浏览器厂商对这种语法也不以为然，支持的程度不大。（在这一点上，说不定浏览器厂商们做了一件好事。）<br />XML （也适用于 XHTML）规范的制定者意识到这种语法不怎么好，就直接没有包含无尾标签这种特性，<br />同时为无内容标签提供了一种比较好理解的语法。这种语法的名字叫做“无元素标签”，它看起来是这样的：<code><br /></code>。这种语法看起来非常自然，因此当时的大多数开发者都认为这才是正确的写法。<br />幸运地是 HTML 一直在改进，W3C 的成员一直在从他们过去作出的错误中学习经验教训。因此 HTML5 相比之前的版本才有这么大的进步。<br />在介绍 HTML5 的新语法时， W3C 说：</p> <blockquote> <p>HTML5 的语法完全兼容 HTML4 和 XHTML1，但是不兼容 SGML 中那些晦涩的 HTML4 特性。比如无尾标签（<code><em/content/</code>）。</p> </blockquote> <p>HTML5 好样的！<br />（我觉得他们应该保留“短标签”特性，比如 <code><strong>不错喲</></code>，我觉得这个特性很酷。不过，至少现在的 HTML 已经不再是那么杂乱无章了。） <a name="oBAPD"></a></p> <h2 id="bu9z0h"><a name="bu9z0h" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2><p><a name="nwmXJ"></a></p> <h2 id="bf8hdx"><a name="bf8hdx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>合法性</h2><p>好吧，我们回到文章开头关于合法性的问题，目前的 HTML5 规范中关于非内容标签的解释是这样的：</p> <blockquote> <p>此类标签应由下列部分组成，顺序须与下表保持一致：</p> </blockquote> <ul> <li>一个 “<” 字符。</li><li>标签名。</li><li>此项可选，一个或多个属性，每一个属性的前面必须有一个或多个空格。</li><li>此项可选，一个或多个空格。</li><li>此项可选，一个 “/” 字符，此项只能在无内容元素中出现。</li><li>一个 “>” 字符。</li></ul> <p>倒数第二部分的 “/” 字符是可选的，而且没有任何实际含义。所以 <code><br></code> 和 <code><br /></code> 其实没有实质区别。 <a name="uE1ih"></a></p> <h2 id="bmqhl9"><a name="bmqhl9" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2><p><a name="UyuXF"></a></p> <h2 id="payvv"><a name="payvv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>正确性</h2><p>喜欢 XML 和 XHTML 的开发者可能会说，“对呀，虽然 <code>/</code> 是可选的，但是 <code><br /></code> 的写法‘更正确’一些。”<br />我必须告诉你你错了。事实上，有观点认为无内容标签里的 <code>/</code> 其实是一个被容忍的语法错误。这种容忍是基于兼容性考虑的，它使得所有浏览器和解析器都把 <code><br></code> 和 <code><br /></code> 同等对待。<br />关于这一点，<a rel="nofollow" href="https://google.github.io/styleguide/htmlcssguide.html#Document_Type">Google 代码风格指</a><a rel="nofollow" href="https://google.github.io/styleguide/htmlcssguide.html#Document_Type">链接</a><a rel="nofollow" href="https://google.github.io/styleguide/htmlcssguide.html#Document_Type">南</a> 也明确规定了不要关闭无内容标签。 <a name="akMYB"></a></p> <h2 id="8lr0ai"><a name="8lr0ai" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h2><p><a name="PSL0B"></a></p> <h2 id="d03ipx"><a name="d03ipx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>缺点</h2><p>当然，不关闭无内容标签也有弊端，不过我认为这掩盖不了它的优点：使你的代码干净简洁。<br />第一个缺点就是开发者必须知道哪些标签的无内容标签。假设你不知道 <code><img></code> 是不是无内容标签，那么当你找不到它的闭合标签时，你就会疑惑到底应不应该关闭这个标签。不过无内容标签总共也只有那么几个，而且一般一眼就能看出来某个标签是不是无内容标签。<br />第二个缺点是编辑器可能对没有闭合的无内容标签处理不好。编辑器的开发者们必须了解无内容标签，提供恰当的语法高亮和代码补全。当你在编辑器里写了一个 <code><input></code>，编辑器必须要知道它后面永远不会接一个 <code></input></code>。<br />但是这些功能实现起来很简单，我所知道的编辑器对这方面支持得都还挺好，所以这算不上一个真正的缺点。</p> <p><a name="F81QH"></a></p> <h2 id="382qwg"><a name="382qwg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>最后的想法：<code><script></code> 标签</h2><p>这个标签真的很困扰我，因为它的含义很简单，写法却很罗嗦。<code><script src="my-script.js"></script></code> 这种写法看起来似乎是错的，因为 <code><script></code> 的内容与 <code>my-script.js</code> 并没有逻辑关联。（HTML 规范允许你同时给它添加内容和 <code>src</code> 属性）<br />问题在于 <code><script></code> 标签不是一个无内容标签，你可以把 JavaScript 写在它里面。所以这里并没有可选的 <code>/</code> 闭合标记（译注：这就是为什么<code><script src="script.js" /></code>的写法是错的）。<br />使用 <code><link></code> 标签来代替 <code><script></code> 就完美了，因为它已经被用于导入外部文件，而且提供了所有必需的属性。当然，Web 平台总是需要考虑向后兼容，不然所有不支持这种语法的旧式浏览器全都无法解析你的页面了。</p> <hr> <p><a name="jW5N7"></a></p> <h1 id="f5hin9"><a name="f5hin9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML标签按功能排序</h1><p><strong>New</strong> : HTML5 中的新标签。 <a name="x7Xo2"></a></p> <h2 id="5gclkm"><a name="5gclkm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>基础</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_doctype.asp"><strong><!DOCTYPE></strong></a><strong> </strong></td> <td style="text-align:left">定义文档类型。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_html.asp"><strong><html></strong></a></td> <td style="text-align:left">定义 HTML 文档。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_title.asp"><strong><title></strong></a></td> <td style="text-align:left">定义文档的标题。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_body.asp"><strong><body></strong></a></td> <td style="text-align:left">定义文档的主体。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_hn.asp"><h1> to <h6></a></td> <td style="text-align:left">定义 HTML 标题。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_p.asp"><p></a></td> <td style="text-align:left">定义段落。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_br.asp"><br></a></td> <td style="text-align:left">定义简单的折行。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_hr.asp"><hr></a></td> <td style="text-align:left">定义水平线。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_comment.asp"><!--...--></a></td> <td style="text-align:left">定义注释。</td> </tr> </tbody> </table> <p><a name="srKmD"></a></p> <h2 id="djeh1r"><a name="djeh1r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>格式</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_acronym.asp"><acronym></a></td> <td style="text-align:left">定义只取首字母的缩写。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_abbr.asp"><abbr></a></td> <td style="text-align:left">定义缩写。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_address.asp"><address></a></td> <td style="text-align:left">定义文档作者或拥有者的联系信息。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_font_style.asp"><b></a></td> <td style="text-align:left">定义粗体文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_bdi.asp"><bdi></a></td> <td style="text-align:left">（New）定义文本的文本方向，使其脱离其周围文本的方向设置。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_bdo.asp"><bdo></a></td> <td style="text-align:left">定义文字方向。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_font_style.asp"><big></a></td> <td style="text-align:left">定义大号文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_blockquote.asp"><blockquote></a></td> <td style="text-align:left">定义长的引用。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_center.asp"><center></a></td> <td style="text-align:left">不赞成使用。定义居中文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><cite></a></td> <td style="text-align:left">定义引用(citation)。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><code></a></td> <td style="text-align:left">定义计算机代码文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_del.asp"><del></a></td> <td style="text-align:left">定义被删除文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><dfn></a></td> <td style="text-align:left">定义定义项目。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><em></a></td> <td style="text-align:left">定义强调文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_font.asp"><font></a></td> <td style="text-align:left">不赞成使用。定义文本的字体、尺寸和颜色</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_font_style.asp"><i></a></td> <td style="text-align:left">定义斜体文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_ins.asp"><ins></a></td> <td style="text-align:left">定义被插入文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><kbd></a></td> <td style="text-align:left">定义键盘文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_mark.asp"><mark></a></td> <td style="text-align:left">（New）定义有记号的文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_meter.asp"><meter></a></td> <td style="text-align:left">（New）定义预定义范围内的度量。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_pre.asp"><pre></a></td> <td style="text-align:left">定义预格式文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_progress.asp"><progress></a></td> <td style="text-align:left">（New）定义任何类型的任务的进度。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_q.asp"><q></a></td> <td style="text-align:left">定义短的引用。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_rp.asp"><rp></a></td> <td style="text-align:left">（New）定义若浏览器不支持 ruby 元素显示的内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_rt.asp"><rt></a></td> <td style="text-align:left">（New）定义 ruby 注释的解释。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_ruby.asp"><ruby></a></td> <td style="text-align:left">（New）定义 ruby 注释。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_s.asp"><s></a></td> <td style="text-align:left">不赞成使用。定义加删除线的文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><samp></a></td> <td style="text-align:left">定义计算机代码样本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_font_style.asp"><small></a></td> <td style="text-align:left">定义小号文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_strike.asp"><strike></a></td> <td style="text-align:left">不赞成使用。定义加删除线文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><strong></a></td> <td style="text-align:left">定义语气更为强烈的强调文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_sup.asp"><sup></a></td> <td style="text-align:left">定义上标文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_sub.asp"><sub></a></td> <td style="text-align:left">定义下标文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_time.asp"><time></a></td> <td style="text-align:left">（New）定义日期/时间。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_font_style.asp"><tt></a></td> <td style="text-align:left">定义打字机文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_u.asp"><u></a></td> <td style="text-align:left">不赞成使用。定义下划线文本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><var></a></td> <td style="text-align:left">定义文本的变量部分。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_wbr.asp"><wbr></a></td> <td style="text-align:left">（New）定义可能的换行符。</td> </tr> </tbody> </table> <p><a name="Ome25"></a></p> <h2 id="eu1hkv"><a name="eu1hkv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_form.asp"><strong><form></strong></a></td> <td style="text-align:left">定义供用户输入的 HTML 表单。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_input.asp"><strong><input></strong></a></td> <td style="text-align:left">定义输入控件。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_textarea.asp"><strong><textarea></strong></a></td> <td style="text-align:left">定义多行的文本输入控件。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_button.asp"><strong><button></strong></a></td> <td style="text-align:left">定义按钮。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_select.asp"><strong><select></strong></a></td> <td style="text-align:left">定义选择列表（下拉列表）。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_optgroup.asp"><optgroup></a></td> <td style="text-align:left">定义选择列表中相关选项的组合。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_option.asp"><strong><option></strong></a></td> <td style="text-align:left">定义选择列表中的选项。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_label.asp"><strong><label></strong></a></td> <td style="text-align:left">定义 input 元素的标注。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_fieldset.asp"><strong><fieldset></strong></a></td> <td style="text-align:left">定义围绕表单中元素的边框。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_legend.asp"><legend></a></td> <td style="text-align:left">定义 fieldset 元素的标题。</td> </tr> <tr> <td style="text-align:left"><isindex></td> <td style="text-align:left">不赞成使用。定义与文档相关的可搜索索引。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_datalist.asp"><datalist></a></td> <td style="text-align:left">（New）定义下拉列表。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_keygen.asp"><keygen></a></td> <td style="text-align:left">（New）定义生成密钥。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_output.asp"><output></a></td> <td style="text-align:left">（New）定义输出的一些类型。</td> </tr> </tbody> </table> <p><a name="UzalS"></a></p> <h2 id="h631f"><a name="h631f" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_frame.asp"><frame></a></td> <td style="text-align:left">定义框架集的窗口或框架。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_frameset.asp"><frameset></a></td> <td style="text-align:left">定义框架集。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_noframes.asp"><noframes></a></td> <td style="text-align:left">定义针对不支持框架的用户的替代内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_iframe.asp"><strong><iframe></strong></a></td> <td style="text-align:left">定义内联框架。</td> </tr> </tbody> </table> <p><a name="0cVbI"></a></p> <h2 id="98wnt"><a name="98wnt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图像</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_img.asp"><strong><img></strong></a></td> <td style="text-align:left">定义图像。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_map.asp"><map></a></td> <td style="text-align:left">定义图像映射。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_area.asp"><area></a></td> <td style="text-align:left">定义图像地图内部的区域。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_canvas.asp"><canvas></a></td> <td style="text-align:left">（New）定义图形。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_figcaption.asp"><figcaption></a></td> <td style="text-align:left">（New）定义 figure 元素的标题。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_figure.asp"><figure></a></td> <td style="text-align:left">（New）定义媒介内容的分组，以及它们的标题。</td> </tr> </tbody> </table> <p><a name="Qppld"></a></p> <h2 id="geux39"><a name="geux39" class="reference-link"></a><span class="header-link octicon octicon-link"></span>音频/视频</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_audio.asp"><audio></a></td> <td style="text-align:left">（New）定义声音内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_source.asp"><source></a></td> <td style="text-align:left">（New）定义媒介源。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_track.asp"><track></a></td> <td style="text-align:left">（New）定义用在媒体播放器中的文本轨道。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_video.asp"><video></a></td> <td style="text-align:left">（New）定义视频。</td> </tr> </tbody> </table> <p><a name="qW7Ji"></a></p> <h2 id="b17j11"><a name="b17j11" class="reference-link"></a><span class="header-link octicon octicon-link"></span>链接</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_a.asp"><strong><a></strong></a></td> <td style="text-align:left">定义锚。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_link.asp"><strong><link></strong></a></td> <td style="text-align:left">定义文档与外部资源的关系。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_nav.asp"><nav></a></td> <td style="text-align:left">（New）定义导航链接。</td> </tr> </tbody> </table> <p><a name="WSgjy"></a></p> <h2 id="1zujmv"><a name="1zujmv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_ul.asp"><strong><ul></strong></a></td> <td style="text-align:left">定义无序列表。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_ol.asp"><strong><ol></strong></a></td> <td style="text-align:left">定义有序列表。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_li.asp"><strong><li></strong></a></td> <td style="text-align:left">定义列表的项目。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_dir.asp"><dir></a></td> <td style="text-align:left">不赞成使用。定义目录列表。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_dl.asp"><strong><dl></strong></a></td> <td style="text-align:left">定义定义列表。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_dt.asp"><strong><dt></strong></a></td> <td style="text-align:left">定义定义列表中的项目。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_dd.asp"><strong><dd></strong></a></td> <td style="text-align:left">定义定义列表中项目的描述。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_menu.asp"><menu></a></td> <td style="text-align:left">定义命令的菜单/列表。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_menuitem.asp"><menuitem></a></td> <td style="text-align:left">定义用户可以从弹出菜单调用的命令/菜单项目。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_command.asp"><command></a></td> <td style="text-align:left">（New）定义命令按钮。</td> </tr> </tbody> </table> <p><a name="wJ5yG"></a></p> <h2 id="6qvybq"><a name="6qvybq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_table.asp"><strong><table></strong></a></td> <td style="text-align:left">定义表格</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_caption.asp"><strong><caption></strong></a></td> <td style="text-align:left">定义表格标题。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_th.asp"><strong><th></strong></a></td> <td style="text-align:left">定义表格中的表头单元格。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_tr.asp"><strong><tr></strong></a></td> <td style="text-align:left">定义表格中的行。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_td.asp"><strong><td></strong></a></td> <td style="text-align:left">定义表格中的单元。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_thead.asp"><thead></a></td> <td style="text-align:left">定义表格中的表头内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_tbody.asp"><tbody></a></td> <td style="text-align:left">定义表格中的主体内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_tfoot.asp"><tfoot></a></td> <td style="text-align:left">定义表格中的表注内容（脚注）。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_col.asp"><col></a></td> <td style="text-align:left">定义表格中一个或多个列的属性值。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_colgroup.asp"><colgroup></a></td> <td style="text-align:left">定义表格中供格式化的列组。</td> </tr> </tbody> </table> <p><a name="8Q7m2"></a></p> <h2 id="efx552"><a name="efx552" class="reference-link"></a><span class="header-link octicon octicon-link"></span>样式/节</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_style.asp"><strong><style></strong></a></td> <td style="text-align:left">定义文档的样式信息。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_div.asp"><strong><div></strong></a></td> <td style="text-align:left">定义文档中的节。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_span.asp"><strong><span></strong></a></td> <td style="text-align:left">定义文档中的节。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_header.asp"><header></a></td> <td style="text-align:left">（New）定义 section 或 page 的页眉。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_footer.asp"><footer></a></td> <td style="text-align:left">（New）定义 section 或 page 的页脚。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_section.asp"><section></a></td> <td style="text-align:left">（New）定义 section。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_article.asp"><article></a></td> <td style="text-align:left">（New）定义文章。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_aside.asp"><aside></a></td> <td style="text-align:left">（New）定义页面内容之外的内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_details.asp"><details></a></td> <td style="text-align:left">（New）定义元素的细节。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_dialog.asp"><dialog></a></td> <td style="text-align:left">（New）定义对话框或窗口。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_summary.asp"><summary></a></td> <td style="text-align:left">（New）为 <details> 元素定义可见的标题。</td> </tr> </tbody> </table> <p><a name="A776j"></a></p> <h2 id="g6wfbk"><a name="g6wfbk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>元信息</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_head.asp"><strong><head></strong></a></td> <td style="text-align:left">定义关于文档的信息。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_meta.asp"><strong><meta></strong></a></td> <td style="text-align:left">定义关于 HTML 文档的元信息。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_base.asp"><base></a></td> <td style="text-align:left">定义页面中所有链接的默认地址或默认目标。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_basefont.asp"><basefont></a></td> <td style="text-align:left">不赞成使用。定义页面中文本的默认字体、颜色或尺寸。</td> </tr> </tbody> </table> <p><a name="pPIph"></a></p> <h2 id="7yr3l9"><a name="7yr3l9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>编程</h2><table> <thead> <tr> <th style="text-align:left">标签</th> <th style="text-align:left">描述</th> </tr> </thead> <tbody> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_script.asp"><strong><script></strong></a></td> <td style="text-align:left">定义客户端脚本。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_noscript.asp"><noscript></a></td> <td style="text-align:left">定义针对不支持客户端脚本的用户的替代内容。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_applet.asp"><applet></a></td> <td style="text-align:left">不赞成使用。定义嵌入的 applet。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_embed.asp"><embed></a></td> <td style="text-align:left">（New）为外部应用程序（非 HTML）定义容器。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_object.asp"><object></a></td> <td style="text-align:left">定义嵌入的对象。</td> </tr> <tr> <td style="text-align:left"><a rel="nofollow" href="http://www.w3school.com.cn/tags/tag_param.asp"><param></a></td> <td style="text-align:left">定义对象的参数。</td> </tr> </tbody> </table> <hr> <p>HTML全标签测试<br /></p> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This is study note</title> <base href="我是做外链的，一般在head里面" target="_blank"> <style type="text/css">里面可加n多css</style> <script type="text/javascript">javescript语句</script> <noscript>不支持javescript的替代语句</noscript> </head> <body> <h1>h1-h6是标题标签</h1> <p>p是段落标签</p> <a href="https://www.baidu.com" target="_blank">a标签是插入超链接的，herf指定链接地址，target指定新窗口开启</a> <br/><!--这是一个换行符--> <wbr><!-- 定义何处适合换行，窗口大小不够则不换行 --> <img src="a.jpg" alt="这是一个图片，加载不出来时显示我" width="100" height="60"><!--加载图像的标签--> <hr/><!--这是一条水平线--> <abbr title="China">CN</abbr><!--定义缩写--> <address> rcw <a href="mailto:small_pupil@126.com"></a> <br> tel:18127655676 </address><!--定义地址，签名或者文档的作者身份--> <area shape="范围，tect/circle" coords="坐标" href="链接地址"><!-- 可以在图像上划分区域，可点击返回herf --> <map>一般和area一起用，管理里面的area</map> <article>我这里指定面页的独立部分内容，也可以是页眉</article> <header>介绍性内容，在article里面</header> <aside>语义化标签，我也不知道什么意思</aside> <audio controls="controls"> <source src="链接地址" type="视频类型"><!-- source可以为图片，视频，音频元素指定资源 --> </audio><!-- video也是这样用的 --> <b>我可以把字体加粗</b> <ul><!-- 无序表格；ol有序列表 --> <li>我是做表格用的，必须在ul里或者ol里面</li> </ul> <bdi>把我隔离出来</bdi> <bdo dir="rtl">我可以把文字排序倒置，必须有dir</bdo> <blockquote cite="引用地址">我是被自动缩进的引用，我可以很长很长</blockquote> <cite>我是引用，我将变成斜体字</cite> <button type="button" onclick="alert(我是弹窗内容)">都用我来设置按钮</button> <canvas id="我的标识记号">我是画布，想让我变得更美，就要用script</canvas> <caption>我是表格的名字，我出现在table里面</caption> <col span="2" style="background-color:red"><!-- 我在table下的colgroup中使用，来设置表格的列属性值 --> <colgroup>我把表格按列分组了</colgroup> <datalist id="input的那个表格list"> <option value="我是input那个表格里的下拉选项"></option> </datalist><!--我与input一起用，做出来的表格高大上呦，还能让用户选择--> <dl> <dt>小米</dt> <dd>为发骚而生</dd> </dl><!--看懂了吗？我跟ol，ul差不多，dt是名人，dd要拍名人的马屁，看出来了吧，dl是代表一个描述列表--> <del>我会被划上删除线</del> <s>我也会被划上删除线</s> <ins>我会被划上下划线，表示修改</ins> <u>我才是名正言顺的下划线</u> <details> <summary>点我能看到很多</summary> <p>很多</p> </details><!--创建一个可折叠的东西，点开你能看到很多--> <em>我是强调文本</em><br> <strong>我能加粗文本</strong><br> <dfn>反正我是斜的，定义项目</dfn><br> <code>一段电脑代码</code><br> <samp>计算机样本</samp><br> <kbd>键盘输入</kbd><br> <var>变量</var> <dialog open>我差不多一个是个th的批注，但我很大，还不能隐藏</dialog> <div class="属性" id="自己体会" lang="语言">我将被很多属性标记，太幸福了</div> <embed src="你竟然要把我嵌入面页，呜呜。。。"></embed> <fieldset>我被用在form下，我下面的input属于我，哼</fieldset> <legend>我替fieldset管理input</legend> <figure><!--我是独立的，想引用谁就是谁--> <figcaption>我属于figure</figcaption> </figure> <footer>我相当于页脚</footer> <form action="把数据存起来，怎么样" method="传输方式post/get">我向服务器传输数据</form> <hgroup>标题集合</hgroup> <i>斜体文字</i> <iframe src="内联框架"></iframe> <input type="控件类型" name="给控件起个名字" value="把我传给数据库"> <label>单选控件类型</label> <link rel="stylesheet" type="text/css" href="文件地址吧"><!-- 我一般用来链接css --> <make>我将被标记，重点显示哦</make> <menu>我定义一个命令列表或菜单，但好像没有浏览器支持我</menu> <meta charset="utf-8"><!-- 一般显示在head里 --> <meter value="2" min="0" max="10">0到10之间，输出2，相当于20%</meter> <nav>导航链接，索引，目录，菜单</nav> <object>外部资源 <param name="" value="">定义资源 </object> <select>定义一个下拉菜单 <optgroup>下拉菜单里的分类 <option>分类里面的选项</option> </optgroup> </select> <output>显示计算或用户操作的结果</output> <pre>你怎样输入的， 我就怎么显示</pre> <progress value="88" max="100"><!-- 下载任务完成88% --> <q>显示为引号包含</q> <ruby>帅<rp>(</rp><rt>shuai</rt><rp>)</rp></ruby><!-- 作为注释标签使用表示很难懂，不知道为什么，但就是这样子 --> <section>定义文档独立的一部分</section> <small>我是最小号的字体</small> <span style="样式">想给我加样式就这么用</span> <sub>下标</sub> <sup>上标</sup> <table border="1">大表哥，里面有很多tr组成,边框为1 <thead><!-- 我和tbody，tfoot一样，不会对表格造成什么影响，但可以通过我们为每一行加css --> <tr>横向定义的表格，表示一行数据 <th>加粗版表头文档</th> <td>表中内容</td> </tr> </thead> </table> <textarea rows="10" cols="30">我是一个文本框</textarea> <time>时间：21：00</time> <track kind="文本轨道的文本类型" src="轨道文件的url"><!-- 可以叫我字幕 --> </body> </html> </code></pre> <p><a rel="nofollow" href="https://blog.csdn.net/qq_37285854/article/details/89884549">https://blog.csdn.net/qq_37285854/article/details/89884549</a><br /><a rel="nofollow" href="https://blog.csdn.net/qq_15260769/article/details/80601492">https://blog.csdn.net/qq_15260769/article/details/80601492</a></p>
若有收获，就点个赞吧
0 人点赞
