H5和CSS3中部分新增标签

来源：互联网发布：淘宝上电子发票在哪里编辑：程序博客网时间：2024/06/05 16:54

2017.11.11

1.HTML5可以看成是HTML5.0+CSS3+JavaScript+API的合体。HTML5受服务器的限制，所以在使用新标签的时候要考虑PC端的兼容性。

部分标签：hgroup：文件中一个区块的信息

figure：定义一组媒体内容

dialog：一个对话框

menu：菜单列表

progress：进度条

box-sizing:border-box;/*宽=width(包括border和padding)+margin*/

2.多媒体的应用

HTML5支持的视频格式 ogg(F、C、O)

MPEG[MP4](S、C)

webm(I、F、C、O)

括号内为支持的浏览器

代码：

<!DOCTYPE html>

<html>

</head>

<body>

浏览器版本太低，更换浏览器

</video>

您的浏览器暂不支持video标签。播放视频

</video >

</body>

</html>

Vedio的一些属性：autoplay表示自动播放（慎用，手机端会存在流量困扰）

loop表示循环

preload表示预播放

poster表示默认加载时显示的照片

muted表示设置为静音

3.HTML5支持的音频格式：ogg 支持的浏览器:C、F、O

MP3 支持的浏览器: I、C、S

Wav 支持的浏览器: F、O、S

（audio与video的代码写法类似）

代码：

<!DOCTYPE html>

<html>

</head>

<body>

</body>

</html>

4.表单 form

<!DOCTYPE html>

<html>

<style>

input:focus{

background:yellow;

}

</style>

</head>

<body>

</datalist>

</body>

</html>

5.CSS关系选择器

选择符

E F（中间是空格）包含选择符选择所有被E元素包含的F元素

E>F 子选择符选择所有作为E元素的子元素F
E+F 相邻选择符选择紧贴在E元素之后F元素

E~F 兄弟选择符选择E元素所有兄弟元素F

6.CSS结构伪类选择器

选择符

E:root 匹配E元素在文档的根元素（在HTML中即<html>）

E:empty 匹配没有任何子元素（包括text节点）的元素E

E:first-child 匹配父元素的第一个子元素E

E:last-child 匹配父元素的最后一个子元素E

E:only-child 匹配父元素仅有的一个子元素E

E:nth-child(n) 匹配父元素的第n个子元素E

eg. E:nth-child(odd) odd表示奇数行

E:nth-child(even) even表示偶数行

E:nth-child(2n+1) 2n+1表示公式，即在括号内也可以书写公式，其中的n电脑会自己从0开始计算

E:nth-last-child(n) 匹配父元素的倒数第n个子元素E

E:first-of-type 匹配同类型中的第一个同级兄弟元素E（使用较多）

E:last-of-type 匹配同类型中的最后一个同级兄弟元素E

E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E

E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E（使用较多）

E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

代码：（举E:nth-child(2n+1)和E:last-child的例子）

<!DOCTYPE html>

<html>

<title>结构伪类选择器</title>

<style>

li:nth-child(2n+1){ /*odd 奇数行 even 偶数行公式*/

color:red;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<title>结构伪类选择器</title>

<style>

li:last-child{

color:red;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

7.CSS伪对象选择器

E:first-letter/E::first-letter 设置对象内的第一个字符的样式。

E:first-line/E::first-line 设置对象内的第一行的样式。

E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，否则没有意义。

E:after/E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，否则没有意义。

E::selection 设置对象被选择时的颜色。（只能设置背景色和字体色）

8.CSS属性选择器

E[att] 选择具有att属性的E元素。

E[att="val"] 选择具有att属性且属性值等于val的E元素。

E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

代码：

<!DOCTYPE html>

<html>

<title>属性选择器</title>

<style>

a[href$="rar"]::before{

content:url(images/rar.jpg)

}

a[href$="ppt"]::before{

content:url(images/ppt.jpg)

}

a[href$="txt"]::before{

content:url(images/txt.jpg)

}

a[href$="html"]::before{

content:url(images/web.jpg)

}

a[href$="doc"]::before{

content:url(images/word.jpg)

}

a[href$="xls"]::before{

content:url(images/excel.jpg)

}

</style>

</head>

<body>

</body>

</html>

9.半透明的写法

opacity: 0.5;针对其他几个浏览器，它是针对整个div

filter:opacity(50%);针对IE浏览器

background:rgba(255,0,0,.5);只针对背景颜色

2017.11.12

1.box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0

box-shadow: h-shadow v-shadow blur spreadcolor inset;

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊距离。

spread 可选。阴影的尺寸。

color 可选。阴影的颜色。。

inset 可选。写上就是内部阴影，不写就是外部阴影。

代码：

<!DOCTYPE html>

<html>

<title>盒子阴影和文字阴影</title>

<style>

div{

height: 50px;

width: 50px;

/*border: solid 1px black;*/

box-shadow: 5px 3px 3px 5px grey;

/*为了浏览器的兼容性会在box-shadow前面加上前缀

-webkit-表示支持谷歌的内核

-moz-表示支持火狐的内核

-o-表示支持欧朋的内核

-ms-表示支持IE的内核*/

}

h1{

text-align: center;

text-shadow: 5px 5px 3px pink;

}/*文档的阴影和盒子的阴影写法类似*/

</style>

</head>

<body>

<h1>Hello,World!</h1>

</body>

</html>

2.border-image 属性

border-image: source slice width outsetrepeat;

将图片规定为包围 div 元素的边框

代码：

<!DOCTYPE html>

<html>

<title>边框是图片</title>

<style>

div{

width: 130px;

margin: 50px;

border: 15px solid transparent;

}

#one{

border-image:url("img/borimg.png") 30 30 repeat;

-webkit-border-image:url(img/borimg.png) 30 30 repeat;

-o-border-image:url(img/borimg.png) 30 30 repeat;

}/*repeat直接平铺，不会考虑图片形状是否完好*/

#two{

border-image:url("img/borimg.png") 30 30 round;

-webkit-border-image:url(img/borimg.png) 3030 round;

-o-border-image:url(img/borimg.png) 30 30 round;

}/*round重复平铺，会考虑形状是否完好*/

#three{

border-image:url("img/borimg.png") 30 30 stretch;

-webkit-border-image:url(img/borimg.png) 30 30 stretch;

-o-border-image:url(img/borimg.png) 30 30 stretch;

}/*stretch拉伸*/

</style>

</head>

<body>

<div id="one">这是一个图片边框</div>

<div id="two">这是另一个图片边框</div>

<div id="three">这还是一个图片边框</div>

</body>

</html>

3.border-radius: 该属性允为元素添加圆角边框

border-radius:后写一个值表示四边圆角

两个值第一个值表示左下右上，第二个值表示左下右上

三个值第一个值表示左上，第二个值表示左下右上，第三个值表示右下

四个值第一个值表示左上，第二个值表示右上，第三个值表示右下，第四个值表示左下

4.多背景的写法：谁在最上面，代码就把它写在最前面，每个背景图之间用“，”隔开。

background-size: length|percentage|cover|contain;

length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一

个值，第二个是设置为"auto(自动)"。

percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。

如果只给出一个值，第二个是设置为"auto(自动)"。

cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

Background写了几个， background-size也要对应写几个。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<style>

div{

width: 1350px;

height: 630px;

margin: 0;

padding: 0;

background:url("image/bi.png") no-repeat right bottom,

url("image/denglou.png") no-repeat left top,

url("image/xinnian.png") no-repeat left 300px top 80px,

url("image/bg.jpg") no-repeat;

background-size: 50px 359px,

198px 159px,

85px 155px,

100% 100%;

}

</style>

</head>

<body>

</body>

</html>

5.background-clip属性指定背景绘制区域

background-clip: border-box|padding-box|content-box;

border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。

padding-box 背景绘制在衬距方框内（剪切成衬距方框）。

content-box 背景绘制在内容方框内（剪切成内容方框）。

background-origin: padding-box|border-box|content-box;

padding-box 背景图像填充框的相对位置

border-box 背景图像边界框的相对位置

content-box 背景图像的相对位置的内容框

代码：

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<title>origin</title>

<style>

div

{

border:1pxsolid black;

padding:35px;

background-image:url(image/smile.gif);

background-repeat:no-repeat;

background-position:left;

}

#div1

{

background-origin:border-box;

}

#div2

{

background-origin:content-box;

}

</style>

</head>

<body>

Lorem ipsumdolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minimveniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl utaliquip ex ea commodo consequat.

</div>

<br>

</div>

</body>

</html>

6.background-attachment设置背景图像是否固定或者随着页面的其余部分滚动

属性

scroll 背景图片随页面的其余部分滚动。这是默认

fixed 背景图像是固定的

inherit 指定background-attachment的设置应该从父元素继承

local 背景图片随滚动元素滚动

代码：

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<title>attachment</title>

<style>

div{background-image:url('flower-red.png');

background-repeat:no-repeat;

background-attachment:scroll;

height:300px;

overflow:scroll;

}

</style>

</head>

<body>

<div>

<p>The background-image is fixed. Try to scrolldown the page.</p>

<p>The background-image is fixed. Try to scroll downthe page.</p>

<p>The background-image is fixed. Try to scrolldown the page.</p>

</div>

</body>

</html>

7.overflow属性指定如果内容溢出一个元素的框

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

8.CSS3 渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

background: linear-gradient(direction,color-stop1, color-stop2, ...);

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>线性颜色渐变</title>

<style>

div{

width: 250px;

height: 250px;

}

div.one{

background: linear-gradient(toright,red,orange,yellow,green,yellowgreen,blue,violet);

}/*linear-gradient表示线性渐变，后面的值分别为1.去往的方向（即终止点）2.颜色；括号内的内容用","隔开*/

div.two{

background: linear-gradient(red,orange 15%,yellow 30%,green45%,yellowgreen 60%,blue 75%,violet 100%);

}/*颜色后面的百分比是指这个颜色在这个div中所占位置与大小（eg.red是从这个div的最左边开始，yellow是15%说明red占div的15%然后yellow是从div的16%开始着色）以此类推*/

div.three{

background:linear-gradient(20deg,red,orange,yellow,green,yellowgreen,blue,violet);

}/*deg表示角度，本例中意为这个颜色渐变是以从左下20度开始渐变*/

div.four{

background:repeating-linear-gradient(65deg,red,palevioletred,yellow);

}/*repeating-linear-gradient表示重复径向渐变，角度为从左下65度*/

div.five{

background: linear-gradient(to left bottom,red,palevioletred,yellow);

}

div.six{

background:repeating-linear-gradient(red,palevioletred 10%,yellow 20%);

}

</style>

</head>

<body>

<br>

<br>

<br>

<br>

<br>

</body>

</html>

9.background: radial-gradient(center, shape size,start-color, ..., last-color);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示

椭圆形。默认值是 ellipse。

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side/farthest-side/closest-corner/farthest-corner

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>径向颜色渐变</title>

<style>

div{

width: 200px;

height: 200px;

}

div.one{

background:radial-gradient(peachpuff,yellowgreen,yellow);

}

div.two{

background: radial-gradient(peachpuff,yellowgreen 15%,yellow 30%);

}

div.three{

background: radial-gradient(40% 60%,peachpuff,yellowgreen,yellow);

}

div.four{

background: repeating-radial-gradient(peachpuff,yellowgreen 15%,yellow30%);

}

div.five{

background: -moz-radial-gradient(70% 55%,closest-side,red,burlywood,yellow,black);

background:-o-radial-gradient(70%55%,closest-side,red,burlywood,yellow,black );

background:-webkit-radial-gradient(70%55%,closest-side,red,burlywood,yellow,black );

background:radial-gradient(70% 55%,closest-side,red,burlywood,yellow,black);

}

section.six{

width: 250px;

height: 100px;

background: radial-gradient(circle,red,yellow,blue);

}/*渐变默认为椭圆形（ellipse）*/

</style>

</head>

<body>

</body>

</html>

10.text-shadow属性适用于文本阴影。

text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊的距离。

color 可选。阴影的颜色。

text-overflow文本溢出属性指定应向用户如何显示溢出内容。

text-overflow: clip|ellipsis|string;

clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

word-break属性指定非CJK脚本的断行规则。（CJK脚本是中国，日本和韩国脚本。）

自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

如果某个单词太长，不适合在一个区域内，它扩展到外面

word-break: normal|break-all|keep-all;

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<style>

width: 300px;

height: 50px;

border: solid 1px black;

line-height: 50px;

}

p.one{

text-overflow: clip;/*将文本截断*/

overflow: hidden;

white-space: nowrap;

}

p.two{

text-overflow: ellipsis;/*将不能显示的文本用...代替*/

overflow: hidden;

white-space: nowrap;

}

p.three{

/*text-overflow: clip;

white-space: nowrap;

overflow: hidden;*/

word-break: break-all;/*将一个长单词强制换行（three中的注释加上就只能显示控制显示的那部分）*/

}

</style>

</head>

<body>

<p class="one">Lorem ipsum dolor sitamet, consectetur adipisicing elit. A ad assumenda corporis dolores, harum hiciure iusto laborum maiores maxime omnis perferendis porro quisquam, quorecusandae saepe sint velit, veritatis!</p>

<p class="two">Lorem ipsum dolor sitamet, consectetur adipisicing elit. Consectetur debitis hic ipsa, mollitianobis obcaecati praesentium soluta ullam ut? Ad adipisci consecteturexercitationem id inventore optio quasi quia! Iusto, maxime.</p>

<pclass="three">Loremsihaiucdsdscjsaocnoiuasipsumdolorsit amet,consectetur adipisicing elit. Aliquid architecto assumenda delectus dolorumeaque esse facere facilis id impedit ipsum laborum magni officia qui quorepellat vitae voluptate, voluptatem voluptatibus.</p>

</body>

</html>

11.css3 字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该

字体文件。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<style>

@font-face {

font-family: newfont;/*定义字体名*/

src:url(wold/Marvel-Regular.ttf);

}/*调用一个字体*/

@font-face {

font-family: newfont1;

src:url(wold/Roboto-Regular.ttf);

}

p:first-of-type{

font:30px newfont;

}/*为类型为p的第一个设置字体大小30px，调用newfont字体*/

p:nth-of-type(2){

font:30px newfont1;

}/*为类型为p的第二个设置字体大小30px，调用newfont1字体*/

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicingelit. Animi blanditiis, corporis doloribus, error esse facere harum inventoreipsum iste magnam magni modi nemo perferendis quidem quod soluta temporatempore voluptates!</p>

<p>Lorem ipsum dolor sit amet, consecteturadipisicing elit. Animi blanditiis, corporis doloribus, error esse facere haruminventore ipsum iste magnam magni modi nemo perferendis quidem quod solutatempora tempore voluptates!</p>

</body>

</html>

12.css3 多列

column-count属性指定某个元素应分为的列数。

column-count: number|auto;

number 列的最佳数目将其中的元素的内容无法流出

auto 列数将取决于其他属性，例如："column-width"

column-gap的属性指定的列之间的差距。如果指定了列之间的距离规则，它会取平均值。

column-gap: length|normal;

length 一个指定的长度，将设置列之间的差距

normal 指定一个列之间的普通差距。

column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度，样式和颜色。

column-rule: column-rule-width column-rule-stylecolumn-rule-color;

column-rule-width 设置列中之间的宽度

column-rule-style 设置列中之间的样式

column-rule-color 设置列中之间的颜色

column-width属性指定列的宽度。

column-width: auto|length;

auto 浏览器将决定列的宽度

length 指定列宽的长度

columns: column-width column-count;

column-width 列的宽度

column-count 列数

代码：

<!DOCTYPE html>

<html>

<style>

column-count: 4;/*表示分多少列*/

column-gap: 30px;/*表示列间距*/

column-rule: solid 1px black;/*表示间隔线（内部写法同border线）*/

column-width: 200px;/*表示一列的宽是多少*/

}

p.one{

columns:350px 2;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Assumenda deserunt dignissimos, doloremque enimesse exercitationem expedita inventore ipsum iusto laboriosam modi, molestiaenam nihil perferendis repellat saepe totam! Eum, exercitationem!Lorem ipsumdolor sit amet, consectetur adipisicing elit. Ad animi architecto aut corporis,debitis deserunt ea eius eligendi itaque modi molestiae neque officiis,pariatur provident quisquam repudiandae saepe veniam vitae?Lorem ipsum dolorsit amet, consectetur adipisicing elit. Assumenda culpa eligendi nemo nostrumrecusandae! Adipisci, assumenda esse est, fugiat harum id incidunt mollitia namnon officiis possimus quibusdam sequi</p>

<br>

<p class="one">Lorem ipsumdolor sit amet, consectetur adipisicing elit. A cumque delectus dolore ea eos,est expedita fugiat magni, nobis, non pariatur quae qui repellendus temporibustenetur ut vel veritatis voluptatem.Lorem ipsum dolor sit amet, consecteturadipisicing elit. Assumenda deserunt dignissimos, doloremque enim esseexercitationem expedita inventore ipsum iusto laboriosam modi, molestiae namnihil perferendis repellat saepe totam! Eum, exercitationem!Lorem ipsum dolorsit amet, consectetur adipisicing elit. Ad animi architecto aut corporis,debitis deserunt ea eius eligendi itaque modi molestiae neque officiis,pariatur provident quisquam repudiandae saepe veniam vitae?Lorem ipsum dolorsit amet, consectetur adipisicing elit. Assumenda culpa eligendi nemo nostrumrecusandae! Adipisci, assumenda esse est, fugiat harum id incidunt mollitia namnon officiis possimus quibusdam sequi</p>

</body>

</html>

13.css 用户界面

resize属性指定一个元素是否是由用户调整大小的。

resize: none|both|horizontal|vertical:

none 用户无法调整元素的尺寸。

both 用户可调整元素的高度和宽度。

horizontal 用户可调整元素的宽度。

vertical 用户可调整元素的高度。

resize要和overflow:auto;一起使用

代码：

<!DOCTYPE html>

<html>

<style>

textarea{

resize: none;

}/*留言板本身就带有（自主拉伸？），使用这条语句可以取消它的自主拉伸*/

div{

width: 200px;

height: 300px;

border: solid 1px black;

resize: horizontal;

overflow: auto;

}/*div本身没有自主拉伸，通过设置resize: horizontal;overflow: auto;使其可以自主拉伸【注：这两句要一起写，因为没有第二句就不能实现自主缩放，resize只是说明它可以进行缩放】*/

</style>

</head>

<body>

</body>

</html>

14. box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

box-sizing: content-box|border-box;

content-box 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外。

border-box 指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算。

15.响应式图片

代码：

<!DOCTYPE html>

<html>

<title>响应式图片</title>

<style>

img{

max-width: 100%;/*给图片一个最大的宽为100%（即页面的宽）*/

height:auto ;/*高度为自动*/

}

</style>

</head>

<body>

</body>

</html>

<!--width:100%效果与max-width:100%相同

max-width:1000px;即当页面放大到宽度为1000px之后就不能再进行放大了，就会出现滚动条

也可以设置它的最小值min-width:370px;即当页面缩小到宽度为370px之后就不能再进行缩小了，就会出现滚动条-->

阅读全文

0 0