9. HTML5新增元素及属性
9.1 HTML5新增结构元素
-
HTML5引入了几个新的结构元素，极大地改善了网页的组织和结构方式。以下是HTML5中的一些关键新结构元素:
标签 说明 <header> 页面或页面中某一个区块的页眉，通常是一些引导和导航信息 <nav> 可以作为页面导航的链接组 <main> 表示文档或应用程序<body>的主要内容 <article> 代表一个独立的、完整的相关内容块 <aside> 非正文的内容，与页面的主要内容是分开的 <section> 页面中的一个内容区块，通常由内容及其标题组成 <footer> 页面或页面中某一个区块的脚注 -
语义化标签的好处
- 这些新的结构元素为网页内容提供了更多的语义含义
- 搜索引擎、屏幕阅读器和其他设备更容易理解内容的结构和目的。
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>新增html5结构元素</title> <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/demo2.css" /> </head> <body> <div class="box"> <header class="header">头部</header> <nav class="nav">导航</nav> <section class="section"> <aside class="aside">侧边栏</aside> <article class="article">主体</article> </section> <footer class="footer">页脚</footer> </div> </body> </html> -
效果图
9.2 HTML5新增网页元素
- HTML5新增网页元素如下表所示
| 标签 | 说明 |
|---|---|
| video | 定义视频，如电影片段或其他视频流 |
| audio | 定义音频，如音乐或其他音频流 |
| canvas | 定义图形 |
| datalist | 定义可选数据的列表 |
| time | 标签定义日期或时间 |
| mark | 在视觉上向用户呈现那些需要突出的文字 |
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>新增元素</title> <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="css/common.css" /> </head> <body> <div class="box"> <div class="item"> <label for="city">城市:</label> <input list="cities" id="city" placeholder="请选择城市" /> <!-- 数据列表标签 --> <datalist id="cities"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </datalist> </div> <div class="item"> <!-- 日期标签 --> <p>你在<time datetime="2024-07-07">中国情人节</time>有个约会！</p> </div> <div class="item"> <!-- 进度条 --> <progress value="20" max="100" min="0" class="progress"></progress> </div> </div> <script> const progress = document.querySelector(".progress"); let id = setInterval(() => { let v = +progress.value; v++; progress.value = v; if (v === 100) { clearInterval(id); } }, 100); </script> </body> </html> -
效果图
9.3 HTML5新增全局属性
-
html5 新增的全局属性如下表所示
属性 说明 contentEditable 规定是否允许用户编辑内容 designMode 规定整个页面是否可编辑 hidden 规定对元素进行隐藏 spellcheck 规定是否必须对元素进行拼写或语法检查 time 标签定义日期或时间 tabindex 规定元素的tab键迭制次序 -
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>新增全局属性</title> <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/demo4.css" /> </head> <body> <div class="box"> <!-- 1. 内容可编辑：contenteditable --> <h3>contenteditable</h3> <p contenteditable class
