html+css快速入门教程

来源：互联网发布：男士手表知乎编辑：程序博客网时间：2024/06/06 02:48

前端工程师应该掌握的基本技术：HTML+CSS+JavaScript

1 HTML简介

1.1. 什么是HTML？(了解)

HTML是超文本标记语言（HyperText Markup Language，HTML）的缩写。是标准通用标记语言(SGML Standard Generalized Markup Language)下的一个应用，是一种规范，一种标准。

1.2. HTML是干嘛用的？（了解）

网页文件本身是一种文本文件，它通过标记符号来标记要显示的网页中的各个部分。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。综上所述，HTML是一种能被浏览器识别解析，并且能够显示相应内容的语言，在web开发中，HTML是属于书写网页结构语言，扮演着搭建网页框架结构（这里的框架结构就类似于现代建筑中，修房子需要首先搭建起框架结构一样）的作用，是web开发中必不可少的一门语言

2 Hello World

2.1. 挑选合适的浏览器

最流行的一些浏览器都已经实现了许多HTML的特性，然而不是每款浏览器都支持所有的特性，在把某个特性用到实际项目之前，首先应该检测一下浏览器是否支持这个特性。可以参考http://caniuse.com这个网站，查看浏览器的支持情况。这里推荐几款主流的浏览器

Google Chrome
Mozilla FireFox
Opera
Apple Safari
Internet Explorer(高版本)

2.2. 开发工具介绍

文本增强编辑器:语法高亮显示、自动缩进等辅助功能。 EditPlus/notepad++/sublime/Dreamweaver 这类工具小巧，打开速度快

IDE(集成开发环境)，提供的功能主要有语法高亮显示、自动缩进、语法提示、自动完成、版本控制等，提高开发效率。zendstudio/netbeans/phpstorm
/webstorm/hbuilder

2.3. 创建HTML文档（掌握）

实例2：

<!DOCTYPE HTML><html><head><title>这是我的第一个网页</title>    </head><body><h1>Hello World!</h1></body></html>

实例2中，DOCTYPE 元素让浏览器明白其处理的是HTML文档，表示HTML文档的开始，紧跟其后的是html元素的开始标签，它告诉浏览器：从html开始标签开始到html结束标签，所有元素内容都应作为HTML处理。head元素中的内容为HTML文档的元数据部分，HTML的元数据用来向浏览器提供文档的相关信息。body元素中的内容为HTML的主体，这也是HTML文档的最后一部分。body元素告诉浏览器该向用户显示文档的哪些内容

2.4. 使用元素

实例1:

I like <code>Money</code> and beauty

ps:在这个实例中，元素分为3个部分，其中有两个部分称为标签（tag），开始标签<code>和结束标签</code>。夹在两个标签之间的是元素的内容（本实例中单词Money为元素的内容）。两个标签连同它们之间的内容构成code元素。

HTML定义了各种各样的元素，他们在HTML文档中起着各种不相同的作用。因此，学好HTML的关键在于掌握各种HTML元素的不同含义，通俗的讲就是要知道每个元素具体有什么样的功能

2.5. 父元素、子元素、后代元素和兄弟元素（掌握）

HTML文档中元素之间有明确的关系。如果一个元素包含另一个元素，那么前者就是后者的父元素，反过来说，后者就是前者的子元素。一个元素可以拥有多个子元素，但是只能有一个父元素。
实例3：

<DOCTYPE HTML><html>    <head>        <title></title>        <script src="../index.js"></script>    </head>    <body>        <p>人如果没有梦想，跟咸鱼有什么区别？</p>        <p>你看那个人，好像一条狗！</p>    </body></html>

实例3中，最外层的html元素包含了head元素和body元素，那么head元素和body元素就是html的子元素，反之，head和body元素的父元素只有一个，那就是html元素。同时head元素和body元素都是在html元素之下，属于同级元素，相当于辈分一样，我们就称他们互为兄弟元素。而body元素中的p元素相对于html来说，p元素是其子元素的子元素，类似于html的孙子，我们也可以称之为子孙元素，如果更往下嵌套（包含子孙元素），统称为html元素的后代元素。
注意:除了某个元素的下一级元素我们称之为子元素以后，连续一层一层往下嵌套的都可以称之为后代元素

2.6 注释

注释的作用：方便别人或者自己阅读代码
在html中注释的写法：

<!-- 这里些注释的内容 -->

2.7 字符实体

HTML文档中有些字符具有特殊含义，最明显的就是< 和 >这两个字符。有时候需要在文档内容中用到这些字符，但是又不想被当作HTML来解析处理。因此，产生了字符实体，也就是HTML实体。实体是浏览器用来代替特殊字符的一种代码。

字符实体名称实体编码描述     空格 < < < 小于号 > > > 大于号 & & & 和号 “ " " 引号 ‘ ' (IE不支持) ' 撇号￠ ¢ ¢ 分 £ £ £ 镑 ¥ ¥ ¥ 日圆 € € € 欧元 § § § 小节 © © © 版权 ® ® ® 注册商标 ™ ™ ™ 商标 × × × 乘号 ÷ ÷ ÷ 除号

3 标签

3.1 div

div 标签表示一个区块或者区域，你可以把它看成是一个容器，比如说一个竹篮
作用：用来把网页分块并且里面可以装任意的html元素

<div>这里是一个div容器</div>

3.2 span

span：可以表示一个小区块，比如一些文字，span和div的不同就是 span能够在一行内显示而 div独占一行

<span>一周热门排行榜</span>

3.3 h1-h6

h1 到 h6 这6个标签表示 6级标题，表现出来的效果就是从h1开始文字大小逐渐变小

<h1>创于心，兑于行</h1><h2>创于心，兑于行</h2><h3>创于心，兑于行</h3><h4>创于心，兑于行</h4><h5>创于心，兑于行</h5><h6>创于心，兑于行</h6>

3.4 p

p标签是段落标签，通常用来装一整段文字,在一篇文章中常用

<p>新华社北京2月6日电 中共中央总书记、国家主席、中央军委主席、中央全面深化改革领导小组组长习近平2月6日上午主持召开中央全面深化改革领导小组第三十二次会议并发表重要讲话。他强调，党政主要负责同志是抓改革的关键，要把改革放在更加突出位置来抓，不仅亲自抓、带头干，还要勇于挑最重的担子、啃最硬的骨头，做到重要改革亲自部署、重大方案亲自把关、关键环节亲自协调、落实情况亲自督察，扑下身子，狠抓落实。</p>

3.5 ul li

ul 为无序列表标签 li为里面的每个列表项目,这个标签非常实用，例如：各种菜单、各种新闻排行都可以用无序列表来实现

<h1>奇葩新闻</h1><ul>    <li>三人花20万人民币造出17万假币。</li>    <li>英国马拉松仅一人完成比赛，第二名带着五千人跑错路。</li>    <li>在曹操墓发现一具小孩尸骨，砖家说是小时候的曹操!!</li>    </li>女子为吓男友报警称其是逃犯，警方调查后发现真的是逃犯</li></ul>

3.8 i em strong hr br

i、em 标签表示斜体 strong标签表示加粗 hr表示一根水平分割线 br表示换行

<i>床前明月光</i><em>床前明月光</em><strong>床前明月光</strong><hr><p>床前明<br>月光</p>

3.9 img

img 标签表示图像可以引入一张图片

<img src='img/1.png' >

相对路径和绝对路径
img标签有个src的属性后面给图片的地址，可以是网络地址也可以是本地地址，如果是本地路径的话，就要区分是相对路径还是绝对路径

绝对路径：在硬盘上的具体位置  例如：E:\www\html\google.png相对路径： 相对于当前的html文件来说 图片的具体位置 可以分几种情况讨论1、如果图片在html文件的上级 用  ../ 表示  如果上很多级  就用多少个 ../2、如果图片在html文件的下一级  就根据文件夹 一层一层的找  例如： html同级的文件夹img下有google.png的图片 ，写成 ./img/google.png    ./ 表示同级3、如果是同级  就用 ./表示    或者直接写 图片名字   如： google.png

<img  src='./google.png' >  同级<img src='./img/google.png' > 下一级<img src='../img/google.png' >  上一级

alt 属性和 title属性

<img src='./google.png'  alt='谷歌搜索'> alt表示当图片没有被正确加载的时候显示的文字<img src='./google.png'  title='谷歌搜索' > title 表示当鼠标移动到图片的时候显示的文字

3.10 a

a标签表示超链接

<a href='http://www.baidu.com'>百度一下</a>

target属性值__blank 如果加上这个属性每次点击的时候会新开一个浏览器标签页来显示链接的内容

<a  href='http://www.baidu.com' target="__blank">百度一下</a>

4 CSS简介

4.1 CSS 是什么，CSS 用来干嘛

CSS（Cascading Style Sheet，可以译为“层叠样式表”或“级联样式表”），是一组格式设置规则，用于控制web页面的外观。

4.2 如何让一个标签具有样式

第一步，必须保证引入方式正确
第二步，必须让css和html元素产生关联，也就是说得先找到这个元素
第三步，用相应的css属性去修改html元素的样式

4.3 css的3种引入形式

4.3.1将css内嵌到HTML文件中,这种方式写的CSS又叫内联样式表,例如：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            #box{                width: 100px;                height: 100px;                background: red;            }        </style>    </head>    <body>        <div id="box"></div>    </body></html>

4.3.2 将一个外部样式链接到HTML文件中这种方式书写的CSS又叫链接样式表，例如：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <link rel="stylesheet" type="text/css" href="index.css"/>    </head>    <body>        <div id="box"></div>    </body></html>

4.3.3 将样式表加入到HTML文件中，这种方式写入的css样式又叫行内样式表

<h1>css 样式测试</h1><div style="width:200px;height:200px;background:red;"></div>

总结：css的基本语法
CSS语法由三个基本部分构成：选择符（Selector）、属性（Properties）和属性的取值（Value）
格式：Selector｛Properties:Value｝(选择符｛属性：值｝)

 #box{    width:100px;    height:100px;    border:red solid 1px;}

练习：

1、画盒子
2、相框

5 基础选择器

5.1 id选择器

ID选择器与类选择器的定义与引用方式类似，只是定义的符号不一样。ID通常表示唯一值，因此，ID选择器在CSS 中通常只出现一次。如果出现多次也能解析，但是不建议这样使用

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>           #box{               width:100%;               height:100px;               backgroud:black;           }        </style>    </head>    <body>        <div id="box"></div>    </body></html>

5.2 类选择器

类（class）选择器就是将相同类型的元素进行分类定义，分类定义的好处就是能够复用。在类名前面加符号”.”，表示定义一个类选择器，引用的时候在标签后面加class 引用；例如：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>           .box{               width:100%;               height:100px;               backgroud:blue;           }        </style>    </head>    <body>        <div class="box"></div>    </body></html>

5.3 标签选择器

标签选择器就是直接使用HTML标签名称作为CSS选择器的名称，这种方式会影响HTML中所有此标签的样式；例如：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            div{                width: 100%;                height: 100px;                background: blue;            }        </style>    </head>    <body>        <div>1</div>        <div>2</div>        <div>3</div>        <div>4</div>    </body></html>

6 基本属性

6.1 颜色表示方式

RGB模式，红(R)、绿(G)、蓝(B) 每个的取值范围0~255，color：rgb（0,255,0）

p{/*设置字体颜色伪绿色*/color：rgb（0,255,0）;}

RGBA模式，RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度，color：rgba（255,255,255,0.5)；A 透明度的取值范围是0-1

p{    background-color：rgba（255,255,255,0.5）}

16进制，用16进制表示颜色值，如#FF0000,#00FF00，可以简写成#F00，#0F0;

#div{   background-color:#ccc;}

颜色名称,直接用颜色名称表示颜色，如：red、green、blue、yellow等等

p{   color:red;}

6.2 边框相关属性

border-width 设置4边框的宽度

p{  border-style:solid;  border-width:15px;  }

border-style设置4边框样式

p {  border-style:solid;  }  /*  边框风格样式的属性值:    none 无边框    solid  直线边框    dashed  虚线边框    dotted 点状边框    double  双线边框  */

border-color 设置边框颜色

p {  border-color:red;  }

border简写

p{    border:1px solid red;}

单独设置某边框
border-left、border-top、border-right、border-bottom

p{   border-left:1px solid red;}

border-radius 向元素添加圆角边框

//为所有角都设置圆角border-radius:20px;//border-radius 后面给两个值border-radius:0px 10px;  /* 0px表示上左下右两个角 10px 上右下左两个角*///border-radius 后面给3个值border-radius:10px 0px  20px;  /*10上左  0px 上右下左 20px 下右  *///border-radius 后面给4个值border-radius:5px 10px 15px 20px ; /*上左  上右 下右 下左 */

//设置半圆//把高度设置成宽度的一半  并且只设置下左和下右两个角的值 //设置的值为宽度的一半    .box{        width: 100px;        height: 50px;        border-radius:0px 0px 50px 50px ; /*上左  上右 下右 下左 */        }

设置圆形把高度和宽度设置成一样，并且把四个圆都设置成宽高的一半    .box{        width: 100px;        height: 100px;        border-radius:50% ;         }注意：单位不仅可以用px 还可以用百分比 %

6.3 背景相关属性

背景颜色 background-color

p{    background-color:#ccc;}

背景图片 background-image
语法：

background-image:url(图片路径)

背景重复 background-repeat
语法：

 background-repeat:repeat-x|repeat-y|no-repeat;

重复平铺满 repeat;向Y轴重复 repeat-y;向X轴重复 repeat-x;不重复 no-repeat;
背景位置 background-position
横向（left,center,right）;
纵向（top,center,bottom
语法：

background-position：x y；/*xy分别代表x轴位置和y轴位置*/

6.4 字体相关属性

font-family 定义字体，font-family：宋体，serif；可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个

p{font-family：宋体，serif;}

font-size 设置字体大小

p{    font-size:14px;}

font-weight 字体加粗
font-weight:normal;normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)

p{font-weight:bold;/*加粗字体*/}

color 设置字体颜色

p{   color:red;}

6.5 文本相关属性

text-align,横行排列，值：center 居中，left靠左，right 靠右

p{text-align:center;}

line-height 文本行高

p{text-algin:center;height:50px;line-height:50px;/*文本行高和盒子高度一致就会垂直居中*/}

text-indent 首行缩进

p{text-indent:50px;}

letter-spacing 字符间距

p{letter-spacing:10px;}

练习

1.网易考拉下拉菜单
2.爱奇艺新闻
3.ps滤镜菜单
4.爱奇艺列表

7 布局

7.1 盒子模型

网页设计，首先要做好整体的布局，网页布局就是将不同的元素按照一定的规则放置在浏览器的不同位置，因此会经常用到一些内容、填充、边框、边界等属性，html布局元素经过不同的嵌套与位置的摆放，就类似于日常生活中的用盒子装东西，把每一个布局元素看成一个盒子，引出了盒子模型

元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

7.1.1 margin

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
有四个值的时候：margin:10px 5px 15px 20px;（顺序依次是上右下左）；
有三个值的时候：margin:10px 5px 15px; （顺序依次是上左右下）；
有两个值的时候：margin:10px 5px; （顺序依次是上下左右）
有一个值的时候 margin：10px；（代表四个值都是10px）

#div1{    margin:10px;/*代表四个值都是10px*/}#div2{margin:10px 5px; /*顺序依次是 上下 左右*/}#div3{margin:10px 5px 15px;/*顺序依次是 上 左右 下*/}#div4{margin:10px 5px 15px 20px;/*顺序依次是 上 右 下 左*/}

7.1.2 padding

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
padding 简写时值的顺序与margin相同

块级元素：块级元素独占一行，每次都从新行上开始，宽度，行高以及外边距和内边距都是可以设置的，如果宽度省略的话，默认充满整个容器，并且可以容纳其他行内元素，支持所有的css属性
行内元素：在一行内显示，不单独占行，不可以设置宽高，宽高被内容撑开，不支持上下margin，代码换行被解析
块级元素行内元素区别？
为什么img input 行内标签但是可以设置宽和高？
替换元素：根据元素的属性来显示样式 img input select
不可替换元素：根据原来预设好功能来显示
块级元素和行内元素转换

display:block   /*行内元素转换成块级元素 独占一行*/display:inline   /*块级元素转换成行内元素*/display:inline-block;  /*行内元素转换成 行内块可以支持宽高.*/

练习：

1、螺钉课堂导航
2、百度百家导航
3、京东爱逛导航
4、京东电子数据导航
5、爱奇艺导航

7.2 浮动

普通流：指的是在不使用其他的与排列和定位相关的特殊css规则时，各种元素的自然排列规则
浮动：脱离标准文档流并且可以左右移动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动的作用：可以很方便的布局例如：两个div左右布局在一行内显示

浮动带来的问题

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">             .wrap{                 border: 4px solid red;             }             .left{                 width: 300px;                 height: 200px;                 float: left;                 background-color: #ccc;             }             .right{                 width: 500px;                 height: 200px;                 float: right;                 background-color: #FFA500;                 margin-left: 5px;             }             .footer{                 height: 100px;                 background-color: black;             }        </style>    </head>    <body>        <div class="wrap" >            <div class="left"></div>            <div class="right"></div>                </div>        <div class="footer"></div>    </body></html>

解决浮动带来问题的方法：

1) 父盒子设置高度

.wrap{      border: 4px solid red;      height: 200px;}

2) 添加额外标签用clear：both

<div class="wrap" >    <div class="left"></div>    <div class="right"></div>       <div style="clear: both;"></div></div>

3) 使用br标签和它的属性

<div class="wrap" >      <div class="left"></div>      <div class="right"></div>         <br clear="both" /></div>

4) 父元素设置overflow:hidden

.wrap{    border: 4px solid red;    overflow: hidden;    zoom: 1; }

5) 使用:after伪元素

.clearfix{   *zoom: 1;}.clearfix:after{      content:".";      display:block;      height:0;      visibility:hidden;      clear:both;}

BFC

　BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗的讲，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的元素也不会影响到里面的元素,同时BFC任然属于文档中的普通流。

生成BFC的元素

根元素float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不为visible

BFC布局规则：

1、内部的Box会在垂直方向，一个接一个地放置。2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。4、BFC的区域不会与float box重叠。5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。6、计算BFC的高度时，浮动元素也参与计算

haslayout

haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，使用布局概念来控制元素的尺寸和定位。从表现上来说，hasLayout 可以等同于 BFC。
触发hasLayout的条件：

position: absolutefloat: left|rightdisplay: inline-blockwidth: 除 “auto” 外的任意值height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1%  ）zoom: 除 “normal” 外的任意值 在 IE7 中，overflow 也变成了一个 layout 触发器：overflow: hidden|scroll|auto (这个属性在IE之前版本中没有触发 layout 的功能。)overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前IE版本中同样没有触发 layout 的功能）

兼容方法

1 使元素即生成了 block formatting context，又触发了 hasLayout    1.1 对于触发 hasLayout 的元素，通过 CSS 设置，使它产生 block formatting context；    1.2 生成 block formatting context 但是没有触发 hasLayout 的元素，通过设置 'zoom:1'，使其触发 hasLayout。1 使元素即没有触发 hasLayout，又没有创建 block formatting context。

练习：

1.画盒子1
2.画盒子2
3.京东特色购物
4.京东发现好货
5.京东玩3c

7.3 定位

通过使用 position 属性，我们可以选择 3 种不同类型的定位，这会影响元素框生成的方式。

relative

相对定位的参照物是原来自己的位置，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

<html><head><style type="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p></body></html>

absolute

绝对定位的参照物是有定位属性的上级元素，一层一层往外找定位的参照物，直到body

<html><head><style type="text/css">h2.pos_abs{position:absolute;left:100px;top:150px}</style></head><body><h2 class="pos_abs">这是带有绝对定位的标题</h2><p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p></body></html>

fixed

固定定位的参照物是浏览器可视区域

<html><head><style type="text/css">p.one{position:fixed;left:5px;top:5px;}p.two{position:fixed;top:30px;right:5px;}</style></head><body><p class="one">一些文本。</p><p class="two">更多的文本。</p></body></html>

练习：

1、京东固定定位
2、网易栏目
3、淘宝轮播图

8 其他选择器

8.1相邻选择器

相邻选择器可以选择紧跟其后的相邻元素,注意：相邻选择器用＋号来连接

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>           h1+div{                width:100px;                height:100px;                background:blue;        </style>    </head>    <body>        <h1>css 样式测试</h1>        <div id="div1"></div>        <div id="box"></div>    </body></html>

8.2 多元素选择器

当几个元素有共同属性的时候，可以使用多元素选择器，注意：选择多个元素的时侯，用逗号隔开

<style>    h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,textarea,form,input,select,body{margin:0;padding:0}</style>

8.3 后代选择器

后代选择器作用于父元素下面的所有子元素

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>           ＃div1 p{           /*           把id为div1的下面的所有p元素的字体设置为红色，这里包括id为box的子元素p           */                color:red;           ｝        </style>    </head>    <body>        <h1>css 样式测试</h1>        <div id="div1">            <p>一江春水向东流</p>            <p>飞流直下三千尺</p>            <div id="box">                  <p>床前明月光</p>            </div>        </div>    </body></html>

8.4 子元素选择器

子元素选择器作用于父元素的子元素，子元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，而子元素选择器只能作用于它的子元素

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>           ＃div1>p{           /*把id为div1的子元素p的字体设置为红色           这里只包含子元素，不包含id为box下面的子元素           */                color:red;           ｝        </style>    </head>    <body>        <h1>css 样式测试</h1>        <div id="div1">            <p>一江春水向东流</p>            <p>飞流直下三千尺</p>            <div id="box">                  <p>床前明月光</p>            </div>        </div>    </body></html>

8.5 属性选择器

E[attr] 匹配所有具有att属性的E元素，不考虑它的值,例如： input[name]，只要有name属性的input元素都会被选中

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>           input[name]{              /*把带有name属性的input元素加上红色边框*/              border:red solid 1px;           }        </style>    </head>    <body>       <form>            <input type="text" name="ipt1"/>            <input type="text" name="ipt1"/>            <input type="submit" value="提交" />        </form>    </body></html>

E[attr = val] 匹配所有attr属性值等于val的E元素 input[id=ipt2] 属性值一般不加引号

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>           input[id=ipt2]{              /*把id值为ipt2的input元素的边框设置成蓝色*/              border:blue solid 1px;           }        </style>    </head>    <body>       <form>            <input type="text" name="ipt1" id='ipt1'/>            <input type="text" name="ipt1" id='ipt2'/>            <input type="submit" value="提交" />        </form>    </body></html>

E[attr ~= val],”~”包含的意思，只要属性值包含了val的E元素都会被选中

<!DOCTYPE html><html><head><style>[title~=flower]{border:5px solid yellow;}</style></head><body><p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p><img src="/i/eg_tulip.jpg" title="tulip flower" /><br /><img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge" /><p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。</p></body></html>

E[attr = ^val],”^”以某个值开头的意思，只要属性值以val开头的E元素都会被选中

<!DOCTYPE html><html><head><style> div[class^="test"]{/*第三个div元素的背景会被设置成红色*/background:red;}</style></head><body><div class="first_test">第一个 div 元素。</div><div class="second">第二个 div 元素。</div><div class="test_three">第三个 div 元素。</div><p class="test">这是段落中的文本。</p></body></html>

E[attr = val],"”以某个值结尾的意思，只要属性值以val开头的E元素都会被选中

<!DOCTYPE html><html><head><style> div[class$="test"]{/*第一个div的背景会被设置成蓝色*/background:blue;}</style></head><body><div class="first_test">第一个 div 元素。</div><div class="second">第二个 div 元素。</div><div class="test_three">第三个 div 元素。</div><p class="test">这是段落中的文本。</p></body></html>

8.6 伪类和伪元素

8.6.1 :after和:before

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            a:before{                content: "点我";            }            a:after{                content: "!!!";            }        </style>    </head>    <body>        <a href="http://www.baidu.com">百度</a>        <p>百度一下你就知道了！</p>        <a href="http://nativejs.org">原生js社区</a>    </body></html>

8.6.2 a标签的4种不同状态

未访问链接(link)、鼠标放上状态(hover)、已访问链接(visited)、当前活动链接(active)。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            a:link{                color: red;            }            a:visited{                color: blue;            }            a:hover{                color: yellow;            }            a:active{                color: green;            }        </style>    </head>    <body>        <a href="http://nativejs.org">原生js</a>    </body></html>

上述代码中，对a元素使用:before 和 :after伪选择器，使用这类选择器对时候，通过设置content属性对值可以指定耀插入的内容。这个属性比较特别，只能跟伪选择器一起使用。after表示在a元素内容之前插入，before表示在a元素内容之后插入

9 综合实例

10 表格

10.1 table

table 为表格标签可以让我们的表格在浏览器中显示 table 下面还有两个常用标签 tr 和 td
tr表示一行 td表示一行里面的某个单元格,通常用在后台管理系统中数据表格的显示

<table border="1" cellspacing="0" cellpadding="0">            <tr>                <td>学号</td>                <td>姓名</td>                <td>班级</td>                <td>成绩</td>                <td>等级</td>            </tr>            <tr>                <td>20080795113</td>                <td>李菲</td>                <td>3</td>                <td>12</td>                <td>不及格</td>            </tr>            <tr>                <td>20080795114</td>                <td>张菲</td>                <td>3</td>                <td>82</td>                <td>良好</td>            </tr>            <tr>                <td>20080795115</td>                <td>赵菲</td>                <td>3</td>                <td>32</td>                <td>不及格</td>            </tr></table>

注意：在table的开始标签后面加上 border cellspacing cellpadding，这种形式叫做给html标签添加属性，border 表示边框， cellspacing 表示单元格之间的间隙，cellpadding表示单元格内容和边框之间的距离

10.2 合并单元格

colspan 设置当前单元格的在水平方向上合并单元格的个数

<table border="1px" width="300" cellspacing="0" cellpadding="0">      <tr>          <td>姓名</td>          <td>张三</td>          <td>年龄</td>          <td>20</td>      </tr>      <tr>           <td >个人简介</td>           <td colspan="3"></td>      </tr>      <tr>           <td >专业技能</td>           <td colspan="3"></td>      </tr></table>

rowspan 设置当前单元格的在垂直方向上合并单元格的个数。

<table border="1" cellpadding="0" cellspacing="0">            <tr>                <td>姓名</td>                <td>张三</td>                <td>年龄</td>                <td>12</td>                <td rowspan="3">                    <img src="tablehead.jpg"/>                </td>            </tr>            <tr>                <td>籍贯</td>                <td>中国</td>                <td>民族</td>                <td>汉族</td>            </tr>            <tr>                <td>出生日期</td>                <td>1999.3.4</td>                <td>政治面貌</td>                <td>党员</td>            </tr></table>

练习：

1.课程表
2.个人简历

11 表单

11.1 form标签

form 标签表示表单，作用就是用来收集用户的信息并且发送给后台使用，例如：登录，注册就是通过formate表单完成
####form 表单属性
action: 用于设置表单提交的地址也就是说表单收集的数据要发送到哪里去
method：用于设置表单提交的方法也就是说表单是以何种方式把数据发送到action设置好的地址
get：表单发送数据的方式之一特点：表单的发送的数据会显示在浏览器地址栏
post：表单发送数据的方式之一特点：表单发送的数据通常不被用户看见

<form action="http://www.baidu.com/s" method="get">            用户名: <input type="text"   name="user"/>            密码： <input type="password"  name="password"/>            <input type="submit" value="提交" /></form>

11.2 input 标签

input标签为表单的某一个子项会根据type属性的不同而功能不同
常用的几种type属性：

type = "text"type = "password"type = "checkbox"type = "radio"type = "button"type = "submit"type="file"type = "hidden"

输入框

        <input type=“text” /> <!--type="text" 通常用来输入文本内容-->

密码框

<!--type="password" 通常用来输入密码，输入内容不可见--><input type=“password” />

复选框

<!--type="checkbox" 用于表示多个选项，是否选中用checked属性--><input type=“chekbox” />

单选框

<!--type="radio"  表示单选，几个input中只能选择一个，是否选中用checked属性--><input type=“radio” />

隐藏域

 <!--type="hidden" 隐藏表单元素，有些时候后台需要某个数据，但是在前端不需要显示的时候这个数据的时候使用--><input type=“hidden” />

文件选择控件

<input type=“file” /> <!--type="file" 文件上传-->

提交按钮

<input type=“submit” /> <!--type="submit" 执行提交动作将数据发送到后台处理-->

普通按钮

<input type=“button” /> <!--type="button" 普通按钮 不触发提交动作-->

其他属性
name属性，规定input元素的名称，后台会根据这个属性的值来接收数据
value属性，表单项的值
readonly属性，指定控件处于只读状态，针对输入框有效，对按钮无意义
disabled属性，控件不可用，灰色，并且表单提交时不会传送此数据
注意：如果元素没有name属性，表单提交的时候，数据不会被发送出去

11.3.textarea元素

textarea 表示多行文本框
rows属性，设置多行文本框的显示行数（高度），具体尺寸取决于文字大小
cols属性，设置多行文本框的显示列数（宽度），即字符数，具体尺寸取决于文字大小

11.4.button元素

定义一个按钮。

    <button type="button">Click Me!</button>

11.5.select元素

规定下拉列表框

        <select name="city">            <option value="bj">北京</option>            <option>上海</option>            <option>广州</option>            <option>深圳</option>        </select>

name属性，规定下拉框名称
size属性，规定下拉框里面选项的可见数目
multiple属性，设置后选单项目允许多选，否则只能选择一个

11.6.option元素

定义和用法

下拉框的具体每一项
value属性，下拉框的值
注意：如果value属性没有写，默认提交的时候，下拉框的值是被选中的option元素里面的内容，例如，上海，广州，当写了value属性以后，表单提交的时候，下拉框发送的值是value里面的值，例如，如果第一个option元素被选中，则提交的值是bj而不是北京

11.7.label元素