HTML，CSS

HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！

HTML文档

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

网页的具体内容

 1 <!DOCTYPE html><!--这里定义标准-->
 2 <html lang="en"><!--网页详细从这里开始-->
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>
11 #大体上除了告诉浏览器用什么样的标准打开，还得head（头）、body（身体）。
12 #头里面主要存放例如用什么编码，网页的title（title里面例如有图片文字之类的），页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词都是放到head里面的。
13 body里面是网页上的主要的显示给用户的东西，例如文字，样式、图片都放在这里
14 注意：
15 　　书写规范,例如：<head>表示开始</head>表示结束

标签：

　　什么是标签呢，例如<head> 张三</head>，这种出现在html文件中以<括号开始并以>结束的都叫标签，例如上面写的，head标签，body标签，html标签。

　　分类：

　　　　自闭合标签：

　　　　例如meta和link标签

　　　　<meta charset="UTF-8">这种后面没有/的就是自闭合标签，补全也没有斜杠的标签，标签中是自闭合标签的不多。

　　　　主动闭合标签：

　　　　例如a标签：

　　　　<a> </a>#有斜杠的这种称作主动闭合标签，换句话说，你写一个标签从左往右依次写，它能主动给你不全并加上/的是主动闭合标签，否则就是自闭合标签。

注释：

python中我们用#注释一行用用三个单引号或者3个双引号表示注释多行，在html文件中这种才是注释方式，多行的也是这种方式。

head标签：

head标签中除了title其它的都不在网页上显示（title是打开一个网页表头的文字）。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 </body>
10 </html>

Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1.页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

2.刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

3.关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

4.描述

例如：cnblogs

5.X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Title

网页头部信息

Link

1.css

< link rel="stylesheet" type="text/css" href="css/common.css" >

2.icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

1.引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

2.写js代码

< script type="text/javascript" > ... </script >

常用标签

标签一般分为两种：块级标签和行内标签

a、span、select 等
div、h1、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p和br

p表示段落，默认段落之间是有间隔的！

br 是换行

1  <p>哈哈哈哈<br/>&nbsp;&nbsp;&nbsp;&nbsp;哈哈哈哈哈</p>
2     <p>哈哈哈哈哈哈哈哈哈</p>
3     <p>哈哈哈哈哈哈哈哈哈</p>

View Code

a标签

< a href="http://www.autohome.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <a href="http://www.baidu.com" target="_blank">百度</a>
 9     <a href="#i1">第一章</a>
10     <a href="#i2">第二章</a>
11     <a href="#i3">第三章</a>
12     <a href="#i4">第四章</a>
13     <div id="i1" style="height: 600px;">第一章内容</div>
14     <div id="i2" style="height: 600px;">第二章内容</div>
15     <div id="i3" style="height: 600px;">第三章内容</div>
16     <div id="i4" style="height: 600px;">第四章内容</div>
17 
18 </body>
19 </html>

View Code

H 标签

标题（自动加大加粗），分为1~6等级，h1最大，h6最小。书写：<h1>标题</h>

1     <h1>hhhhhhhhhhhhhhhh</h1>
2     <h2>hhhhhhhhhhhhhhhh</h2>
3     <h3>hhhhhhhhhhhhhhhh</h3>

View Code

select 标签,input系列(Checkbox,redio,password,button,file,textarea),form表单

input系列 + form标签
            input type='text'     - name属性，value="赵凡"
            input type='password' - name属性，value="赵凡"
            input type='submit'   - value='提交' 提交按钮，表单
            input type='button'   - value='登录' 按钮

            input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
            input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
            input type='rest'     - 重置

            <textarea >默认值</textarea> - name属性
            select标签            选择框。如果属性设置multiple="multiple" size="3"，表示选择框只能同时显示三项。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form enctype="multipart/form-data">
 9         <!--multipart/form-data用于传输文件-->
10         <select name="city">
11             <option value="1" selected="selected">北京</option>
12             <option>上海</option>
13             <option>广州</option>
14             <option>深圳</option>
15         </select>
16         <select name="city" size="5" multiple="multiple">
17             <option value="1" selected="selected">北京</option>
18             <option>上海</option>
19             <option>广州</option>
20             <option>深圳</option>
21         </select>
22         <select name="city" size="5" multiple="multiple">
23             <optgroup label="中国">
24                 <option value="1" selected="selected">北京</option>
25                 <option>上海</option>
26                 <option>广州</option>
27                 <option>深圳</option>
28             </optgroup>
29         </select>
30         <input type="text" name="user"/>
31         <div>
32             <p>请选择性别：</p>
33                 男：<input type="radio" name="sex" value="1" checked="checked"/>
34                 <!--checked默认选择-->
35                 女：<input type="radio" name="sex" value="2"/>
36             <p>爱好：</p>
37             篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
38             足球：<input type="checkbox" name="favor" value="2" />
39             排球：<input type="checkbox" name="favor" value="3" />
40             网球：<input type="checkbox" name="favor" value="4" />
41             <p>技能：</p>
42             撩妹：<input type="checkbox" name="skill" value="1"/>
43             写代码：<input type="checkbox" name="skill" value="2"/>
44             <p>上传文件</p>
45             <input type="file" name="filename"/>
46         </div>
47         <textarea name="meno">adasdaf</textarea>
48         <input type="submit" value="提交"/>
49         <input type="reset" value="重置"/>
50     </form>
51 </body>
52 </html>

View Code

ul ol dl

列表，ul中没有编号，ol有编号，dl中<dt>可以作为大标号，<dd>作为小标号

 1   <ul>
 2         <li>12313</li>
 3         <li>12313</li>
 4         <li>12313</li>
 5         <li>12313</li>
 6     </ul>
 7     <ol>
 8         <li>12313</li>
 9         <li>12313</li>
10         <li>12313</li>
11         <li>12313</li>
12     </ol>
13     <dl>
14         <dt>12313</dt>
15         <dd>12313</dd>
16         <dd>12313</dd>
17         <dd>12313</dd>
18         <dt>12313</dt>
19         <dd>12313</dd>
20         <dd>12313</dd>
21         <dd>12313</dd>
22     </dl>

View Code

table

制作表格，<table>标签内可以分成两部分，<thead>表头和<tbody>表格内容区。表头会自动加粗居中，在表格内容区，<tr>表示行，<td>表示列。

　　合并单元格：

　　　　colspan横向合并，要注意去除多余的列

　　　　rowspan纵向合并，要注意去除多余的行

 1 <table border="1">
 2                 <thead>
 3                     <tr>
 4                         <th>主机名</th>
 5                         <th>端口</th>
 6                         <th>操作</th>
 7                     </tr>
 8                 </thead>
 9                 <tbody>
10                     <tr>
11                         <td >1.2.3.4</td>
12                         <td>22</td>
13                         <td>
14                             <a href="test1(p%20h%20span).html">详情</a>
15                         </td>
16                     </tr>
17                     <tr>
18                          <td >1.2.3.4</td>
19                         <td>22</td>
20                         <td>
21                             <a href="test1(p%20h%20span).html">详情</a>
22                         </td>
23                     </tr>
24                     <tr>
25                         <td >1.2.3.4</td>
26                         <td>22</td>
27                         <td>
28                             <a href="test1(p%20h%20span).html">详情</a>
29                         </td>
30                     </tr>
31                 </tbody>
32             </table>
33         <table border="1">
34             <thead>
35                 <tr>
36                     <th>主机名</th>
37                     <th>端口</th>
38                     <th>操作</th>
39                 </tr>
40             </thead>
41             <tbody>
42                 <tr>
43                     <td rowspan="2">1.2.3.4</td>
44                     <!--占两行-->
45                     <td>22</td>
46                     <td>
47                         <a href="test1(p%20h%20span).html">详情</a>
48                     </td>
49                 </tr>
50                 <tr>
51 
52                     <td>22</td>
53                     <td>
54                         <a href="test1(p%20h%20span).html">详情</a>
55                     </td>
56                 </tr>
57                 <tr>
58                     <td colspan="2">1.2.3.4</td>
59                      <!--占两列-->
60                     <td>
61                         <a href="test1(p%20h%20span).html">详情</a>
62                     </td>
63                 </tr>
64             </tbody>
65         </table>

View Code

fieldset，label

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <fieldset>
 9         <legend>登陆</legend>
10         <label for="username">用户名：</label>
11         <input id="username" type="text" name="user">
12     </fieldset>
13 </body>
14 </html>

View Code

css

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。

标签选择器

div{ background-color:red; }
<div > </div>

class选择器

.bd{ background-color:red; }
<div class='bd'> </div>

id选择器

#idselect{ background-color:red; }
<div id='idselect' > </div>

关联选择器

#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>

组合选择器

input,div,p{ background-color:red; }

属性选择器

input[type='text']{ 100px; height:200px; }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             background-color: black;
 9         }
10         #i1 {
11             background-color: aliceblue;
12             height: 40px;
13         }
14         .c1{
15             background-color: aqua;
16             height: 40px;
17         }
18         div span{
19             background-color: black;
20             height: 40px;
21         }
22         .c1 span{
23             background-color: brown;
24             height: 50px;
25         }
26         .c1,.c2{
27             background-color: blueviolet;
28             height: 50px;
29         }
30         #i1,#i2{
31             background-color: chartreuse;
32             height: 60px;
33         }
34         input[n="alex"]{
35             height: 20px;
36             width: 30px;
37         }
38         .c1[type="password"]{
39             height: 40px;
40             width: 80px;
41         }
42     </style>
43 </head>
44 <body>
45     <div id="i1">1111</div>
46     <div class="c1">222</div>
47     <div class="c1">
48         33333
49         <span>
50             44444
51         </span>
52         55555
53     </div>
54     <div id="i2">6666</div>
55     <div class="c2">77777</div>
56     <input n="alex" type="text"/>
57     <input class="c1" type="password">
58 </body>
59 </html>

View Code

边框

写法：

　　如下，div标签中有一个border就是边框是1像素，然后solid是红色的（就是这个边框的颜色），注意注意注意写法。

　　边框线一个是实线solid一个是dotted虚线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border:1px solid red;">测试</div>
    <br/>
    <div style="border:1px dotted red;">测试</div>
</body>
</html>

View Code

常用样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border:1px solid red;
    height: 48px;#高度，一般不给百分比
     auto;宽度，auto就是自动适应网页的大小
    line-height: 48px;这个是上下居中，跟height高度一样的时候保持在最中间
    text-align: center;自适应左右居中
    font-size: smaller;字体的大小样式
    font-weight: 800;字体加粗
    color: #999999">测试</div>字体颜色
</body>
</html>

View Code

float（飘）

　　float就是飘起来，如下原本是两个不同的div应该是两行，但是我让它们都往左飘，这样的话就成了一行（如果div宽度超过百分之百就会另起一行）。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="background-color: #999999;height: 80px; 20%;float: left">123</div>
 9     <div style="background-color: #3465a4;height: 80px; 80%;float: left">456</div>
10 </body>
11 </html>

View Code

display　

我们知道标签可分为行内标签和块级标签。display就是帮我们互相转换的。如下：

　　display: inline（让这个标签变成行内标签）

　　display: none（让这个标签消失）

　　display:inline-bock(让这个标签既有行内标签的特性也有块级标签的特性)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="background-color: #00A000;display: inline">123</div>
 9     <span style="background-color: #3465a4;display: block">456</span>
10 </body>
11 </html>

View Code

注意：

　　行内标签不支持高度、宽度、padding、margin

　　块级标签支持设置高度、宽度等样式。

　　如何才能让行内标签页设置高度、宽度呢？

　　通过设置这个标签的属性，display:inline-bock(让这个标签既有行内标签的特性也有块级标签的特性)

padding：

　边距：

　　　　内边距 padding：　　　

　　　　外边距 margin

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="background-color: black;height: 100px;">
 9         <div style="height: 40px;50px;margin-left:50px;background-color: lightgray ">asdasd</div>
10         <div style="height: 40px;padding-left:100px;background-color: lightgray ">asdasd</div>
11     </div>
12 </body>
13 </html>

View Code

position：

a. fiexd => 固定在屏幕的某个位置
b. relative + absolute =>固定在页面的某个位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="background-color: black;height: 50px;position: fixed;top: 0;right: 0;left: 0"></div>
 9     <div onclick="GoTop();" style="background-color: black;height: 50px; 50px; position: fixed;bottom: 20px;right: 20px;color: lightgray">返回顶部</div>
10     <div style="background-color: #dddddd;height: 1000px; 100%;margin-top: 50px">
11         asdada
12         <div style=" 500px;height: 200px; border: red solid 1px;position: relative">
13             <div style="background-color: black;height: 50px; 50px; position:absolute;top: 0;right: 0"></div>
14         </div>
15     </div>
16 
17     <script>
18         function GoTop() {
19             document.body.scrollTop=0;
20         }
21     </script>
22 </body>
23 </html>

View Code

overflow 限制图片显示区域:

当父标签内的<img>图片大于父标签，若想将其限制，不能超过父标签的范围。有两种解决思路：

　　① 直接给图片设置大小，小于或等于父标签。

　　② 设置overflow：hidden。表示超过父标签的部分隐藏，这时显示出来的是原图的右上角部分。

　　　　也可以 overflow: auto 。显示效果在hidden的基础上可以滚动图片。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 200px;300px;overflow: auto">
 9         <img src="timg.jpg">
10     </div>
11     <div style="height: 200px;300px;overflow: hidden">
12         <img src="timg.jpg">
13     </div>
14 </body>
15 </html>

View Code

hover：

能够实现：将鼠标移动到标签上，显示出另外一种样式。

　　比如菜单栏，原本全部都是蓝色背景，如果鼠标移动到某个标签上，则显示深蓝色背景。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             position: fixed;
 9             right: 0;
10             left: 0;
11             top: 0;
12             height: 48px;
13             background-color: #2459a2;
14             line-height: 48px;
15         }
16         .pg-body{
17             margin-top: 50px;
18         }
19         .w{
20             width: 980px;
21             margin: 0 auto;
22         }
23         .pg-header .menu{
24             display: inline-block;
25             padding: 0 10px 0 10px;
26             color: white;
27         }
28         /*当鼠标移动到当前标签上时，以下css属性才生效*/
29         .pg-header .menu:hover{
30             background-color: blue;
31         }
32     </style>
33 </head>
34 <body>
35     <div class="pg-header">
36         <div class="w">
37             <a class="logo">LOGO</a>
38             <a class="menu">全部</a>
39             <a class="menu">42区</a>
40             <a class="menu">段子</a>
41             <a class="menu">1024</a>
42         </div>
43     </div>
44     <div class="pg-body">
45         <div class="w">a</div>
46     </div>
47 </body>
48 </html>

View Code