HTML CSS

发表于 2018-04-18 更新于 2020-12-01 阅读次数：本文字数： 26k 阅读时长 ≈ 24 分钟

认识HTML

HTML：超文本标记语言
关于标记

html文件已 .html结尾
<html> </html>标记

告诉浏览器这是一个HTML文档
<head> </head>标记：

首部，包含Web页面的有关信息，如页面标题，通过首部告诉浏览器关于Web页面的信息，首部包含<head> </head>之间的所有内容
<title> </title>:

在head标记中放入title标记，titile总出现在浏览器窗口的顶部
<body> </body>:

页面主体，包括它们之间的所有内容

编写HTML时要把首部和页面主体分开

<h1> </h1>:

主标题，还有h2,h3等副标题，最高到6
<p> </p>:
> 标记一个文本块，为一个段落，
代码注释：<!– 注释内容 –>
元素=开始标记+内容+结束标记

认识CSS

CSS是层叠样式表的缩写，提供一种方法来告诉浏览器页面中的元素如何显示
可以在<style>元素中写CSS规则，为HTML网页增加CSS，style元素总是要放在head元素里

<html>
      <head>
            <title>
            <style type="test\/css">//开始标记可以指定属性
                //在这里定义页面样式
                body{
                     background-color:#d3b48c;<!--设置背景颜色-->
                     <!--设置左右外边距分别占页面的20%-->
                     margin-left: 20%
                     margin-right: 20%
                     border: 2px dotted black;<!--定义页面主体周围的边框是虚线，颜色为黑色-->
                     padding: 10px 10px 10px 10px;<!--在页面主体周围创建一些内边距-->
                     font-family: sans-serif;<!--定义文本使用字体-->
                }
            </style>
            </title>
      </head>
      
      <body>
            <h1>  </h1>
            <p>   </p>
      </body>
</html>

CSS中的“body”表示“{ }”里的内容针对HTML的<body>元素

深入了解超文本

链接
> `<a href=”xxxx.html”>xxxx</a’>

“xxxx”为链接文本，在浏览器中会有下划线，表示可点击的，href属性告诉浏览器链接的目标文件，也可以把一个<img>元素放在<a>标记之间，这个图像就会像文本一样可单击
添加图片

<img src="照片文件名">

<em>元素：

标记想用不同方式显示的文本，比如起强调作用
属性

属性的写法：<a 属性名=”属性值”> 内容</a>
<a href=”top10.html”>Great Movies</a>
处理路径

如果链接在一个文件夹中的另一个文件夹下则需要写出相对路径，如：

<a href=”beverages/elixir.html> xxxx</a>
如果要向上一层文件夹寻找，则需要：

<a href=”../../lounge.html> xxxx</a>
..会告诉浏览器在上一层文件夹查找，每上一层多一次../..
相片也一样

构建模块

<q>元素：表示引用，页面会在相应的位置显示出双引号，用于短引用，作为现有段落的一部分
<blockquote>:用于长引用，需要单独显示，文本会自动生成一段并缩进，使用<blockquote>前要先结束<p>元素
块元素和内联元素：

<h1>、<h2>、<p>、<blockquote>都是块元素（block），每个块元素内容都单独显示，前后都有换行
<q>、<em>、<a>是内联元素（inline），会显示在所在的段落中

<br>

相当于换行符，在需要换行的地方加上<br>即可，不需要</br>
<br>、<img>都属于void元素，没有内容也没有结束标志
<hr />:打印出水平分割线

HTML列表

<li>元素：标记这是一个列表内容，对每个列表项都使用一对<li> </li>标记包围
<ol>和<ul>元素：包围列表项，<ol>表示将列表内容作为有序列表显示，<ul>表示无序列表,<ol>和<ul>只能包含<li>元素
以上三个元素均为块元素

列表标记

默认：list-style-type：disc；
把标记改为空心圆点：list-style-type：circle
把标记改为一个实心方形：list-style-type：square
若要删除自动加上的项目符号：list-style-type：none
为列表设置标记图像：list-style-image

li{
    list-style-image:url(images/backpack.gif);
    padding-top: 5px;
    margin-left: 20px;
}

若不希望换行：display：inline
默认的，ul元素会有一个外边距，可以设置 margin：0px；消除

<!--显示出来的内容自动带上序号-->
<ol>
    <li>CHina</li>
    <li>American</li>
    <li>England</li>
</ol>

定义列表<dl>：定义列表中的每一项都有一个定义术语<dt>和一个定义描述<dd>

<dl>
    <dt>Burma Shave Signs</dt>
      <dd>Road signs common in the U.S. in the 1920s and 1930s advertising shaving products.</dd>
    <dt>Route 66</dt>
      <dd>Most famous road in the U.S. highway system.
      </dd>
</dl>

对应特殊字符的字符实体

如果要在浏览器中显示特殊字符，比如：<、>、&等，就要使用字符实体的缩写，>的缩写为>,<的缩写为<,&的字符实体是&

& 之所以特殊是因为它是所有实体的第一个字符；除了使用实体名，还可以使用编号

常用字符实体

更详尽的字符实体清单

<!--以下会在网页打印出"The <html> element rocks."-->
The &lt;html&gt; element rocks.

连接到web服务器

域名：xxxxxx.com(不同域名有不同的结尾)，一个域名可以有多个网站
使用FTP把本地文件夹上传到服务器
URL：可以用绝对路径访问所需文件
要从根目录或其他目录默认返回一个文件，只需要把这个文件名改为”index.html”或”default.html”(视使用的服务器而定)
如果输入网址最后没有加上”/“,服务器会自动加上

<a>元素的使用

连接到其他网站:

<a href="某个URL">连接名</a>
为连接增加标题以便访问

<a>元素有一个titile属性，用来提供链接信息,在浏览器上把鼠标停放在链接上，就会显示出titile信息

Read the <a href="http://xxxxx.com/xxxx"
            title="Read all about caffeine on the Buzz">Caffeine Buzz</a>

连接到一个页面的特定位置

使用id属性为<a>创建目标

找到页面中需要直接连接到的某个特定位置
在该位置上创建一个标识id属性
修改<a>元素href属性(使用#id名)

<!--某个片段-->
<h2 id="chai">chai tea</h2>
<p>A spicy drink made with black tea,spices,milk and honey.</p>
<!--使用<a>元素连接到以上文件-->
<a href="index.html#chai">See Chai tea</a>

id名一定要用一个字母开头，后面可以是任意字母、数字、横线、下划线、冒号或点好，尽量不要用空格

点击链接打开新的窗口

可以为<a>新增一个target属性，target属性会告诉浏览器在哪里打开href属性中的连接，如果没有target，默认在同一个窗口打开这个链接。如果目标为"_blank",浏览器就会在一个新窗口中打开这个链接。

<a target="_blank"
   href="http://xxxxxx.com/xxxx"
   title="Read all about cafffeine">Caffeine Buzz</a>

target还可以指定其他名字，target指定一个特定的名字，实际上就是为显示连接页面的新窗口命名，所有有相同目标名的连接都会在同一个窗口打开

为页面增加图像

图像格式
1. JPEG：适合照片，多种颜色，有损压缩，不支持透明度
2. PNG：适合单色图像和线条构成的图像（logo，剪切画，小文本），多种颜色，三种类型：PNG-8，PNG-24，PNG-32，取决于需要多少颜色，无损压缩，支持透明度，文件相对较大
3. GIF：适合单色图像和线条构成的图像（logo，剪切画，小文本），只有256种颜色，无损压缩，只允许一种颜色设置为透明度，支持动画，文件最大
<img>元素

> <img src=”文件夹名或者URL”> (URL是图像路径，最后一定是一个图像文件名)
<img>的alt属性

<img src="http//:xxx.com/xxxxxx/xxx/xxx.png"
     alt="THe typical new pencil can draw a line 35 miles long.">

当图片未能显示时，就会使用alt这个文本来取代它
3. 调整图像的大小<width>和<height>属性

img src="images/drinks.gif"width="48" height="100">

width告诉浏览器在页面中图像的宽度，height告诉高度

宽度和高度都是用像素来确定的，如果没有指定，则浏览器在页面中显示这个图像之前会自动确定图像的大小
4. 使用Photoshop修改文件大小：

使用width属性和height属性属性时，浏览器仍然要先读取原图片再改，速度慢
使用Photoshop的保存为Web格式进行更改

使用缩略图链接

把缩略图单独放在一个文件，大图放在另一个文件
再建一个文件夹写显示大图的html
用<a>元素链接大图的HTML，并把缩略图的img放在<a>元素中

<p>
<a href="html/seattle_videomed.html">
   <img src="thumbnails/seattle_video_med.jpg"
   alt="My video iPod in Seattle,WA">
</a>
</p>

图版使用蒙版柔化边缘

编写标准的HTML（HTML5）

使用doctype告诉浏览器正在使用的HTML版本

HTML5的doctype：<!doctype html>(HTML5一定要写上)
HTML5中<img>元素要加上alt属性
W3C验证工具

用于验证HTML代码标记是否合法

http://validator.w3.org

三种验证方法：

Validate by URL:针对网页在Web上，输入URL

Valldate by File Upload:从计算机上传一个文件

Valldate by Direct Input:直接将HTML复制粘贴上去

<meta>标记

<meta charset="utf-8">

“meta”表示我们要告诉浏览器关于页面的一些信息
在charset属性中指定字符编码
“utf-8”是Unicode系列中的一个编码，Web页面中使用的就是”utf-8”
<meta>标记要放在<head>元素中，且放在其他所有元素的上面

CSS入门

结合HTMl和CSS

选择需要增加样式的元素
在所选元素后加上{}
指定想要设置样式的属性
最后要加";"

p{background-color:red;}(整个称为一个规则)

p {
    <!--背景颜色-->
    background-color: red;
    <!--边框,粗细为1像素，灰色，实线-->
    border: 1px solid gray;
}

把CSS放入HTML

在<head>元素中加入<style>元素，把CSS规则放入<style>中

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Head First Lounge</title>
    <style>
       <!--在这里加入CSS规则-->
       p{
           color:martoon;
       }
    </style>
  </head>
  
  <body>
     <h1></h1>
     <p></P>
  </body>
</html>

上面的规则将指定段落的字体颜色，p选择器会选择HTML中所有的段落(但链接颜色不变)

对标题增加样式

把字体样式font-family属性的值改为sans-serif，颜色改为灰色，设置下边框粗细1像素，实线黑色，规则一样可以合并

h1,h2{
    font-family:sans-serif;
    color:      gray;
    border-bottom: 1px solid black;/*可以另起规则只对h1加这个*/
}
p{
    color:maroon;
}

CSS中的注释： /*注释内容*/

为所有页面添加同一样式

创建”xxx.css”文件，把需要的规则放进去（通常把css文件称为样式表）-只包含选择器，不包含<style>标记
从html文件链接到外部样式表：利用<link>元素

<link type="text/css" rel="styleshet" href="../xxx/lounge.css">

type属性：这是信息的类型是“text/css”，HTML5之后可以不用
rel属性：指定了HTML文件与所连接的文件之间的关系，要连接到一个样式表，所以这里的值是”stylesheet”
href属性：样式表放在href中
<link>是一个void元素，没有结束标记
不再需要style元素

改变<p>元素的font-family后会影响<P>内部的元素，如<em>、<a>,可以直接在body属性中加入规则，改变整个页面的样式
覆盖继承：为某个需要特定样式的属性直接加入新规则即可

为单独段落指定样式

为元素增加类属性：

找到特定段落，在<p>中增加class属性，并提供类名

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>abcdefg</title>
    <link type="text/css" rel="stylesheet" href=".../lounge.css"
  </head>
  <body>
    <h1>XXXXX</h1>
    <h2>xxxxxx</h2>
    <p>123456789</p>
    
    <p class="类名">9876543210</p>
    
  </body>
</html>

创建一个类选择器，并选择这个类中的一个元素

p . 类名{color：green}
如果希望一个类中的所有元素都使用同一种样式：

. 类名{color：green}
一个元素加入多个类：

<p class=”aaa” “bbb” “ccc”>各类之间用空格隔开
如果由于两个选择器有相同的特定性而出现冲突，则以CSS文件最后列出的规则为标准

CSS验证工具：

http://jigsaw.w3.org/css-validator/

增加字体和颜色样式

常用文本属性

1. font-family：字体系统，定制页面中使用的字体

Serif系列：包括有衬线的字体，比如新闻报纸的文字排版，衬线是字母末端的装饰性“小细线”

Sans-serif系列：包括没有衬线的字体，与serif相比，通常认为sans-serif字体在计算机屏幕上更容易识读

Monospace系列：字体包含固定的宽度，例如一个”i”在水平方向所占的宽度与一个”w”所占宽度相同，主要用于显示软件代码示例

Cursive系列：包括看似手写的字体，有时会看到标题中使用这些字体

Fantasy系列：包含某种风格的装饰性字体

使用CSS指定字体系列

body {
    font-family: Verdana,Geneva,Arial,"Courier New",sans-serif;
    /*如果一个字体名包含多个单词，则使用双引号括起来*/
}

使用font-family属性可以指定多个字体，按照顺序，若第一种字体用户计算机没有则往下推，字体名大小写必须一致，候选字体通常来自一个字体系列，最后总是放一个通用的字体系列名，如"serif","sans-serif","cursive","monospace","fantasy"
使用Web字体向用户浏览器提供一种字体：

字体文件”.woff”文件拓展名，这表明web开放字体格式
把字体文件放到web上，即字体文件的URL
在CSS中增加@font-face属性

在.css文件中增加一个@font-face规则，要放在文件的最上面

@font-face{
    font-family:"Emblema One";/*自定义一个font-family名，以便以后使用*/
    src:url(".woff的URL")；
}

在CSS中使用font-family名

h1 {font-family:”Emblema One”,sans-serif;}

2. font-size：控制字体大小

用像素指定大小：font-size：14px（14和px之间不能有空格）
用百分数指定大小：从父类继承的相对于父类字体的大小
用em指定比例数：从父类继承的相对于父类字体的大小

body {
    font-size: 14px;
}
h1{
    font-size: 150%;/*相对于body的大小*/
}
h2{
    font-size: 1.2em;/*body字体的1.2倍*/
}

关键字指定大小：xx-small,x-small,small,medium,large,x-large,xx-large

body{
    font-size：small;
}

指定字体大小：先用关键字指定body大小，再在想改的元素用%或者em，以后想改就直接改body就可以了

3. font-weight：指定字体粗细

可以将元素的font-weight设置为bold，使用粗体

font-weight:bold;
可以反过来，如果一个元素默认的设置为bold，或者从父类继承了粗体，可以改为正常样式

font-weight:normal

4.font-style: 为字体添加风格

font-style: italic；（斜体风格，通常使用这种）

font-style：oblique；（把字体倾斜）

5. color：为文本设置颜色

Web颜色：按红蓝绿三个分量的占比指定
指定Web颜色的方法：

按名指定颜色：body {background-color：sliver;}

当需要指定一个颜色时，直接输入颜色名，支持16种基本颜色和150种拓展颜色

用红蓝绿值指定颜色：body {background-color：rgb(80%,40%,0)/rgb(204,102,0);(橙色)

可以用rgb，即red，green，blue缩写，所占百分比或者将红、绿、蓝指定为0到255之间的一个数值

使用十六进制码指定颜色

十六进制码总是使用#开头
十六进制码每组两个数分别表示红、绿、蓝的分量，前两个表示红，中间两个表示绿，最后两个表示蓝（eg：#cc6600)，如果每一组分量中两个数字相同，可以缩写（eg：#c60）

6. text-decoration：为文本增加更多风格，如下划线，上划线，删除线

text-decoration：line-through;(文本中间会有一条穿过的横线)
text-decoration：underline/overline;(文本下划线或上划线)
text-decoretion: none(没有任何装饰)

深入了解元素

了解行高：

line-height: 1.6em(表明行间距为字体大小的1.6倍，也可以使用像素和百分比）

盒模型

CSS将每个元素都看作一个盒子：

内容区：包含元素的内容（文本或图像）
内边距：在内容区四周增加内边距，透明无色，可选；通过CSS可以控制内边距在内容区周围的宽度，还可以控制任意一边的内边距宽度
边框：包围内边距，是围绕内容的一条线，从视觉上是内容与同一页面的其他元素隔开，可使用CSS设置宽度、颜色、样式；内边距将内容区和边框隔开
外边距：包围着边框，可以在同一页面的不同元素之间增加空间，可选，透明，无色，可以通过CSS控制外边距的宽度

元素的背景颜色会延伸到内边距下面，但不会延伸到外边距

为某个元素增加一个边框：

.guarantee{
    border-color: black;
    border-weight: 1px;
    border-style: solid;/*实线*/
    background-color： #a7cece;(元素背景颜色)
}

增加内边距：可以使用像素或者百分数

padding: 25px;(在内容的四周增加25像素的内边距)

CSS在每一个方向都提供了一个属性：top,bottom,left,right

padding: 25px;
padding-left: 80px;

顺序很重要，如果交换顺序，第二次会覆盖第一次的80px

增加外边距：可以使用像素或者百分数

margin: 30px;(在内容四周增加30像素的外边距)

跟内边距类似

利用CSS为元素增加一个背景图像

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

背景图只出现在内容区和内边距下面,url中的路径可以是相对

修整背景图像：

background-repaet属性:默认地，背景图像会“平铺”，也就是反反复复来填满整个背景空间，background-repeat属性可以控制这种平铺行为

background-repeat:repeat/no-repeat/repeat-x/repeat-y/inherit;

repeat:设置图像在水平和垂直方向上重复，这是默认行为

no-repeat：图像只显示一次，不重复

repeat-x：图像只在水平方向上重复

repeat-y：图像只在垂直方向上重复

inherit：按父元素的设置来处理
2. background-position属性：设置图像的位置，可以按像素指定，也可以是百分数，还可以是关键字，如top,left,rignt,bottom,center

background-position: top left;(左上角)

边框

边框样式：border-style属性可以控制边框的视觉样式，包括实线、虚线、脊线、槽线

solid：实线边框
dotted：虚线边框（有一个个小点连成）
dashed：破折线（有破折号连成）
double：双线（有两条线）
groove：槽线（看起来就像是页面中的一个槽）
inset：内凹，看起来像页面凹进去
outset：外凸，看起来像从页面凸出来
ridge：脊线，页面看起来像一个凸起的山脊

边框宽度：border-width属性控制边框的宽度，可以使用关键字或像素来指定边框宽度

border-width: thin/5px;
关键字：thin、medium、thick（最粗）
边框颜色：border-color属性设置边框颜色，可以使用颜色名、rgb、十六进制码

border-color: red/rgb(100%,0%,0%)/#ff000;
指定某一边的边框

border - top/bottom/left/right - style/color/width:xxx;
指定边框圆角

可以在四个角上都创建圆角，或者只对一个角或这4个角的任意组合创建圆角
border-radius

border-radius: 15px;(四个角)

/*指定一个角*/
/*可以使用px或者em来指定半径大小，如果使用em，边框半径的度量相对于元素的字体大小，与使用em指定font-size时一样*/
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-left-radius: 3em;
border-bottom-right-radius: 3em;

对于类和id的使用：

如果只有一个元素需要添加样式，则使用id，如果有多个就是用类
id属性：<p id="footer">xxxxx</p>
在CSS中使用id：在id前面加一个#字符

/*id为footer的任意元素*/
#footer{
    color: red;
}

/*只选择id为footer的一个&#60;p&#62;元素*/
p#footer{
    color: red;
}

class和id另一个区别：id选择器只与页面的一个元素匹配

类名要以一个字母开头，id名可以以数字或字母开头，都可以包含字母、数字和下划线，但不能有空格，id名必须唯一

指定媒体类型

可以在<link>元素中增加一个media属性，只使用适用于指定设备的样式文件，通过创建一个媒体查询来指定设备类型

<link href="lounge-mobile.css" rel="stylesheet" media="screen and (max-device-width: 480px)">

print：要通过打印机查看页面
screen:这个查询指定了有屏幕的设备
max-device-width：屏幕宽度不超过480像素
min-device-width：屏幕宽度不低于某个像素
orientation（显示方向):landscape(横向)，portrait(纵向)

直接在CSS中增加媒体查询：使用@media规则

@media screen and (min-device-width: 481px) {
    #guarantee{
        margin-right: 250px;
    }
}

在CSS文件中，要把对所有媒体类型都通用的规则放在@media规则的下面，这样就不会重复地使用规则了

高级Web建设

<dev>元素

<dev>元素把页面分为不同的区域（逻辑区），可以为<div>指定id，类名
<dev>元素可以嵌套
<dev>描述为容器
块元素，会自动换行

CSS样式

处理内容区宽度：使用width属性(只指定内容区宽度)
使用块元素text-align: center可以对齐其中包含的文本，比如居中

子孙选择器

如果只需要父元素中的某一个子类改变属性，而不影响其他属性，就使用子孙选择器

div(父元素) h2(子元素) {
    color: blacck;
}

#elixirs h2{
    color:black;
}

/*选择直接的孩子，只指定elixirs中的直接元素&#60;h2&#62;*/
#elixirs&#62;h2{
    color:black;
}

/*多层子孙选择器*/
#elixirs blockquote h2 {
    color: blue;
}

行高

line-height：可以使用%或em或者数字，使用前两者相对于body字体的比例，使用数字相当于字体本身的几倍

简写

padding和margin的各方向距离可以简写为：（从上开始顺时针）

padding/margin:0px 20px 30px 10px;(用空格键隔开)

如果上下和左右分别一样，则：padding/margin: 0px(上下) 10px(左右);

外框属性也可以简写，不区分顺序

border: solid thin #007e7e;
背景简写：不区分顺序

background: white url(images/cocktail.gif) repeat-x;
字体简写：

格式：font： font-style font-variant font-weight font-size/line-height font-family

前面三个的顺序可以互换，可选可不选，但都必须在font-size数字前面，line-height属性可选，如果需要在font-size属性后面加/，然后指定行高，font-family要放在最后

font : small/1.6em Verdana, Helvetica, Arial, sans-serif;

<span>元素

为内联内容创建逻辑分组
span为内联元素，不会换行

<a>元素

使用伪类

a:link{
    color:green;/*未访问状态的链接*/
}

a：visited{
    color：red;/*已访问状态的链接*/
}

a:hover{
    color:yellow;/*悬停在一个链接上时会应用这个选择器*/
}

伪类

:first-child：对应元素的第一个子元素
:last-child:对应元素的最后一个子元素

层叠

浏览器确定要对一个元素应用哪个样式时，它会使用所有这些样式表，最优先的是作者的样式，其次是用户的样式(如果用户在一个属性声明的最后加上“!important”,则优先使用用户样式)，最后是浏览器的样式
计算特定性：

规定一组数，默认000
如果这个选择器包含元素名，一个元素名在个位+1
如果这个选择器包含类或者伪类，一个类或者伪类在十位+1
如果这个选择器包含id，每个id在百位+1
比较最终数的大小，越大越特定

层叠方法：

先收集所有样式表，按作者、读者、浏览器排列，然后计算特定性，最终确定使用哪个属性

布局和定位

流：块元素从上往下沿着元素流逐个显示，在每个块元素之间加入换行符，内联元素：水平方向相互挨着，从左上流向右下方
浏览器并排放置两个内联元素时，，两个元素之间的距离等于外边距相加；上下放置时等于外边距较大的那个
浮动元素

首先，指定一个标识
对于所有浮动元素有一个要求：必须有一个宽度
使用float

#amazing{
    width: 200px;
    float: right;(向右浮动)
}

当浏览器遇到浮动元素时，会把它尽可能放在指定方向，还会从流中删除这个段落

由于这个浮动段落已经被删除，其他块元素会填在那里，好像根本没有这个段落，但内联元素会考虑浮动元素的边界，围绕这个浮动元素

修正两栏问题

为主内容区指定适当的外边距，让外边距至少和边栏宽度相同，就可以隔开背景图像，做出分栏效果

解决重叠问题
利用css的clear属性：当元素流入页面时，在这个元素的左、右或两边不允许有浮动内容，但必须把浮动的整个<div>移到页面主内容之上

#footer{
    background-color:#675c47;
    color: #efe5d0;
    text-align: center;
    padding: 15px;
    margin: 10px;
    font-size：90%;
    clear: right;
}

冻结布局

在某个范围加上<div>,指定宽度，边距等属性，能够把该范围冻结，无论浏览器怎么调都不变

<body>
    <div id="allcontent">
       <div id="header">
       ...rest of the HTML goes here...
       </div>
    </div>
</body>

#allcontent{
    width:  800px;
    padding-top:5px;
    padding-bottom:5px;
    background-color:#675c47;
}

凝胶布局
凝胶布局会锁定页面内容区的宽度，不过会将它在浏览器中居中

#allcontent{
    width: 800px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color:#675c47;
    
    /*外边距为auto，浏览器会确定正确的外边距是多少，另外还会确定左和右外边距相同，所以内容居中*/
    margin-left: auto;
    margin-right: auto;
}

绝对定位

利用position属性指定元素的绝对定位，position的属性值有：static、absolute、fixed、relative

static:静态定位，元素会放在正常的文档流中，由浏览器决定放在哪里（默认值）

absolute：绝对定位，由自己告诉浏览器究竟应该把元素放在哪里

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

relative:相对定位，让元素正常的流入页面，不过在页面上显示之前要进行偏移
2. 一个元素绝对定位时，浏览器首先要做的是将它从流中完全删除，然后将这个；元素放在指定位置上，流中的元素会将其忽略，包括内联元素
3. 如果要把一个绝对定位指定在另一个上面，可以使用z-index属性，CSS只有绝对定位、相对定位、固定定位有z-index属性

#div1{
    position: absolute;
    top: 30px;
    left:30px;
    z-index: 0;
}

#div2{
    position: absolute;
    top:30px;
    left: 30px;
    z-index: 1;(越大越上面)
}

CSS表格

为表格显示增加HTML结构：

首先，创建一个<div>表示整个表格，行和列都嵌套在这个div中

对于表格的每一行都创建一个<div>,其中包含行内容

对于表格的每一列，只需要一个块元素作为该列内容

<div id="tableContainer"> <!--表示整个表格-->
   <div id="tableRow"> <!--表示表格的一行-->
     <div id="main"> <!--表示某一列内容-->
     ...
     </div>
    </div>
</div>

使用CSS创建表格显示

首先，指定tableContainer<div>样式

display:table属性告诉“tabkeContainer”<div>要像表格一样摆放

border-spacing属性为表格中的单元格增加10像素的边框间距，此时不再需要<div>的外边距

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

指定tableRow<div>样式

display:table-row属性表示这是表格中的行

div#tableRow{
    display: table-row;
}

使用现有的“main”，“sidebar”<div>作为单元格，指定为列

display：table-cell：指定该内容为列（最先出现的为第一列）

vertical-align：确保表格两个单元格中的所有内容相对于单元格某一个方向对齐（top，middle，bottom）

#main{
    display:table-cell;
    background: #efe5d0 url(images/background.gif) top left;
    font-size: 105%;
    padding: 15px;
    (margin: 0px 10px 10px 10px)(此句删除)
    vertical-align: top;
}

表格创建的边框间距不会和元素的外边距折叠

HTML5标记

HTML5常见新元素

<article>:一个主题性内容分组，通常包含一个首部(header)，可能还有一个底部(footer)

<header>:放在页面顶部的内容，或者放在页面某个区块的顶部

<footer>:放在页面底部的内容，或者放在页面某个区块的底部

<nav>:所包含的内容将作为页面的导航链接

<section>:表示页面中一个独立的组成部分，如一个博客帖子、用户论坛帖子或新闻报道

<aside>:包含的内容是对页面内容的补充，如插图或边栏

<time>:可能包含一个日期或时间，也可能同时包含日期或时间

<video>:用来为页面增加视频媒体

对于<time>元素，有一个重要的属性：datetime

<time datetime=”2018-4-15”>15/4/2018</datetime>

如果元素内容没有采用任何官方internet日期或时间格式，就必须有datetime属性；如果使用了datetime属性指定了一个时间或日期，可以写任何希望写的内容

video元素

<video controls     如果有controls属性，播放器会提供一些控件，可以控制视频和音频的播放
       autoplay     如果有autoplay属性，视频会自动播放
       loop         如果有loop属性，视频结束播放后会自动开始重新播放
       width="512" height="288"    页面中视频的宽度和高度
       src="video/tweetsip.mp4"    视频的位置
       poster="images/poster.png"  提供一个图像，视屏未播放时就会显示这个图像
       id="video">  指定ID
</video>

controls、autoplay和loop属性是“布尔属性”，没有值，有这个属性就提供控件/自动播放，没有就不会出现

提供备用格式：

< video controls autoplay width="512" height="288">
   <source src="video\/tweetsip.mp4">
   <source src="video\/tweetsip.webm">
   <source src="video\/tewwtsip.ogv">
   <object src="video.ogv">
   <p> sorry,your browser doesn't support the video element</p>
</video>

对于每个source标记，浏览器会加载视频文件的元数据，查看能不能播放这个视频，object元素表示使用另一种技术（Flash视频）

表格和更多列表

HTML表格

使用table元素标记表格数据
每个<tr>元素构成表格中的一行
每个<th>元素分别表示某一列的表头
每个<td>元素包含表格中的一个单元格，每个单元格分别构成一个单独的列
使用caption元素增加标题，默认放在表格上方

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <style type="text\/css">
        td, th {border: 1px solid black}
   </style>
   <title>xxxxx</title>
</head>
<body>
  <table>
     <caption>
           标题
     </caption>
     <tr>
         <th>aaaa</th>
         <th>bbbb</th>
     </tr>
     <tr>
         <td>cccc</td>
         <td>dddd</td>
     </tr>
     <tr>
         <td>eeee</td>
         <td>ffff</td>
     </tr>
  </table>
</body>
</html>

为表格增加样式

table{
    margin-left: 20px;
    margin-right: 20px;
    border: thin solid black;
    caption-sode: bottom;/*把标题移到表格底部*/
}

td, th{
    border: thin dotted gray;
    padding: 5px;/*为单元格增加内边距*/
}

caption {
    font-style： italic;/*斜体*/
    padding-top: 8px;
}

border-spacing：边框间距

表格单元格没有外边距，它们只是在边框周围有间距，可以指定border-spacing： 0px；消除边框间距

还可以指定垂直方向和水平方向不同的边框间距：border-spacing：10px 30px;(先水平后垂直)

折叠边框

使用border-collapse：collapse;，忽略边框间距，使两个单元格紧挨在一起
为表格增加颜色：

可以定义类，再在CSS中修饰该类
使用nth-child伪类：

p:nth-child(even) {    /*指定双数元素*/
    background-color:red;
}
P:nth-child(add) {
    background-color:green;    /*指定单数元素*/
}
    
    
/*另一种方式，用数字n指定表达式*/
p:nth-child(2n) {
    background-color: red;
}
p:nth-child(2n+1) {
    background-color: green;
}

让单元格跨多行

使用rowspan属性指定一个表格数据单元格占多少行，colspan属性指定可以跨多少列

<tr>
    <td rowspan="2">xxxxxxxxx</td>
    <td>aaaaa</td>
    <td rowspan="2">xxxxxx</td>
    <td>bbbbb</td>
</tr>

<tr>
     /*由于rowspan设置了两行，所以此处的内容不需要*/
     <td>ccccc</td>
     /*由于rowspan设置了两行，所以此处的内容不需要*/
     <td>ddddd</td>
</tr>

嵌套表格

<tr>
   <td class="center">August 27th</td>
   <td class="center">98</td>
   <td>
       <table>
          <tr>
             <th>Tess</th>
             <td>5\/5</td>
          </tr>
          <tr>
             <th>Tony</th>
             <td>4\/5</td>
          </tr>
        </table>
    </td>
</tr>

HTML表单

<form>元素

使用<form>元素创建表单，几乎所有的块级元素都可以放在<form>元素里，还会告诉浏览器当你提交表单时要把表单数据发送到哪里，以及以什么方法发送数据

<form action=”http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">内容</form>
action属性包含Web服务器的URL，脚本所在的文件夹，将处理表单数据的服务器脚本的文件名，还可以使用“mailto”，是一种允许通过email传送表单数据的协议

<form method=”post” action="mailto:934933088@qq.com">
method属性确定表单数据如何发送到服务器，常用方法：POST

表单中的内容

<input>表单元素

文本输入

text<input>元素用于输入一行文本，它还可以有一些可选的属性，允许为这个控件设置最大字符个数和宽度

<input type="text" name="fullname">

<input>元素是一个void元素
可以使用maxlength属性限制最多输入字符数
可以使用placeholder属性在未输入表单中显示提醒内容
可以使用required布尔属性指定必须输入这个域

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

提交输入

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

<input type="submit">

可以为元素指定value属性，从而显示别的名字

单选钮输入

radio<input>元素会创建包含多个按钮的控件，但是一次只能选择其中一个按钮

<input type="radio" name="hotornot" value="hot">

对每个选项都创建一个radio，与一组给定选项关联的单选钮必须有相同的名字，但可以有不同的值
可以为元素加入一个布尔属性checked，浏览器显示时就会默认地选中这个元素

复选框输入

checkbox<input>元素会创建一个复选框控件，可以选中也可以不选，多个复选框可以放在一起，根据需要选择多个属性

<input type="checkbox" name="spice" value"="xxx">

相关的复选框共用同一个名字

数字输入

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

<input type="number" min="0" max="20">

使用min和max限制允许输入的数字

范围输入

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

<input type="range" min="0" max="20" step="5">

number和range都有一个可选的是step属性，可以用来指定值的间隔数

颜色输入

使用color<input>可以指定一个颜色，单击这个控件时，会弹出一个颜色选择器，允许你选择颜色

<input type="color">

日期输入

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

<input type="date">

隐藏输入

使用hidden<input>可以隐藏一个输入数据，用于后台传输发送数据

<input type="hidden">

email/tel/url输入

三者都是文本输入元素，在移动设备上会弹出一个定制键盘

<input type="email/tel/url">

<textarea> 表单元素

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

<textarea name="comments" rows="10" cols="48"></textarea>

<textarea>元素不是一个空元素，有开始和结束标志
使用name属性为元素指定唯一一个名字
rows属性告诉浏览器文本去高度为多少个字符，cols指明宽度多少个字符
开始和结束标志之间的所有文本会成为浏览器文本区控件中的初始文本

<select>和<option>表单元素

<select>元素会在Web页面中创建一个菜单控件，菜单提供了一种从一组选项中做出选择的方法，<option>元素表示各个菜单项

<select>元素和<option>元素结合使用可以创建一个菜单

可以为select元素增加一个布尔属性multiple，把单选菜单变成多选菜单

<select name="characters" (multiple)>
    <option value="aaaa">aaaa</option>
    <option value="bbbb">bbbb</option>
    <option value="cccc">cccc</option>
</select>

<form action="http://starbuzzcoffee.com/processorder.php" method="post">
     <p>
      Choose your beans:
      <select name="beans">
        <option value="House Blend">House Blend</option>
        <option value="Bolivia">Shade Grown Bolivia Supremo</option>
        <option value="Kenya">Kenya</option>
      </select>
     </p>
     <p>
        Type:<br>
          <input type="radio" name="beantype" value="Whole">Whole bean<br>
          <input type="radio" name="beantype" value="ground" checked>Gronud
     </p>
     <p>Number of bags:<input type="number" name="bags" min="1" max="10"></p>
     <p>Must arrive by date:<input type="date" name="date"></p>
     <p>
        Extra:<br>
        <input type="checkbox" name="extras[]" value="gifwrap">Gift wrap<br>
        <input type="checkbox" name="extras[]" value="catalog" checked>Include catalog with order
     </p>
     <p>
        Ship to:<br>
        Name:<input type="text" name="name" value=""><br>
        Address:<input type="text" name="address" value=""><br>
        City:<input type="text" name="city" value=""><br>
        State:<input type="text" name="state" value=""><br>
        Zip:<input type="text" name="zip" value=""><br>
        Phone:<input type="tel" name="phone" value=""><br>
     </p>
     <p>Cusstomer Comments:<br>
        <textarea name="comments"></textarea>
     </p>
     <p>
        <input type="submit" value="Order Now">
     </p>
</form>

浏览器发送数据的方法

GET和POST：两者都是将表单数据从浏览器发送到服务器，但采用了两种不同的方法，POST会打包表单变量，在后台把它发送到服务器；GET也会打包表单变量，但会把这些数据追加到URL最后，然后向服务器发送一个请求

如果使用GET，能够保存书签，使用POST不能保存书签

关于可访问性

用<label>为表单元素增加标签，而不是使用简单的文本，要使用<label>元素，首先为表元素增加一个id属性，然后增加<label>,设置其就“for”属性为相应的id

<input type="radio" name="hotornot" value="hot" id="hot">
<lable for="hot">hot</label>

其他元素

passwords

password<input>元素的工作与text<input>类似，但会对输入的文本加掩码

<input type="password" name="secret">

文件输入

向服务器脚本发送整个文件，使用这个元素必须使用POST方法

<input type="file" name="doc">