HTML5新增属性

Posted 2021-09-24 tea_year

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5新增属性相关的知识，希望对你有一定的参考价值。

typora-root-url: ./

html5新增元素及属性

1、HTML5阶段内容

HTML5新增元素、属性
表单元素
CSS3高级特效以及CSS3动画

video、audio
canvas
本地存储、离线缓存

课程导学

课程特点：
少逻辑多语义
简单易学高效
学习方法
固定标签、属性、语法需要记忆
勤加练习，善于总结，归纳易错点

本章目标

了解什么是HTML5及其应用场景
掌握HTML5新增的元素及属性
会使用CSS3高级选择器美化网页
掌握HTML5新增的表单元素及属性

2、HTML5应用场景

酷炫网站制作
游戏开发
移动开发
应用开发

3、什么是HTML5

HTML5是用于取代HTML和XHTML的标准版本
新特性
新的语义化标签，比如 header、footer、nav
新的表单控件，比如 email、url、search
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素

4、HTML5新增结构元素

做网页布局使用：

标签	说明
header	页面或页面中某一个区块的页眉，通常是一些引导和导航信息
nav	可以作为页面导航的链接组
section	页面中的一个内容区块，通常由内容及其标题组成
article	代表一个独立的、完整的相关内容块，可独立于页面其它内容使用
aside	非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容【侧边栏】
footer	页面或页面中某一个区块的脚注【版权信息】

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x2Gv7duX-1629718533816)(/assetis/image-20210323211328426.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h5结构元素</title>

    <style>
        .box{
            width: 800px;
            margin: 0 auto;
        }
        header{
            height: 40px;
            background-color: rgb(252, 111, 111);
        }
        nav{
            height: 40px;
            background-color: aquamarine;
        }
        .main{
            width: 800px;
            height: 500px;
            overflow: hidden;
        }
        aside{
            width: 300px;
            height: 100%;
            background-color: rgb(190, 218, 35);
            float: left;
        }
        article{
            width: 500px;
            height: 100%;
            background-color: rgba(23, 179, 106, 0.747);
            float: left;
        }

        footer{
            height: 40px;
            background-color: rgb(236, 165, 165);
        }
    </style>
</head>
<body>
    <div class="box">
        <header>header导航栏</header>
        <nav>nav导航主题连接部</nav>
        <div class="main">
            <aside>aisde边侧栏</aside>
            <article>article主题部分</article>
        </div>
        <footer>footer底部</footer>
    </div>
</body>
</html>

5、HTML5废除的元素

能用css替代的元素：big、center、font、strike等
不再使用frame框架
只有部分浏览器支持的元素：applet、bgsound、marquee等
其他被废除的元素：rb、dir、isindex、listing、nextid等

iframe框架，网页嵌套:

 <iframe src="http://www.baidu.com" frameborder="0" width="100%" height="800px"></iframe>

6、HTML5新增全局属性

属性	说明
contentEditable	规定是否允许用户编辑内容
designMode	规定整个页面是否可编辑【js中，document.designMode=‘on’；off代表不可编辑】
hidden	规定对元素进行隐藏
time	标签定义日期或时间所有的浏览器都不支持，作用就是用来标识时间，方便爬虫获取
tabindex	规定元素的tab键迭制次序

body>
    <!-- tabindex 根据tabindex='值'  设置按table键执行的先后顺序 -->
     <p tabindex="5">哈哈哈哈</p>   
     <h1 tabindex="3">h1h1h1h1h1h1h1</h1>
     <ul>
         <li tabindex="1">li_11111</li>
         <li tabindex="4">li_22222</li>
         <li tabindex="2">li_33333</li>
     </ul>
</body>

7、HTML5废除的属性

table部分属性：bgcolor、border、cellpadding、width等

html的version属性

a元素或者link元素的charset属性

br的clear属性、img的align属性

摒弃的原因，可以用css样式实现的方法，h5在结构中摒弃掉。

即：样式和结构分离

8、CSS3高级选择器

选择器	描述
first-of-type	p:first-of-type选择属于其父元素的首个元素
last-of-type	p:last-of-type选择属于其父元素的最后元素
only-of-type	p:only-of-type 选择属于其父元素唯一的元素
first-child	p:first-child选择属于其父元素第一个子元素
last-child	p:last-child选择属于其父元素最后一个子元素，如果最后一个子元素不是p,则不生效
nth-child(n)	p:nth-child(n)选择属于其父元素的第n个子元素，n从1开始
nth-of-type(n)	p:nth-of-type(n)选择属于其父元素的第n个p元素
:before	p:before在每个元素的内容之前插入内容
:after	p:after在每个元素的内容之后插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3高级选择器</title>

    <style>
        /* p:last-child{
            color: red;
        } */
    
        p:last-of-type{
            color: red;
        }

        /* p:first-of-type{
            color: green;
        } */

        /* 找到第一个子元素，同时第一个子元素需要时p */
        p:first-child{
            color: red;
        }

        .four:only-of-type{
            color: red;
        }

        p:nth-of-type(3){
            color: green;
        }

        /* 元素的内容前插入 */
        h1::before{
            /* content: '￥'; */
            content:url(./fang.png);
           
        }

         /* 元素的内容后插入 */
         h1::after{
             content: '元';
         }
    </style>
</head>
<body>
  <!--   选择器	描述
    first-of-type	p:first-of-type选择属于其父元素的首个<p>元素
    last-of-type	p:last-of-type选择属于其父元素的最后<p>元素
    only-of-type	p:only-of-type  选择属于其父元素唯一的 <p> 元素
    first-child	    p:first-child选择属于其父元素第一个子元素<p>
    last-child	    p:last-child选择属于其父元素最后一个子元素<p>
    nth-child(n)	p:nth-child(n)选择属于其父元素的第n个子元素<p>
    :before	        p:before在每个<p>元素的内容之前插入内容
    :after      	p:after在每个<p>元素的内容之后插入内容
     -->
</body>

<div>
    <a href="">第一个a</a>
    <p>我是第1个p</p>
    <p>我是第2个p</p>
    <p>我是第3个p</p>
    <p class="four">我是第4个p</p>
    <a href="">最后的a</a>
    <h1>999999</h1>

</div>
</html>

9、优先级算法

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
!important > 内联>id > class > tag
!important 比内联优先级高，但内联比 id 要高

加了!important 的属性优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
         /* 加了!important 的属性优先级最高 */
        ul{
            color: yellow !important;
        }
      
        #a{
            color: tomato;
        }
    </style>
</head>
<body>
    <ul style="color:green" id="a">
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
    </ul>
</body>
</html>

10、HTML5新增input类型

类型	说明
email	电子邮件地址文本框，提交表单时会自动验证email的值
url	网页的URL，提交表单时会自动验证url的值
color	主要用于选取颜色
search	用于搜索引擎（搜索框）
number	只包含数值的字段，能够设定对所接受的数字的限定
range	滑动条，特定值范围内的数值选择器
Date pickers	拥有多个可供选取日期的新输入类型

email:

 <form action="">
        <input type="email">
        <button>提交</button>
    </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bi5gb5SE-1629718533819)(/assetis/image-20210323222805609.png)]

 <form action="">
        <!-- 网址必须输入http://**** .com/cn -->
        网址：<input type="url">
        <button>提交</button>
    </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bf9ahomc-1629718533823)(/assetis/image-20210323223116305.png)]

 <form action="">
        颜色：<input type="color">
        <button>提交</button>
    </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dB6vbIlo-1629718533826)(/assetis/image-20210323223334098.png)]

 <form action="">
        搜索：<input type="search">
        <button>提交</button>
    </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGmEw1yl-1629718533828)(/assetis/image-20210323223511081.png)]

新增input类型—number

<input type="number" name= "num" min="3" max="20" step="3" value="3"/>

属性	值	说明
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔
value	number	规定的默认值

 <form action="">
        <!-- 如果默认中是偶数 step是非1的数字 第一下加减的时候会先加减一  变为奇数 -->
        数字：<input type="number" max="10" min="1" step="2" value="4">
        <button>提交</button>
    </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bszu4q7L-1629718533831)(/assetis/image-20210323224019865.png)]

新增input类型—range

<input type="range" name= "point" min="2" max="15" step="1" value="3"/>

属性	值	说明
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔
value	number	规定的默认值

<form action="">
        范围：<input type="range" max="10" min="1" step="1" value="5">
        <button>提交</button>
    </form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whDgSLAf-1629718533833)(/assetis/image-20210323224530526.png)]

新增input类型—Date pickers

类型	说明
date	选择日、月、年
month	选择月、年
week	选择周和年
time	选择时间（小时和分钟）
datetime-local	选择时间、日、月、年（本地时间）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LfqulG73-1629718533835)(/assetis/image-20210323224950047.png)]

 <form action="">
        <div>年月日：<input type="date"></div> 
        <div>年月：<input type="month"></div> 
        <div>年周：<input type="week"></div> 
        <div>小时和分钟：<input type="time"></div> 
        <div>本地时间：<input type="datetime-local"></div> 
        
    </form>

新增input属性

属性	说明
autofocus	页面加载时自动获得焦点
required	规定输入域不能为空
placeholder	提供一种提示，描述输入域所期待的值
pattern	规定验证input域的模式（正则表达式）如：pattern="[0-9]+"
height、width	仅适用于image类型的input标签的图像高度和宽度

规定不能为空 required：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ehTPquwk-1629718533837)(/assetis/image-20210323225529313.png)]

规定输入的内容：pattern="[0-9]+"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrfqK0iM-1629718533839)(/assetis/image-20210323225735552.png)]

  <form action="">
        <div>用户名：<input type="text" required></div>
        <div>密 码:<input type="password" autofocus></div>
        <div>输入0-9:<input type="text" pattern="[0-9]+"></div>
        <button>提交</button>
    </form>

规定不能为空 required：

[外链图片转存中…(img-ehTPquwk-1629718533837)]

规定输入的内容：pattern="[0-9]+"

[外链图片转存中…(img-yrfqK0iM-1629718533839)]

  <form action="">
        <div>用户名：<input type="text" required></div>
        <div>密 码:<input type="password" autofocus></div>
        <div>输入0-9:<input type="text" pattern="[0-9]+"></div>
        <button>提交</button>
    </form>

以上是关于HTML5新增属性的主要内容，如果未能解决你的问题，请参考以下文章

HTML5新增属性

浏览器本地存储(Html5新增:WebStorage)

html5新增及废除属性

[html5] 学习笔记-表单新增的元素与属性（续）

HTML5自学笔记[ 2 ]新增表单控件和表单属性