HTML5新增的元素和特性 · CSS

[TOC] # 1. 文档类型声明 HTML5的文档声明为`<!DOCTYPE html>`，此外还有HTML4s、XHTML的自行百度。 # 2. 字符设定 ```html <meta http-equiv="charset" content="utf-8">：/* HTML与XHTML中建议这样去写 */ ``` ```html <meta charset="utf-8">：/* HTML5的标签中建议这样去写 */ ``` # 3.常用新标签 w3c 手册中文官网 : [http://w3school.com.cn/](http://w3school.com.cn/)，或[菜鸟教程](https://www.runoob.com/html/html5-intro.html)网站 * header：定义文档的页眉头部 * nav：定义导航链接的部分 * footer：定义文档或节的页脚底部 * article：定义文章。 * section：定义文档中的节（section、区段） * aside：定义其所处内容之外的内容侧边 <br/> * datalist 标签定义选项列表。请与 input 元素配合使用该元素。 **`html\datalist选项列表.html`** * fieldset 元素可将表单内的相关元素分组和打包，与legend 搭配使用。 **`html\fieldset围绕表单的边框.html`** # 4. 新增的input type属性值 email、tel、url等。 # 5. 常用新属性用在input标签等需要输入的元素中： placeholder、autofocus、multiple、autocomplete、required、accesskey等。 **`作业与特效\表单综合案例-学生档案.html`** # 6. 背景缩放(CSS3) 通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。其参数设置如下： * 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高） * 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多 * 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。 ```css background-image: url('images/gyt.jpg'); background-size: 300px 100px; /* background-size: contain; */ /* background-size: cover; */ ``` # 7.多背景(CSS3) 以逗号分隔可以设置多背景，可用于自适应布局，做法就是用逗号隔开就好了。 * 一个元素可以设置多重背景图像。 * 每组属性间使用逗号分隔。 * 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。 * 为了避免背景色将图像盖住，背景色通常都定义在最后一组上， ```css background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px , url(test1.jpg) no-repeat scroll 10px 20px/70px 90px , url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa; ``` # 8.凹凸文字 **`html\凹凸文字.html`**