【day13】HTML基礎知識：head,body,CSS選擇器，CSS樣式，dom

時間 2019-12-20

標籤 day13 html 基礎知識 head body css 選擇器樣式 dom 欄目 HTML 简体版

原文原文鏈接

HTML基礎知識

1.HTML基礎知識：head

以下全部操做都是基於這個文檔http://ui.imdsx.cn/menu/ php

參考文檔以下：http://www.imdsx.cn/index.php/2017/07/27/html0/css

須要在pycharm中新建一上html Filehtml

 1 <!DOCTYPE html> <!--指定標準的html代碼 格式-->
 2 <!--一個標籤 經過<> 來定義-->
 3 <html lang="en">
 4 <head>
 5     <!--head標籤中大部分的標籤都是不可見 前端頁面不可見-->
 6     <!--配置html字符集-->
 7     <!--寫在標籤中的charset="UTF-8" 叫作屬性 -->
 8     <meta charset="UTF-8">
 9     <!--每隔一秒鐘 刷新一次-->
10     <meta http-equiv="refresh" content="1;http://www.baidu.com">  頁面展現一秒鐘，而後跳轉到百度
11     <!--關鍵字檢索：表示百度要檢索的關鍵字，輸入以下content裏面的內容，就能找到-->
12     <meta name="keywords" content="xxxx">
13     <!--描述-->
14     <meta name="description" content="xxxx">
15 
16     <!--修改瀏覽器tab頁的名字的-->
17     <title>水瓶座</title>
18     <!--連接標籤  rel指定 要展現要連接的功能 href 路徑-->
19     <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
20     <!--連接樣式表 rel指定 要展現要連接的功能 href 路徑 -->
21     <link rel="stylesheet" href="">
22 
23     <!--自閉合標籤-->
24         <!--它沒有另外一對，本身就是一個總體-->
25     <!--主動閉合標籤-->
26         <!--成對出現-->
27 </head>
28 <body>
29 <a>水瓶座</a>
30 </body>
31 </html>

運行結果以下：（須要在代碼中，晃動一下鼠標，右側出一各類瀏覽器，打開瀏覽器，就能看到以下結果）前端

展現1秒後，又跳轉到百度界面web

2.HTML基礎知識：body

s1.htmlajax

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8 
  9 <span>span標籤是html中的 白版標籤（沒有任何css的樣式）,行內標籤（內聯標籤）,本身有多大 就佔多大</span>
 10 
 11 <div>它是html中出場率最高的標籤,僞白版標籤,塊級標籤,不管本身有多大 都佔一整行</div>
 12 
 13 <p>上下換行 段落標籤</p>
 14 
 15 標題標籤 一共有6個
 16 <h1>我是標題標籤h1</h1>
 17 <h2>我是標題標籤h2</h2>
 18 <h3>我是標題標籤h3</h3>
 19 <h4>我是標題標籤h4</h4>
 20 <h5>我是標題標籤h5</h5>
 21 <h6>我是標題標籤h6</h6>
 22 
 23 <!--多行文本-->
 24 <textarea>行內標籤（內聯標籤）塊級標籤(文本框能夠隨意拖動它的大小)</textarea>
 25 
 26 <div>
 27     <!--特殊符號-->
 28     &ltp&gt
 29     <span>瀏覽器只識別一個空格:百&nbsp&nbsp&nbsp&nbsp測</span>
 30 </div>
 31 
 32 <!--單行文本框 也叫 input框-->
 33 <!--name表明傳遞給後端JSON的key 輸入的字符串就是傳遞給後端的value-->
 34 <!--placeholder 提示文案   type表明當前input的類型 默認是text-->
 35 <input name="user" value="123456" placeholder="請輸入用戶名" type="text">
 36 <input name="password" placeholder="請輸入密碼" type="password">
 37 
 38 <!--{"user":"abdce","password":"123456"}-->
 39 <!--是思考下 前端和後端如何交互？-->
 40 
 41 <!--checkbox 多選框 checked表明默認勾選-->
 42 <input type="checkbox" name="sex" value="1" checked="checked">
 43 <input type="checkbox" name="sex" value="2">
 44 <input type="checkbox" name="sex" value="3">
 45 <!--radio 單選 name相同則互斥-->
 46 <input type="radio" name="sex" value="1">
 47 <input type="radio" name="sex" value="2">
 48 
 49 <!--上傳文件-->
 50 <!-- *****對於ui自動化來講 若是你須要上傳文件的操做時，若是是input的方式實現的文件上傳則能夠經過sendkey直接搞-->
 51 <input type="file" name="file">
 52 <!--button只是一個單純的按鈕 須要和js聯動綁定事件來才能夠進行動做操做-->
 53 <input type="button" value="登陸1">
 54 <input type="submit" value="登陸2">
 55 
 56 <p>=======================================【表單標籤】=======================================================</p>
 57 <!--【表單標籤】 理解爲一張白紙 他是一個載體 承載的數據-->
 58 <form action="http://www.baidu.com" method="get">
 59     <div>
 60         <!--label擴展input可點擊的範圍,，點擊用戶名文本也能夠定位到輸入框-->
 61         <label for="i1">用戶名：</label>
 62         <input id="i1" type="text" name="username" placeholder="請輸入用戶名">
 63     </div>
 64 
 65     <div>
 66         <label for="i2">密碼：</label>
 67         <input id="i2" type="password" placeholder="請輸入密碼" name="passwd">
 68     </div>
 69     <!--若是submit和form連用，則點擊時自動觸發action請求-->
 70     <div>
 71         <input type="submit" value="登陸Submit">  <!--form和submit一塊兒用。點擊submit時，會跳轉到百度-->
 72     </div>
 73 
 74     <!--button必須和js連用-->
 75     <div>
 76         <input type="button" value="登陸button"></div>  <!--form和button一塊兒用。點擊button時，界面沒有反映-->
 77     <!--若是reset不和form表單連用 那將毫無做用 重置form中全部input變爲默認模式-->
 78     <input type="reset">
 79 </form>
 80 
 81 <!--像後端發送請求的方式-->
 82 <!--一、經過ajax進行異步請求-->
 83 <!--每次提交不會刷新頁面 若是驗證經過纔會跳轉-->
 84 <!--二、經過form表單進行請求-->
 85 <!--提交時整個頁面進行刷新提交-->
 86 <!--會致使用戶填寫的數據被清空-->
 87 
 88 <p>=======================================下拉框=======================================================</p>
 89 <!--select先寫框 在寫value 具備層級關係 selected默認選擇那一項-->
 90 <select name="area">
 91 <option value="1">北京</option>
 92 <option value="2">上海</option>
 93 <option value="3" selected="selected">深圳</option>
 94 </select>
 95 <!--{「area」：「3」}-->
 96 
 97 <select>
 98 <!--label分組名-->
 99 <optgroup label="黑龍江">
100 <option value="1">牡丹江</option>
101 <option value="2">哈爾濱</option>
102 </optgroup>
103 <optgroup label="河北">
104 <option value="3">秦皇島</option>
105 <option value="4">石家莊</option>
106 </optgroup>
107 </select>
108 
109 <p>=======================================超連接=======================================================</p>
110 <!--超連接標籤 href 鏈接地址 target新建 一個tab再打開 -->
111 <a href="http://www.besttest.cn" target="_blank">跳轉besttest官網</a>
112 <!--圖片標籤 alt 當圖片加載失敗後顯示的文字 title 鼠標懸浮到圖片時顯示的文字 -->
113 <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg1" alt="這是加載失敗的文案" title="這是鼠標炫懸浮式顯示文字">
114 
115 <p>=======================================表格=======================================================</p>
116 <table border="1">
117     <thead>  <!--表格橫向字段-->
118     <tr> <!--行-->
119         <th>id</th>   <!---列--->
120         <th>name</th>
121         <th>method</th>
122         <th colspan="2">操做</th> <!--表格字段：2個合併成一個-->
123     </tr> <!--行-->
124     </thead>
125     <tbody>
126     <tr>  <!--行-->
127         <td>1</td>
128         <td rowspan="4">dsx</td>  <!--第1行，第2列中全部數據合併-->
129         <td>post</td>
130         <td>執行</td>
131         <td>修改</td>
132     </tr>
133     <tr>
134         <td>1</td>
135         <td>post</td>
136         <td>執行</td>
137         <td>修改</td>
138     </tr>
139     <tr>
140         <td>1</td>
141         <td>post</td>
142         <td>執行</td>
143         <td>修改</td>
144     </tr>
145     <tr>
146         <td>1</td>
147         <td>post</td>
148         <td><a href="s.html">執行</a></td>
149         <td>修改</td>
150     </tr>
151     </tbody>
152 </table>
153 </body>
154 </html>

運行結果以下：ubuntu

通常用到的註釋有如下幾種：==============================================後端

html：；sublime-text

css:/* */
js://註釋單行
/*註釋多行*/數組

====================================================================

3.HTML基礎知識：CSS選擇器

參考文檔：http://www.imdsx.cn/index.php/2017/07/27/html1/

s2.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <!--選擇器 定位body中的標籤-->
  7     <!--在style標籤中添加CSS樣式 寫在head中-->
  8     <style>
  9          /*******1.*id選擇器 關鍵符號是#    */
 10         #i1{
 11             /*高度   <!--#i1表示：已經定位到body體中，id是i1的屬性 --> */
 12             height: 100px;
 13             /*!*寬度*!*/
 14             width: 100px;
 15             /*!*背景色*!*/
 16             background-color: red;
 17         }
 18         /*2. id組合選擇器*/
 19         #i1,#i2,#i3{
 20             /*高度*/
 21             height: 100px;
 22             /*寬度*/
 23             width: 100px;
 24             /*背景色*/
 25             background-color: red;
 26         }
 27 
 28         /*3. class選擇器  <!--  .c1表示：已經定位到body體中，class是c1的屬性 --> */
 29         .c1{
 30             height: 100px;
 31             width: 100px;
 32             background-color: black;
 33         }
 34          /*4. class組合選擇器*/
 35         .c2,.c3,.c4{
 36             /*高度*/
 37             height: 100px;
 38             /*寬度*/
 39             width: 100px;
 40             /*背景色*/
 41             background-color: red;
 42             margin-top: 10px;
 43         }
 44 
 45         /* 5. 標籤選擇器*/
 46         div{
 47             height: 100px;
 48             width: 100px;
 49             background-color: black;
 50         }
 51 
 52         /*!* 6.  id層級選擇器*!*/
 53         #i31 span{
 54             background-color: red;
 55         }
 56         /*!* 7.  class層級選擇器*!*/
 57         .c33 span{
 58             background-color: red;
 59         }
 60         /* 8.  屬性選擇器*/
 61         div[dsx="dsx"]{
 62             height: 100px;
 63             width: 100px;
 64             background-color: blue;
 65         }
 66     </style>
 67 </head>
 68 <body>
 69 
 70     <!--1和2. id的屬性隨意寫 可是一個html標籤中只容許出現一個id 不能重複-->
 71     <div id="i1"></div>
 72     <div id="i2"></div>
 73     <div id="i3"></div>
 74     <!--3. class也能夠隨意寫，一個html標籤中能夠存在多個相同的class屬性-->
 75     <!--css樣式中 class 應用的最頻繁-->
 76     <div class="c1"></div>
 77     <div class="c1"></div>
 78     <div class="c1"></div>
 79 
 80     <!--4. class組合選擇器 知道就行 不要用-->
 81     <div class="c2"></div>
 82     <div class="c3"></div>
 83     <div class="c4"></div>
 84 
 85     <!--5. 標籤選擇器是以"標籤的名字來定位" 應用於全部div標籤-->
 86     <div></div>
 87 
 88     <!--6.  id層次選擇器-->
 89     <div id="i31">
 90         <span>id選擇器</span>
 91     </div>
 92     <span>id選擇外</span>
 93 
 94     <!-- 7.  class層次選擇器-->
 95     <div class="c33">
 96         <span>class選擇器</span>
 97     </div>
 98     <span>class選擇外</span>
 99 
100     <!--8. 屬性選擇器-->
101     <div dsx="dsx"></div>
102 
103 
104 </body>
105 </html>

運行結果以下：

4.HTML基礎知識：CSS樣式1

1.新建一個stylesheet

2. 按ctrl + 鼠標，進入c.css

.c1{
           height: 100px;
           width: 100px;
           background-color: black;
       }

s3.html代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--一、head中添加一個style標籤能夠寫css樣式-->
 7     <style>
 8         .c1 {
 9             height: 100px;
10             width: 100px;
11             background-color: pink;
12         }
13     </style>
14     <!--三、經過link標籤導入的css樣式表 rel表明類型 href路徑-->
15     <link rel="stylesheet" href="c.css">
16 
17 </head>
18 <body>
19 <!--那些位置能夠寫css樣式 如何修改css樣式-->
20 <!--二、在標籤中增長style屬性 也能夠寫css樣式-->
21 <div class="c1" style="height: 100px;width: 100px;background-color: red"></div>
22 <!--優先級
23 一、標籤上引用的css樣式優先級最高
24 以標籤爲基準 由內 而外 由下到上 依次應用-->
25 </body>
26 </html>

運行結果以下：

5.HTML基礎知識：CSS樣式2

s4.html代碼以下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .active{
  8             display: none;
  9         }
 10         .c1{
 11             height: 100px;
 12             width: 100px;
 13             background-color: blue;
 14         }
 15 
 16         .c11{
 17             height: 100px;
 18             /*寬度能夠寫百分比的 高度不能夠*/
 19             width: 100%;
 20             background-color: blue;
 21         }
 22         .c2{
 23             /*字體加大加粗*/
 24             font-size: xx-large;
 25             font-weight: bolder;
 26         }
 27 
 28         .c21{
 29             width: 100%;
 30             height: 48px;
 31             background-color: blue;
 32             /*水平居中*/
 33             text-align: center;
 34             /*垂直居中*/
 35             line-height: 48px;
 36         }
 37 
 38         .c12{
 39             height: 48px;
 40             width: 100px;
 41             /*邊框 1像素 紅色 實線*/
 42             border: 1px red solid;
 43         }
 44 
 45         .c6{
 46             height: 100px;
 47             width: 100px;
 48             display: inline-block;
 49             border: 1px red solid
 50         }
 51 
 52 
 53     .c9{
 54         height: 100px;
 55         width: 100%;
 56         border: 1px red solid;
 57     }
 58 
 59     .c0{
 60         height: 50px;
 61         width: 100%;
 62         background-color: blue;
 63     }
 64         .head{
 65             height: 48px;
 66             background-color: green;
 67             position: fixed;
 68             top: 0;
 69             right: 0;
 70             left: 0
 71         }
 72         .go-top{
 73             height: 48px;
 74             width: 100px;
 75             position: fixed;
 76             right: 0;
 77             bottom: 0;
 78         }
 79     </style>
 80 </head>
 81 <body style="margin: 0">
 82 
 83     <!--外邊距-->
 84     <div class="head"></div>
 85     <div id="i1"></div>
 86     <div style="height: 10000px;width: 100%;margin-top: 48px"></div>
 87     <div class="go-top">
 88         <!--a標籤能夠用做錨點-->
 89         <a href="#i1">返回頂部</a>
 90     </div>
 91 
 92     <!--<div class="c9">-->
 93         <!--&lt;!&ndash;外邊距margin  top表明距離外層上邊10px&ndash;&gt;-->
 94         <!--&lt;!&ndash;外邊距本身自己不作變化而相對於外層作移動&ndash;&gt;-->
 95         <!--<div class="c0" style="margin-top: 10px"></div>-->
 96     <!--</div>-->
 97 
 98     內邊距
 99     <div class="c9">
100         <!--內邊距padding  top表明距自身增長10px-->
101         <!--內邊距改變自身-->
102         <div class="c0" style="padding-top: 10px"></div>
103     </div>
104 
105 
106 
107 <!--標籤中的class屬性是能夠同時引用多個選擇器-->
108 <div class="c1 active"></div>
109 <div class="c11"></div>
110 
111 <div class="c2">水瓶座</div>
112 <div class="c21">HTML</div>
113 <!--浮動:能夠左漂，也能夠右飄-->
114 <div class="c12" style="float: right"></div>
115 <div class="c12" style="float: left"></div>
116 <div class="c12" style="float: left"></div>
117 <div class="c12" style="float: left"></div>
118 
119 
120 <span>span標籤是html中的 白版標籤（沒有任何css的樣式）,【**行內標籤***】（內聯標籤）,本身有多大 就佔多大</span>
121 <div>它是html中出場率最高的標籤,僞白版標籤,【**塊級標籤***】,不管本身有多大 都佔一整行</div>
122 
123 <!--display屬性-->
124 <!--行內標籤 不能夠應用寬、高、外邊距、內邊距等css樣式-->
125 <!--行內標籤轉塊級標籤 經過display block-->
126 <!--<span style="height: 100px;width: 100px;display: block">行內標籤轉塊級標籤block</span>-->
127 <!--塊轉行內 經過display的inline-->
128 <div style="height: 100px;width: 100px;display: inline">塊轉行內inline</div>
129 <!--即便行內 也是 塊級-->
130 <span class="c6">水瓶座</span>
131 <!--display: none 隱藏當前元素-->
132 <div style="height: 100px;width: 100px;background-color: blue;display: none"></div>
133 
134 
135     <!--postion分層-->
136     <!--postion fixed 絕對定位 寫完後永遠都在哪個地方-->
137     <!--<div style="height: 48px;background-color: green;position: fixed;top: 0;right: 0;left: 0"></div>-->
138     <!--<div style="height: 1000px;width: 100%"></div>-->
139     <!--<div style="height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;background-color: blue"></div>-->
140 
141 </body>
142 </html>

運行結果以下：

6.HTML基礎知識：CSS樣式3

s5.html代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .out {
 9             height: 400px;
10             width: 400px;
11             border: 6px red solid;
12             position: relative;
13         }
14 /*postion：absolute與relative是成對出現的，不能單獨使用*/
15         .inner {
16             height: 100px;
17             width: 100px;
18             position: absolute;
19         }
20 
21         .out-zindex {
22             height: 100px;
23             width: 100px;
24             border: 6px red solid;
25             position: relative;
26         }
27 
28         .inner-zindex {
29             height: 100px;
30             width: 100px;
31             position: absolute;
32         }
33         .image{
34             height:100px;width:100px;border: 1px pink solid;
35             background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');
36             /*當圖片小於外層時不作堆疊操做*/
37             /*background-repeat: no-repeat;*/
38             /*橫向堆疊*/
39             /*background-repeat: repeat-x;*/
40             /*縱向堆疊*/
41             background-repeat: repeat-y;
42 
43         }
44 
45     </style>
46 </head>
47 <body>
48 <!--相對定位-->
49 <div class="out">
50 <div class="inner" style="background-color: blue;right: 0;bottom: 0"></div>
51 <div class="inner" style="background-color: red;right: 0;top: 0"></div>
52 <div class="inner" style="background-color: black;left: 0;bottom: 0"></div>
53 <div class="inner" style="background-color: pink;left: 0;top:0"></div>
54 </div>
55 
56 <!--z-index的例子：z-index:10的值越高，它就越在最前面，以下部分顏色重疊了-->
57 <div class="out-zindex">
58     <div class="inner-zindex" style="background-color: blue;z-index:10"></div>
59     <div class="inner" style="background-color: red;z-index: 11"></div>
60     <div class="inner" style="background-color: black;"></div>
61     <div class="inner" style="background-color: pink;"></div>
62 </div>
63 <!--鼠標懸浮的樣式-->
64 <input type="button" value="小手" style="cursor: pointer">
65 <!--滾動條-->
66 <!--當圖片或內容超過外層div的寬和高時，overflow auto將自動添加滾動條-->
67 <div style="height: 100px;width: 100px;border: 1px red solid;overflow: auto">
68     <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
69 </div>
70 <!--當圖片或內容超過外層div的寬和高時，overflow scroll將自動添加滾動條. 區別於auto: 若是父類大於圖片或內容大小
71 則，scroll依舊展現滾動條 而auto是自動識別的 -->
72 <div style="height: 100px;width: 100px;border: 1px red solid;overflow: scroll">
73     <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
74 </div>
75 <!--overflow hidden 當父類小於內部的圖片或內容時，自動裁剪 以左上角爲基準-->
76 <div style="height: 100px;width: 100px;border: 1px red solid;overflow: hidden">
77     <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
78 </div>
79 
80 <div class="image" style=""></div>
81 <!--background-position:0 0 表示調整它的x,y值後，能夠取到圖片中不一樣的值 -->
82 <div style="height: 20px;width: 20px;border: 1px red solid;background-image: url('http://ui.imdsx.cn/static/image/icon.png');background-position: 0 0"></div>
83 
84 </body>
85 </html>

運行結果以下：

7.HTML基礎知識：dom

參考文檔以下：http://www.imdsx.cn/index.php/2017/07/27/html2/

練習網址http://ui.imdsx.cn/js/

DOM（Document Object Model 文檔對象模型）

一個web頁面的展現，是由html標籤組合成的一個頁面，dom對象實際就是將html標籤轉換成了一個文檔對象。能夠經過dom對象中js提供的方法，找到html的各個標籤。經過找到標籤就能夠操做標籤使頁面動起來，讓頁面動起來。

獲取標籤

 1 // 直接獲取標籤
 2  
 3 document.getElementById('i1'); //獲取id爲i1的標籤
 4  
 5 document.getElementsByTagName('div'); //根據標籤名稱得到標籤數組
 6  
 7 document.getElementsByClassName('c1'); //根據class屬性獲取標籤的數組
 8  
 9 document.getElementsByName('dsx'); //根據name屬性獲取標籤數組
10  
11 // 間接獲取標籤
12  
13 var tmp=document.getElementById('h-test');
14  
15 tmp.parentElement; // 父節點標籤元素
16  
17 tmp.children; //全部子標籤
18  
19 tmp.firstElementChild; //第一個子標籤元素
20  
21 tmp.lastElementChild; // 最後一個子標籤元素
22  
23 tmp.nextElementSibling; //下一個兄弟標籤元素
24  
25 tmp.previousElementSibling; //上一個兄弟標籤元素