HTML5新增标签属性
关于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
除此之外h5还新增了更多的语义化标签，能够更加好的被搜索引擎所理解。
浏览器支持
所以的浏览器都没有一个统一的标准，对于开发者而言。我们需要适配各种浏览器特性！于是各种浏览器的兼容性问题就来了。
对于IE8以及以下浏览器，h5已经不再支持！对于现代浏览器（比如 火狐 chrome opear）也不全部支持，哪些支持我们可以参考这个网站：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://segmentfault.com/q/1010000009486869?_ea=1945542
header 头部
<header> </header>
定义头部 页眉，更具有语义化了
nav 导航
<nav></nav>
导航标签 一般写在导航的包裹 可以在里面套a标签 而ulli布局导航这点没有变化…
section 定义文档中的节 一个独立的区域
<section></section>
该元素用于对页面的内容进行分块！
article 页面中独立的内容
<article></article>
该元素用来代表页面上独立的。完整的一片文章！可以是一个帖子，一片博客文章，一篇短文，一条完整的回复等等。
article 和 section的区别
article 和 section 两个元素容易搞混，因为他们可以互相嵌套包含！但是两者侧重点不同！ article 侧重表达文章，或者帖子 section 侧重对页面进行分块 也就是说：如果想表达一块完整的独立的内容用 article ！如果想把一块内容分成几个部分用 section
aside 侧边栏
<aside>侧边栏广告</aside>
footer 文档底部
<footer></footer>
特殊结构标签 figure 定义独立的流内容
<figure> 这是组合标签<figcaption>这是一张图片</figcaption><img /></figure>
表示一块独立的“图片区域”可以包含一个或者多个img图片标签！
figcaption用于定义改图片区域的标题！
hgroup 标题标签的组合
<hgroup><h2></h2><h3></h3></hgroup>
mark 重点显示
<mark>重点突出</mark>
不要 用于语法高亮目的; 他是用来表示重点突出！
meter 尺度
显示已知范围的标量值或者分数值
min='最小值' max=‘最大值’ value=‘当前值’low=‘低的范围’ high=‘高的范围’low和highoptimum最优值
progress 进度条
元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.
<progress min='' max='' value=''></progress>
dialog 对话框
表示对话框或其他交互式组件
open 用于打开
<dialog open>啦啦啦</dialog>
details
用于创建一个公开部件，其中只有当小部件被切换到“开”的状态信息是可见的。
没有办法让开放和封闭之间的过渡动 画化
<details open><summary>木马</summary> 标题<p>帅气</p> 描述</details>
低版本兼容
手动加上display:block;
仅仅这样还是不够的，我们需要创建自定义标签:
<head><script>document.createElement('header')</script></head>
注释语句
在满足条件的时候使用script标签里面的js代码
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->兼容ie9以下<!--[if lte IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->兼容ie9及其以下
css样式重用
一个样式多次利用,通过添加共同的类名来实现
.clearfix{display:block;content:'';clear:both;}
css模块化开发
不同网页中 相同的功能模块,可以重复引入到不同的网页中
网站logo
.首先得有一个.ico 作为扩展名 文件 然后引入 ok
<link rel="shortcut icon" href="/dir/favicon.ico" type="image/x-icon">
﹏ヽ暗。殇╰゛Y
傷城~
还没有评论，来说两句吧...