css

最新推荐文章于 2021-06-02 21:45:25 发布

放风筝的小小马

最新推荐文章于 2021-06-02 21:45:25 发布

阅读量1.1k

点赞数

分类专栏： HTML+CSS+JScprit

本文链接：https://blog.csdn.net/hexon804/article/details/50512898

版权

HTML+CSS+JScprit 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在设计中要把HTML和CSS分开，也就是说要创建单独的CSS文件，而不是将CSS嵌套的html文件中去，这样如果如果需要修改HTML样式，则只需要修改CSS文件；

从<CSS pocket Reference>书中可以查看到哪些属性能够继承，哪些不能继承

一、

要为HTML添加CSS样式，需要在<head>元素中增加开始和结束style标记，也就是增加 <style>和</style>

1.CSS = 层叠样式表

2.HTML表达结构，CSS表达样式

3.样式和内容/结构是分离的

二、

1. <body style="background-color:transparent;">

</body>

body里面背景色设置为默认颜色：透明色；transparent表示透明色；这里的颜色可以RGB表示

如：<body style="background-color:rgb(255,255,0)">；或者 <body style="background-color:#FF00FF">；

还有 <body style="background-color:rgba(255,0,0,0.5)">；这里的rgba中的a表示透明度，其范围为：0~1之间

2. <body style="background-image:url(first.jpg)">；

</body>

表示在body里面以first.jpg这个图片作为背景

3. <body

style="background-image:url(first.jpg);
background-repeat:no-repeat;这里是指是否重复图片铺满整个页面，no-repeat表示不重复
background-position:left">这里指图片在整个页面中放置的位置，这里是放在左边，还可以使用像素点表示位置，如：100px, 100px

background-position:100px, 100px;

4. 段落

1. <p style="text-indent:2em">表示段落首行缩进文本的2个字符，假如段落是中文，则缩进2个汉字

</p>

2. 行间距

<p style="text-indent:2em;line-height:2em"> line-height:2em"表示行间距为2个汉字

3. 对齐

<p style="text-indent:2em;line-height:2em;text-align:right">text-align:right 表示右对齐，还有justify表示两边对齐

第7章

1.在html中插入CSS样式表

type：text/css 指明只是一个CSS样式表，在HTML5中，不再需要这个属性（这是可选的）；

rel属性指明了HTML与所链接的文件之间的关系。我们要链接到一个样式表，所以这里使用stylesheet；

href属性指定要链接的文件

2.改变字体的属性可以是font-family

3.元素可以从父元素继承样式。例如<p>可以从<body>那儿继承样式；如果想要某个元素的内容不受父元素的样式影响，则可以为这个元素单独添加一个样式即可覆盖从父元素继承来的样式；对于CSS，浏览器总是使用最特定的那个规则。

4.一般而言，如果样式会影响你的文本外观，所有这些样式都能继承；如字体，字的颜色等

5.类

要将一个元素加入一个类，只需要增加属性“class”，并提供类名，如下所示：

<p class="greentea">
<img src="../images/green.jpg" alt="Green Tea Cooler">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>

这就是为p元素增加了一个类名为“greentea”的类；

在CSS中调用类

p.greentea {
color: green;
}这样便将p元素中类名为greentea的类中的内容全部设置为绿色；

类的调用就是使用：元素.类名

6.一个元素可以加入多个类，同时，一个类可以有多个元素；

当一个元素包含多个类时，其最终选择的类是放在.css文件中的最下面的那个类，也就是依照从上到下的顺序

第8章

1. font-family: 设置字体。在大部分计算机中只安装了部分字体，所以在选择字体时，需要小心；但是可以通过扩展浏览器字体

每个font-family包含一组有共同特征的字体。共有5个字体系列sans-serif, serif, monospace, cursive和fantasy；每个字体系列包含有大量的字体；sans-serif是浏览器的默认字体，

如： body {

font-family: Verdama, Gerdana, Geneva, Arial, sans-serif; 这里指定了5中字体，一般浏览器会从第一个字体开始查看，如果存在有则选择，否则会继续查看后一个字体，如果指定的前四个特定字体在本计算机中都没有找到，那么浏览器会选择浏览器的默认字体sans-serif；因此在最后一般都放置默认字体

}
如果一个字体中包含有多个单词，则需要将该字体用双引号括起来，如“Courier New”；

对于最后一个字体应该指定为最通用的字体，如sans-serif 和 serif，sans-serif很适合文本显示

2. font-size: 设置字体大小。

如： body {

font-size: 14px;

}

3. font-color: 设置文本颜色

如： body {

font-color: silver;

}

4. font-weight: 设置字体粗细

如： body {

font-weight: bold;

}

5. font-decoration：为文本增加更多风格；对文本增加一些装饰，包括上划线、下划线和删除线。

如： body{

font-decoration: under-line;

}

注：1. 访问者在你的WEB页面上看到的字体取决于他们自己的计算机上安装了哪些字体，除非使用WEB字体

2. 字体大小通常使用像素px、em、百分数%或关键字指定。em和%是相对字体大小

3. 在body规则中使用字体大小关键字来设置基本字体大小，这样如果用户希望文本更大或更下，所有浏览器就能按比例缩放字体大小

4.可以使用font-weight CSS属性设置文本为粗体

5. font-style属性用于创建斜体或倾斜文本。两者都是倾斜的，要注意区分

6. CSS有16个基本颜色，以及150种扩展颜色

第8章

1. 加在WEB字体到html中，在CSS中使用

@font-face {
font-family: "Emblema One";字体名字
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}加载字体； url后面是字体在WEB中的地址，在CSS中直接可以使用；

2. @import和@media规则；

@import规则允许导入其他CSS文件（而不是HTML中通过一个<link>链入）

@media规则允许创建特定于某些“媒体”类型的CSS规则，如印刷页，桌面屏幕或手机

3.能够托管web字体的网站

1. FontSquirrel(http://www.fontsquirrel.com) 可以把这里面的字体上传到你的服务器中，利用他们的字体库，可以提供一个给定字体的多个格式

2. Google Web (http://www.google.com/webfonts.) 只需要链接google服务上你想要的字体，然后在你的CSS中使用相应的字体名就可以了

4 字体大小

a) body {

font-size: 14px; 用像素指定字体大小

}

b) h1 {

font-size: 150%;h1元素内容是父元素字体的150%大小

}

c) h2 {

font-size: 1.2em;h2元素内容是父元素字体的1.2倍

}

d) 关键字指定字体大小：xx-small, x-small, small, medium, large, x-large或xx-large

浏览器会把这些关键字转换为像素值，它会使用浏览器中定义的默认值来完成转换

规则： 1）选择一个关键字（推荐small或medium），指定它作为body规则中的字体大小。这相当于页面的默认字体大小

2）使用em或百分数，相对于body字体大小制定其他元素的字体大小。

这样操作，相对于body字体大小定义其他元素的字体大小，如果需要改变web页面中的字体大小就很容易，只需要改变body字体大小，就可以更改其他元素的大小。

如：

body { font-size: small};

h1{font-size: 150%};

h2 {font-size: 200%};

注意：

1.一般不建议按像素指定字体大小。

2.通过在<body>元素中设置一个字体大小，实际上就是在为页面设置了一个默认的字体大小。如果没有指定字体大小，那么WEB页面上显示的字体是以浏览器的默认

字体大小为准，一般为16px

5. 改变字体粗细

a. 可以使用： font-weight： normal; 去掉粗体

6.为问题增加风格

a. font-style: italic; 斜体

b. font-syle:oblique; 倾斜文本

c. 大多数元素都会从其父元素集成集成得到字体样式

6. web颜色

指定颜色的方法最终都是要告诉浏览器：一个颜色中红、绿、蓝分量分别是多少。

指定颜色的方法：

a. 按名指定颜色

如：body {

background-color: silver;

}

b:用红、绿、蓝值指定颜色

如：body {

background-color: rgb(80%, 40%, 0%);

}

直接使用红绿蓝数值

如：body {

background-color: rgb(204, 102, 0);

}

使用十六进制码指定颜色

如：

如：body {

background-color:#cc6600;

}

使用十六进制码时，如果每组的数值是相等的，可以缩写，如#cc6600，可以缩写为#c60；必须是每一组的两个数值都相等才可以缩写

7. 增加文本装饰

1. 允许为文本增加一些装饰性的效果，如：下划线，上划线和删除线。只需设置元素的text-decoration属性

如：

em {

text-decoration: line-through;这个规则会使<em>元素上有一个从文本中间穿过的横线

}

em {

text-decoration: underline overline;这个规则使<em>元素有一个下划线和一个上划线

}

如果文本继承了你不想要的文本装饰，可以使用值"none"来去除装饰

如：

em {

text-decoration: none;

}

注：<em>的规则不能累加，假如有一个上划线，和一个下画线规则，如果需要同时得到这两个效果，只能将这两个规则放到一个text-decoration样式中，不能分开写

2.color属性实际上控制着一个元素的前景色，所以它会控制文本和边框颜色，不过，可以使用border-color属性为边框指定自己的颜色

3.删除线规则： <del>；把HTML中的某些内容标记为要删除的内容

4.插入内容规则：<ins>；标记要插入的内容

第九章

1.调整文本行高：line-height: 1.6em;

2. 注意：如果要对多个元素使用某个样式时，就要用到class；如果只有一个元素需要加样式，或者页面上只有一个元素，那就应该使用id。

3 id 属性

<p id="footer">Please steal this page, it isn't copyrighted in any way</p>

a. 页面中只能有一个元素的id为footer；这里说的是同一个页面中id必须是唯一的，但是在多个不同的页面中可以使用同一个id

b. 每个元素只能有一个id

c. id名中不允许出现空格或其他特殊字符

使用id，如：

#footer ｛这会选择id为"footer"的任意元素

color: red;

｝

p#footer ｛这会选择一个id为"footer"的<p>元素

color: red;

｝

d. id选择器只与页面中的一个元素匹配。

4.类名要以一个字母开头，id名可以以一个数字或字母开头。id和类名都可以包含字母数字以及_字符，但不能有空格

5.当html中添加多个css样式表时，样式表的顺序很重要；样式表从上到下排列，最下面的样式表最优先

6.有时可能想针对将要显示页面的设备类型（桌面PC、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本）来调整页面的样式。

这是可以利用一个media属性，在<link>元素中增加这个属性，只使用适用于指定设备的样式文件。如：

media属性：允许指定应用这个样式表的设备类型

screen属性：这个查询指定了有屏幕的设备

480px：指定屏幕宽度不超过480像素。

5.直接在CSS中增加 媒体查询。如：

@media screen and (min-device-width: 481px) { 与这个规则匹配的设备，将使用这个规则，也就是屏幕狂赌大于480px就会使用这些规则

#guarantee {

margin-right: 250px;

}

@media screen and (max-device-width: 480px) {

#guarantee {

margin-right: 250px;

}

p.specials { 所有其他规则会应用于所有页面，因为它们并未包含在一个@media规则中

color: red;

}

6. 媒体查询是目前标准组织在积极发展的一个领域，所以要密切关注指定设备的最佳实践，

第十章

1.width属性只是指定内容区的宽度

2.整个元素的宽度由：内容区，内边距，边框和外边距的宽度组成

3.一个块元素的默认宽度是“auto”，这说明它会延伸占满可用的空间，也就是整个浏览器的空间

4.一个元素的高度是默认的，也是“atuo”，可以显示的设置一个高度，但是通常不这么做，因为如果设置的高度不够，可能会导致内容“溢出”到其他元素中

5.text-align属性

a. text-align会对元素中的所有内联内容对齐

b. 该属性适用于对任何类型的内联元素对齐

c. 该属性只能在块元素上设置。如果直接在内联元素（如<img>）上使用，则不起作用

6.记住：并不是所有属性都能继承

7.#elixirs h2：表示选择elixirs这个id中，h2元素，这种选择方式，表示的是elixirs下的所有h2；可以想象成，这选择的是，儿子，孙子

#elixirs>h2：表示选择elixirs这个id中，直属于elixirs的h2元素，不包括其嵌套下的h2元素；可以想象成，这选择的只有儿子

8.使用 line-height: 1; 这个属性，表示各个元素的行高是其字体大小的一倍，如果是2，则表示两倍

9.设置内边距，可以直接使用：padding: 0, 20px, 30px, 10px；这四个数依次对应于内边距的上、右、下、左

与内边距类似，外边距可以直接使用：margin:0px, 20px, 30px, 10px；

如果边距的四个方向的值都是一样的，则可以直接使用一个数值代替即可。如：padding: 20px;

如果上下相同，左右相同，则可以使用padding: 0px 20px; 0px表示的是上下，20px表示的是左右

b. 还可以对边框属性进行简写：

border-width: thin;
border-style: solid;
border-color: #007e7e;

以上三个属性，可以简写为：border: thin solid #007e7e; 边框简写比边距缩写要灵活，可以采用任何顺序

c. 背景简写

background-color: white;
background-image: url(images/cocktail.gif);
background-repeat: repeat-x;

这三个属性，可以简写为：background: white url(images/cocktail.gif) repeat-x；同样，也可以采用任何顺序

记住：所有这些简写方式，各个值之间是以空格隔开的

10.简写

1.字体需要的所有属性：font-family, font-style, font-weight, font-size, font-variant, line-height；

以上这些属性可以使用一个方法包含，如下所示：

font: font-style font-variant font-weight font-size/line-height font-family

这些字体属性的顺序不重要，前三个属性是可以可选的，line-height属性也是可选的；font-size必须指出，font-family也必须指出

11.<a>元素

1.为一个html页面使用<a>元素添加链接时，链接有两种状态：已访问的链接，未访问的链接；大多数浏览器已访问的链接默认为紫色，未访问的链接为蓝色；这里的访问指的是是否点击过；<a>元素的样式会根据他的状态而改变；

2. 一个链接有的状态：未访问、已访问、悬停（表示将鼠标放到链接上面，但未点击）、focus（焦点）和active（活动）。

focus(焦点)：有些浏览器允许按Tab键来轮流访问页面中的链接，当选中到某个链接时，这个链接就是focus状态。

active（活动）：用户第一次单击一个链接时，就处于活动（active）状态。

指定一个链接的状态，比较好的顺序是：link，visited，hover，focus，active。

12. 伪类（pseudo-class）《head first for html & css》第二版PDF P489

13. 样式表：有三类：页面作者的样式表（就是我们写的），读者的样式表（使用浏览器的用户），浏览器的默认样式表等三个样式表

浏览器要对某个元素应用样式表时，按照上面的顺序依次选择样式表，最先优先的是我们写的样式表。

14.在样式表中覆盖一个样式，表示不使用这个样式，如：

h1 {

font-size: 200%;

!important;

}

表示覆盖这个样式，可以理解为不使用这个样式，那么剩下读者自定义的样式和浏览器的默认样式两个样式表了

15. 层叠

样式的特定性排序；见《head first for html & css》第二版 pdf P496 实体书P460

特定性排序规则：1. 首先按作者、读者和浏览器的顺序对规则进行排序；2. 然后在各个类别中，再按特定性排序；3.对于有相同特定性的元素，则根据样式表中的顺序再次进行排序

如果经过上述排序步骤，还是没有找到想要的属性值，就要使用继承，对于能继承的属性，浏览器会查看这个元素的祖先，从它的父元素开始，尝试找到这个属性的值；如果该属性值不能继承，那就只能依靠浏览器样式表中的默认值

第十一章

1. 流

a. 块元素：从上往下流，每个块元素之间隔一个换行

b.内联元素：在水平方向上相互挨着，总体上会从左上方流向右下方

注：文本是内联元素的一种特殊情况，浏览器会把它分解为适当大小的内联元素，以适应给定的空间

2. 浏览器并排放置两个内联元素时，而且这些元素都有外边距，那么两个元素之间的空间就是那个元素的外边距之和

3. 浏览器上下放置两个块元素时，那么两个块元素共同的外边距为两个块元素中最大的那个元素的外边距

4. 内联元素可以设置外边距，但是一般不这么操作，除了图像外，对于图像不仅会设置外边距，还需要设置内边距和边框

5.如果一个元素嵌套在另一个元素中，他们都有外边距，那么这两个元素的垂直外边距碰到一起，他们就会折叠；即使是一个元素嵌套再另一个元素中也不例外；

注意：如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，这样也就不会折叠，但是如果把这个边框去掉，那么这两个外边距就会折叠。

6.浮动元素

浮动一个元素时，如果希望它在某个元素后面，就要移动浮动元素的HTML，让它紧挨着放在那个元素下面；然后在该元素的属性中，添加float: right属性，这样浮动元素就在页面右边，注意：这里不一定是右边，因为块元素是从上往下排列的，排列位置，跟元素的宽度也有关系，元素的流操作有关系。

浮动一个元素，必须为该元素设置宽度

7.clear属性

当元素流入页面时，在这个元素的左边、右边或两边不允许有浮动内容

8.浮动元素的外边距不会折叠，浮动元素只是浮在页面上。也就是浮动元素的外边距，不会碰到正常流中元素的外边距

9.冻结布局（frozen layouts）：冻结布局会锁定元素，让他们冻结在页面上，这样这些元素根本不能移动。冻结布局就是将页面设置一个宽度，使其应用于所有的元素中。见 P502

10. 流体布局：元素会铺满整个浏览器

11.介于冻结和流体之间的凝胶布局，凝胶布局会锁定页面中内容的宽度，不过会将它在浏览器中居中

12.指定内容区宽度为“auto”时，浏览器会根据需要扩展内容区；外边距为“auto”时，浏览器会确定正确的外边距是多少，另外还会确保左右外边距相等，所以内容会居中

13.绝对定位（absolute positioning）：在页面上精确的定位元素

如：

#sidebar {

position: absolute; 指定这个元素要绝对定位

top: 100px;

right: 200px;

width: 280px;

}

浏览器首先要做的是将这个元素从流中完全删除，然后将这个元素放到top和right属性指定的位置（也可以使用bottom和left指定位置）

注：流中的元素不会将其内联内容围绕在一个绝对元素周围，因为他们不知道页面上有这个绝对定位的元素；

一个元素绝对定位时，会将它从页面的正常流中删除

14.绝对元素的分层显示

绝对定位元素可以分层放置，一个元素可以放在另一个元素的上面；每个定位元素都有一个名为z-index的属性，越往上面的元素，z-index值越大

不一定非要对绝对定位元素指定宽度，但是如果没有指定宽度，那么默认的，块元素会占浏览器的整个宽度

15.position属性的默认值是static（静态）

如果是静态定位，元素就会放在正常的文档流中，要由浏览器来决定这些静态定位元素的位置。可以使用float属性将一个元素从流中取出，可以让其左右浮动，但最终仍然由浏览器来确定它放在哪里

16.position包含的值：static（静态），absolute（绝对），fixed（固定），relative（相对）。

fixed（固定）定位是将元素放在相对于浏览器窗口的一个位置上（而不是相对于页面），所以fixed元素永远不会移动

relative（相对）定位：会让元素正常的流入页面，不过在页面上显示之前要进行偏移。相对定位常用语更高级别的定位和特殊效果

17.元素定位中指定位置时，除了使用像素，还有百分数；如果使用百分比，改变浏览器的宽度时，元素的位置可能也会跟着改变；如：浏览器设置为800像素宽，元素的left设

置为10%，那么元素元素就会放在距浏览器窗口左边80像素的位置。使用百分比时，可以让祝内容区和边栏的大小更为灵活，在两栏和三栏布局中会经常看到这种用法

18.CSS表格显示

CSS表格显示允许在一个有行有列的表格中显示块元素，通过将内容放在一个css表格中，可以很容易的用HTML和CSS创建多栏设计

如下设置id为tableContainer包含的内容为表格，id为tableRow的元素包含的内容为表格中的行

#tableContainer {
display: table;
border-spacing: 10px;
}

#tableRow {
display: table-row;
}
然后，指定行元素，如下：指定id为main和sidebar的元素为表格中的行元素

#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
vertical-align: top;
}

#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
vertical-align: top;
}

19.CSS表格和HTML表格

这两种表格形式都是在HTML中创建一种结构、能够映射到表格的行和列，但与HTML表格不同，CSS表格显示只是使用一种类似表格的布局来表现这个结构中的内容。

HTML表格面向的是表格数据，也就是应当有表格结构的数据。所以，使用CSS表格显示只是创建某种表现布局的一种方法，而HTML表格则是建立数据的结构

20.布局

记住：HTML应当负责结构，而CSS负责布局

21.固定定位fixed

固定定位就像绝对定位i一样，需要为元素指定你希望的位置，这个位置是据浏览器窗口边界的一个偏移量，而不是距页面边距的距离；一旦采用固定定位指定内容的位置，那么它就一直在那个位置不会移动，哪怕是缩小放大浏览器窗口，其也一样固定在设定的位置上不改变

22.相对定位relative

使用相对定位时，可以将一个<div>元素放在另一个<div>中，对外围<div>使用相对定位，然后用绝对定位指定内部<div>的位置，这样就能相对于父<div>对它进行定位

第十一章总结：

1.浏览器使用流在页面中放置元素

2.块元素从上向下流，各元素之间有一个换行，默认的，块元素会占用浏览器窗口的整个宽度。

3.浮动元素会从正常流中取出，浮动到左边或右边

4.浮动元素放在块元素之上，不会影响正常的页面流。不过，内联内容会考虑浮动元素的边界，围绕着这个浮动元素

5.clear属性用来指定一个块元素的左边或右边不能有浮动元素。设置了clear属性的块元素会下移，直到它旁边没有块元素（这里有待考证，到底是没有块元素还是浮动元素）

6.浮动元素必须有特定的宽度，不能设置为auto

7.布局：

a. 流体布局：指扩展浏览器窗口时，页面中的内容会扩展以适应页面。

b. 冻结布局：指内容的宽度是固定的，不会随浏览器的窗口扩展和收缩而改变。

c. 凝胶布局：指内容的宽度是固定的，但是外边距会随着浏览器的窗口扩展和收缩而改变；凝胶布局通常会将内容放到中央

8.position的四个值：static(静态的), absolut(绝对的)，fixed（固定的），relative（相对的）

a.static：是默认值

b. absolute：将元素放在页面中的任何位置上，默认的，绝对定位元素会相对于页面边界来放置

c. 使用绝对、固定和相对定位时，属性top、right、left和bottom可以用来指定元素的位置

d. 绝对定位元素可以使用z-index属性分层放置，使一个元素在另一个元素上，z-index的值越大，说明它的层次越高（在屏幕上离你越近）。

e. 使用相对定位时，top、left、right和bottom是指距正常流中该元素位置的偏移量。

第十二章

1. 使用<section>可以把相关的内容分组在一起，另一方面，要用<article>包含独立的内容，如一个新闻报道、一个博客帖子或者一个简单的报告。

一般来讲，要组织相关的内容就使用<section>，而对于独立的内容，则使用<article>。如果你需要把感觉不相关的内容组织在一起，往往可以使用<div>作为后备。

2.关于<div>、<section>和<article>的使用

1. 如果只是要增加一个元素以便为页面指定样式，那么可以使用<div>；

2. 如果要增加一个元素来标记一些内容，指示这是由相关内容构成的一个结构明确的区块，那就可以使用<section>；

3. 如果有些内容可以独立于页面上的其他内容进行重用和分发，那就是用<article>。

4.<video>标签：往页面中添加一个视频元素，video包含的属性有：

control属性：是布尔属性，可以有，也可以没有，如果有，浏览器会为视频显示增加内置的控件，不同浏览器提供的控件有所不同

src属性：是URL，告诉浏览器在哪儿查找视频源文件

autoplay属性：布尔属性，告诉浏览器如果有了足够的数据就开始播放视频

preload属性：通常用于细粒度的控制视频如何加载，来实现优化。大多数情况下，浏览器会根据是否设置autoplay以及用户的带宽来选择加载多少视频。可以覆盖这种设

置preload设置为“none”（在用户真正播放视频之前不下载视频），也可以设置为metadata（下载视频元数据，但不下载视频内容），或者可以设置为auto，

让浏览器来做决定。

poster属性：浏览器通常会把视频的一帧显示为海报图像，来表示这个视频。如果你删除了autoplay属性，单击播放之前就会看到这个图像。要由浏览器来选择显示哪一帧。通常，浏览器会显示视频的第一帧，这往往是一个黑屏。如果你想显示某个特定的图像，要由你来创建想显示的图像，并使用poster属性来指定。

loop属性：布尔属性，如果有loop属性，视频结束播放之后会自动重新开始播放视频

width，height属性：会设置视频显示区（也称为“视窗”）的宽度和高度。如果指定了海报（poster），海报图像会缩放到你指定的宽度和高度。视频也会缩放，不过会保持其宽高比（例如，4：3或16：9），所以，如果两边或者上下边有多余的空间，视频会采用上下加黑边（letter-boxed）或左右加黑边（pillar-boxed）的模式来适应显示区大小。如果你想得到最佳的性能，就应该尽量采用视频原本的尺寸（这样浏览器就不用实时缩放视频了）

5.一个视频文件可以看成是音频部分和视频部分的组合，这两部分都有其各自的编码格式，这些编码格式并没有统一。同时，还有包含视频和音频编码的文件（称为容器）也有自己的格式和格式名。

6.html5规范允许采用任何视频格式。具体支持哪些格式由浏览器实现来确定

7.三种主流的视频格式：

a. WebM容器：包含Vp8视频编码和Vorbis音频编码。WebM由google设计，用来处理VP8编码视频，得到Firefox、Chrome和Opera的支持，扩展名为.webm。

b.Ogg容器：包含Theora视频编码和Vorbis音频编码。Theora是一个开源编解码器，采用Theora编码的视频通常包含在Ogg文件中，文件扩展名为.ogv。Ogg/Theora 得到了Firefox、Chrome和Opera的支持

c.MP4容器：包含H.264视频编码和AAC音频编码。又MPEG-LA公司授权，目前有多种H.264,每一种分别称为一个"profile"（等级或类）。MP4/H.264得到Safari和 IE9+的支持，有些版本的Chrome也提供了支持

8. 如何处理这么多的视频格式：可以为每一种视频格式提供一个视频文件，浏览器会从第一个文件开始选择能够使用的视频文件，如下所示：

<video controls autoplay width="512" height="288"

<p> Sorry, your browser doesn't support the video element</p>

</video>

如上：浏览器会从第一个mp4文件一直往下选择，浏览器会选择它支持的第一个格式

9. 容器（container）是用来包装视频、音频和元数据信息的文件格式。常用的容器格式包括：MP4、WebM、Ogg和Flash Video。

编解码器（codec）是用来对一种特定视频或音频完成编码和解码的软件。流行的Web编解码器包括：H.264、VP8、Theora、AAC和Vorbis。

要由浏览器决定可以对哪种格式的视频解码，不过并不是所有浏览器制造商都达成了一致，所以如果你项支持所有视频，就需要多种编码

10. 如何更具体的指定视频格式

可以告诉浏览器视频源文件的位置，让它在不同版本中做出选择。不过浏览器具体确定是否可以播放一个文件之前，你可以给出有关视频文件的MIME类型和编解码的更多信息；如下：

src：指定的是源文件

type：是一个可选属性，向浏览器提供一个提示，帮助它确定能不能播放这种类型的文件

video/ogg：这是视频文件的MIME类型。指定了容器格式。

codecs ：codecs参数指定使用哪个编解码器对视频或音频编码，来创建编码的视频文件；

theora：为视频编解码器，vorbis：为音频编解码器

注意codecs参数的双引号。说明type属性两边需要使用单引号

更新<source>元素：

<video controls autoplay width="512" height="288"

<p> Sorry, your browser doesn't support the video element</p>

</video>

注意：添加了这些额外的类型和编解码信息，在后台对浏览器提供了很大的帮助。可以在http://wiki.whatwg.org/wiki/Video_type_prameters得到有关type参数的更多信息。

第十三章

1. 表单

表单实际上就是一个包含输入域的WEB页面，允许你输入信息。提交表单时，这些信息会发送到一个web服务器，有服务器脚本来处理，处理完成后，会得到一个web页面作为响应。其过程如下：

浏览器→表单→web服务器→服务器脚本（经过这个过程浏览器将表单传送给服务器脚本）

服务器脚本→web服务器→html web页面→浏览器（服务器脚本处理表单数据并生成一个全新的HTML页面作为响应，传送给浏览器）

2. 表单里的数据：

a. 文本输入：text<input>

b. 提交输入：submit<input>元素创建一个按钮，允许提交表单；点击这个按钮时，浏览器会把表单发送到服务器脚本进行处理

<input type="submit"> 可以通过增加一个value属性，指定这个按钮的名字

c.单旋扭输入：radio <input>元素会创建包含多个按钮的控件，但是一次只能选择其中一个按钮

d. 复选框输入： checkbox <input>元素会创建一个复选框控件，可以选中也可以不选中

3.文本区

a. <textarea>元素会创建一个多行的文本区，可以在其中输入多行文本；如果输入的文本在文本区中放不下，右边还会出现一个滚动条

b. <select>元素会在web页面中创建一个菜单控件。菜单提供了一种从一组选项中做出选择的方法。<select>元素与下面的<option>元素组合使用可以创建一个菜单。

<option value="Buckaroo">Buckaroo Banzai</option>

<option value="Tommy">Perfect Tommy</option>

</select>

c. <option>元素与<select>元素结合使用可以创建菜单。使用<option>元素来表示各个菜单项

4.html5中的表单元素

a. 数字输入

number<input>元素会限制只能输入数字。甚至还可以用可选的属性指定这个元素允许的最小数和最大数。

type为"number"，表示你只希望输入数字，而不是文本。

<input type="number" min="0" max="20"> min和max限制输入的数值范围

b.范围i输入

range <input>元素类似于number，指示它会显示一个滑动条，而不是一个输入框。

<input type="range" min="0" max="20" step="5"> step指定值的步进数

c.颜色输入

使用 color<input>可以指定一个颜色。单击这个控件时，会弹出一个颜色选择器，允许选择一个颜色，而不必输入颜色名或值

d. 日期输入

使用date <input>元素时，可以利用一个选择控件指定日期。这个控件会创建一个合法的日期格式串，发送到服务器脚本

e. email输入

email<input>元素就是一个文本输入元素，只不过在一些移动浏览器上，开始输入email时你会得到一个方便输入email的定制键盘。

f. tel 输入

tel <input>元素也只是一个文本输入元素，不过与email类似，它会在一些移动设备上弹出一个定制键盘

g. url输入

与email和tel类似，url <input>也指示一个文本输入元素，不过会在一些移动设备上弹出一个定制键盘

注意：email、tel和url这三种<input>类型都是text <input>的变种。在桌面浏览器上，你看不出任何差别。不过，在移动浏览器上，它们会得到一个定制键盘，可以更容易的输入你需要的字符

5. name属性

name属性相当于表单和处理表单的服务器脚本之间的一个粘合剂

表单中的每个输入控件都有一个name属性，提交表单时，浏览器会使用这些唯一的名字打包所有的数据

浏览器会把这些名字和值发送给服务器，如下：

name=Buckaroo Banzai

address = Banzai Institute

只有加了name属性，服务器脚本才能分清各个数值

6. <input>中可以通过增加maxlength属性，限制用户在text <input>中输入的文本字符的个数，在<textarea>中没办法限制用户键入多少文本

7.我们必须知道服务器脚本希望有哪些表单元素名，并相应的编编写表单。如果你在使用别人编写的一个服务器脚本，他必须告诉你要使用哪些元素名，或者必须在脚本文档中提供有关信息，也可以寻求托管公司的帮助

8. 对于多选菜单选项，提交表单时，只会把当前选择的选项连同这个名字发送到服务器

9.浏览器主要使用两种方式将表单数据发送给服务器：POST和GET。

POST：会打包表单变量，在后台把他们发送到服务器；

如：http://wickedlysmart.com/hfhtmlcss/contest.php

GET：也会打包表单变量，但会把这些数据追加到URL的最后，然后向服务器发送一个请求

如：http://wickedlysmart.com/hfhtmlcss/contest.php?firstname=buckaroo&lastname=banzai

POS和GET的区别：

a. 如果希望用户能够对提交表单后的结果页面加书签，就必须使用GET，因为如果使用POST，返回的结果页面就无法加书签

b. 如果有一个处理订单的服务器脚本，可能不希望用户对这个页面加书签时使用POST

c. 如果表单中的数据是私有的，如信用卡或一个口令，这是就必须使用POST

d. 如果使用一个<testarea>就应该使用POST,因为可能会发送大量数据，GET和POST请求对于发送的数据量都有一个限制，不过对POST请求的限制通常要宽松的多

10. placeholder属性

表单中大多数不同类型的<input>元素都可以使用placeholder属性，这会为填写表单的人提供一个提示，让他了解你希望这个控件中输入什么内容、

如： <input type="text" placeholder="Buckaroo Banzai">

11. Required属性

布尔属性，可用于任何表单控件，它指示一个域是必要的，所以对于设置了这个属性的控件，如果没有为这些控件指定一个值，就无法正常提交表单

如：<input type="text" placeholder="Buckaroo Banzai" required>

12. 第十三章

放风筝的小小马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css

一、1.CSS = 层叠样式表2.HTML表达结构，CSS表达样式3.样式和内容/结构是分离的二、 1. body里面背景色设置为默认颜色：透明色；transparent表示透明色；这里的颜色可以RGB表示如：；或者；还有；这里的rgba中的a表示透明度，其范围为：0~1之间2. ；表示在body里面以first.jpg这
复制链接

扫一扫

专栏目录