HTML 5 的语法变化

标签不再区分大小写
元素可以省略结束标签
允许省略属性值的属性HTML 5 中允许省略属性值的属性：checked、readonly、disabled、selected、multiple、required 等
允许属性值不使用引号

HTML 元素

- 在 HTML 中，空标签没有结束标签
- 如：、、
  This is a searchable index. Enter search keywords:
  、、、、、、、、、、、、、、<spacer ></spacer>、<wbr ></wbr>、<!DOCTYPE html>、</li></ul> </li></ul> <h1 id="e1emv0"><a name="e1emv0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 属性</h1><ul> <li><p>属性值应该始终被包括在引号内</p> </li><li><p>核心属性</p> <ul> <li>id：定义元素的唯一id </li><li>class：定义元素的类名（classname）</li><li>style：规定元素的行内样式（inline style）</li><li>title：规定元素的额外信息，可在工具提示中显示（在鼠标移到元素上时显示一段工具提示文本）</li><li>hidden：为 true 时，通知浏览器不显示该组件</li></ul> <p><a href="https://sdky.gitee.io/img/HTML5标签集合.jpg"> <img src="/projects/sdky-java-note/ccf46279036d11456a90cc9ee96cccf0.jpeg" alt="HTML5标签集合"> </a><br>图 1 HTML5标签集合</p> </li></ul> <h1 id="d7cnum"><a name="d7cnum" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文档头部 <head></h1><ul> <li>在元素中可以插入脚本（scripts）、样式文件（CSS）、及各种 meta 信息</li><li>，定义头部标签<ul> <li><title>，定义文档标题</li><li><meta>，基本的元数据，通常以名称/值对出现，属性：name（把 content 属性关联到一个名称）、http-equiv（把 content 属性关联到 HTTP 头部）、content（必需属性，与 http-equiv 或 name 属性相关的元信息）、charset（文档的字符编码）</li><li><link>：定义文档与外部资源之间的关系，属性：rel（必需属性，当前文档与被链接文档之间的关系，如 stylesheet、icon）、type（被链接文档的 MIME 类型）、href（被链接文档的位置）</li><li><style>，用于引入样式定义，必需属性：type</li><li><script>，用于加载脚本文件，属性 type：指示脚本的 MIME 类型，默认值是 "text/javascript"；async 属性：仅适用于外部脚本，规定脚本将被异步执行，属性值 "async"；defer 属性：规定是否对脚本执行进行延迟，直到页面加载为止，属性值 "defer"<br></title></li></ul> </li></ul> <pre><code><script type="text/javascript"> function goPage(num) { // 找到表单，给 currentPage 设值，然后提交 var form1= document.getElementById("form1"); form1.currentPage.value=num; form1.submit(); } </script> </code></pre> <h1 id="awymv"><a name="awymv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块</h1><h2 id="apwiad"><a name="apwiad" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块级元素（block element）</h2><ul> <li>总是在<strong>新行</strong>上开始</li><li>高度，行高以及外边距和内边距都可控制</li><li>宽度缺省是它的容器的 100%，除非设定一个宽度</li><li>可以容纳内联元素和其它块级元素</li><li>常见块级元素：<h1>、<div>、<p>、</p><ul>、、、<pre></pre><table><form></form></table></ul></div></h1></li></ul> <h2 id="82q3m"><a name="82q3m" class="reference-link"></a><span class="header-link octicon octicon-link"></span>内联元素（inline element）</h2><ul> <li>和其它元素都在一行上</li><li>高、行高及外边距和内边距不可改变</li><li>宽度就是它的文字或图片的宽度，不可改变</li><li>内联元素只能容纳文本或者其它内联元素</li><li>常见内联元素：、<b>、<strong>、、<a>、<img/>、<input/>、<select>、</select><textarea>、<label><br></textarea></a></strong></b></li></ul> <h2 id="b4l2xy"><a name="b4l2xy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>布局</h2><ul> <li><div>，块级元素，用于组合其他 HTML 元素的容器</li><li>，内联元素，用于组合文档中的内联元素（默认不会换行）<br></div></li></ul> <h1 id="89h2s3"><a name="89h2s3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文档章节</h1><ul> <li>、<header>、<nav>、<asside>、<article>、<section>、<footer>、<hx><br></hx></footer></section></article></asside></nav></header><br><a href="https://sdky.gitee.io/img/主体结构标签.jpg"> <img src="/projects/sdky-java-note/aa72ab2c4191a4813e2b2fe56b005554.jpeg" alt="主体结构标签"> </a><br>图 2 主体结构标签</li></ul> <h1 id="738h24"><a name="738h24" class="reference-link"></a><span class="header-link octicon octicon-link"></span>基本标签</h1><ul> <li><h1> 至 </h1><h6>，标题</li><li><p>，段落，会自动在其前后创建一些空白</li><li><br/>，换行，空标签</li><li></p><hr/>，水平线，空标签</li><li> ，注释<br></h6></li></ul> <h1 id="bph4nt"><a name="bph4nt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本格式化</h1><ul> <li><font>，定义字体颜色、大小、字体，属性：color、size、face</li><li><b>，定义粗体文本</li><li><strong>，定义粗体文本</li><li><i>，定义斜体字</li><li><em>，定义强调文本，实际效果与斜体文本差不多</li><li><small>，定义小号字体文本</li><li><sub>，定义下标文本</li><li><sup>，定义上标文本</li><li><tt>，定义等宽文本</li><li><ins>，定义插入字</li><li><del>，定义删除字</li><li><mark>，定义带有记号（高亮）的文本</li><li><cite>，定义作品的标题</li><li><q>，定义一个短的引用，在引用的周围插入引号</li><li><bdo>，定义文本显示方向，属性 dir 的值：ltr（左到右）、rtl（右到左）</li><li><pre>，预格式文本，会保留空格、回车、Tab 键和其它格式字符</li><li><address>，地址</li><li>注意：HTML 代码中的所有连续的空行和换行被显示为一个空格<br></address></pre></bdo></q></cite></mark></del></ins></tt></sup></sub></small></em></i></strong></b></font></li></ul> <h1 id="dojydz"><a name="dojydz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超链接 <a></h1><ul> <li><p>作用</p> <ul> <li>创建指向另一个文档的链接</li><li>创建一个文档内部的锚点</li><li>链接到 Email 地址</li></ul> </li><li><p>属性</p> <ul> <li>href，其属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段<ul> <li><h1 id="b4fogw"><a name="b4fogw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>包含了一个位置信息，默认的锚是 #top 也就是网页的上端，在页面很长的时候会使用 # 来定位页面的具体位置，格式为：#id属性、# 标签的 name 属性</h1></li><li>定义一个死链接 <code>href="javascript:void(0);"</code></li><li>链接到 Email 地址 <code>href="mailto:admin@gmail.com"</code></li><li>拨号 <code>href="tel:13612345678"</code></li></ul> </li><li>target，被链接的文档在何处显示，值： <em>self（自身框架）、 _blank（新窗口）、_parent（父框架）、_top（整个窗口）、_framename</em> （在指定的框架中打开被链接文档）</li></ul> </li></ul> <h1 id="f0nndm"><a name="f0nndm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图片 <img /></h1><ul> <li>空标签</li><li>属性<ul> <li>alt，必需属性，定义有关图形的短的描述</li><li>src，必需属性，指定图片文件所在的位置</li><li>height，定义图像的高度</li><li>width，定义图像的宽度</li><li>usemap，将图像定义为图像映射（当用户单击其中某一个区域时，将被链接到不同的文档中）</li></ul> </li></ul> <h1 id="arisq5"><a name="arisq5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表</h1><ul> <li><p><ul>，定义无序列表</p> <ul> <li>，定义列表项目</li></ul> </li><li><p>，定义有序列表，属性 type、start</p> <ul> <li>，定义列表项目</li></ul> </li><li><p>，自定义列表</p> <ul> <li>，定义标题列表项</li><li>，定义普通列表项<br></ul></li></ul> </li></ul> <h1 id="8h7l58"><a name="8h7l58" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格 <table></h1><ul> <li><p>属性：border="1"（边框宽度）、cellpadding="0"、cellspacing="0"、width（表格宽度）</p> </li><li><p>，表格标题</p> </li><li><p>，表头</p> </li><li>，表格页脚</li><li>，表格主体<ul> <li>，表格行，属性：align（值：left、center、right）、bgcolor<ul> <li>，表头单元格，文本显示为粗体且居中</li><li>，标准单元格，默认显示为正常字体且左对齐，属性包括：colspan（规定单元格可横跨的列数）、rowspan（规定单元格可横跨的行数）、height、width</li></ul> </li></ul> </li></ul> <h1 id="85kbf9"><a name="85kbf9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单和输入 <form></h1><ul> <li>属性：action（必需属性，指定表单被提交的地址）、method、enctype（定义对表单数据进行编码的方式，值：application/x-www-form-urlencoded、multipart/form-data、text/plain）、name、target（规定在何处打开 action 属性的 URL）、autocomplete（表单是否启用自动完成功能）、novalidate（当提交表单时不对其进行验证）</li><li>表单控件的 name 属性指定请求参数名，value 属性指定请求参数值</li><li>没有 name 属性的表单控件不会生成请求参数</li><li>如果多个表单控件有相同的 name 属性，则多个表单控件只生成一个请求参数，只是该参数有多个值</li><li>表单控件可以使用 form 属性指定所属的一个或多个表单</li><li><fieldset>，将表单内的相关元素分组，用 <legend> 标签定义分组的标题</li><li><input/>，输入域，空标签，属性包括：<ul> <li>type，定义输入类型，其属性值：text、password、radio（单选框）、checkbox（复选框）、file（文件上传域）、hidden（隐藏域）、image、submit（提交按钮）、reset、button、search、email、number、url、date、time、datetime、datetime-local</li><li>name，input 元素的名称</li><li>value，input 元素的值</li><li>checked，预先选定复选框或单选按钮</li><li>disabled，禁用此 input 元素</li><li>required，在提交表单之前必须输入（不能为空）</li><li>accept，规定通过<strong>文件上传</strong>进行提交的文件类型，可用值：image/<em>，audio/</em>、vidio/*，不带“;”的 MIME type，以“.”开始的文件后缀名（有多种类型时用","分隔）</li><li>multiple，允许一个以上的值</li><li>placeholder，提供一种提示，描述输入域所期待的值</li><li>maxlength，指定文本框中所允许输入的最大字符数</li><li>readonly，指定该文本框内的值不允许用户修改</li><li>min、max、step：这 3 个属性只对数值类型（type="number"）、日期类型的 <input/> 元素有效，这 3 个属性控制该表单控件的值必须在 min~max 之间，并符合 step 步长</li><li>pattern，规定输入字段的值的模式或格式，可用 title 属性来描述模式</li><li>autocomplete：规定输入字段是否应该启用自动完成功能，属性值：on、off</li></ul> </li><li><select>，下拉菜单或列表框，属性：name、multiple（是否允许多选）、size（可见选项的数目）（一旦指定了 multiple 或 size 属性，</select> 标签就会自动生成列表框）<ul> <li><optgroup>，定义选项组，属性：label、disabled</li><li><option>，菜单项或列表项，属性：value、selected（是否处于被选中状态）、disabled、</li></ul> </li><li><textarea>，多行文本域，属性：cols（宽度）、rows（高度）、wrap（规定在表单提交时文本区域中的文本是如何换行的，默认值为 soft，文本不换行，值为 hard，文本换行）</li><li><button>，按钮，属性：name、value、type（属性值：submit、button、reset）、disabled<ul> <li>注意：如果在 <form> 中使用了 <button>，其 type 属性的默认值：IE 浏览器中是 "button"，而 W3C 浏览器中是 "submit"</li></ul> </li><li><label>，为 input 元素定义标注（当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上），for 属性规定 label 与哪个表单元素（hidden 除外）绑定（其属性值应设置为相关元素的 <strong>id 属性</strong>的值），如果没有指定 for 属性，则为第一个子孙可关联元素<br></textarea></option></optgroup></legend></fieldset></li></ul> <h1 id="35rxvc"><a name="35rxvc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架</h1><ul> <li>，定义框架集，属性：rows、clos</li><li>，定义框架集的窗口或框架，scrolling、noresize</li><li><noframes>，定义针对不支持框架的用户的替代内容，子标签 <body></li><li><iframe>，定义内联框架，属性：src（指定该 iframe 装载的页面的 url ）、align、height、width、frameborder等<br></noframes></li></ul> <h1 id="75ghpj"><a name="75ghpj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>音频与视频</h1><h2 id="2r890n"><a name="2r890n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 标签</h2><ul> <li><audio></li><li><video> </li><li><p>属性：</p> <ul> <li>src：必须属性，音视频文件的 URL</li><li>controls：是否向用户显示控件。</li><li>autoplay：音视频在就绪后是否马上播放</li><li>preload：可取值为“none”（默认值）、“metadata”、“auto”，音频在页面加载时进行加载，并预备播放（如果使用“autoplay”，则忽略该属性）</li><li>loop：当音视频结束时是否重新开始播放<br></video></audio></li></ul> </li></ul> <h2 id="1zm3n0"><a name="1zm3n0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Audio/Video DOM 对象</h2><ul> <li><p>控制多媒体播放<code>load()</code>：加载媒体内容<code>play()</code>：开始播放<code>pause()</code>：暂停播放playbackRate：播放速度currentTime：播放进度volume：音量muted：静音</p> </li><li><p>查询多媒体状态paused：是否暂停seeking：是否正在跳转ended：是否播放完成duration：媒体时长initialTime：媒体开始时间</p> </li><li><p>多媒体相关事件loadstart：开始请求媒内容loadmetadata：媒体元数据已经加载完成canplay：加载了一些内容，可以开始播放play：调用 play()，或设置了 autoplaywaiting：缓冲数据不够，播放暂停playing：正在播放</p> </li></ul> <h1 id="cbem83"><a name="cbem83" class="reference-link"></a><span class="header-link octicon octicon-link"></span>字符实体</h1><ul> <li><p><code><span title=" ">&nbsp;</code>（不换行空格，其占据宽度受字体影响）、<code><span title=" ">&ensp;</code>（其占据的宽度正好是 1/2 个中文宽度，且基本上不受字体影响）、<code><span title=" ">&emsp;</code>（其占据的宽度正好是 1 个中文宽度，且基本上不受字体影响）</p> <p><a href="https://sdky.gitee.io/img/HTML字符实体.jpg"> <img src="/projects/sdky-java-note/2e2c13fb9809a33cbadf5aeaba8066ca.jpeg" alt="HTML字符实体"> </a><br>图 3 HTML字符实体</p> </li></ul> </plaintext></nextid></li></ul></li></ul>

02 HTML

HTML 5 的语法变化

HTML 元素