h5新增标签及css3新增属性

发布时间：2023-09-06 02:10责任编辑：顾先生关键词：暂无标签

- h5新增的标签

- 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>

h5新增标签及css3新增属性

原文地址：https://www.cnblogs.com/lskzj/p/9496573.html