您的位置：首页 > Web前端 > CSS

基础html和css知识

2017-06-26 19:48 465 查看

No1.HTML

1.网页结构

网页结构一般都包含文档声明DOCTYPE，并且在head中的meta应该包含编码格式、关键字、网页描述信息。简单格式如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
</body>
</html>

JD首页的meta声明：

<meta charset="gbk" />
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

包含charset编码格式，Keywords关键字，description网站描述。

2.自关闭元素

<br>、<embed> 、<hr>、<img>、<input>、<link>、<meta>、<param>、<source>、<wbr>

3.布局最常用的两个元素

（1）div：流布局使用；

（2）span：文字块使用。

4.块级别元素和行级别元素

块级别元素：是指开始在新的行，占领整行宽度。例如div默认是块级别block元素；

行级别元素：仅仅维持内容的宽度，例如文字块的span元素；

通过CSS的display属性声明元素显示级别，一般包括inline行级别、inline-block行内块元素、block、table块级别表格。

5.文字类元素

（1）加粗元素：strong、b。例如：

<p><strong>Caution:</strong> Falling rocks.</p>
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>

（2）倾斜元素：

<em>

和

<i>

。例如：

<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>
<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>

6.HTML5新增的结构化元素

（1）结构化元素包括：<header>, <nav>, <article>, <section>, <aside>, <footer>。

（2）元素级别：都是block级别元素，不包含样式，只用于结构化，每个页面可多次使用。

（3）元素说明：header描述头部信息，nav用于导航模块，article用于可重新覆盖的新闻类内容块，section模块化，aside页面左或右模块，footer底脚模块。

7.页面内跳转

如果需要跳转到页面指定的位置，可在该位置设置元素的id属性，然后为链接添加href="#id"。例如：

<body id="top">
...
<a href="#top">Back to top</a>
...
</body>

No2.CSS

1.选择器类型

选择器类型包括：type、class、id。

2.引用外部css文件

使用link元素，添加rel和href属性：<link rel="stylesheet" href="main.css" />。

3.重置浏览器的css样式

（1）为什么重置：每个浏览器都有自己默认的选择器样式设置，例如元素的margin和padding。为了保持网站的统一性，我们需要重置CSS样式。

（2）怎样重置：把下面的css样式添加到定义的css文件中去，需要放在css文件的最前面位置。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

4.CSS级联

（1）选择器优先权：type<class<id。例如定义html元素<p id="food">...</p>的样式：

#food {
background: green;
}
p {
background: orange;
}

即使type选择器放在id选择器后面，但id选择器权重高于type选择器。

（2）结合型选择器：被结合的选择器器应该从右往左读，最右边的选择器作为主选择器。

（3）案例分析：

.hotdog p {
background: brown;
}
.hotdog p.mustard {
background: yellow;
}

第一个结合选择器，主选择器是类型p，选择class为hotdog元素下的所有p元素。第二个结合选择器，主选择器是type为p并且class类型为mustard的元素，结果是选择class为hotdog下，类型为p并且class为mustard的元素。

（4）降低选择器的权重方法：通过多层的class来设置样式。案例如下：

<!-- HTML代码 -->
<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>
<!-- CSS样式 -->
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}

5.颜色

（1）颜色表示方式：关键字、十六进制标记、RGB、HSL值。

（2）关键字：直接使用关键字表示颜色，像red、blue等。关键字可参考：http://www.w3.org/TR/css3-color/。

（3）十六进制：如果是6位标记，前两位表示Red、中间两位表示Green、最后两位表示Blue。

（4）RGB：用三个数字表示颜色，三个数字分别表示red、green、blue的值。例如：background: rgb(128, 0, 0)。

（5）RGBa：和RGB相似，后面多了一个透明度参数，a表示alpha透明度，透明度的值范围是0到1的小数。

6.长度单位

（1）绝对长度：用像素表示，单位为px。

（2）相对长度：Percentages百分比，例如width: 50%。

（3）em相对长度单位：相对于对象内文字的font-size，如果未设置font-size则相对于浏览器的字体默认尺寸，经常用于spacing、margin和padding。

7.CSS3属性使用

（1）加前缀保证兼容性：在css3成为标准之前，很多浏览器都开始支持css3属性，但由于当时css3还不是标准，所以运营商都通过添加前缀的方式来支持。例如box-sizing属性的设置：

div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

（2）各个运营商前缀：

Chrome(谷歌浏览器) ：-webkit-

Safari(苹果浏览器) ：-webkit-

Firefox(火狐浏览器) ：-moz-

IE(IE浏览器) ：-ms-

Opera(欧朋浏览器) ：-o-

No3.盒子模型

1.盒子模型属性

（1）包含的CSS属性：width、height、padding、border、margin。

（2）盒子模型宽度计算：margin-right + border-right + padding-right + width + padding-left + border-left + margin-left。

（3）盒子模型高度计算：margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom。

（4）margin设置：margin： 10px、margin: 10px 20px，上下左右; margin: 5px 0 10px 0，上有下左。

（5）border设置： border: width style color，也可单独设置每个值border-width、border-style、border-color。border-style属性值包括olid, double, dashed, dotted, and none。

（6）border单方向设置：border-top, border-right, border-bottom, and border-left，例如border-bottom: 6px solid #949599。

（7）border-radius设置：一个值border-radius: 5px，两个值border-radius: 5px 10px，四个值表示top-left、top-right、bottom-right、bottom-left。

（8）border-radius单个方向设置：border-(top/bottom)-(left/right)-radius:value，例如border-top-right-radius: 5px;

2.Box Sizing

（1）box-sizing作用：CSS提供了box-sizing用于规定元素尺寸的计算方法。

（2） box-sizing属性值：包括content-box、padding-box、border-box。

（3）content-box：是box-sizing的默认值，计算的实际size为width或height值加上padding、border、margin的总和。

（4）padding-box：一个div的width为400px，设置padding为20px，那么实际的尺寸还是400px，只是把content压缩了。如果设置border为10px，那么实际的尺寸为400px + 10px = 410px。

（5）border-box:如果div的width为400px，设置padding为20px，border为10px，那么元素width还是为400px，但内容被缩放。

（6）box-sizing的推荐值：border-box。

No4.内容布局

1.列举场景

同一行布局三个元素。三个元素等比显示，并且其他元素不会围绕这三个元素。如下要让下面的三个column等比显示在一行：

（1）float:left, 对于块级别的div可设置float:left让几个元素同行显示。但需要阻止其他元素追尾。

（2）解决追尾方案一：在Column3的后面添加一个div，并设置css属性:clear:both。这个大家应该都很熟悉。

（3）解决追尾方案二：设置容器的公共class样式，设置class的before和after伪类，但需要考虑兼容性。所以完整的解决方案代码如下：

.group:before,
.group:after{
content: "";
display:table;
}

.group:after{
clear:both;
}

.group{
clear:both;
}

3.通过设置display为inline-block实现

（1）display为inline-block的元素不会占满一行，所以设置三个column的display为inline-block可是三个元素同行显示。但linline-block元素之间会存在空白，需要解决存在的空白。

（2）解决空白方案一：把每一个新的inline-block元素的闭环tag和下一个开环tag放在一行。代码如下：

<section>
...
</section><section>
...
</section><section>
...
</section>

（3）解决空白方案二：在闭环tag的后面添加一个打开的注释标签，在下一个开环tag的后面添加一个关闭注释的标签。代码如下：

<header>...</header>
<section>
...
</section><!--
--><section>
...
</section><!--
--><section>
...
</section>
<footer>...</footer>

No5.文章段落

1.文字属性

文字属性包含font-

和text-

两类。

2.基于font的属性

（1）font-family：字体属性，多个字体之前用逗号隔开。如果第一个字体没找到，则依次找后面的字体。例如：

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

（2）font-size：字体大小，单位包括pixels, em units, percentages, points。

（3）font-style:字体样式，包括normal, italic, oblique, and inherit。经常用到normal和italic（斜体）。

（4）font-variant: 大小写转换，包括:normal, small-caps, and inherit。一般都不会使用该属性。

（5）font-weight: 设置字体权重，可以是关键字和数字，关键字包括normal, bold, bolder, lighter, and inherit。有效枚举数字：100, 200, 300, 400, 500, 600, 700, 800, and 900 。normal 对应400，bold对应700。

（6）line-height：设置两行间距，值可以为百分比%、相对倍数em、以及像素数字px。例如可设置line-height:150%，line-height: 1.5em，line-height: 24px。一般都使用em相对于font-size设置。

（7）如何让文本内容垂直居中显示：可把line-height和height设置成同一值。例如：

.btn {

height: 22px;

line-height: 22px;

}

（8）font属性缩写方式：font:font-style, font-variant, font-weight, font-size, line-height, and font-family。font-size和line-height通过”/”分割，font-family通过“,”分割，其他属性通过空格分割。例如：

html {

font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;

}

3.基于text的属性

（1）text属性包括：decorate、indent、transform、space、align、shadow、transform等。

（2）text-align: 包含的值有left, right, center, justify、inherit。

（3）text-align和float区别：text-align设置元素中text的对齐方式，而float将设置整个元素的对齐方式。下面的div还是占一行空间，但文本内容居右显示。

div{

background: red;

text-align:right;

}

下面的div不会占用一行，div按自身内容设置大小，整个div居右显示。

div{

background: red;

float:right;

}

（4）text-decoraton: 设置文字装饰，值包括none、underline、overline(上划线)、line-through（中划线）、inherit。

（5）text-shadow: 设置文本投影，包含4个值，text-shadow: 水平位移垂直位移文本模糊半径投影颜色。例如：

p {

text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);

}

（6）box-shadow和text-shadow区别：box-shadow用于设置整个盒子的投影，包含5个值：inset/outset 水平距离垂直距离模半径颜色。例如：

div{

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);

}

（7）text-transform: 文字大小写转换，包含的值有none、capitalize、uppercase、lowercase、inherit。capitalize将每个单词首字母大写，uppercase将所有单词转换为大写，lowercase将所有单词转换为小写。例如：

p {

text-transform: uppercase;

}

（8）letter-spacing：设置每个字母之间的间距，下面设置p元素下的每个字母之前间距为基于font-size的-0.5倍。

p {

letter-spacing: -.5em;

}

（9）word-spacing：设置每个单词之间的间距，和letter-spacing相似。

（10）text-indent：设置第一行左面间距。例如下面设置第一行的左面文字到左边距的举例为15px。

.intro{

text-indent: 15px;

}

4.自定义web字体

（1）定义语法：下面代码定义了自定义字体，font-face设置字体参数，font-family为字体名称，src设置字体的网络路径。

@font-face {

font-family: "Lobster";

src: local("Lobster"), url("lobster.woff") format("woff");

}

（2）使用：和其他字体使用一样。例如下面代码吧自定义的字体”Lobster”设置为首选字体。

body {

font-family: "Lobster", "Comic Sans", cursive;

}

（3）字体资源：google上面有很多新的字体可供下载，地址为：https://www.google.com/fonts。

No6.设置背景

1.background

（1）如何设置背景：背景可通过color、image、gradient渐变或者组合方法设置。

（2）background-color：颜色格式可以是十六进制或者rgb以及rgba。为了保证兼容性，有些浏览器不支持rgba，需要在设置rgba之前添加一个十六进制设置。如下：

div {

background-color: #b2b2b2;

background-color: rgba(0, 0, 0, .3);

}

（3）background-image:通过添加背景图片来设置背景。例如：

div {

background-image: url("alert.png");

}

（4）background-repeat：设置图片重复形式，包含的值有repeat, repeat-x, repeat-y, and no-repeat，repeat是默认值，表示水平和垂直都重复。

（5）background-position：把背景通过元素左上角的偏移位置定位背景显示位子。包含两个值，分别是水平和垂直的偏移值。下面的代表表示，元素的背景色从左上角开始向右偏移20个像素，向下偏移10个像素。

div {

background-image: url("alert.png");

background-position: 20px 10px;

background-repeat: no-repeat;

}

下面的代码表示水平偏移20个像素，垂直为默认的50%。

div{

background-position: 20px；

}

（6）background-position关键字参数：参数可为top、right、bottom、left、center关键字, pixels, percentages或者任意长度单位。关键字和百分比很相似，例如：left top(0, 0)、right top(100%, 0)、left bottom(0， 100%)、right bottom(100%, 100%)。

（7）background缩写：缩写的属性顺序为background-color background-image background-position background-repeat。下面代码表示背景色为#b2b2b2，背景图片为url("alert.png")，position为水平偏移20像素、垂直偏移10像素，重复属性值为no-repeat。

（8）多背景设置：多个背景图片设置通过“，”分隔，最前面的图片展示在最上面，最后的图片展示在最下边。如下代码所示：

div {

background: url("foreground.png") 0 0 no-repeat, url("middle-ground.png") 0 0 no-repeat, url("background.png") 0 0 no-repeat;

}

2.线性渐变效果

（1）linear-gradient函数：默认从top到bottom渐变，可以添加多个颜色。如下代码：

div {
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: linear-gradient(#648880, #293f50);
}

（2）兼容性：有些浏览器不支持渐变效果，一般都需要在最前头添加一个单色的背景，例如上面代码添加的background: #466368。

（3）改变渐变方向：linear-gradient的第一个参数可改变方向，参数使用：to 方向。例如下面的代码让渐变从左上角渐变到右下角。

div {

background: #466368;

background: linear-gradient(to right bottom, #648880, #293f50);

}

（4）添加多个渐变颜色：linear-gradient方法可添加多个渐变颜色。参考代码如下：

linear-gradient(to right, #f6f1d3, #648880, #293f50);

（5）渐变占比：可以设置渐变颜色在整个渐变隧道的占比，例如下面代码的第二个颜色占比85%。

div{

linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);

}

3.放射性渐变

（1）radial-gradient：radial-gradient提供了反射性渐变函数，参数可接收多个颜色。

（2）参数说明：第一个参数设置绝对中心位置的颜色，第二个参数设置最外层颜色，最终效果是从中心位置向外过度转换。

4.CSS3 背景新属性

background-size: 设置背景相对于元素的大小，包含width和height两个值，值可以是数字或者关键字。例如下面设置元素的背景宽度自适应，高度占元素高度的75%。

div{

background-size: auto 75%;

}

No7.数据列表

1.无序列表Unordered List

无序列表用block-level元素ul(unordered list)表示，每个item单独使用li(list)标记。如下代码所示：

<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>

2.有序列表Ordered List

（1）和无序区别：无序的每一项默认使用”.”表示，而有序的项通过数字表示。

（2）包含元素：有序列表是block-level级别，每个item单独使用li标记。如下代码所示：

<ol>
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>

（3）start属性：标记item开始的数字是从哪个值开始：

<ol start="30">

表示列表标记从30开始。

（4）reversed属性：标记是否可以倒序，默认为false。如果设置

<ol reversed>

，原来是1,2,3,4，5现在变成5，4,3,2,1。

（5）value属性：用在li上，标记li的序列，接下来的li都从这个标记数字往上加。例如：代码

<li value="9">

Turn right on W Diversey Pkwy

</li>

后面的li标记都是9开始往上加。

3.嵌套列表

（1）使用元素：一般使用ul和ol嵌套使用。如下代码所示：

<ol>
<li>Walk the dog</li>
<li>Fold laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Make dinner</li>
</ol>

（2）随着嵌套关系，列表元素的标记会发生变化，例如默认ul的标记四“.”，现在变成小方块。

4.列表样式

（1）list-style-type：设置标记样式，下面的代码设置标记为一个正方形。

ul {

list-style-type: square;

}

（2）list-style-type包含的值具体如下：

“List Style Type Value”    “Content”
none “No list item”
disc “A filled circle ”
circle “A hollow circle”
square “A filled square”
decimal “Decimal numbers”
decimal-leading-zero “Decimal numbers padded by initial zeros”
lower-roman “Lowercase roman numerals”
upper-roman “Uppercase roman numerals”
lower-greek “Lowercase classical Greek”
lower-alpha / lower-latin “Lowercase ASCII letters”
upper-alpha / upper-latin “Uppercase ASCII letters”
armenian “Traditional Armenian numbering”
georgian “Traditional Georgian numbering”

（3）自定义标记：使用自定义图片设置marker，必须先设置list-style-type:none,然后设置li的background样式。如下代码设置标记为一个arrow图标，图标起始位置水平为0，垂直位置为元素li高度的50%处。

li {

background: url("arrow.png") 0 50% no-repeat;

list-style-type: none;

padding-left: 12px;

}

（4）list-style-position：设置标记的位置，包含值有outside、inside、inherit，默认为outside。

（5）list样式简写：格式为list-style:list-style-type list-style-position，如下代码所示：

ul {
list-style: circle inside;
}
ol {
list-style: lower-roman;
}

5.水平显示列表方法

（1）设置display：通过设置li的display为inline或者inline-block，可水平显示列表。同时列表的标记被移出。如下代码所示：

HTML：
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS：
li {
display: inline-block;
margin: 0 10px;
}

（2）设置float：display没有保留marker标记，通过float：left也可以水平显示并且保留了marker。但是必须设置margin排列li。如下代码设置float等于left，然后设置水平间距为20px。

li {

float: left;

margin: 0 20px;

}

6.设置列表展现导航效果

（1）一般导航我们可以给第一个和最后一个元素设置圆角，获取第一个和最后一个元素可通过CSS:li:first-child、li:last-child。

（2）设置li的display：display: inline-block。

（3）设置normal和和mouseover样式，如下代码所示：

.navigation a{
background: #95870;
background: linear-gradient(#49708f, #293f50);
border:1px solid rgba(0, 0, 0, 0.3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}

.navigation a:hover{
background: #314b60;
text-shadow: 0 10px 1px rgba(0, 0, 0, .3);
}

(4）设置ul字体和间距：直接看参考代码如下。

ul{
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
text-transform: uppercase;
}

No8.媒体操作

1.增加图片

（1）img元素：自包含元素，不能封装其他任何元素。正确写法是,而不是或者。

（2）属性说明：src设置图片的地址；alt(alternative text)提供给搜索引擎，或者当图片不可见时显示的文本。

（3）width和height属性：为img设置固定的width和height可提升页面的加载速度。预留固定的大小，加载整个页面。如果设置width或者height任意一个属性，其他一个属性尺寸会等比例缩放。

（4）测试代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.box img{
width: 400px;
}
</style>
</head>
<body>
<img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋">
</body>
</html>

2.定位图片

（1）img元素级别：img默认是inline级别元素，但可通过设置float、display以及盒子模式的padding、border、margin设置元素停靠位子。

（2）float定位图片：为了让图片停靠在文字的左边或者右边，可通过float属性设置。例如下面的代码可通过设置img的float值可让图片靠左或者靠右：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
border: 1px solid #dedede;
width: 700px;
}

.box span{
word-wrap:break-word;
word-break:break-all;
}

.box img{
border: 1px solid #9799a7;
background: #eaeaed;

width: 200px;
float: right;
margin: 5px;
padding: 4px;
}
</style>
</head>
<body>
<div class="box">
<span>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<img src="http://img1.gtimg.com/tech/pics/hv1/104/221/2071/134723234.jpg" alt="火星表面是否曾有海洋">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
</div>
</body>
</html>

3.增加音频文件

（1）audio元素：播放音频文件元素。

（2）属性：autoplay、controls、loop、preload。autoplay、controls、loop是布尔属性，在使用它们时不需要设置值，直接添加属性名即可。例如：

<audio src=”test.mp3”controls loop></audio>

。

（3）属性说明：controls，是否手动控制;autoplay,是否自动播放；loop，是否循环播放。

（4）preload：包含none、auto、metadata三个值，none表示不加载文件信息，auto表示自动加载所有信息，metadata加载有效信息。如果audio没有添加preload属性，则默认加载文件的所有信息（相当于auto）。为了让页面加载更快，可设置preload属性为none或者metadata。demo如下：

<audio src="test.mp3" controls loop></audio>

4.增加视频文件

（1）video元素：播放视频文件元素。

（2）属性：和audio相似，拥有src、autoplay、controls、loop、preload属性。

（3）controls：和audio不同，如果没有controls属性，video也会显示出来。

（4）poster属性：在播放视频之前可设置poster显示一张默认图片。例如：

<video src="test.mp4" controls poster="test.jpg"></video>

5.页面嵌套

（1）iframe元素：。

（2）属性：iframe默认设置了border、width、height。我们有可以自己设置。例如下面的样式设置：

iframe{

height: 800px;

width: 100% ;

border: none;

}

No.9 构建表单

1.表单元素

（1）form：form是表单的容器，最常用的两个属性action和method。例如：

<form action="/login.html" method="post"></form>

（2）原始文本类型：text、password。

（3）Html5增加的文本类型：color、date、datetime、email、month、number、range、search、tel、time、url、week。例如下面代码：

form action="No8-6.html" method="post">
日期：<input type="date" />
<br>
颜色：<input type="color"/>
<br>
范围：<input type="range"/>
</form>

（4）兼容性：如果浏览器不支持这些Html5的文本类型，元素类型自动显示为text类型。

（5）textarea元素：属性cols设置初始化时文本区内的可见宽度，rows设置初始化时文本区内的可见行数。个人建议直接设置height和width。

2.选择元素

（1）radio元素：一组radio必须有相同的名字，添加checked表示选择项。例如：

<form action="No8-6.html" method="post">
哪天？
<input type="radio" name="day" value="Friday" checked>Friday
<input type="radio" name="day" value="Saturday" >Saturday
<input type="radio" name="day" value="Sunday" >Sunday
</form>

（2）checkbox元素：和radio相似，但可以多选。例如：

<input type="checkbox" name="day" value="Friday" checked> Friday
<input type="checkbox" name="day" value="Saturday"> Saturday
<input type="checkbox" name="day" value="Sunday"> Sunday

（3）下拉列表元素：使用select和options两个元素实现。例如：

<select name="day">
<option value="Friday" selected>Friday</option>
<option vlaue="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>

（4）多选列表：和下拉列表相似，但需要给select添加multiple属性。例如：
3.表单按钮
（1）submit input:。

（2）submit button：可通过设置button元素实现和input button一样的效果，代码如下：

<button type="submit">
<strong>Send us</strong> a message
</button>

4.其他元素

（1）hidden input：可通过该类型在本地保存某些值，例如：。

（2）file input：file类型的样式不好控制，一般都是通过js设置文件上传控件。

5.组织表单

（1）label元素：一般用来描述表单的头部信息。label包含for属性，for的值为text输入框元素的id。这样设置后，当点击label元素时，for属性值对应的输入框元素自动获取焦点。例如：

<label for="username">Username</label>
<input type="text" name="username" id="username">

（2）label元素for属性的替代方式：只需用label元素包含输入框元素，例如：

<label>
<input type="radio" name="day" value="Friday">Friday
</label>
<label>
<input type="radio" name="day" value="Saturday"> Saturday
</label>
<label>
<input type="radio" name="day" value="Sunday"> Sunday
</label>

（3）fieldset：字段集合分组，和section相似。把form表单中同类元素信息放在一个组。

（4）legend：作为filedset头部信息。例如：

<fieldset>
<legend>登录</legend>
<label>
Username
<input type="text" name="username">
</label>
<label>
Password
<input type="text" name="password">
</label>
</fieldset>

6.input属性

（1）disabled：元素不可用。

（2）placeholder：html5属性，文本框提示信息，例如：

<label>
Email:
<input type="email" name="email" placeholder="请输入电子邮件">
</label>

（3）required：html5属性，设置为必填项。可通过:required伪类设置无效元素的样式。

（4）html5其他附加属性：accept、autocomplete、autofocus、formaction、formenctype、formmethod、formnovalidate、formtarget、max、maxlength、min、pattern、readonly、selectionDirection、step。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航