- h5新增的标签
| 新增元素 | 说明 |
|---|---|
| video | 表示一段视频并提供播放的用户界面 |
| audio | 表示音频 |
| canvas | 表示位图区域 |
| source | 为video和audio提供数据源 |
| track | 为video和audio指定字母 |
| svg | 定义矢量图 |
| code | 代码段 |
| figure | 和文档有关的图例 |
| figcaption | 图例的说明 |
| main | |
| time | 日期和时间值 |
| mark | 高亮的引用文字 |
| datalist | 提供给其他控件的预定义选项 |
| keygen | 秘钥对生成器控件 |
| output | 计算值 |
| progress | 进度条 |
| menu | 菜单 |
| embed | 嵌入的外部资源 |
| menuitem | 用户可点击的菜单项 |
| menu | 菜单 |
| template | |
| section | |
| nav | |
| aside | |
| article | |
| footer | |
| header |
- css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
- 选择器
- 框模型
- 背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域 - 文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range - 2/3D转换
transform：向元素应用2/3D转换
transition：过渡 - 动画
- @keyframes规则：
animation、animation-name、animation-duration等 - 用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
语义化标签：
从开发者角度提高代码的可读性和可维护性
从网站角度，SEO优化
语义化标签的兼容问题：IE9以下不支持h5/css3标签，部分h5的api（ie9以下只是把这些标签当做行内元素看待）
解决方式：
语义化标签需要动态创建出来document.creatElement()，同时将新创建的元素设置成块级元素
或者是使用插件 `html5shiv.js `（必须引入在头部，在页面结构加载之前）
对于高版本浏览器不需要判断，只需要判断低版本浏览器即可：js可以判断客户端浏览器版本可以做到，但是不能做到js提前加载（navigator.userAgent）
解决：条件注释：根据浏览器版本加载内容（HTML/CSS等）
<head> <title></title> <!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]-->
</head>
原文地址：https://www.cnblogs.com/lskzj/p/9496573.html
时间： 2024-10-12 16:59:05