<!DOCTYPE html><html lang=\"大众zh\"大众><head><meta charset=\"大众utf-8\公众><title>网页标题</title></head><body>内容......</body></html><head> <meta charset=\"大众UTF-8\"大众> <meta name=\"大众viewport\公众 content=\公众width=device-width, initial-scale=1.0\"大众> <meta http-equiv=\"大众X-UA-Compatible\"大众 content=\"大众ie=edge\"大众> <title>Document</title> <link rel=\"大众stylesheet\"大众 href=\"大众css/style.css\公众></head><meta http-equiv=\"大众Content-Type\"大众 content=\公众text/html; charset=utf-8\"大众><link rel=\"大众icon\"大众 type=\"大众image/icon\"大众 href=\"大众/favicon.ico\"大众 /><meta http-equiv=\"大众refresh\"大众 content=\"大众5;URL='http://thetudors.example.com/'\公众 />基本标签（Basic Tags）<h1>最大的标题</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的标题</h6> <p>这是一个段落。</p><br> （换行）<hr> （水平线）<!-- 这是注释 --><!--[if lt IE 9]> <script src=\"大众http://unpkg.com/html5shiv.min.js\公众></script><![endif]-->文本格式化（Formatting）<b>粗体文本</b><code>打算机代码</code><em>强调文本</em><i>斜体文本</i><kbd>键盘输入</kbd><pre>预格式化文本</pre><small>更小的文本</small><strong>主要的文本</strong> <abbr> UFO（缩写）</abbr><address> （联系信息）</address><bdo dir=\公众rtl\"大众> （笔墨方向）</bdo><blockquote> （从另一个源引用的部分）</blockquote><cite> （引用）</cite><del>删除的文本</del><ins>插入的文本</ins><sub>下标<sub><sup>上标</sup>链接（Links）普通的链接：<a href=\"大众http://2293.ml\"大众>链接文本</a>图像链接： <a href=\"大众http://www.example.com/\公众 target=\"大众_blank\公众><img src=\公众URL\"大众 alt=\"大众更换文本\公众></a>target: _self _blank _parent _top rel=\"大众noreferrer\"大众 rel=\"大众noopener\公众 <br><a href=\"大众tel:+123456789\"大众>Phone</a><a href=\"大众mailto:webmaster@example.com\"大众>发送e-mail</a>书签：<a name=\公众tips\公众>提示部分</a><a href=\"大众#tips\"大众>跳到提示部分</a>图片（Images）<img src=\"大众URL\公众 alt=\"大众更换文本\"大众 height=\"大众42\"大众 width=\"大众42\"大众>样式/区块（Styles/Sections）<style type=\"大众text/css\"大众>h1 {color:red;}p {border:1px dashed blue;}</style><div>文档中的块级元素。 HTTP request methods: HEAD GET POST PUT DELETE CONNECT OPTIONS TRACE PATCH <span dir=\公众rtl\"大众>אה, אני אוהב להיות ליד חוף הים</span></div><span>文档中的内联元素</span>无序列表<ul> <li>项目</li> <li>项目</li></ul>有序列表<ol> <li>第一项</li> <li>第二项</li></ol>定义列表<dl> <dt>dinosaur</dt> <dd>n.恐龙；守旧后进的人；过期掉队的东西<br>[网络]恐龙世纪；古生恐龙；小恐龙</dd> <dt>pug</dt> <dd>n.哈巴狗 [网络]巴哥犬；八哥犬；帕格</dd></dl>表格（Tables）<table border=\"大众1\"大众> <caption>标题</caption> <thead> <tr> <th>列1</th> <th colspan=\公众2\"大众>合并的两列</th> </tr> </thead> <tr> <td>1，1</td> <td>1，2</td> <td>1，3</td> </tr></table>框架（Iframe）<iframe src=\"大众data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D\公众></iframe><iframe width=\公众560\"大众 height=\公众315\"大众 src=\"大众https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG\"大众 frameborder=\公众0\"大众 allow=\"大众autoplay; encrypted-media\"大众 allowfullscreen></iframe>表单（Forms）<form action=\"大众demo_form.php\公众 method=\"大众post\"大众><fieldset><legend>栏目1</legend> <input type=\"大众text\"大众 name=\公众email\"大众 size=\"大众40\"大众 maxlength=\公众50\公众> <input type=\公众password\"大众 name=\"大众pwd\公众></fieldset><input type=\"大众range\"大众 name=\"大众\"大众 min=\"大众\公众 max=\"大众\"大众><input type=\"大众week\公众 name=\"大众\"大众><input type=\"大众color\"大众 name=\公众\公众><input type=\"大众checkbox\"大众 checked=\公众checked\"大众><input type=\"大众radio\公众 checked=\公众checked\公众><input type=\公众submit\公众 value=\"大众Send\公众><input type=\"大众reset\"大众><input type=\公众hidden\"大众><select name=\"大众favFruit\"大众 multiple size=\"大众4\公众><option>苹果</option><option selected=\"大众selected\"大众>喷鼻香蕉</option><option>樱桃</option></select><textarea name=\"大众comment\公众 rows=\"大众60\公众 cols=\公众20\"大众>!\公众#$%&'()+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹</textarea> </form>实体（Entities）< > & \"大众 © ™ © < > & \"大众 © ™ space © :snail: ᓆ ᓆHTML5供应了新的元向来创建更好的页面构造：标签 描述<article> 定义页面独立的内容区域。<aside> 侧边栏内容。<bdi> 一段分外文本方向的文本。<command> 定义命令按钮，比如单选按钮、复选框或按钮<details> 用于描述文档或文档某个部分的细节<dialog> 定义对话框，比如提示框<summary> 标签包含 details 元素的标题<figure> 规定独立的流内容（图像、图表、照片、代码等等）。<figcaption> 定义 <figure> 元素的标题<footer> 定义 section 或 document 的页脚。<header> 定义了文档的头部区域<mark> 带有暗号的文本。<meter> 定义度量衡。仅用于已知最大和最小值的度量。<nav> 导航链接的部分。<progress> 任何类型的任务的进度。<ruby> 定义 ruby 注释（中文注音或字符）。<rt> 定义字符（中文注音或字符）的阐明或发音。<rp> 在 ruby 注释中利用，定义不支持 ruby 元素的浏览器所显示的内容。<section> 节，区段。<time> 定义日期或韶光。<wbr> 规定在文本中的何处适宜添加换行符。<video width=\"大众320\公众 height=\公众240\"大众 controls> <source src=\"大众movie.mp4\公众 type=\"大众video/mp4\公众> <source src=\"大众movie.ogg\"大众 type=\"大众video/ogg\公众> 如果你的浏览器不支持 video 标签此行将显示...</video><audio src=\"大众horse.mp3\公众 controls></audio><audio controls autoplay> <source src=\"大众horse.ogg\"大众 type=\"大众audio/ogg\公众> <source src=\"大众horse.mp3\"大众 type=\公众audio/mpeg\公众> <source src=\"大众water.wav\"大众 type=\公众audio/wav\"大众>如果你的浏览器不支持 audio 元素此行将显示...</audio><canvas id=\公众chessboard\"大众 width=\公众150\公众 height=\"大众150\"大众></canvas>
不推举利用的旧版本的标签如<u></u>等没有包含！
这份cheatsheet基本上涵盖了HTML5的全部tags和除了表单Forms之外的常见用法，当然它也没有包括Javascript和CSS。
你知道的，除了复制粘贴外，还可
选择文本后按住CTRL键拖放……大概，你已经整理一份更加详尽高超的HTML干系速查表，正在秒速打造出品你的流光溢彩的艺术网页！
