HTML5新增标签及CSS3新增属性

比眉伴天荒 2022-05-30 05:35 390阅读 0赞

# 一、h5新增标签 #

<table style="width:860px;text-align:center;"> 
 <thead> 
 <tr> 
 <th style="vertical-align:middle;">新增元素</th> 
 <th style="vertical-align:middle;">说明</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td style="vertical-align:middle;">video</td> 
 <td style="vertical-align:middle;">表示一段视频并提供播放的用户界面</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">audio</td> 
 <td style="vertical-align:middle;">表示音频</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">canvas</td> 
 <td style="vertical-align:middle;">表示位图区域</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">source</td> 
 <td style="vertical-align:middle;">为video和audio提供数据源</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">track</td> 
 <td style="vertical-align:middle;">为video和audio指定字母</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">svg</td> 
 <td style="vertical-align:middle;">定义矢量图</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">code</td> 
 <td style="vertical-align:middle;">代码段</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">figure</td> 
 <td style="vertical-align:middle;">和文档有关的图例</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">figcaption</td> 
 <td style="vertical-align:middle;">图例的说明</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">main</td> 
 <td style="vertical-align:middle;">主内容区</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">time</td> 
 <td style="vertical-align:middle;">日期和时间值</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">mark</td> 
 <td style="vertical-align:middle;">高亮的引用文字</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">datalist</td> 
 <td style="vertical-align:middle;">提供给其他控件的预定义选项</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">keygen</td> 
 <td style="vertical-align:middle;">秘钥对生成器控件</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">output</td> 
 <td style="vertical-align:middle;">计算值</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">progress</td> 
 <td style="vertical-align:middle;">进度条</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">menu</td> 
 <td style="vertical-align:middle;">菜单</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">embed</td> 
 <td style="vertical-align:middle;">嵌入的外部资源</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">menuitem</td> 
 <td style="vertical-align:middle;">用户可点击的菜单项</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">menu</td> 
 <td style="vertical-align:middle;">菜单</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">template</td> 
 <td style="vertical-align:middle;">声明是模块元素</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">section</td> 
 <td style="vertical-align:middle;">独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分； </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">nav</td> 
 <td style="vertical-align:middle;">导航条部分信息</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">aside</td> 
 <td style="vertical-align:middle;">标签内容之外与标签内容相关的辅助信息</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">article</td> 
 <td style="vertical-align:middle;">特殊独立区块，表示这篇页眉中的核心内容</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;">footer/header</td> 
 <td style="vertical-align:middle;">底部信息/头部信息</td> 
 </tr> 
 <tr> 
 <td style="vertical-align:middle;font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun;">&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

#  #

# 二、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

# 另附一些H5不再支持的标签： #

1、acronym(建议abbr) ： 定义首字母缩写

2、applet(建议object)：  定义 applet

3、basefont(使用css控制)

4、big(使用css控制) ：定义大号文本

5、center(使用css控制)： 定义居中的文本

6、font(使用css控制)

7、strike(使用del) ：定义加删除线的文本

8、tt（使用css控制）： 定义打字机文本。

9、u(使用css控制) ：定义下划线文本

10、frame(建议iframe)： 定义子窗口（框架）。

11、frameset ：定义框架的集