HTML学习笔记03——HTML5新标签（结构标签、多媒体标签、Input的typ、input新属性）

最新推荐文章于 2023-12-24 15:46:26 发布

@班

最新推荐文章于 2023-12-24 15:46:26 发布

阅读量260

点赞数

分类专栏： html 文章标签： html新标签/新元素新多媒体元素 header footer等新Input属性新type

本文链接：https://blog.csdn.net/weixin_43273271/article/details/100727352

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML学习笔记03——新标签（结构标签、多媒体标签、Input的typ、input新属性）

新结构标签
- 标签介绍
- section、article与div的区别
新多媒体元素
- 标签介绍
新增input的typ
新input属性

新结构标签

标签介绍

新元素	描述
`<header>`	页面或区段的头部。多数情况下只有在h1~h6或者是hgroup才使用header将其组合起来， header里不允许嵌套footer元素或另一个header, header可以不包含nav元素，不过多数情况下，如果header包含导航性链接，可以用nav。
`<nav>`	定义导航链接的部分。 HTML5不允许将nav嵌套在address元素中
`<section>`	定义文档中的节（section、区段）,一般是一组相似的内容
`<article>`	定义页面独立的内容区域, article中可以嵌套使用header、footer、article。
`<aside>`	定义补充或相关内容
`<footer>`	定义 section 或 document 的页脚。可以放附录、索引、版权页、许可协议等,footer里嵌套header或另一个footer

案例：

<body>
<header id="page_header">
    <h1>Header</h1>
    <nav>
    <ul>
    <li><a href="#">首页</a></li>
    <li> <a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    </ul>
</nav>
</header>
<section id="posts">
    <article class="post">
        这里是第1个article
        这里是第1个article
        <article>
            这里是第一个article内的article
        </article>
    </article>
    <article class="post">
        这里是第2个article
    </article>
    <article class="post">
        <header>
            <b>article的header</b>
        </header>
        <footer>
            <b>article的footer</b>
        </footer>
    </article>
</section>
<footer id="page_footer">
    <h1>footer</h1>
</footer>
</body>

section、article与div的区别

section、article、div之间最大的区别就是语义上的区别。

div没有任何语义，它只是用于样式化或者脚本标签化，没有任何主题性。
section比div更具有语义。它具有主题性。
article的语义最强，它也具有主题性，但它可以脱离上下文，作为完整的独立存在的一段内容。

新多媒体元素

标签介绍

新元素	描述	属性
`<embed>`	插入多媒体	type（定义嵌入内容的类型）； height（设置嵌入内容的高度）； src（嵌入内容的 URL）； width（设置嵌入内容的宽度）
`<audio>`	插入视频	autoplay（如果出现该属性，则音频在就绪后马上播放。） controls（如果出现该属性，则向用户显示控件，比如播放按钮。） loop（如果出现该属性，则每当音频结束时重新开始播放。） muted（静音） preload（音频在页面加载时进行加载，并预备播放，使用 “autoplay”，则忽略该属性） src（插入文件的地址）
`<video>`	插入音乐	autoplay（如果出现该属性，则视频在就绪后马上播放）。 controls（如果出现该属性，则向用户显示控件，比如播放按钮。） height（设置视频播放器的高度。） loop（循环播放） muted（静音） poster（显示图像） preload（页面加载同时加载视频，并预备播放，出现autoplay，则忽略） src（插入视频的地址） width（设置视频播放器的宽度）

创建一个多媒体

<embed src="" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="">
</embed>

创建一个视频

<audio src="someaudio.wav"  width="480" height="400"></audio>

创建一个音频

<video src="movie.ogg" controls="controls" width="480" height="400"></video>

新增input的typ

新typ	描述
`email`	电子邮箱输入控件，提交表单是会自动验证输入值。
`tel`	用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
`url`	用于编辑URL的字段，如果输入的是网址则必须由`“http://”`或`“https://”`开头
`number`	数字文本框，只能输入数字
`search`	搜索框，换行会被从输入的值中自动移除。
`range`	滑动条
`time`	时间输入控件
`date`	日期输入控件
`month`	年月输入控件，不带时区
`datetime`	基于UTC时区的日期时间输入控件
`week`	可以输入一个由星期-年组成的日期，日期不包括时区

新input属性

新属性	描述
`placeholder`	默认信息，当用户输入的时候，删除里面的文字
`autofocus`	自动获取焦点
`multiple`
`autocomplete`
`required`	必填项，如果此项没有填则不能提交表单
`accesskey`	定激活（使元素获得焦点）元素的快捷键
`list`	需与datalist标签一起使用，规定输入域的选项列表
`form`	应用场景：某input标签在form标签外，在提交form时这个input的值也需要作为参数一起传递。使用方法：将input标签中form属性的值填写为待提交表单的id

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="get" id="test">
    默认信息 placeholder：
    <input type="text" name="username" placeholder="请输入用户名"/>
    <br/>
    自动获得焦点 autofocus：
    <input type="text" name="password" autofocus/>
    <br/>
    required 必填项：
    <input type="text" name="phone" required/>
    <br/>
    list：
    <input type="text" name="age" list="year"/>
    <datalist id="year">
        <option value="18"></option>
        <option value="20"></option>
    </datalist>
    <br/>
    accesskey 设置alt+acesskey值快捷键，使控件获得焦点：
    <input type="text" accesskey="h" value="按住Alt+h，这里会获得焦点">
    <br/>
    <input type="submit" name="submit">
</form>
form:<input type="text" name="email" form="test"/>
</body>
</html>