HTML5新增标签属性

傷城~ 2022-04-03 02:45 392阅读 0赞

## 关于h5 ##

兜兜转转终于学完CSS开始接h5了！其实h5没有大家想的那么复杂！我们之前学的pc端就是以h5的标准来的 只是那些标签是  
html4.01之前就有的！我们后面学的是h5标准出来之后 新增的一些！还有一个非常明显的变化就是可以直接在网页上插入视频，以往要在网页播放视频必须要第三方插件的支持！flash，当时出现了一批flash设计师！ 乔布斯说过flash是导致mac电脑奔溃的主要原因！所以flash插件很强大，但是也存在大量的安全漏洞！ 在2017年7月底Adobe公司宣布在2020年将停止flash的全部技术支持。转向更先进的h5webg。

h5还可以用来绘图，比如动画或者烟花。比如svg和canvas演示网站：[http://mrdoob.com/\#/158/threejs\_sketches][http_mrdoob.com_158_threejs_sketches]

**除此之外h5还新增了更多的语义化标签，能够更加好的被搜索引擎所理解。**

## **浏览器支持** ##

所以的浏览器都没有一个统一的标准，对于开发者而言。我们需要适配各种浏览器特性！于是各种浏览器的兼容性问题就来了。

对于IE8以及以下浏览器，h5已经不再支持！对于现代浏览器（比如 火狐 chrome opear）也不全部支持，哪些支持我们可以参考这个网站：[http://caniuse.com/][http_caniuse.com]

在我们书写样式的时候需要写上兼容性前缀（一个样式兼容多个浏览器的时候需要写多个兼容性前缀）：

只有有自己内核的浏览器才有兼容前缀**内核，可以理解成浏览器的心脏**

*  **-webkit  chrome safari 搜狗 QQ 等webkit内核的浏览器**
 *  **-moz  火狐**
 *  **-o-  Opera **
 *  **-ms-  ie**

## **新增结构标签** ##

**什么是语义化标签**

简单的来说就是让机器也能读懂页面内容。也就是写出的html代码更容易被开发者，浏览器，或者爬虫理解

**为什么要语义化网页**

html就像一个房子，标签是架构，每一个架构应该放在应该的地方！ （这里就是体现了标签的语义化,这也就是为什么不推荐整个页面全部是div，因为div在页面中是无意义的，仅仅是用来定义文档中的节） 而css就相当于颜料，壁纸，地板砖，将网页装饰更加美观！

所以语义化标签可以帮助浏览器更好的浏览网页！让网页（房子）有一个良好的结构！这样也能让爬虫更好的解析，有利于seo优化，提升网站的权重 而对于开发者来说也能增强代码的可读性，便于团队开发维护！还有很多盲人设备，比如屏幕阅读器，不同的标签发出不同的声音，语义化可以体现不同信息的重要性，还有很多优点，大家可以自行百度一下参考知乎这篇文章的第一个回答。

链接：[https://www.zhihu.com/question/20005488 ][https_www.zhihu.com_question_20005488]

没有语义化标签可能会带来的问题：[https://segmentfault.com/q/1010000009486869?\_ea=1945542][https_segmentfault.com_q_1010000009486869_ea_1945542]

### header 头部 ###

定义头部 页眉，更具有语义化了

### nav 导航 ###

导航标签 一般写在导航的包裹 可以在里面套a标签 而ulli布局导航这点没有变化…

### section 定义文档中的节 一个独立的区域 ###

该元素用于对页面的内容进行分块！

### article 页面中独立的内容 ###

该元素用来代表页面上独立的。完整的一片文章！可以是一个帖子，一片博客文章，一篇短文，一条完整的回复等等。

**article 和 section的区别**

article 和 section 两个元素容易搞混，因为他们可以互相嵌套包含！但是两者侧重点不同！ article 侧重表达文章，或者帖子 section 侧重对页面进行分块 也就是说：如果想表达一块完整的独立的内容用 article ！如果想把一块内容分成几个部分用 section

### aside 侧边栏 ###

<aside>侧边栏广告</aside>

### footer 文档底部 ###

### 特殊结构标签 figure 定义独立的流内容 ###

<figure> 这是组合标签
        <figcaption>这是一张图片</figcaption>
        <img />
    </figure>

表示一块独立的“图片区域”可以包含一个或者多个img图片标签！   
figcaption用于定义改图片区域的标题！

### hgroup 标题标签的组合 ###

### mark 重点显示 ###

不要 <mark> 用于语法高亮目的; 他是用来表示重点突出！

### meter 尺度 ###

显示已知范围的标量值或者分数值

min='最小值' max=‘最大值’ value=‘当前值’low=‘低的范围’ high=‘高的范围’low和high
    optimum最优值

### progress 进度条 ###

元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.

### dialog 对话框  ###

表示对话框或其他交互式组件   
open 用于打开

### details ###

用于创建一个公开部件，其中只有当小部件被切换到“开”的状态信息是可见的。   
没有办法让开放和封闭之间的过渡动  画化

## 低版本兼容 ##

手动加上display:block;

**仅仅这样还是不够的，我们需要创建自定义标签:**

<head>
        <script>
        document.createElement('header')
        </script>
    </head>

### 注释语句 ###

**在满足条件的时候使用script标签里面的js代码**

兼容ie9以下
    
    兼容ie9及其以下

### css样式重用 ###

一个样式多次利用,通过添加共同的类名来实现

.clearfix{
        display:block;
        content:'';
        clear:both;
    }

### css模块化开发 ###

不同网页中 相同的功能模块,可以重复引入到不同的网页中

### 网站logo ###

.首先得有一个.ico 作为扩展名 文件 然后引入 ok

[http_mrdoob.com_158_threejs_sketches]: http://mrdoob.com/#/158/threejs_sketches
[http_caniuse.com]: http://caniuse.com/
[https_www.zhihu.com_question_20005488]: https://www.zhihu.com/question/20005488%C2%A0
[https_segmentfault.com_q_1010000009486869_ea_1945542]: https://segmentfault.com/q/1010000009486869?_ea=1945542