HTML5权威指南 | 第二部分 HTML篇

作者: 夏海峰 | 来源:发表于2018-11-13 21:30 被阅读14次

六、HTML5元素的背景知识

搞懂如何使用这些HTML5元素，和理解这些元素的含义同等重要。HTML5中的一大主要变化是基本信念的变化：要将元素的语义与元素对其呈现结果的影响分开。HTML5中新增的元素大多数都有具体的含义。

对HTML5元素的使用，一般要遵从以下规则：少亦可为多，别误用元素，具体为佳，一以贯之。

HTML5元素主要分为以下几大类：文档和元数据元素、文本元素、对内容分组的元素、章节类元素、制表元素、表单类元素、内嵌类元素等。

七、创建HTML文档

meta标签的使用：

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Ape">
    <meta name="description" content="A simple page">
    <meta name="robots" content="noindex">
    <meta http-equiv="refresh" content="5">
</head>

link标签的使用：

<head>
    <link rel="stylesheet" href="about.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- 指定网页的icon图标 -->
    <link rel="prefetch" href="page2.html">  <!-- 预先获取资源 -->
</head>

style标签的media属性:

<style media="screen">
    a {color: red;}
</style>
<style media="print">
    a {color: #000;}
</style>
<style media="screen AND (min-width:500px)">
    body {background-color: grey;}
</style>
<style media="screen AND (max-width:500px)">
    body {background-color: blue;}
</style>

script标签的 defer属性：待HTML文档解析完成后再执行该脚本。

<script defer src="simple.js"></script>

script标签的 async属性：该脚本会异步执行，不影响HTML文档和其它脚本的解析与执行。

<script async src="simple2.js"></script>

noscript标签的使用:

<noscript>
    <p>你的浏览器不支持js，请更新您的浏览版本!</p>
</noscript>

当浏览器不支持js或禁用了js时，将跳转至另一个页面中。

<noscript>
    <meta http-equiv="refresh" content="0; http://www.xiayiheng.com">
</noscript>

八、标记文字

使用 a标签：

<a href="http://www.baidu.com" target="<frame>">框架</a>

使用 b标签，不表示强调:

<p>普通文本<b>关键词</b>普通文本</p>

em标签，表示强调:

<p><em>I</em> like basketball.</p>

i 标签，用于外文词汇和科学术语:

<p>生物术语 <i>DNA</i></p>

s 标签，表示不再正确的文本:

<p>元宵促销，原价 <s>$198元</s>，现在只需要 <em>$168元</em></p>

strong标签，表示重要:

<p><strong>注意：</strong>放假时间为2月13日~15日。</p>

上标与下标:

<p>10<sup>2</sup> + H<sub>2</sub>O</p>

输入与输出:

<p>
    <code>
        var fruits = ["apples","oranges","mangoes","cherries"]; <br>
        document.writeln("I like "+fruits.length + "fruits");
    </code>
</p>
<p>这段代码中的变量是 <var>fruits</var></p>
<p>这段代码的输出是 <samp>I like 4 fruits</samp></p>
<p>用户的输入是 <kbd>cherries</kbd></p>

标题引用、引文、定义、缩写:

<p>
    <abbr title="Florida Department of Citrus">FDDC</abbr><br>
    <dfn title="apple">apple</dfn><br>
    <q cite="http://www.baidu.com">The <dfn>apple</dfn> is the species rose family.</q><br>
    <cite>中国好声音</cite>
</p>

注意符号： ruby rt tp 元素

<p>
    <ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
    <ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>
    <ruby>魍<rp>(</rp><rt>wang</rt><rp>)</rp></ruby>
    <ruby>魉<rp>(</rp><rt>liang</rt><rp>)</rp></ruby>    
</p>

bdo标签：用于设置文字方向

<p>
    <bdo dir="ltr">I like apples.</bdo>
    <bdo dir="rtl">I like apples.</bdo>
    <bdo dir="ltr">我喜欢苹果.</bdo>
    <bdo dir="rtl">我喜欢苹果.</bdo>
</p>

bdi标签:

<p>
    <bdi>·29022·！）（！（）</bdi>
</p>

mark标签：用于突出显示文本

<p>
    I like a <mark>pair</mark> of <mark>pears</mark>.
</p>

插入文本、删除文本

<p>
    <del>I can <mark>sea</mark> the <mark>see</mark>.</del>
    <ins>I can <mark>see</mark> the <mark>sea</mark>.</ins>
</p>

time标签：用于指定时间或日期

<p>
    I bought it at <time datetime="15:00">3 o'clock</time> on <time datetime="2016-12-7">December 7th</time>.
</p>

九、组织内容

pre标签：预格式

<pre>
    <code>
        function pre(agrs){
            alert("这是预格式编排");
        }
    </code>
</pre>

大段引用:

<blockquote cite="http://www.baidu.com">
    大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用大段的引用。
</blockquote>

有序列表:

<ol start="10" type="A">
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
</ol>

无序列表:

<ul>
    <li>苹果</li>
    <li>梨子</li>
    <li>香蕉</li>
</ul>

li标签和它的value属性:

<ol>
    <li>东</li>
    <li value="15">西</li>
    <li>南</li>
    <li value="200">北</li>
</ol>

说明列表:

<dl>
    <dt>Apple</dt>
    <dd>它是水果之王，味甜，很贵！</dd>
    <dt>Orange</dt>
    <dd>我家妞妞最爱的水果之一，酸酸甜甜。</dd>
    <dd>形状黄圆，可爱极了！</dd>
</dl>

使用content和:before，生成自定义列表

<ul id="outerlist">
    <li>bananas</li>
    <li>mangose,including:
        <ul class="innerlist">
            <li>Haden</li>
            <li>Keitt</li>
            <li>Kent</li>
        </ul>
    </li>
    <li>cherrise</li>
    <li>plums,including:
        <ul class="innerlist">
            <li>Elephant</li>
            <li>Stanley</li>
            <li>Seneca</li>
        </ul>
    </li>
    <li>peaches</li>
    <li>grapes</li>
</ul>

<style>
    body {
        counter-reset: OuterItemCount 5 InnerItemCount; 
    }
    #outerlist {
        list-style: none;
    }
    #outerlist>li:before{
        content: counter(OuterItemCount) ".";
        counter-increment: OuterItemCount 2;
    }
    ul.innerlist>li:before {
        content: counter(InnerItemCount,lower-alpha) ".";
        counter-increment: InnerItemCount;  
    }
</style>

figure 插图、图示:

<figure>
    <figcaption>Using those codes.</figcaption>
    <pre>
      <code>
        var a=4;
        var b=5;
        var c = a + b;
        alert(c);
      </code>
    </pre>
</figure>

十、文档分节

标题组

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

hgroup的使用:

<hgroup>
    <h1>标题1</h1>
    <h2>副标题</h2>
</hgroup>
<h2>标题2</h2>
<h1>标题1</h1>
<h2>标题2</h2>

section的使用:

<section>
    <h1>我是标题1</h1>
    <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落。</p>
    <section>
        <h1>我是标题2</h1>
        <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
        <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
        <section>
            <h1>我是标题3</h1>
            <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
            <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
            <p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
        </section>
    </section>
</section>
<hr>

header 与 footer ：分别表示节的头与尾

<header>
    <hgroup>
        <h1></h1>
        <h2></h2>
    </hgroup>
</header>

<section>
    <header>
        <hgroup>
            <h1></h1>
            <h2></h2>
        </hgroup>
    </header>

    <section>       
    </section>

    <section>
        <header>
            <h1></h1>
        </header>
    </section>

    <footer>        
    </footer>
</section>

<footer>    
</footer>

nav 的使用：用于主导航区域

<nav>
    <h1>Contents</h1>
    <ul>
        <li><a href="#">item1</a></li>
        <ul>
            <li><a href="#">item2</a></li>
            <li><a href="#">item3</a></li>
        </ul>
        <li><a href="#">item4</a></li>
        <ul>
            <li><a href="#">item5</a></li>
            <li><a href="#">item6</a></li>
        </ul>
    </ul>
</nav>

另一个 nav : 用于底部导航

<nav>
    More information:
    <a href="#">Learn more</a>
    <a href="#">Pay again</a>
</nav>

article 的使用：表示一段独立的内容

<header></header>

<article>
    <header></header>
    <section></section>
    <footer></footer>
</article>

<article>
    <header></header>
    <section>
        <section></section>
    </section>
    <footer></footer>
</article>

<footer></footer>

aside侧边栏的使用:

<aside>
    <h1></h1>
    <section>
        <ol>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ol>
    </section>
</aside>

address 联系信息区域:

<address>
    联系我： <a href="mailto:448914712@qq.com">qq邮箱</a>
</address>

details 创建详情区域:

<details>
    <summary>点击我展开</summary>
    <p>this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.this a paragragh.</p>
    <ol>
        <li>1.5km</li>
        <li>2.1km</li>
        <li>1.8km</li>
    </ol>
</details>

十一、表格元素

最基础的表格，表格会自动调整单元格的宽与高:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>this is a table.</td>
        <td>table is easy.</td>
        <td>stay hungry.</td>
    </tr>
</table>

th 表头单元格:

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
    </tr>
    <tr>
        <th>夏海峰</th>
        <td>28</td>
        <td>168</td>
    </tr>
    <tr>
        <th>蔡芸</th>
        <td>26</td>
        <td>153</td>
    </tr>
</table>

为表格添加结构: thead / tbody / tfoot

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>身高</th>
            <th>住址</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>韦德</th>
            <td>213</td>
            <td>芝加哥</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>球员</th>
            <th>后卫</th>
            <th>美国</th>
        </tr>
    </tfoot>
</table>

制作跨行 / 跨列的表格:

<table border="1px">
    <tr>
        <th colspan="2">1</th>
        <th>2</th>
    </tr>
    <tr>
        <th rowspan="2">1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>2</th>
        <th>3</th>
    </tr>
</table>

为表格添加标题:

<table border="1px">    
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <caption>我是表格的标题</caption>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

列组、列:

<table>
    <colgroup id="cols">
        <col id="col1" span="2">    <!-- 代表了该表格的前两列 -->
        <col id="col2">             <!-- 代表该表格的第3列 -->
        <col id="col3">             <!-- 代表该表格的第4列 -->
    </colgroup>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</table>

<style>
    #cols #col1 {background-color: red;}
    #cols #col2 {background-color: green;}
    #cols #col3 {background-color: blue;}
</style>

border属性，用于告诉浏览器该表格不是用于布局的:

<table border="1">
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

十二、表单元素

form标签、及其相关属性的使用:

<form action="http://titan:8080/form" method="post" enctype="multipart/form-data">
    <input type="text">
    <button>提交</button>
</form>

表单的自动完成功能： autocomplete属性

<form autocomplete="off">
    <input type="text" autocomplete="on">
    <input type="text" autocomplete="on">
</form>

指定服务器反馈信息的显示位置: target属性

<form target="_blank">
    <input type="text">
    <button>提交</button>
</form>

form标签的name属性，用于DOM；input标签的name属性，用于提交数据至服务器。

<form name="fruit">
    <input type="text" name="age">
    <input type="text" name="address">
</form>

label标签，为input标签添加文字说明:

<form>
    <label for="age">请输入年龄：<input type="text" id="age"></label>
    <label for="grade">请输入班级：</label> <input type="text" id="grade">
</form>

autofocus属性，为input标签添加自动的聚集光标:

<form>
    <input type="text">
    <input type="text" autofocus="true">
    <input type="text">
</form>

input标签的disabled属性，用于禁用表单:

<form>
    <input type="text" disabled>
    <input type="text">
</form>

fieldset标签，对表单进行编组:

<form>
    <fieldset>
        <p><label for="">姓名：<input type="text"></label></p>
        <p><label for="">年龄：<input type="text"></label></p>
        <p><label for="">学校：<input type="text"></label></p>
        <button>提交</button>
    </fieldset>

    <fieldset>
        <p><label for="">你喜欢的运动是：<input type="text" name="eee"></label></p>
        <p><label for="">你喜欢的水果是：<input type="text" name="fff"></label></p>
        <button>提交</button>
    </fieldset>
</form>

legend标签，为fieldset编组添加相关说明:

<form>
    <fieldset>
        <legend>注册要求如下：</legend>
        <label for="i">用户名：</label><input type="text" name="a" id="i"><br>
        <label for="f">密码：</label><input type="text" name="b" id="f"><br>
        <label for="g">重复密码：</label><input type="text" name="c" id="g"><br>
        <button>提交</button>
    </fieldset>
</form>

一次性禁用fieldset编组中的所有表单：

<form>
    <fieldset disabled>
        <label for="i">用户名：</label><input type="text" name="aa" id="ii"><br>
        <label for="f">密码：</label><input type="text" name="bb" id="ff"><br>
        <label for="g">重复密码：</label><input type="text" name="cc" id="gg"><br>
    </fieldset>
</form>

type=submit的 button标签：用于提交表单

<form>
    <button type="submit" formaction="http://titan:8080/form" formmethod="post">提交数据</button>
</form>

type=reset 的 button标签：用于重置表单

<form>
    <input type="text" name="x"><br>
    <input type="text" name="y"><br>
    <button>提交</button>
    <button type="reset">重置</button>
</form>

type=button 的 button标签：此时它仅仅是一个按钮

<form>
    <button type="button">按钮</button>
</form>

表单元素的 form属性：用于与非祖先级的form标签进行挂勾

<form id="f1"></form>

<form id="f2">
  <input type="text" name="xx" form="f1">
  <input type="text" name="yy" form="f1">
  <button type="submit" form="f1">提交</button>
  <button type="reset" form="f2">重置</button>
</ form>

十三、定制input元素

input标签的 maxlength属性、size属性：

<form>
    <input type="text" maxlength="20"><br>      <!-- 只能输入20个字符 -->
    <input type="text" size="20"><br>           <!-- 只能显示20个字符 -->
    <input type="text" size="20" maxlength="20">    <!-- 只能输入并且显示20个字符 -->
</form>

input元素的 placeholder / value属性：

<form>
    <input type="text" placeholder="Your name"><br>
    <input type="text" placeholder="Your age"><br>
    <input type="text" value="男">
</form>

input标签的 list属性:

<form>
    <input type="text" list="items">
</form>
<datalist id="items">
    <option value="Apples"></option>
    <option value="Refreshing Oranges"></option>
    <option value="Cherries">Cherries</option>
</datalist>

input标签的 readonly / disabled属性:

<form>
    <input type="text" readonly value="只读文本框">
    <input type="text" disabled value="被禁用的文本框">
</form>

input 密码框

<form>
    <input type="password" name="password" placeholder="最少10位字符，字母开头">
</form>

input 按钮

<form>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">
</form>

input 数字输入框

<form>
    <input type="number" min="0" max="100" step="5" value="2" name="price">
</form>

input 滑块式的数值输入框

<form>
    <input type="range" min="0" max="100" step="2" value="10" name="music">
</form>

input 复选框

<form>
    <label for="">我已阅读以上内容:</label>
    <input type="checkbox" checked>
</form>

input 单选按钮，多选一

<form>
    <fieldset>
        <legend>请选择你国籍</legend>
        <input type="radio" value="中国" name="contry" checked><label>中国</label>
        <input type="radio" value="美国" name="contry"><label>美国</label>
        <input type="radio" value="日本" name="contry"><label>日本</label>
        <input type="radio" value="德国" name="contry"><label>德国</label>
        <input type="radio" value="意大利" name="contry"><label>意大利</label>
        <input type="radio" value="希腊" name="contry"><label>希腊</label>
    </fieldset>
</form>

用于输入邮箱/电话/网址的input框

<form>
    <label>邮箱：</label>
    <input type="email" name="email" placeholder="user@domain.com">
    <label>电话：</label>
    <input type="tel" name="tel" placeholder="(xxx)-xxx-xxxx">
    <label>网址：</label>
    <input type="url" name="url" placeholder="http://www.xxx.com">
</form>

input标签的日期/时间框

<form>
    <label>请选择日期：</label>
    <input type="date" name="date">
</form>

input标签的颜色输入框

<form>
    <label>请选择颜色：</label>
    <input type="color" name="color" value="#00ff00">
</form>

input标签的搜索用词输入框

<form>
    <label>你要搜索的词是：</label>
    <input type="search" name="search">
</form>

input标签隐藏的数据项

<form>
    <fieldset>
        <legend>隐藏的数据项，将被提交</legend>
        <input type="hidden" value="213" name="password">
        <input type="hidden" value="xia" name="name">
        <button>有数据被提交</button>
    </fieldset>
</form>

input标签实现图像按钮

<form>
    <input type="image" src="images/accept.png" name="submit" alt="图片按钮">
</form>

input标签实现文件上传

<form enctype="multipart/form-data">
    <input type="file" name="file1"><br><br>
    <input type="file" name="file1"><br><br>
    <button>上传文件</button>
</form>

十四、其它表单元素及输入验证

select标签，用于生成选项列表

<form>
    <label for="sports" style="vertical-align: top;">您喜欢体育有哪些？</label>
    <select name="sports" id="sports" size="4">
        <option value="篮球" selected label="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="羽毛球">羽毛球</option>
        <option value="乒乓球">乒乓球</option>
        <option value="桌球">桌球</option>
        <option value="游泳">游泳</option>
        <option value="跑步">跑步</option>      
    </select>
</form>

optgroup标签，用于对option元素进行编组

<form>
    <label style="vertical-align: top;">您喜欢体育有哪些？
        <select name="sports" id="sports" size="6">
            <optgroup label="第一组">
                <option value="篮球" selected label="篮球">篮球</option>
                <option value="足球">足球</option>
                <option value="羽毛球">羽毛球</option>
                <option value="乒乓球">乒乓球</option>
            </optgroup>

            <optgroup label="第二组">
                <option value="桌球">桌球</option>
                <option value="游泳">游泳</option>
                <option value="跑步">跑步</option>  
            </optgroup>             
        </select>
    </label>
</form>

textarea标签：多行文本输入

<form>
    <label for="" style="vertical-align:top;">自我评价：</label>
    <textarea name="me" id="me" cols="30" rows="10" wrap="hard"></textarea>
</form>

output标签的使用：用于承载计算的结果

<form>
    <fieldset onsubmit="return false" oninput="res.value=num.valueAsNumber*price.valueAsNumber;">
        <legend>Price Calculator</legend>
        <input type="number" placeholder="数量" name="num">
        <span>X</span>
        <input type="number" placeholder="单价" name="price">
        <span>=</span>
        <output name="res">0</output>
    </fieldset>
</form>

onsubmit="return false" 取消提交的默认事件
oninput 输入时触发的事件
onchange 值改变是触发的事件
name.value 用于获取表单的值
name.valueAsNumber 用于获取表单的值，并将其转化为数值

required属性，表单验证：

<form>
    <input type="text" name="name" required>
    <input type="password" name="password" required>
    <input type="checkbox" name="accept" required>
    <button>提交</button>
</form>

max/min 控制用户的输入范围

<form>
    <input type="number" min="0" max="100" name="price">
    <button>提交</button>
</form>

pattern属性：用于与正则表达式匹配

<form>
    <input type="text" pattern="^.* .*$" name="name">
    <button>提交</button>
</form>

用pattern属性，执行邮箱/url验证

<form>
    <input type="email" placeholder="user@mydomin.com" required name="email" pattern=".*@mydomin.com$" id="email">
    <button>提交</button>
</form>

novalidate属性，禁用输入验证

<form novalidate>
    <input type="email" placeholder="user@mydomin.com" required name="email" pattern=".*@mydomin.com$" id="email">
    <button formnovalidate>提交</button>
</form>

十五、内嵌类元素

img标签的使用：要指定width / height属性

<img src="images/triathlon.png" alt="img" width="200" height="67"><br><br>

图像超链接

<a href="http://www.baidu.com" target="_blank"><img src="images/accept.png" alt="tar" ismap></a>

map/area标签，创建分区响应图

<img src="images/triathlon.png" alt="img" usemap="#mymap" width="200" height="67">
<map name="mymap">
    <area shape="rect" coords="5,5,68,60" href="http://www.baidu.com" alt="百度" target="_blank">
    <area shape="rect" coords="70,5,130,62" href="http://www.mi.com" alt="小米" target="_blank">
    <area shape="default" href="http://www.qq.com" alt="qq" target="_blank">
</map>

使用iframe标签

<nav>
    <ul>
        <li><a href="http://www.baidu.com" target="myframe1">百度</a></li>
        <li><a href="http://www.qq.com" target="myframe2">腾讯</a></li>
    </ul>
</nav>

<iframe name="myframe1" width="600" height="320"></iframe>
<iframe name="myframe2" width="600" height="320"></iframe>

embed标签，用于嵌入插件

<embed src="http://sports.qq.com/vo/#/cover/3rlg5gmkn9mzgwl/p00225ga9sm"  width="960" height="500" allowfullscreen="true">

使用object标签，用于嵌入插件

<object data="http://sports.qq.com/vo/#/cover/3rlg5gmkn9mzgwl/p00225ga9sm" width="960" height="500">
    <param name="allowFullScreen" value="true">
    <b>对不起！</b>我不无法匹配您需要的插件！
</object>

使用object标签，嵌入图像

<object data="images/triathlon.png" type="image/png"></object>

使用object标签，嵌入图像

<object data="images/triathlon.png" usemap="#mymap"></object>

progress进度条

<progress id="mypro" value="10" max="100"></progress>
<p>
    <button type="button" value="30" class="btn">30%</button>
    <button type="button" value="60" class="btn">60%</button>
    <button type="button" value="90" class="btn">90%</button>
</p>

<script>
    var btns = document.getElementsByClassName("btn");
    var pro = document.getElementById("mypro");
    for(var i=0; i<btns.length; i++){
        btns[i].onclick = function(e){
            // var e = e | window.event;
            pro.value = e.target.value;
        }
    }
</script>

meter标签的使用

<meter id="mymeter" value="80" min="10" max="100" low="40" high="85" optimum="60"></meter>
<p>
    <button class="btns" value="20">20</button>
    <button class="btns" value="60">60</button>
    <button class="btns" value="90">90</button>
</p>

<script>
    var oBtn = document.getElementsByClassName("btns");
    var oMe = document.getElementById("mymeter");
    for(var j=0; j<oBtn.length; j++){
        oBtn[j].onclick = function(e){
            oMe.value = e.target.value;
        }
    }
</script>

第二部分，结束！！

HTML5权威指南 | 第二部分 HTML篇

六、HTML5元素的背景知识

七、创建HTML文档

八、标记文字

九、组织内容

十、文档分节

十一、表格元素

十二、表单元素

十三、定制input元素

十四、其它表单元素及输入验证

十五、内嵌类元素

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读