HTML5和CSS3简单介绍
一、html5新标签：
HTML5中必须在开头写有<! doctype html>的标签
(1)
<article>定义 article。(2)
<aside>定义页面内容之外的内容。(3)
<audio>定义声音内容。<audio>标签的属性：
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
srcurl要播放的音频的 URL。(4)
<section>定义 section。(5)
<datalist>定义下拉列表。eg：
<inputid="myCar"list="cars"/><datalistid="cars"><optionvalue="BMW"><optionvalue="Ford"><optionvalue="Volvo"></datalist>
需注意的是，input标签list属性中的值必须与下面datalist中id的值一致，表单才可呈现。
(6)
(7)
<figure>定义媒介内容的分组，以及它们的标题。(8)
<textarea>定义 textarea。(9)
<video>定义视频。<video>标签的属性：
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。(10)
二、CSS 3：
（1）新增选择器：
E:link
链接伪类选择器
设置超链接a在未被访问前的样式。
E:hover
用户操作伪类选择器
设置元素在其鼠标悬停时的样式。
E:active
用户操作伪类选择器
设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus
用户操作伪类选择器
设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
EF
包含选择符
选择所有被E元素包含的F元素。
E>F
子选择符
选择所有作为E元素的子元素F。
E+F
相邻选择符
选择紧贴在E元素之后F元素。
E~F
兄弟选择符
选择E元素所有兄弟元素F。
E:nth-last-child(n)
匹配父元素的倒数第n个子元素E。
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E。
E:empty
匹配没有任何子元素（包括text节点）的元素E。
E:checked
CSS3
匹配用户界面上处于选中状态的元素E。(用于inputtype为radio与checkbox时)
E、F代表任何标签，后面是给标签添加的相关属性，用来做出相应的效果。
(2)css中的box属性：
overflow-x如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。overflow-y如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。overflow-style规定溢出元素的首选滚动方法。其中overflow属性有
visible不裁剪内容，可能会显示在内容框之外。hidden裁剪内容 - 不提供滚动机制。scroll裁剪内容 - 提供滚动机制。auto如果溢出框，则应该提供滚动机制。no-display如果内容不适合内容框，则删除整个框。no-content如果内容不适合内容框，则隐藏整个内容。（3）css中的多背景及背景的属性：
多背景：
其中图片1在2的上面，2在3的上面。
在background中，如果想要的放置多张图片，只需用“ ，”将图片的url依次放入，但请记住，图层在上的必须要最先放入。图片的尺寸也可以写在一起，前面的数值为宽，后的数值为高。
属性：
（1）
background-p_w_upload设置背景图像是否固定或者随着页面的其余部分滚动。其中backg-p_w_upload中的属性还有
scroll默认值。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分滚动时，背景图像不会移动。inherit规定应该从父元素继承 background-p_w_upload 属性的设置。（2）渐变效果：
线性渐变
background：linear-gradient（方向，颜色1，颜色2，....）
其中方向可以用to left（right），角度来写。
径向渐变
background：radius-gradient（位置，颜色1，颜色2，...）
（4）多序排列：
column-count规定元素应该被分隔的列数。column-gap规定列之间的间隔。column-rule分隔线column-span规定元素应该横跨的列数。column-width规定列的宽度。columns规定设置 column-width 和 column-count 的简写属性。其中
column-count后面写需要的列数
column-gap后面写相隔的像素大小
column-rule后面写线性，粗细，颜色（分隔线）
column-width后面写想分的宽度
（5）响应式图片（根据浏览器窗口的大小调整照片的大小）
限大：max-width:比例（100%）/像素/height：auto
限小：min-width:像素大小
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
