HTML基礎

1.頁面相關的信息

(1)頁面編碼

     <meta http-equiv=「content-type」 content="text/html;charset=utf-8"> 

     <meta charset="UTF-8"> 

(2)刷新和跳轉    

     <meta http-equiv="Refresh" Content="5; Url=http://www.baidu.com" /> 

(3)關鍵詞

     <meta name="keywords" content="星際2,專訪,F91," /> 

     <meta name="keywords" content="開發者,博客園,開發者,程序猿,程序媛,極客,編程,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社區" /> 

(4)描述     

<meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。" />

(5)IE瀏覽器兼容

      <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 

(6)網頁頭部信息(title)

    顯示在瀏覽器標籤欄的信息

(7)網頁頭部圖標

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

(8)引入css文件

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

(9)sytle

 

2.經常使用標籤

2.1標籤分爲塊級標籤和內聯標籤

2.2標籤p和br

    p表示段落,默認段落之間是有間隔的

    br表示換行

2.3標籤a

a.target屬性："_blank"表示在新的頁面打開
b.錨

<!--在原有窗口打開新網頁-->
<a href="http://www.baidu.com">百度</a>
    
<!--新開一個窗口打開新網頁-->
<a href="http://www.baidu.com" target="_blank">百度</a> 



<!--錨點-->
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>


<div id="1" style="height:900px;background-color:red">第一章內容</div>
<div id="2" style="height:900px;background-color:blue">第二章內容</div>
<div id="3" style="height:900px;background-color:fuchsia">第三章內容</div>

 

2.4標籤H

    H1~H6:字體從大到小

2.5div和span

    div:塊級標籤

    span:內聯標籤

2.6列表

    ol:有序列表

    ul:無須列表

    dl:組合

    

    <!--有序列表-->
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ol>

    <!--無序列表-->
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>


    <!--組合-->
    <dl>
        <dt>北京</dt>
        <dd>豐臺</dd>
        <dd>東城</dd>
        <dd>朝陽</dd>

        <dt>合肥</dt>
        <dd>廬陽</dd>
        <dd>蜀山</dd>
        <dd>瑤海</dd>
    </dl>

運行結果:

    

 

2.7標籤img

<!--圖片-->
    <img src="a.jpg" alt="測試" title="懸浮效果"/>
    
    <!--title  -鼠標放到圖片上,顯示的內容-->
    <!--alt  -圖片沒加載出來顯示的內容-->

 

2.8表格

 1 <!--表格邊框 boreder-->
 2     <table border="1px">
 3         <tr>
 4             <td>ip</td>
 5             <td>hostname</td>
 6             <td>port</td>
 7         </tr>
 8 
 9         <tr>
10             <td>192.168.1.11</td>
11             <td>c2.com</td> 
12             <td>80</td>
13         </tr>
14 
15         <tr>
16             <td>192.168.1.12</td>
17             <td>c3.com</td>
18             <td>80</td>
19         </tr>
20 
21         <tr>
22             <td>192.168.1.13</td>
23             <td>c4.com</td>
24             <td>80</td>
25         </tr>
26     </table>

表格

 1 <!--表多行合併-->
 2     <table border="1px">
 3         <tr>
 4             <td>ip</td>
 5             <td>hostname</td>
 6             <td>port</td>
 7         </tr>
 8 
 9         <tr>
10             <td>192.168.1.11</td>
11             <td rowspan="2">c2.com</td>      <!-- rowspan="2" 合併兩行-->
12             <td>80</td>
13         </tr>
14 
15         <tr>
16             <td>192.168.1.12</td>             <!-- 對應的行少一列-->
17             <td>80</td>
18         </tr>
19 
20         <tr>
21             <td>192.168.1.13</td>
22             <td>c4.com</td>
23             <td>80</td>
24         </tr>
25     </table>

表多行合併(rowspan)

 1 <!--表多列合併-->
 2     <table border="1px">
 3         <tr>
 4             <td>ip</td>
 5             <td>hostname</td>
 6             <td>port</td>
 7         </tr>
 8 
 9         <tr>
10             <td>192.168.1.11</td>
11             <td colspan="2">c2.com</td>      <!-- colspan="2" 合併兩列-->
12             
13         </tr>
14 
15         <tr>
16             <td>192.168.1.12</td> 
17             <td>c3.com</td>
18             <td>80</td>
19         </tr>
20 
21         <tr>
22             <td>192.168.1.13</td>
23             <td>c4.com</td>
24             <td>80</td>
25         </tr>
26     </table>

表多列合併(colspan)

2.9標籤label

    文本和框創建關係 

<label for="user">用戶名</label><input id="user" type="text"/>

2.10fieldset

<fieldset>
        <legend>登錄</legend>
        <p>注意事項</p>
</fieldset>

 

3.表單數據

 1     <!--標籤form action->提交地址,提交到指定URL method->指定提交方法:GET/POST-->
 2     <!--GET:數據放在請求頭,請求體爲空-->
 3     <!--POST:數據放在請求體-->
 4     <form action="http://127.0.0.1:8000/index/" method="GET">
 5         <div>
 6             <span>用戶名:</span>
 7             <input type="text" name="username"/>  <!--name指定傳送的鍵值-->
 8         </div>
 9 
10 
11         <div>
12             <span>密 碼:</span>
13             <input type="password" name="passwd"/>     <!--name指定傳送的鍵值-->
14         </div>
15 
16         <!--submit提交本身form標籤內的表單類的值-->
17         <input type="submit" value="Submit"/>
18     </form>

form表單

    <!--標籤form action->提交地址,提交到指定URL method->指定提交方法:GET/POST-->
    <!--GET:數據放在請求頭,請求體爲空-->
    <!--POST:數據放在請求體-->
    <form action="http://127.0.0.1:8000/index/" method="GET">
        <div>
            <span>用戶名:</span>
            <!--普通格式文本框-->
            <input id="c1" type="text" name="username" value="bigroot"/>  <!--name指定傳送的鍵值,value爲默認值-->
        </div>


        <div>
            <span>密 碼:</span>
            <!--密碼格式文本框-->
            <input type="password" name="passwd"/>     <!--name指定傳送的鍵值-->
        </div>

        <div>
        <span>郵 箱:</span>
        <!--郵箱格式文本框-->
        <input type="email" name="em"/>      <!--低版本瀏覽器沒有-->
        </div>

        <div>
        <!--單選框-->
        <!--單選框的name值相同時互斥,向後臺發送的事value的值-->
        <input type="radio" name="gender" value="1" checked="checked"/>男   <!--checked表示默認選項-->
        <input type="radio" name="gender" value="2" />女
        </div>

        <div>
            <!--複選框-->
            <input type="checkbox" name="fruit" value="11" />蘋果
            <input type="checkbox" name="fruit" value="12" />香蕉
            <input type="checkbox" name="fruit" value="13" />橘子
            <input type="checkbox" name="fruit" value="14" />桃子
        </div>

        <!--單選下拉列表-->
        <div>
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="hf">合肥</option>
            </select>
        </div>

        <!--多選選下拉列表-->
        <div>
            <select name="city2" multiple>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="hf">合肥</option>
            </select>
        </div>


           <!--submit提交form標籤內的表單類的值-->
        <input type="submit" value="Submit"/>
    </form>

表單類(input)

 1     <!--標籤form action->提交地址,提交到指定URL method->指定提交方法:GET/POST-->
 2     <!--GET:數據放在請求頭,請求體爲空-->
 3     <!--POST:數據放在請求體-->
 4     <form action="http://127.0.0.1:8000/index/" method="GET" >
 5         <div>
 6             <span>用戶名:</span>
 7             <!--普通格式文本框-->
 8             <input id="c1" type="text" name="username" value="bigroot"/>  <!--name指定傳送的鍵值,value爲默認值-->
 9         </div>
10 
11 
12         <div>
13             <span>密 碼:</span>
14             <!--密碼格式文本框-->
15             <input type="password" name="passwd"/>     <!--name指定傳送的鍵值-->
16         </div>
17 
18         <div>
19         <span>郵 箱:</span>
20         <!--郵箱格式文本框-->
21         <input type="email" name="em"/>      <!--低版本瀏覽器沒有-->
22         </div>
23 
24         <div>
25         <!--單選框-->
26         <!--單選框的name值相同時互斥,向後臺發送的事value的值-->
27         <input type="radio" name="gender" value="1" checked="checked"/>男   <!--checked表示默認選項-->
28         <input type="radio" name="gender" value="2" />女
29         </div>
30 
31         <div>
32             <!--複選框-->
33             <input type="checkbox" name="fruit" value="11" checked="checked" />蘋果   <!--checked表示默認選項-->
34             <input type="checkbox" name="fruit" value="12" checked="checked" />香蕉
35             <input type="checkbox" name="fruit" value="13" />橘子
36             <input type="checkbox" name="fruit" value="14" />桃子
37         </div>
38 
39         <!--單選下拉列表-->
40         <div>
41             <select name="city">
42                 <option value="bj">北京</option>
43                 <option value="sh">上海</option>
44                 <option value="hf" selected="selected">合肥</option>    <!--selected表示默認選項-->
45             </select>
46         </div>
47 
48         <!--多選選下拉列表-->
49         <div>
50             <select name="city2" multiple>
51                 <option value="bj" selected="selected">北京</option>    <!--selected表示默認選項-->
52                 <option value="sh" selected="selected">上海</option>
53                 <option value="hf">合肥</option>
54             </select>
55         </div>
56 
57         <div>
58             <!--文本框默認值-->
59             <span>地 址:</span>
60             <input type="text" name="test" placeholder="請輸入內容">
61         </div>
62 
63         <div>
64             <div>留言板</div>
65             <textarea name="memo">默認值</textarea>    <!--默認值在標籤中間-->
66         </div>
67 
68         <div>
69             <input type="file" name="file"/>   <!--要上傳文件還要在form標籤中添加enctype="multipart/form-data"屬性-->
70         </div>
71 
72         <!--submit提交form標籤內的表單類的值-->
73         <input type="submit" value="Submit"/>
74 
75         <input type="button" value="提交頁面"/>      <!--默認沒有功能-->
76 
77         <input type="reset" value="Reset">         <!--重置-->
78     </form>

表單類

 

4.CSS(層疊樣式表)

4.1選擇器類型

4.1.1直接選擇器

 1     <style>
 2         /*標籤選擇器*/
 3         p{
 4             color:red;
 5         }
 6 
 7         /*id選擇器*/
 8         #d1{
 9             color:sandybrown;
10         }
11 
12         /*類選擇器*/
13         .c1{
14             color:darkviolet;
15         }
16 
17         /*屬性選擇器*/
18         [n='1']{
19             color:blue;
20         }
21         
22         input[type="text"]{
23             color:rebeccapurple;
24         }
25     </style>

直接選擇器

 1 <style>
 2         /*標籤選擇器*/
 3         p{
 4             color:red;
 5         }
 6 
 7         /*id選擇器*/
 8         #d1{
 9             color:sandybrown;
10         }
11 
12         /*類選擇器*/
13         .c1{
14             color:darkviolet;
15         }
16 
17         /*屬性選擇器*/
18         [n='1']{
19             color:blue;
20         }
21         
22         input[type="text"]{
23             color:rebeccapurple;
24         }
25          
26         /*組合*/
27         .c1,c2{
28             color: green;
29          }
30 
31 
32 </style>
33 
34 
35 直接選擇器

直接選擇器

 

 

優先級:
    1.id選擇器 > 屬性選擇器 > 類選擇器 > 標籤選擇器
    2.相同的選擇器:就近原則(誰在下面誰優先)
    3.手動指定!important,優先級最高

 

4.1.2間接選擇器

 1 - 間接：
 2 # 層級選擇器
 3 
 4 div p{
 5       color: green;
 6 }
 7                 
 8                 
 9 div>p{
10       color: green;
11 }
12             
13 - 僞類
14 hover 當鼠標放在上部時，css生效
15 c10:hover{
16            color: green;
17 }
18                 
19 <a class="c10">菜單一</a>

間接選擇器

 後代選擇器：

 div p  ---> div標籤下的<p>標籤無論嵌套多少層都受影響，如<a><p></p></a>

子選擇器：

 div>p  ---> 與div標籤相鄰的<p>標籤才受影響，如<div><p></p></div>

 

4.2CSS存在形式

- 標籤
- 當前頁面 <style></style>
- 文件 <link rel='stylesheet' href='' /> *

 

4.3CSS屬性

 1 /*字體顏色*/
 2 color: white;
 3 
 4 /*背景顏色*/
 5 background-color: red;
 6 
 7 /*字體大小*/
 8 font-size: 16px;
 9 
10 /*加粗*/
11 /*font-weight: bold;*/
12 
13 /*高度*/
14 /*height: 200px;*/
15 /*height: 10%;  --父標籤有指定寬度*/
16 
17 /*寬度*/
18 /*width: 400px;*/
19 /*width: 40%;   --父標籤的40%*/ 
20 
21 /* 背景圖片 */
22 background-image: url(5.png);
23 background-repeat: no-repeat;    /* 圖片重複方式repeat-y repeat-x no-repeat */
24 
25 
26 /* 圖片:摳圖的效果,經過定位看圖片的某個部分 */
27 .c2{
28   background-image: url(a.jpg);
29   background-repeat: no-repeat;
30   width:30px;
31   height:30px;
32   
33   /*經過background-position調整圖片展現的位置*/
34   background-position-x: 10px;  
35   background-position-y:10px;
36 
37   /*background:url(a.jpg) no-repeat 10px 10px;能夠替代上面四個background-*/
38 
39 }

基本css屬性

 

4.4display

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             color:red;
 9             font-size: 30px;
10         }
11         .hide{
12             display:none;
13         }
14 
15     </style>
16 </head>
17 <body>
18 
19     <input type="button" value="出現" onclick="showDiv();" />
20     <input type="button" value="消失" onclick="hideDiv();" />
21      <div id ="i1" class="c1 hide">測試文本</div>
22 
23     <script>
24         function showDiv(){
25             document.getElementById("i1").classList.remove("hide");
26         }
27         function hideDiv(){
28             document.getElementById("i1").classList.add("hide");
29         }
30     </script>
31 </body>
32 </html>

頁面隱藏與展示

 

 1 <!--隱藏標籤-->
 2 <!--display: none;-->
 3 <!--隱藏設置內聯&塊級-->
 4 <!--display: block;-->
 5 <!--display: inline;-->
 6 <!--display: inline-block;-->
 7 
 8 <div style="display:inline">1</div>         <!--display:inline塊級標籤改爲了內聯標籤-->
 9 <div style="display:inline">2</div>
10 <a style="display:block">3</a>               <!--display:block內聯標籤改爲了塊級標籤-->
11 <a style="display:block">4</a>
12 
13 <a style="background-color: rebeccapurple;height: 200px;width: 400px;">這是測試文本</a>   <!--內聯標籤寬度、高度不生效-->
14 <a style="background-color: red;height: 200px;width: 400px;display:inline-block">這是測試文本</a>    <!--display:inline-block不會佔用一整行,右邊空白處能夠添加其餘內容-->
15 <a style="background-color: chartreuse;height: 200px;width: 400px;display:inline-block">這是測試文本</a>

display屬性

 

4.5邊框

    <div style="height:200px;border: 1px solid red; "></div>         <!--四面都有邊框-->

    <div style="background-color: #dddddd;border-left: 1px solid rebeccapurple;padding: 10px;">  <!--左邊框-->
        搜索數據
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #dddddd;
            border-left: 1px solid transparent;
            padding: 10px;
        }
        .c1:hover{
            border-left: 1px solid rebeccapurple;
        }
    </style>
</head>

<body>
    <div class="c1">  <!--鼠標放上去顯示左邊框-->
        搜索數據
    </div>

</body>
</html>

 

4.6邊距

    內邊距:padding

    內邊距:margin

1 <div style="margin-left: 50px;background-color:deepskyblue">  <!--外邊距,左邊空表部分不屬於div-->
2     搜索數據
3 </div>
4 
5 <div style="padding-left: 50px;background-color: aqua">   <!--內邊距,左邊空表部分屬於div-->
6     搜索數據
7 </div>

 

4.7鼠標移動上方時，顯示的圖標

    cursor: wait;

 

4.8position

position: relative;
position: absolute;
position: fixed;

 

4.8.1 場景一：
    position: fixed; 某個標籤永遠固定在瀏覽器窗口的某個位置
4.8.2 場景二：
    position: absolute; 第一固定後,之後滾動永遠在這個位置,至關於釘住了
4.8.3 場景三：
    position: relative; 相對父級標籤所在的位置
    position: absolute;

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .tip{
 8             position: fixed;
 9             top: 10px;
10             left: 10px;;
11         }
12 
13         .ab{
14             position: absolute;
15             top: 20px;
16             left: 20px;;
17         }
18     </style>
19 </head>
20 <body>
21     <div style="background-color: #dddddd;height: 2000px;"></div>
22     <div class="tip">返回頂部</div>
23 
24     <div class="ab">返回頂部</div>
25 </body>
26 </html>

fix和absolute

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .rel{
            position: relative;
            height: 300px;
            width: 300px;
            background-color: rebeccapurple;
        }
        .abs{
            position: absolute;
            top:0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="rel">
        <div>
            <div class="abs">sdfsdfsa</div>   <!--一直往上找,直到找到relative,根據relative定位-->
        </div>
    </div>
</body>
</html>

relative和absolute合用

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .moda1{
 9             height: 600px;
10             width: 800px;
11             background-color: white;
12             position: fixed;
13             top: 50%;
14             left: 50%;
15             margin-left: -400px;
16             margin-top: -300px;
17             z-index: 99;
18         }
19         .hide{
20             display: none;
21         }
22         .zz{
23             position: fixed;
24             background-color: black;
25             top:0;
26             left:0;
27             right:0;
28             bottom: 0;
29             z-index: 98;
30             opacity: 0.5;
31         }
32     </style>
33 
34 </head>
35 <body>
36 
37 
38 
39     <div style="height: 3000px;background-color: #dddddd;">
40         <input type="button" value="出現" onclick="showDiv();" />
41 
42         <p>測試文字</p>
43     </div>
44 
45     <div id="i2" class="zz"></div>
46     <div id="i1" class="moda1">
47         <input type="button" value="消失" onclick="hideDiv();" />
48     </div>
49 
50     <script>
51         function showDiv(){
52             document.getElementById("i1").classList.remove("hide");
53             document.getElementById("i2").classList.remove("hide");
54         }
55         function hideDiv(){
56             document.getElementById("i1").classList.add("hide");
57             document.getElementById("i2").classList.add("hide");
58         }
59     </script>
60 </body>
61 </html>

模擬登錄彈窗

 

4.9float

1     <div style="background-color: rebeccapurple;">      <!--標籤float,沒有設置高度,標籤沒有撐起來，高度爲0,能夠 height:100px-->
2         <div style="float:left;background-color: green;">內容一</div>
3         <div style="float:left;background-color: green;">內容一</div>
4         <div style="float:right;background-color: green;">內容二</div>
5         <div style="clear: both"></div>             <!--標籤float,沒有設置高度,標籤沒有撐起來，高度爲0,也能夠這樣-->
6     </div>

 

文字上下、左右居中

 1     <!--line-height:上下居中,必須有高度屬性-->
 2     <div style="height: 48px;background-color: aqua;line-height: 48px;">
 3         測試文字一
 4     </div>
 5 
 6     <br/>
 7     
 8     <!--text-align:左右居中-->
 9     <div style="height: 48px;background-color: aqua;text-align: center">
10         測試文字一
11     </div>

 

去除body邊框

<style>
   body{
        margin: 0;
   }
</style>

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin:0;
 9         }
10 
11         .w{
12             height:48px;width:980px;
13             background-color: green;
14             /*一個:上下左右;兩個:上下、左右;四個:上、右、下、左 順時針*/
15             margin: 0 auto;
16         }
17         .pg-header{
18             height:48px;
19             background-color: brown;
20             color: white;
21             line-height: 48px;
22         }
23     </style>
24 
25 </head>
26 <body>
27     <div class="pg-header">
28         <div class="w">
29             <div style="float:left;">LOGO</div>
30         </div>
31     </div>
32     <div class="pg-body">
33         <div class="w">fdsfsdfjdskjfisjafdsafjl</div>
34     </div>
35 
36 </body>
37 </html>

模擬首頁

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin:0;
 9         }
10 
11         .w{
12             height:48px;width:980px;
13             /*background-color: green;*/
14             /*一個:上下左右;兩個:上下、左右;四個:上、右、下、左 順時針*/
15             margin: 0 auto;
16         }
17         .pg-header{
18             height:48px;
19             background-color: brown;
20             color: white;
21             line-height: 48px;
22         }
23         .left{
24             float:left;
25         }
26         .right{
27             float:right;
28         }
29 
30         .pg-header .menus a{
31             padding: 0 10px;
32             display: inline-block;
33         }
34         .pg-header .menus a:hover{
35             background-color: bisque;
36         }
37     </style>
38 
39 </head>
40 <body>
41     <div class="pg-header">
42         <div class="w">
43             <div class="menus left">
44                 <a>菜單一</a>
45                 <a>菜單一</a>
46                 <a>菜單一</a>
47                 <a>菜單一</a>
48                 <a>菜單一</a>
49             </div>
50             <div class="menus right">
51                  <a>菜單一</a>
52                  <a>菜單一</a>
53                  <a>菜單一</a>
54             </div>
55         </div>
56     </div>
57     <div class="pg-body">
58         <div class="w">fdsfsdfjdskjfisjafdsafjl</div>
59     </div>
60 
61 </body>
62 </html>

首頁菜單欄