HTML5 新增元素

蓝朽

2024-04-14 帮助1人

一、页面布局

标签	位置
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>
        header
    </header>
    <nav>
        
        <ul>
            <li>nav:</li>
            <li>首页</li>
            <li>登录</li>
        </ul>
    </nav>
    <article>
        <header>hello</header>
    </article>
    <aside>aside</aside>
    <section>
        <header>section title</header>
    </section>
    <footer>footer</footer>
</body>
</html>

效果：
学新通

二、新增表单元素

属性值	说明
email	邮件类型
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=sum
    input:onchange=sum
</script>
</html>

四、address

一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。

    <footer>
        <address>作者:蓝朽  email:13412345678@qq.com</address>
    </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>test1</option>
            <option value="">test2</option>
        </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>world</bdi></bdi>

学新通

十一、details和summary

details：定义用户可查看或隐藏的额外细节。
summary：定义<details>元素的可见标题。

    <details>
        <summary>点击</summary>
        <p>被隐藏的内容</p>
    </details>

学新通

十二、dialog

定义对话框或窗口。

<dialog open>这是个对话框</dialog>

学新通

十三、mark

定义重要或强调的内容。

<mark>这是一个强调的内容</mark>

学新通

十四、time

定义日期/时间。

<time datetime="2020-1-1">2020-1-1</time>

十五、datalist

定义输入控件的预定义选项。
通常配合input标签一起使用

    <input list="data" >
    <datalist id="data">
        <option value="web">web</option>
        <option value="java">java</option>
        <option value="python">python</option>
    </datalist>

学新通

十六、新的输入属性

输入属性	作用
autocomplete	规定表单或输入字段是否应该自动完成。
novalidate	属于 `<form>` 属性 ,在提交表单时不对表单数据进行验证。
disabled	规定输入字段是禁用的。
maxlength	规定输入字段允许的最大长度
autofocus	规定当页面加载时 `<input>` 元素应该自动获得焦点。
form	规定 `<input>` 元素所属的一个或多个表单。
list	引用的 `<datalist>` 元素中包含了 `<input>` 元素的预定义选项。
readonly	规定输入字段为只读（不能修改）
multiple	规定允许用户在 `<input>` 元素中输入一个以上的值。适用email 和 file。
pattern	规定用于检查 `<input>` 元素值的正则表达式。
placeholder	规定用以描述输入字段预期值的提示
required	规定在提交表单之前必须填写输入字段。
step	规定 `<input>` 元素的合法数字间隔。
formaction	规定当提交表单时处理该输入控件的文件的 URL,适用submit，image
formenctype	规定当把表单数据（form-data）提交至服务器时如何对其进行编码，适用post提交
formmethod	定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formnovalidate	规定在提交表单时不对 `<input>` 元素进行验证。
formtarget	规定的名称或关键词指示提交表单后在何处显示接收到的响应。

这篇好文章是转载于：学新通技术网

HTML5 新增元素

一、页面布局

二、新增表单元素

三、output元素

四、address

五、progress

六、meter

七、figure 和 figcaption

八、fieldset 和 legend

九、script

十、bdi

十一、details和summary

十二、dialog

十三、mark

十四、time

十五、datalist

十六、新的输入属性

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐