第四章:HTML5新特性

目录

一、新增语义化标签

1.新增布局标签

2.新增文本标签

3.新增列表标签

4.新增状态标签

二、新增全局属性

三、表单相关新增

1.新增表单控件属性

2.新增多媒体标签

(1)新增视频标签

(2)新增音频标签

3.input新增的type属性

 四、兼容性处理

五、总结


一、新增语义化标签

1.新增布局标签

新增布局标签主要是header,nav,aside,article,section以及footer。

header标签是指整个页面或部分区域的头部。footer指整个页面或部分区域的底部,即页脚。nav是导航的意思,用于页面的导航栏。article用于文章,帖子,杂志,新闻,博客,评论等等,更强调独立性。section指页面中某段文字,或文章中的某段文字,强调的是分段分块,指代部分。aside指侧边栏。

2.新增文本标签

H5新增了两个文本标签,分别是注音标签和标记文字的标签。

注音标签:由ruby标签和rt标签组成,使用如下:

<!-- 注音 -->
    <ruby>
        <span>魑魅魍魉</span>
        <rt>chi mei wang liang</rt>
    </ruby>

 标记文字标签:mark,用于标记一段文字。使用方法:

<!-- 标记文字 -->
    <p>Lorem <mark>ipsum</mark> dolor sit</p>

3.新增列表标签

主要新增了两个列表标签datalist和details。

datalist要结合输入框使用,可以内置输入选项,和下拉框的区别是datalist是输入框,当输入数据时,会和内置的选项进行对比,选出相同的选项,类似搜索软件的搜索框。使用如下:

<form action="#">
        <input type="text" list="mydata">
        <button>搜索</button>
    </form>
    <datalist id="mydata">
        <option value="周杰伦">周杰伦</option>
        <option value="周冬雨">周冬雨</option>
        <option value="马冬梅">马冬梅</option>
        <option value="温兆伦">温兆伦</option>
    </datalist>

当点击输入框时,四个选项都出现,但输入“周”之后,就只剩下了带“周”字的了。

details是可以隐藏自定义列表的解释部分,用法:

<details>
        <summary>如何成为一名合格的程序员?</summary>
        <p>坚持学习</p>
    </details>

效果:默认隐藏解释的,点击才会出现,再次点击隐藏。

4.新增状态标签

新增的状态标签有两个:电量显示和当前进度。

电量显示meter:可以通过设置属性值,调整不同电量下的颜色,例如:    <meter max="100" min="0" value="11" low="10" high="20" optimum="90"></meter>

value值是当前的值,0~9是红色的,10~19是黄色的,20-100是绿色的,optimum代表最佳值。

当前进度progress:设置不同属性值,调整显示,value值是当前的值,用法:<progress max="100" value="20"></progress>。

二、新增全局属性

H5新增常用的有六个属性:contenteditable,draggable,hidden,spellcheck,contextmenu,data-。

contenteditable:表示元素是否可以被用户编辑,可选值为true和false;

draggable:表示元素是否可以被拖动,可选值为true和false;

hidden:隐藏元素;

spellcheck:规定是否对元素进行拼写和语法检查,可选值为true和false;

contextmenu:规定元素的上下文菜单,用户鼠标右键点击元素时显示。

data-:自定义属性,主要用于配合js使用,储存页面的私有定制数据。

三、表单相关新增

1.新增表单控件属性

placeholder:适用于输入框,作用是提示用户输入内容。

required:表示必须要选择一个,适用于多选框和单选框,单选框使用时表示此项必填,但是用于多选框是表示必须选择required所在的选项。

autofocus:自动获取焦点,即进入页面焦点自动获取,当有多个自动获取焦点是,应用第一个获取的焦点。

autocomplete:自动完成,效果是上一次输入之后,下一次再次点击输入框时,会弹出上次输入的,即保留记录。可选值为on和off,只能用于文本框。

pattern:限制输入的内容,值是正则表达式,适用于文本框和输入框。

2.新增多媒体标签

(1)新增视频标签

视频标签是video,通过src引入视频,src的值和img是一样的,可以通过width,height设置宽高。

需要添加controls属性才能播放视频,muted属性可以设置进入页面默认视频静音,autoplay设置自动播放,loop设置循环播放,poster属性设置视频的封面,preload设置自动加载,即进入页面视频自动先加载出一部分,可选值为none,metadata,auto。

(2)新增音频标签

音频标签是audio,其余和视频标签基本一样,src,controls,muted,loop等等。

3.input新增的type属性

H5新增了很多输入框的type值,有邮箱,URL,数值,搜索,电话,范围选择器,颜色,日期,月份,星期,时间,时间+日期等等。

使用:

<!-- novalidate不做任何校验格式,直接提交 -->
    <form action="#" novalidate>
        邮箱:<input type="email" name="email">
        <br>
        URL:<input type="url" name="url">
        <br>
        数值:<input type="number" name="number" step="10" max="80" min="20">
        <br>
        搜索:<input type="search" name="keyword">
        <br>
        电话:<input type="tel" name="phone">
        <br>
        范围选择器:<input type="range" name="range" max="80" min="20" value="30">
        <br>
        颜色:<input type="color" name="color">
        <br>
        日期:<input type="date" name="date">
        <br>
        月份:<input type="month" name="month">
        <br>
        星期:<input type="week" name="week">
        <br>
        时间:<input type="time" name="time">
        <br>
        时间+日期:<input type="datetime-local" name="time2">
        <button>提交</button>
    </form>

效果:

 四、兼容性处理

H5的新标签部分浏览器是无法识别的,比如版本较低的IE浏览器。

处理这种问题方法有很多,此处介绍两种:1.可以直接引入谷歌公司写的一个js文件,但是这个文件也不是万能的,只能处理部分新标签,使用方法:在head标签中写此句命令,

<!--[if lt ie 9]>

     <script src="./html5shiv.js"></script>

     <![endif]-->

该js文件的下载链接:HTML5/兼容性处理/html5shiv.js · Rocket/learn-HTMLAndCss - 码云 - 开源中国

2.第二种方法在上一章节讲过,使用meta语句。

五、总结

本章节介绍了H5新增的属性和标签,这些功能十分常用,且市面上多数浏览器都支持,祝大家天天进步,加油!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值