首页 › HTML论坛 › html5

明光正能量 發表於 2023-6-10 00:17:00

html5

<h1 id="html5">html5</h1>
<h2 id="html5简介">HTML5简介</h2>
<h3 id="什么是html5">什么是HTML5</h3>
<ul>
<li><code>HTML5</code>是新一代的<code>HTML</code>标准，2014年10月由万维网联盟（<code>W3C</code>）完成标准制定。</li>
<li>官网地址：
<ul>
<li>W3C</li>
<li>WHATWG</li>
</ul>
</li>
<li><code>HTML5</code>在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端。</li>
</ul>
<h3 id="html5优势">HTML5优势</h3>
<ol>
<li>针对<code>JavaScript</code>，新增了很多可操作的接口。</li>
<li>新增了一些语义化标签、全局属性。</li>
<li>新增了多媒体标签，可以很好的替代<code>flash</code>。</li>
<li>更加侧重语义化，对于<code>SEO</code>更友好。</li>
<li>可移植性好，可以大量应用在移动设备上。</li>
</ol>
<h3 id="html5兼容性">HTML5兼容性</h3>
<p>支持：<code>Chrome</code>、<code>Safari</code>、<code>Opera</code>、<code>Firefox</code>等主流浏览器。</p>
<blockquote>
<p><code>IE</code>浏览器必须是<code>9</code>及以上版本才支持<code>HTML5</code>，且<code>IE9</code>仅支持部分<code>HTML5</code>新特性。</p>
</blockquote>
<h2 id="新增语义化标签">新增语义化标签</h2>
<h3 id="新增布局标签">新增布局标签</h3>
<table>
<thead>
<tr>
<th>标签名</th>
<th>语义</th>
<th>单/双标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>header</td>
<td>整个页面，或部分区域的头部</td>
<td>双</td>
</tr>
<tr>
<td>footer</td>
<td>整个页面，或部分区域的底部</td>
<td>双</td>
</tr>
<tr>
<td>nav</td>
<td>导航</td>
<td>双</td>
</tr>
<tr>
<td>article</td>
<td>文章、帖子、杂志、新闻、博客、评论等。</td>
<td>双</td>
</tr>
<tr>
<td>section</td>
<td>页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。</td>
<td>双</td>
</tr>
<tr>
<td>aside</td>
<td>侧边栏</td>
<td>双</td>
</tr>
<tr>
<td>main</td>
<td>文档的主要内容 (<code>WHATWG</code>没有语义，<code>IE</code>不支持)，几乎不用。</td>
<td>双</td>
</tr>
<tr>
<td>hgroup</td>
<td>包裹连续的标题，如文章主标题、副标题的组合 （<code>W3C</code>将其删除）</td>
<td>双</td>
</tr>
</tbody>
</table>
<p>关于 article 和 section ：</p>
<blockquote>
<ol>
<li><code>artical</code>里面可以有多个<code>section</code>。</li>
<li><code>section</code>强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用<code>section</code>元素。</li>
<li><code>article</code>比<code>section</code>更强调独立性，一块内容如果比较独立、比较完整，应该使用<code>article</code>元素。</li>
</ol>
</blockquote>
<h3 id="新增状态标签">新增状态标签</h3>
<p>meter标签</p>
<ul>
<li>
<p>语义：定义已知范围内的标量测量。也被称为<code>gauge</code>（尺度），双标签，例如：电量、磁盘用量等。</p>
</li>
<li>
<p>常用属性如下：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>high</td>
<td>数值</td>
<td>规定高值</td>
</tr>
<tr>
<td>low</td>
<td>数值</td>
<td>规定低值</td>
</tr>
<tr>
<td>max</td>
<td>数值</td>
<td>规定最大值</td>
</tr>
<tr>
<td>min</td>
<td>数值</td>
<td>规定最小值</td>
</tr>
<tr>
<td>optimum</td>
<td>数值</td>
<td>规定最优值</td>
</tr>
<tr>
<td>value</td>
<td>数值</td>
<td>规定当前值</td>
</tr>
</tbody>
</table>
</li>
</ul>
<p>progress标签</p>
<ul>
<li>
<p>语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。</p>
</li>
<li>
<p>常用属性如下：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>max</td>
<td>数值</td>
<td>规定目标值。</td>
</tr>
<tr>
<td>value</td>
<td>数值</td>
<td>规定当前值。</td>
</tr>
</tbody>
</table>
</li>
</ul>
<h3 id="新增列表标签">新增列表标签</h3>
<table>
<thead>
<tr>
<th>标签名</th>
<th>语义</th>
<th>单/双标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>datalist</td>
<td>用于搜索框的关键字提示</td>
<td>双</td>
</tr>
<tr>
<td>details</td>
<td>用于展示问题和答案，或对专有名词进行解释</td>
<td>双</td>
</tr>
<tr>
<td>summary</td>
<td>写在<code>details</code>的里面，用于指定问题或专有名词</td>
<td>双</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;input type="text" list="mydata"&gt;
&lt;datalist id="mydata"&gt;
    &lt;option value="周冬雨"&gt;周冬雨&lt;/option&gt;
    &lt;option value="周杰伦"&gt;周杰伦&lt;/option&gt;
    &lt;option value="温兆伦"&gt;温兆伦&lt;/option&gt;
    &lt;option value="马冬梅"&gt;马冬梅&lt;/option&gt;
&lt;/datalist&gt;

&lt;details&gt;
    &lt;summary&gt;如何走上人生巅峰？&lt;/summary&gt;
    &lt;p&gt;一步一步走呗&lt;/p&gt;
&lt;/details&gt;
</code></pre>
<h3 id="新增文本标签">新增文本标签</h3>
<p>文本注音</p>
<table>
<thead>
<tr>
<th>标签名</th>
<th>语义</th>
<th>单/双标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>ruby</td>
<td>包裹需要注音的文字</td>
<td>双</td>
</tr>
<tr>
<td>rt</td>
<td>写注音，<code>rt</code>标签写在<code>ruby</code>的里面</td>
<td>双</td>
</tr>
</tbody>
</table>
<pre><code class="language-html">&lt;ruby&gt;
    &lt;span&gt;魑魅魍魉&lt;/span&gt;
    &lt;rt&gt;chī mèi wǎng liǎng &lt;/rt&gt;
&lt;/ruby&gt;
</code></pre>
<p>文本标记</p>
<table>
<thead>
<tr>
<th>标签名</th>
<th>语义</th>
<th>单/双标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>mark</td>
<td>标记</td>
<td>双</td>
</tr>
</tbody>
</table>
<blockquote>
<p>注意：<code>W3C</code>建议<code>mark</code>用于标记搜索结果中的关键字。</p>
</blockquote>
<h2 id="新增表单功能">新增表单功能</h2>
<p>表单控件新增属性</p>
<table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>placeholder</td>
<td>提示文字（注意：不是默认值， value 是默认值），适用于文字输入类的表单控件。</td>
</tr>
<tr>
<td>required</td>
<td>表示该输入项必填， 适用于除按钮外其他表单控件。</td>
</tr>
<tr>
<td>autofocus</td>
<td>自动获取焦点，适用于所有表单控件。</td>
</tr>
<tr>
<td>autocomplete</td>
<td>自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件。 <br> 注意：密码输入框、多行输入框不可用。</td>
</tr>
<tr>
<td>pattern</td>
<td>填写正则表达式，适用于文本输入类表单控件。 <br> 注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合。</td>
</tr>
</tbody>
</table>
<p>input 新增属性值</p>
<table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>email</td>
<td>邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。</td>
</tr>
<tr>
<td>url</td>
<td><code>url</code>类型的输入框，表单提交时会验证格式，输入为空则不验证格式。</td>
</tr>
<tr>
<td>number</td>
<td>数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。</td>
</tr>
<tr>
<td>search</td>
<td>搜索类型的输入框，表单提交时不会验证格式。</td>
</tr>
<tr>
<td>tel</td>
<td>电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。</td>
</tr>
<tr>
<td>range</td>
<td>范围选择框，默认值为50，表单提交时不会验证格式。</td>
</tr>
<tr>
<td>color</td>
<td>颜色选择框，默认值为黑色，表单提交时不会验证格式。</td>
</tr>
<tr>
<td>date</td>
<td>日期选择框，默认值为空，表单提交时不会验证格式。</td>
</tr>
<tr>
<td>month</td>
<td>月份选择框，默认值为空，表单提交时不会验证格式。</td>
</tr>
<tr>
<td>week</td>
<td>周选择框，默认值为空，表单提交时不会验证格式。</td>
</tr>
<tr>
<td>time</td>
<td>时间选择框，默认值为空，表单提交时不会验证格式。</td>
</tr>
<tr>
<td>datetime-local</td>
<td>日期+时间选择框，默认值为空，表单提交时不会验证格式。</td>
</tr>
</tbody>
</table>
<p>form 标签新增属性</p>
<table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>novalidate</td>
<td>如果给<code>form</code>标签设置了该属性，表单提交的时候不再进行验证。</td>
</tr>
</tbody>
</table>
<h2 id="新增多媒体标签">新增多媒体标签</h2>
<h3 id="视频标签">视频标签</h3>
<p><code>&lt;video&gt;</code>标签用来定义视频，它是双标签</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>URL地址</td>
<td>视频地址</td>
</tr>
<tr>
<td>width</td>
<td>像素值</td>
<td>设置视频播放器的宽度</td>
</tr>
<tr>
<td>height</td>
<td>像素值</td>
<td>设置视频播放器的高度</td>
</tr>
<tr>
<td>controls</td>
<td>-</td>
<td>向用户显示视频控件（比如播放/暂停按钮）</td>
</tr>
<tr>
<td>muted</td>
<td>-</td>
<td>视频静音</td>
</tr>
<tr>
<td>autoplay</td>
<td>-</td>
<td>视频自动播放</td>
</tr>
<tr>
<td>loop</td>
<td>-</td>
<td>循环播放</td>
</tr>
<tr>
<td>poster</td>
<td>URL地址</td>
<td>视频封面</td>
</tr>
<tr>
<td>preload</td>
<td>auto/metadata/none</td>
<td>视频预加载，如果使用<code>autoplay</code>，则忽略该属性。<br> none : 不预加载视频。<br> metadata : 仅预先获取视频的元数据（例如长度）。<br> auto : 可以下载整个视频文件，即使用户不希望使用它。</td>
</tr>
</tbody>
</table>
<h3 id="音频标签">音频标签</h3>
<p><code>&lt;audio&gt;</code>标签用来定义音频，它是双标签。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>URL地址</td>
<td>音频地址</td>
</tr>
<tr>
<td>controls</td>
<td>-</td>
<td>向用户显示音频控件（比如播放/暂停按钮）</td>
</tr>
<tr>
<td>autoplay</td>
<td>-</td>
<td>音频自动播放</td>
</tr>
<tr>
<td>muted</td>
<td>-</td>
<td>音频静音</td>
</tr>
<tr>
<td>loop</td>
<td>-</td>
<td>循环播放</td>
</tr>
<tr>
<td>preload</td>
<td>auto/metadata/none</td>
<td>音频预加载，如果使用 autoplay ，则忽略该属性。<br> none : 不预加载音频。<br>metadata : 仅预先获取音频的元数据（例如长度）。<br> auto : 可以下载整个音频文件，即使用户不希望使用它。</td>
</tr>
</tbody>
</table>
<h2 id="新增全局属性">新增全局属性</h2>
<table>
<thead>
<tr>
<th>属性名</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>contenteditable</td>
<td>表示元素是否可被用户编辑，可选值如下：<br> true ：可编辑 <br> false ：不可编辑</td>
</tr>
<tr>
<td>draggable</td>
<td>表示元素可以被拖动，可选值如下： <br> true ：可拖动 <br> false ：不可拖动</td>
</tr>
<tr>
<td>hidden</td>
<td>隐藏元素</td>
</tr>
<tr>
<td>spellcheck</td>
<td>规定是否对元素进行拼写和语法检查，可选值如下：<br> true ：检查 <br> false ：不检查</td>
</tr>
<tr>
<td>contextmenu</td>
<td>规定元素的上下文菜单，在用户鼠标右键点击元素时显示。</td>
</tr>
<tr>
<td>data-*</td>
<td>用于存储页面的私有定制数据。</td>
</tr>
</tbody>
</table>
<h2 id="html5兼容性处理">HTML5兼容性处理</h2>
<ul>
<li>
<p>添加元信息，让浏览器处于最优渲染模式。</p>
<pre><code class="language-html">&lt;!--设置IE总是使用最新的文档模式进行渲染--&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
&lt;!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器--&gt;
&lt;meta name="renderer" content="webkit"&gt;
</code></pre>
</li>
<li>
<p>使用<code>html5shiv</code>让低版本浏览器认识 H5 的语义化标签。</p>
<pre><code class="language-html">&lt;!--&gt;
&lt;script src="../sources/js/html5shiv.js"&gt;&lt;/script&gt;
&lt;!--&gt;
</code></pre>
</li>
<li>
<p>扩展</p>
<blockquote>
<p>lt 小于<br>
lte 小于等于<br>
gt 大于<br>
gte 大于等于<br>
! 逻辑非</p>
</blockquote>
<p>示例：</p>
<pre><code class="language-html">&lt;!--&gt;仅IE8可见&lt;!--&gt;
&lt;!--&gt;仅IE8以上可见&lt;!--&gt;
&lt;!--&gt;仅IE8以下可见&lt;!--&gt;
&lt;!--&gt;IE8及以上可见&lt;!--&gt;
&lt;!--&gt;IE8及以下可见&lt;!--&gt;
&lt;!--&gt;非IE8的IE可见&lt;!--&gt;
</code></pre>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/wdszh/p/17468010.html

查看完整版本: html5