HTML5中的重要元素详解

news2025/1/12 1:44:49

第3章 HTML5中的重要元素

3.1 html根元素

HTML文档中，元素html代表了文档的根，其他所有元素都是在该元素的基础上进行延伸或拓展的，该元素也是HTML文档的最外层元素，因此也称为根元素。

html元素的常用属性：

manifest：URL，指向描述文档缓存信息的地址
xmlns：http://www.w3.org/1999/xhtml，设置XML namespace的属性

1.功能描述

新建页面中显示“内容部分。。。”几个字符。

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html根元素的使用</title>
    <style>
        body {
            font-size: 10pt;
        }
    </style>
</head>

<body>
    内容部分。。。
</body>

</html>

3.页面效果

3.2 文档元素

一个HTML文档通常包含两个部分，一个头部分，由head元素包含，一个为主体部分，由body元素包含。由于说明文档经常用到head,title,base,link,meta,style等元素，因此也称为文档元素。

head：所有头部元素载体，包含base,link,meta,script,style,title.
base：可以设置页面中url为空时的值。href(当页面为空时的链接)，target(打开页面链接的方式_blank,_self,_parent等)，新窗口，当前窗口，父窗口打开。
meta：设置页面的文档信息，针对搜索引擎的关键字等，content="HTML5,UI,Web前端开发",charset="utf-8"

1.功能描述

新建页面中，head元素加入所包含的各类标签，并定义超级链接的样式。当单击请点击我标签时，将展示相应的样式效果并进入base设置的默认地址。base和title只能使用一次。

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文档元素的使用</title>
    <base href="http://www.baidu.com/" target="_blank" />
    <meta name="keywords" content="HTML5,CSS,JavaScript" />
    <meta name="description" content="用于检测页面的文档元素" />
    <style>
        a {
            padding: 8px;
            font-size: 13px;
            text-decoration: none;
        }

        a:hover {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <a href="index.html">请点击我</a>
</body>

</html>

3.页面效果

3.3 脚本

为了增加页面的互动性，需要对文档编写客户端脚本，常用语言是JavaScript.

script的属性：

async：true/false，是否异步执行脚本，H5新增
charset：charset，设置脚本中使用的字符编码，H5不在支持
language：JavaScript等，定义脚本语言类型，H5不再支持
xml:space：不再支持

async是新增属性，当取值为true时，脚本在页面中执行是异步的，当false时，脚本立即执行，页面也会等脚本执行完成后，继续解析。

示例：元素script与noscript的使用

1.功能描述

新建页面，增加文本框“txtContent”和按钮，请点击我；当单击按钮时，通过页面中加入JavaScript脚本代码，获取文本框中的内容，并且显示在页面中。

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>脚本元素的使用</title>
    <style>
        body {
            font-size: 12px;
        }

        .inputbtn {
            border: 1px solid #ccc;
            background-color: #eee;
            line-height: 18px;
            font-size: 12px;
        }

        .divShow {
            display: none;
            width: 196px;
            padding: 5px;
            margin-top: 5px;
            border: 1px solid #666;
            background-color: #eee;
        }
    </style>
    <script type="text/javascript" async>
        function btnClick() {
            var strTxt = document.getElementById("txtContent").value;
            var strDiv = document.getElementById("divShow");
            strDiv.style.display = "block";
            strDiv.innerHTML = "您输入的字符是：" + strTxt;
        }
    </script>
    <noscript>
        您浏览器不支持JavaScript!
    </noscript>
</head>

<body>
    <input type="text" id="txtContent" />
    <input type="button" value="请点击我" class="inputbtn" onclick="btnClick();" />
    <div id="divShow" class="divShow"></div>
</body>

</html>

3.页面效果

async为true时，可以很大程度上缓解页面解析的压力，加速页面加载的速度。

3.4 节点

H5中，新增许多标志性节点元素，section,nav等，这些元素可以用于页面内容的分段或分区。接下来详细介绍这些节点使用方法。

3.4.1 section元素

section是H5新增的元素，该元素用于标记区段或段落，例如文章中的章节、页眉，页脚设置。

section常用属性：

cite：URL，section元素内容来源于Web的地址。
hidden：true/false，显示或隐藏元素
draggable：true/false，是否可以拖动

3.4.2 nav元素

页面导航元素，将具有导航性质的链接归纳在一块区域中，使页面更有语义性，同时，方便对屏幕阅读器设备的支持。例如nav里面有多个a.

3.4.3 hgroup元素

用于页面的标题进行分组，形成一个群组，常常与figcaption结合使用。

3.4.4 address元素

用于定义文档作者或者所有者相关联系方式，常用于article元素外部。内部表示文章作者的联系方式，通常是斜体，解析该元素时会换行。还有article,aside,header,footer都是节点元素，不在赘述。

3.5 分组内容

原有分组内容，ul,ol,dl.改良后。

3.5.1 ul元素

表示无序列表，通常与li一起用。

3.5.1 ol元素

表示有序列表，新增两个属性start(列表项开始的编号)和reversed(列表项反向排序),

1.功能描述

ol中创建各类图书销量排名列表，添加三个选项，计算机，社科，文艺作为列表的内容。

增加一个文本框，设置开始值，一个确定按钮，输入一个值，点击确定按钮，以文本框中的值为开始值

2.实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ol列表元素的使用</title>
    <script type="text/javascript" async>
        function btnClick() {
            var strNum = document.getElementById("txtOrderNum").value;
            var strOl = document.getElementById("olList");
            strOl.setAttribute("start", strNum);
        }
    </script>
</head>

<body>
    <h5>各类图书销量排行</h5>
    <ol id="olList">
        <li>计算机</li>
        <li>社科</li>
        <li>文艺</li>
    </ol>
    <h5>设置开始值</h5>
    <input type="text" id="txtOrderNum" class="inputtxt" style="width:60px" />
    <input type="button" value="确定" class="inputbtn" onclick="btnClick()" />
</body>

</html>

3.页面效果

3.5.3 dl元素

dl元素用于创建一个术语列表，允许dl表中跟多个带名字的术语dt，每个dt后面可以跟多个dd，dt,dd不允许重复。

3.6 文本层次语义

3.6.1 time元素

定义时间或日期，代表24小时中某一时刻，只需将datetime设为时间或日期即可。

可选属性，pubdate，布尔值。

3.6.2 mark元素

高亮显示某个或某几个字符，引起用户特别注意。类似于em和strong

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>mark元素的使用</title>
    </head>
    <body>
        <h5>优秀的开发人员的<mark>素质</mark></h5>
        <p>一个优秀的Web页面开发人员，必须具有
            <mark>过硬</mark>
            <mark>务实</mark>
            的专业精神
        </p>
    </body>
</html>

3.6.3 cite元素

创建一个引用标记，用于文档中参考文献的引用说明。如书名和文章名称，被标记的内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

3.7 嵌入内容

img,iframe(不再支持)，object元素(原有属性不支持)。

3.8 公共属性

draggable,hidden,spellcheck,contenteditable属性，可以拖动，可隐藏，检测输入拼音或语法是否错误，可以直接对显示在页面中的文字进行编辑(可用于表格编辑).

共同的案例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>公共属性draggable,hidden,spellcheck,contenteditable</title>
    <style>
        hr {
            clear: both;
        }

        #d1,
        #d4,
        #d5 {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        #d2 {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
    <script>
        function show() {
            var d2 = document.getElementById("d2");
            d2.hidden = !d2.hidden;
        }
    </script>
</head>

<body>
    <div id="d1" draggable="true">可拖动</div>
    <hr />
    <div id="d2" hidden>hidden属性</div><button onclick="show();">交替显示</button>
    <hr />
    <textarea spellcheck="true" cols="15" rows="5">有拼写检查</textarea>
    <textarea spellcheck="true" cols="15" rows="5">无拼写检查</textarea>
    <hr />
    <div id="d4" contenteditable="true">可编辑</div>
    <div id="d5" contenteditable="true">可编辑</div>
</body>

</html>