HTML5 新增元素
目录
- 一、页面布局
- 二、新增表单元素
- 三、output元素
- 四、address
- 五、progress
- 六、meter
- 七、figure 和 figcaption
- 八、fieldset 和 legend
- 九、script
- 十、bdi
- 十一、details和summary
- 十二、dialog
- 十三、mark
- 十四、time
- 十五、datalist
- 十六、新的输入属性
一、页面布局
| 标签 | 位置 |
|---|---|
| header | 用于网页头部 |
| nav | 用于网页导航栏 |
| 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.0"><title>新增元素title><style>body{text-align: center;}header{width: 800px;height: 50px;background-color: antiquewhite;}nav{width: 800px;height: 50px;background-color: aqua;margin-top: -20px;}li{list-style: none;padding-inline-start: 0%;float: left; width: 100px;}article>*{width: 500px;height: 200px;background-color: blue;}aside{float: left;margin-left: 500px;margin-top: -200px;width: 300px;height: 200px;background-color: yellow;}section>*{width: 800px;height: 100px;background-color: cadetblue;}footer{width: 800px;height: 60px;background-color: blueviolet;}style>
head>
<body><header>headerheader><nav><ul><li>nav:li><li>首页li><li>登录li>ul>nav><article><header>helloheader>article><aside>asideaside><section><header>section titleheader>section><footer>footerfooter>
body>
html>
效果：
二、新增表单元素
| 属性值 | 说明 |
|---|---|
| 邮件类型 | |
| tel | 电话类型 |
| url | url地址类型 |
| range | 取数字 |
| number | 取数字，滑块 |
| color | 取颜色 |
| date | 取日期 |
| datetime | 自定义日期 |
| datetime-local | 日期加时间 |
| time | 取时间 |
| month | 取月份 |
| week | 取周数 |
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.0"><title>新增元素title>
head>
<body><form action="">邮件：<input type="email"><br>电话：<input type="tel"><br>url: <input type="url"><br>range取数字：<input type="range" max="100" value="0"><br>number取数字：<input type="number" max="10" value="0" min="0"><br>取颜色：<input type="color"><br>取时间：<input type="time" name="time" id=""><br>取日期：<input type="date" ><br>取日期2：<input type="datetime" value="2002/2/2" name="datetime"><br>取日期3：<input type="datetime-local" name="" id=""><br>取月份：<input type="month" name="" id=""><br>取星期：<input type="week" name="" id=""><br><input type="submit" value="提交">form>
body>
html>
效果：
三、output元素
output为行内元素，比span更有语义性
通过它可以简单实现一个运算
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.0"><title>新增元素title>
head>
<body><form action=""><input type="range" name="" id="range_n" value="0" >+<input type="number" name="" id="number_n" value="0" >=<output id="out_n">output><br><input type="submit" value="提交">form>
body>
<script>function sum(){var val1 = document.getElementById("range_n");var val2 = document.getElementById("number_n");var out = document.getElementById("out_n");out.value=parseInt(val1.value) + parseInt(val2.value);}window.onload=suminput:onchange=sum
script>
html>
四、address
一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。
<footer><address>作者:蓝朽 email:13412345678@qq.comaddress>footer>
五、progress
它是一个进度条，用来展示某个任务的进度。
<progress max="100" min="0" value="10">progress>
六、meter
meter主要用于显示静态的进度，progress主要用于显示动态的进度。
<meter max="100" min="0" value="40">meter>
七、figure 和 figcaption
figure元素用于包含图片和图注，figcaption元素用于表示图注文字。
<figure><img src="./img/3.jpg"><figcaption>这是一个图片figcaption>figure>
八、fieldset 和 legend
使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。
<form action=""><fieldset><legend>登录框legend>账号：<input type="text"><br>密码：<input type="password"><br><input type="submit" value="登录">fieldset><fieldset><legend>下拉框legend><select name="" id=""><option value="" selected>test1option><option value="">test2option>select>fieldset>form>
九、script
- defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等待到整个HTML文档加载完成才会执行。
- async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。
主要用于加速网页的加载速度，区别就是在之前执行，一个在之后执行。
DOCTYPE html>
<html><head><meta charset="utf-8" /><title>title><script src="./js/async.js" async>script><script src="./js/defer.js" defer>script>head><body>body>
html>
十、bdi
定义与其他文本不同的文本方向。
| 属性 | 值 |
|---|---|
| dir | ltr,rtl,auto |
<bdi dir="rtl">hello<bdi>worldbdi>bdi>
十一、details和summary
details：定义用户可查看或隐藏的额外细节。
summary：定义
<details><summary>点击summary><p>被隐藏的内容p>details>
十二、dialog
定义对话框或窗口。
<dialog open>这是个对话框dialog>
十三、mark
定义重要或强调的内容。
<mark>这是一个强调的内容mark>
十四、time
定义日期/时间。
<time datetime="2020-1-1">2020-1-1time>
十五、datalist
定义输入控件的预定义选项。
通常配合input标签一起使用
<input list="data" ><datalist id="data"><option value="web">weboption><option value="java">javaoption><option value="python">pythonoption>datalist>
十六、新的输入属性
| 输入属性 | 作用 |
|---|---|
| autocomplete | 规定表单或输入字段是否应该自动完成。 |
| novalidate | 属于 |
| disabled | 规定输入字段是禁用的。 |
| maxlength | 规定输入字段允许的最大长度 |
| autofocus | 规定当页面加载时 |
| form | 规定 |
| list | 引用的 |
| readonly | 规定输入字段为只读（不能修改） |
| multiple | 规定允许用户在 元素中输入一个以上的值。适用email 和 file。 |
| pattern | 规定用于检查 |
| placeholder | 规定用以描述输入字段预期值的提示 |
| required | 规定在提交表单之前必须填写输入字段。 |
| step | 规定 元素的合法数字间隔。 |
| formaction | 规定当提交表单时处理该输入控件的文件的 URL,适用submit，image |
| formenctype | 规定当把表单数据（form-data）提交至服务器时如何对其进行编码，适用post提交 |
| formmethod | 定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。 |
| formnovalidate | 规定在提交表单时不对 |
| formtarget | 规定的名称或关键词指示提交表单后在何处显示接收到的响应。 |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！