HTML5
1.改变:HTML5的设计目的是为了在移动设备上支持多媒体
HTML5 中的一些有趣的新特性：
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素，比如 article、footer、header、nav、section
5.新的表单控件，比如 calendar、date、time、email、url、search
<canvas>
1.新图表图像元素
[<canvas>](http://www.runoob.com/tags/tag-canvas.html)
标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
2.新多媒体元素
[<audio>](http://www.runoob.com/tags/tag-audio.html)
定义音频内容
[<video>](http://www.runoob.com/tags/tag-video.html)
定义视频（video 或者 movie）
[<source>](http://www.runoob.com/tags/tag-source.html)
定义多媒体资源 <video> 和 <audio>
[<embed>](http://www.runoob.com/tags/tag-embed.html)
定义嵌入的内容，比如插件。
[<track>](http://www.runoob.com/tags/tag-track.html)
为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
3.新表单元素
[<datalist>](http://www.runoob.com/tags/tag-datalist.html)
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
[<keygen>](http://www.runoob.com/tags/tag-keygen.html)
规定用于表单的密钥对生成器字段。
[<output>](http://www.runoob.com/tags/tag-output.html)
定义不同类型的输出，比如脚本的输出。
2.canvas
canvas只是图型容器,需要使用脚本来绘制图形
HTML
1.文本显示为单行，超过部分隐藏并使用省略号，实例:
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
效果: 文本显示为单行...
2.a标签的target属性
target="_blank" 表示在新窗口中打开
3.表格
table>th
table>tr>td
实例:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
效果:
表格.jpg
4.列表
ul>li 无序列表
ol>li 有序liebiao
dl>dt>dd 自定义列表
5.区块(有曾经面试的场景)
1.块元素:会独占一行显示,特点支持设置宽高
常见的块级元素:<h>,<p>,<ul>,<table>
2.内联元素
内联元素在显示时通常不会以新行开始。特点不支持宽高,元素的宽高是由内容的大小决定的
实例: <b>, <td>, <a>, <img>,<span>
这里需要注意的一点地方:我曾经在面试的时候,面试官问我:你能不能给我说说常见的行内块元素有哪些?
我当时是真的懵了,因为没有具体的区分过,我就反问他,您能不能给我举一个列子.然后面试官说:img元素
当时我觉得有一定的道理,但是回来查了资料发现,img其实是内联元素,我们说的内联元素的特点是不支持宽高,但是img却可以,为什么?
<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素.
替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。
对于表单元素，浏览器也有默认的样式，包括宽度和高度。
6.iframe标签
你可以在同一个浏览器窗口中显示不止一个页面。
<body>
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
</body>
表单from
注意点:不要使用button标签,改用input标签的type=button
CSS3
1.组合选择器:
在 CSS3 中包含了四种组合方式:
后代选取器(以空格分隔) div p{ 表示div下面的p不管多少级都可以}
子元素选择器(以大于号分隔） div>p{表示只有div下面的p 一级关系}
相邻兄弟选择器（以加号分隔） div+p{表示div和p同级并且只选择同级的第一个p标签}
普通兄弟选择器（以破折号分隔）div~p{表示和div同级的所有p}
2.淡入效果
我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:
左侧提示框/右侧箭头：
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
3.媒体查询(响应式布局)
原理:根据某一种条件来执行相应的操作
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
4.图像透明度
说明:opacity:取值范围0.0~1.0, 1.0表示原图,0.0表示完全透明
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* IE8 及其更早版本 */
}
5.属性选择器
<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue; 表示把所有包含title这个属性的 变成蓝色
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" href="http://www.runoob.com/">runoob.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>
格式:
[lang ^= en]
[lang *= en]
[lang = en] 表示lang属性等于en这个值的
[lang |= en]
[lang ~= en] 表示lang属性里包含en这个值的
6.表单样式
属性选择器样式无需使用class或id的形式:
实例
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
CSS
1.伪类是用来添加一些选择器的特殊效果
常用伪类:
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
其他伪类:
a:first-child 伪类来选择元素的第一个子元素
2.伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
常见的伪元素
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
实例
h1:before {content:url(smiley.gif);}
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
实例
h1:after{content:url(smiley.gif);}
3.下拉列表
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
background-color: pink;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>菜鸟教程</p>
<p>www.runoob.com</p>
</div>
</div>
</body>
</html>
4.下箭头▼
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
网友评论