空白目錄 · XK-HTML+CSS

# HTML基礎 ## 一、html標簽 ```html <html></html>之間的文本描述網頁 <body></body>之間的文本是可見的頁面內容 <title></title>之間的文本是網頁標題 <h1></h1>~<h6></h6>為標題 <p>這是段落</p> <big>這是大號字</big> <b>這是粗體文本</b> <em>這是著重文字</em> <i>這是斜體</i> <small>這是小號字</small> <strong>這是加重語氣</strong> <sub>這是下標字</sub> <sup>這是上標字</sup> <ins>這是插入字</ins> <del>這是刪除字</del> <br/>這是換行符 <hr/>這是橫線  <a href="">這是超鏈</a> ``` ### 1、meta元標簽 ```html  <meta name="keywords" content="HTML5,JavaScript,前端,Java" />  <meta name="description" content="發布h5、js等前端相關的信息"/>  <meta http-equiv="refresh" content="5;url=http://www.baidu.com"/> ``` ### 2、a標簽 ? <a>標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。 ```html 屬性： href:指向要鏈接的目標 alt:無法加載圖片時顯示的文字 title:鼠標懸停顯示圖片的說明文字 width:單獨定義寬或高時圖片按比例縮放 target 1._blank 新窗口打開網頁 2._self 當前頁面跳轉(默認) 也可以從A頁面的甲位置跳到B頁面的乙位置: b.html指定位置添加id a.html <a href="b.html#id"></a> #bottom 去底部 #top 去頂部 #id 去指定id處 ``` ### 3、table標簽 ```html  <table border="1"> <tr align="center"> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr align="center"> <td>張三</td> <td>13</td> <td rowspan="2">男</td> </tr> <tr align="center"> <td>張三</td> <td>13</td> </tr> <tr align="center"> <td>張三</td> <td colspan="2">13</td> </tr> </table> ``` ### 4、ol和ul標簽 ```html  <ul type="circle"> <li>香蕉</li> <li>橘子</li> <li>蘋果</li> </ul> <ul type="disc"> <li>香蕉</li> <li>橘子</li> <li>蘋果</li> </ul> <ul type="square"> <li>香蕉</li> <li>橘子</li> <li>蘋果</li> </ul>  <ol type="1"> <li>香蕉</li> <li>橘子</li> <li>蘋果</li> </ol> <ol type="a"> <li>香蕉</li> <li>橘子</li> <li>蘋果</li> </ol> <ol type="i"> <li>香蕉</li> <li>橘子</li> <li>蘋果</li> </ol>  <dl> <dt>所屬學院</dt> <dd>計算機應用</dd> <dt>所屬專業</dt> <dd>計算機軟件工程</dd> </dl> ``` ## 二、內聯框架 frameborder 設置是否顯示框架的邊框 0 不顯示 1 默認值顯示邊框 scrolling 設置對象是否可以滾動 auto 默認值瀏覽器自動判斷是否需要滾動 yes 設置有滾動條 no 不可滾動 noresize 是否允許調整框架窗口大小超鏈指向鏈接再通過target指向iframe ```html <frameset rows="20%,*" frameborder="0"> <frame name="top" src="../列表/index.html" scrolling="auto" noresize="noresize" /> <frameset cols="20%,*"> <frame name="left" src="../表格/index.html" scrolling="no" noresize="noresize" /> <frame name="main" src="../選擇器/index.html" scrolling="no" noresize="noresize" /> </frameset> </frameset>  <a href="../作業7.4/test1.html" target="mainFrame">顯示第一個頁面</a><br /> <a href="../作業7.4/test2.html" target="mainFrame">顯示第一個頁面</a><br /> <a href="../作業7.4/test3.html" target="mainFrame">顯示第一個頁面</a><br /> <iframe src="../作業7.4/test4.html" width="800px" height="200px" scrolling="yes" name="mainFrame"></iframe> ``` ## 三、表單 form 表單 action 表單提交的路徑或者請求地址 method 提交方式get/post input text 文本框 1.size 文本框的長度 2.maxlength 能輸入的最大字符串長度 3.readonly 只讀 4.disabled 不可選 5.value 文本框初始值 6.placeholder 占位符一般用作提示輸入格式 password 密碼框 hidden 隱藏域用戶在頁面中看不到元素不影響頁面布局 reset 重置按鈕讓表單回到初始狀態 submit 提交按鈕將表單內容發送到action提供的路徑 button 普通按鈕需要js的點擊事件才起作用 radio 單選按鈕多個選擇項需要指定相同的name值 checkbox 復選框可同時選擇多個選項一般同類別選項name值設一致 1.checked 默認被勾選 file 文件域可選擇本機文件上傳 image 圖片點擊事件 textarea 文本域 1.rows 設置文本域的高度字體大小的倍數 2.cols 設置文本域的寬度 select_option 下拉菜單 1.selected 默認被選中 2.multiple 展開下拉菜單 ```html <form action="" method="post"> <input type="text" maxlength="10" size="100" readonly="readonly" id="loginName" name="loginName" value="張三" />只讀 <br /> <input type="text" disabled="disabled" />不可選 <br /> <input type="password" name="password" />密碼框 <br /> <input type="text" placeholder="占位" />占位 <br /> <input type="hidden" name="h" id="h" value="隱藏" /> <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 <br /> <input type="checkbox" name="game" value="dnf" />地下城 <input type="checkbox" checked="checked" name="game" value="cf" />穿越火線 <input type="checkbox" checked="checked" name="game" value="lol" />英雄聯盟 <br /> <input type="file" name="file" value="file" /> <br /> <input type="number" /> <br /> <input type="color" /> <br /> <textarea name="" rows="10" cols="50" >首都華盛頓首都華沙看發哈開始 </textarea> <br /> <input type="image" src="../img/rrw/btn_reg.gif" /> <select name="" multiple="multiple"> <option value="">蘋果</option> <option value="" selected="selected">橘子</option> <option value="">香蕉</option> </select> <input type="reset" value="重置按鈕" /> <input type="button" onclick="on()" value="普通按鈕" /> <input type="submit" value="提交按鈕"/> </form> <form action="">  <fieldset id=""> <legend>用戶信息</legend> 姓名：<input type="text" /> 年齡：<input type="text" /><br /> 手機：<input type="text" /> 郵箱：<input type="text" /><br /> <legend>用戶信息</legend> 姓名：<input type="text" /> 年齡：<input type="text" /><br /> 手機：<input type="text" /> 郵箱：<input type="text" /><br /> </fieldset> </form> <script type="text/javascript"> function on(){ alert("你點我了") } </script> ``` # CSS基礎 ## 一、字體和文本 /** * color 設置字體顏色 * font-size 字體大小 * 實際為字體所占格子的大小 * font-family 字體類型 * 可以同時指定多個字體瀏覽器優先使用前邊字體不支持則換下一個 * 分為5大類：1.serif 襯線字體 * 2.sans-serif 非襯線字體 * 3.monospace 等寬字體 * 4.cursive 草書字體 * 5.fantasy 虛幻字體 * font-style 字體風格 * 1.normal 默認值標準字體顯示 * 2.italic 斜體 * 3.oblique 文字傾斜效果大部分瀏覽器不對兩種進行區分 * font-weight 可用來設置文本的加粗效果 * 1.normal * 2.bold 文字加粗顯示 * 3.100~900九種值 * font-variant 可用來設置小型大寫字母 * 1.normal * 2.small-caps 文本以小型大寫字母顯示字體變小但是小寫轉大寫 */ ```html <style type="text/css"> .p1{ font-style: italic; color: red; font-size: 30px; font-family: "華文彩云" "curlz mt" "微軟雅黑"; font-variant: small-caps; /** * 斜體加粗小大寫沒有順序要求可寫可不寫 * 大小和字體需要設置 * 字體必須為最后一個樣式大小為倒數第二個 /*font: small-caps bold italic 60px "微軟雅黑";*/ } .p2{ font-size: 20px; /** * line-height 行高用來設置行間距 * 行間距=行高-字體大小 * 1.直接設置大小 * 2.指定一個百分數，相對于字體大小進行計算 * 3.傳一個數值，代表字體大小的倍數 */ line-height: 2; } .p3{ /** * text-transform 設置文本大小寫 * 1.none 默認值不做任何處理 * 2.capitalize 單詞首字母大寫通過空格識別單詞 * 3.uppercase 所有字母大寫 * 4.lowercase 所有字母小寫 * text-decoration 可用來設置文本的修飾 * 1.none 默認值正常顯示 * 2.underline 為文本添加下劃線 * 3.overline 為文本添加上劃線 * 4.line-through 為文本添加刪除線 * letter-spaceing 可以指定字符間距 * word-spaceing 可以設置單詞之間的距離即字符間空格大小 */ text-transform: capitalize; text-decoration: line-through; letter-spacing: 10px; word-spacing: 20px; } a{ /** * 去除超鏈默認自帶的下劃線 */ text-decoration: none; }/** * text-align 用于設置文本的對齊方式 * 1.left 默認值文本靠左對齊 * 2.right 文本靠右對齊 * 3.center 文本居中對齊 * 4.justify 兩端對齊 * text-indent 設置首行縮進給定正值向右縮進負值向左可以用于隱藏 */ </style> ``` ## 二、選擇器 ### 1、元素選擇符 ```html <style> /*所有元素*/ *{ color: red; } /*所有a標簽*/ a{ color: blue; font-size: 40px; } /*id為content的p對象*/ p#content{ color: gray; } /*class值為hh的類選擇器可以有多個對象*/ p.hh{ color:green; } </style> ``` ### 2、關系選擇符 ```html <style> /*被center包含的所有p元素包括直接子元素和間接子元素*/ center p{ color: darkorchid; } /*只包括直接子元素*/ center>p{ font-size: 40px; } /*緊貼在center元素后的p元素兩者為兄弟元素*/ center+p{ font-size: 30px; } /*center元素后面的所有兄弟元素p*/ center~p{ color: hotpink; } </style> ``` ### 3、屬性選擇符 ```html <style> /*所有具有class屬性的a元素*/ a[class]{ font-size: 50px; } /*具有class元素且屬性值等于oo的a元素*/ a[class="oo"]{ color: red; } /*具有class且有用空格分隔的kk值*/ p[class~="kk"]{ font-size: 60px; } /*具有class且屬性值以cc開頭*/ p[class^="cc"]{ color: pink; } /*具有class且屬性值以ff結尾*/ p[class$="ff"]{ color: brown; } /*具有class且屬性值包含ss*/ p[class*="ss"]{ color: green; } /*具有class且屬性值以aa開頭并用-分隔字符串*/ p[class|="aa"]{ color: yellow; } </style> ``` ### 4、偽類選擇符 ```html <style type="text/css"> a:link{ color: red; } a:hover{ color: blue; } a:active{ color: yellow; } a:visited{ color: green; } /*對象成為輸入焦點時的樣式*/ input:focus{ background-color: red; } /*p標簽中除class值為nn外其他元素*/ p:not(.nn){ color: blue; } /*li的父元素的第一個子元素*/ li:first-child{ color: green; } /*最后一個子元素*/ li:last-child{ color: yellow; } /*父元素僅有一個子元素*/ li:only-child{ font-size: 40px; } /*父元素的第n個元素這里是2 或者even偶數個 odd奇數個 */ li:nth-child(2){ color: red; } /*父元素的倒數第n個元素*/ li:nth-last-child(2){ color: #9932CC; } /*同類型(這里是p)中第一個同級(層)兄弟元素不同層的第一個都生效*/ p:first-of-type{ font-size: 50px; } /*沒有任何子元素(包括text節點)的元素*/ p:empty{ height: 25px; border: 1px solid #9932CC; background-color: red; } /*處于選中狀態的元素(checkbox或radio)*/ input:checked+span{ background-color: #0000FF; } /*處于可選狀態的元素 * enabled 默認 * 不可選 disabled */ input:disabled{ background-color: gray; } input:enabled:focus{ background-color: yellow; } /*去掉無序列表前面標記*/ ul{ list-style: none; } </style> ``` ### 5、偽對象選擇符 ```html <style type="text/css"> /*第一個字符*/ p:first-letter{ font-size: 40px; font-weight: bold; } /*第一行*/ p:first-line{ color: red; } /*設置在對象前的內容，與content一起使用*/ p:before{ background-color: yellow; content: "能看到我嗎"; } p:after{ font-size: 20px; content: "我走了"; } /*對象被選擇*/ p::selection{ color: pink; } </style> ``` ## 三、內聯元素 ```html <style type="text/css"> .box1{ /** * display:none; 不會再頁面中顯示且不再占據頁面的位置 * visibility 設置元素的隱藏和顯示的狀態 * 1.visiable 默認值默認會在頁面顯示 * 2.hidden 元素隱藏不會在頁面中顯示但依然占用位置 */ width: 1000px; height: 100px; background-color: red; visibility: hidden; } .s1{ /** * 內聯元素不能設置width和height * padding-left padding-right 可以設置水平方向的內邊距 * 可以設置垂直方向內邊距但不會影響頁面布局 * border 可以設置邊框但垂直的邊框不會影響頁面布局 * margin-left margin-right 支持水平方向的外邊距 * 不支持垂直外邊距 * 水平方向的相鄰外邊距不會重疊 */ padding-left: 100px; padding-right: 100px; border: 50px blue solid; margin-left: 100px; margin-right: 100px; } a{ /** * display 可以將一個內聯元素變成塊元素 * 1.inline 將一個元素作為內聯元素顯示 * 2.block 將一個元素設置塊元素顯示 * 3.inline-block 將一個元素轉換為行內塊元素 * 既可以設置寬高又不會獨占一行 * 4.none 不顯示元素且元素不會在頁面中繼續占有位置 * visibility : hidden 隱藏的元素雖然不會在頁面中顯示但依然占用位置 */ background-color: green; display: inline-block; width: 500px; height: 500px; } </style> ``` ## 四、盒子模型 ```html <style type="text/css"> /** * div真實大小 * 1.內容區大小由width height指定 * 2.邊框 border * 3.內邊距 padding */ div{ width: 400px; height: 400px; background-color: red; /** * border-width 邊框寬度 * 1.指定一個值上下左右 * 2.指定兩個值上下左右 * 3.指定三個值上左右下 * border-color 邊框顏色也可以指定四邊不同顏色 * border-style 邊框樣式 * 1.none 默認值，沒有邊框 * 2.solid 實線 * 3.dotted 點狀邊框 * 4.dashed 虛線 * 5.double 雙線 * 同樣可以指定四邊不同樣式 * padding 內邊距邊框與內容區的距離 * margin 外邊距 * 1.auto 自適應能設置的最大值 * 如margin-left 容器左外邊距設成最大值瀏覽器寬度減去容器寬度 * 子元素樣式以父元素為標準 */ border-color: black; border-width: 20px 30px 40px; border-left-style: solid; border-right-style: dashed; border-top-style: dotted; border-bottom-style: double; padding: 50px 20px; margin-left:auto; /*border: solid 10px yellow;*/ } /*消除瀏覽器自帶邊距樣式*/ *{ margin: 0; padding: 0; } </style> ``` ## 五、文檔流文檔流塊元素 1.塊元素在文檔流中會獨占一行，塊元素會自上向下排列 2.塊元素在文檔流中默認寬度是父元素的100% 3.塊元素在文檔流中的高度默認被內容撐開內聯元素 1.內聯元素在文檔流中只占自身大小，默認從左向右排列 2.內聯元素的寬度高度默認被內容撐開 auto 當元素的寬度值為auto時，此時指定內邊距不會影響可見框的大小 ```html <div style="background-color: red;"> <div style="height: 50px;"></div> </div> <div style="width: 100px; height: 100px; background-color: green;"></div> <span style="background-color: yellowgreen;"> 我是一個span</span> <span style="background-color: yellowgreen;"> 我是一個span</span> <span style="background-color: yellowgreen;"> 我是一個span</span> <span style="background-color: yellowgreen;"> 我是一個span</span> ``` ### 1、浮動浮動的元素不會蓋住文字文字會自動環繞在浮動元素的周圍塊元素在文檔流中默認垂直排列如果希望塊元素在頁面中水平排列可以使塊元素脫離文檔流 float 使元素浮動 1.none 默認值 2.left 元素脫離文檔流向頁面左側浮動 3.right 元素脫離文檔流后，下邊的元素會立即向上移動元素浮動會盡量向頁面的左上或右上移動直到遇到父元素的邊框或者其他浮動元素如果浮動元素上方是一個沒有浮動的塊元素則浮動元素在該元素下方停靠不會超過塊元素消除浮動： clear 1.left 消除左側浮動元素對其的影響 2.right 3.both 消除兩側浮動元素對其的影響自動選擇左右影響較大的 ### 2、overflow 子元素默認存在于父元素的內容區中超過內容區大小時會溢出 overflow 設置如何處理溢出內容 1.visiable 默認值不會對溢出內容做處理 2.hidden 溢出的內容會被裁剪 3.scroll 會為父元素添加水平和垂直滾動條不論內容是否溢出 4.auto 會根據需求添加水平和垂直滾動條 ### 3、高度塌陷 ? 在文檔流中，父元素的高度默認是被子元素撐開的。但是當為子元素設置浮動以后，子元素會完全脫離文檔流。此時會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下方的所有元素都會向上移動，導致頁面布局混亂 1.將父元素的高度寫死父元素的高度將不能自動適應子元素的高度，不推薦使用 2.開啟元素的BFC 特性： 1.父元素的垂直外邊距不會和子元素重疊 2.開啟BFC的元素不會被浮動元素覆蓋 3.開啟BFC的元素可以包含浮動的子元素開啟方式 1.設置元素浮動使用這種方式雖然可以撐開父元素，但會導致父元素的寬度丟失，也會導致下方元素上移。不能解決問題 2.設置元素絕對定位 3.設置元素為inline-block 可以解決問題，但是會導致寬度丟失。不推薦 4.將元素的overflow設置為一個非visible的值推薦設置為hidden ? clear 可以直接在高度塌陷的父元素最后添加一個空白的div 由于這個div并沒有浮動，所以可以撐開父元素的高度再對其進行消除浮動缺點：會在頁面中添加多余的結構參數： 1.left 消除左側浮動元素對其的影響 2.right 3.both 消除兩側浮動元素對其的影響自動選擇左右影響較大的 ```html <style> /** * 解決方案 * 通過after偽類向元素的最后添加一個空白的塊元素，然后對其消除浮動 * 不會再頁面中添加多余的div */ .clearfix:before,.clearfix:after{ /*添加一個內容*/ content: ""; /*轉換為一個塊元素*/ display: block; /*消除兩側的浮動*/ clear: both; } /*在IE6及以下不支持after偽類需要使用hasLayout處理*/ .clearfix{ zoom: 1; } </style> ``` ## 六、背景 ```html <style type="text/css"> .box1{ height: 500px; margin: 0 auto; background-color: #bfa; /** * background-image 設置背景圖片 * 1.如果背景圖片大于元素，默認會顯示圖片的左上角 * 2.如果背景圖片和元素一樣大，則會將背景圖片全部顯示 * 3.如果背景圖片小于元素大小，則會默認將背景圖片平鋪以充滿元素 * 4.一般情況下設置背景圖片時都會同時指定一個背景顏色 */ background-image: url(img/1.jpg); /** * background-repeat 用于設置背景圖片的重復方式 * 1.repeat 默認值，背景圖片會水平垂直都重復平鋪 * 2.no-repeat 背景圖片不會重復，只顯示一張 * 3.repeat-x 背景圖片沿水平方向重復 * 4.repeat-y */ background-repeat: no-repeat; /** * background-position 調整背景圖片再元素中的位置 * 1.top right left bottom center給定水平和垂直方向兩個值如果只給一個則第二個默認是center * 2.指定兩個數字代表偏移量正數向右或下負數向左或上 */ background-position: -80px -40px; /*background-attachment: fixed;*/ } body{ background-image: url(img/1.jpg); background-repeat: no-repeat; /** * background-attachment 設置背景圖片是否隨頁面一起滾動 * 1.scroll 默認值背景圖片隨著窗口滾動 * 2.fixed 背景圖片會固定在某一位置始終跟隨頁面 * 一般此屬性設置給body */ background-attachment: fixed; } </style> ``` ## 七、表格 ```html  <style type="text/css"> table{ width: 300px; margin: 0 auto; /** * table和td邊框之間默認有一個距離 * 此屬性可以設置這個距離 */ border-spacing: 0px; /** * border-collapse 設置表格的邊框合并 * 此屬性會使border-spacing失效*/ border-collapse: collapse; } </style> ``` ## 八、層級與透明度 ```html <style type="text/css"> .box2{ width: 200px; height: 200px; background-color: yellow; position: absolute; top: 100px; left: 100px; /** * z-index 設置元素的層級 * 如果定位元素的層級是一樣，則下邊的元素會蓋住上邊的 * 給定一個正整數作為值，值越大層級越高，越上層顯示 * 對于沒有開啟定位的元素不能使用z-index * 父元素的層級再高也不會蓋住子元素 */ z-index: 25; /** * opacity 設置元素的背景透明度 * 需要給定一個0-1之間的值 * 0表示完全透明 * 1表示完全不透明 */ opacity: 0.5; filter: alpha(opacity=50); } </style> ``` ## 九、定位 ### 1、相對定位 ```html <style type="text/css"> .box2{ width: 200px; height: 200px; background-color: blue; /** * relative 相對定位 * 1.當開啟了元素的相對定位以后，而不設置偏移量，元素不會發生任何變化 * 2.相對定位是相對于元素在文檔流中原來的位置進行定位 * 3.相對定位的元素不會脫離文檔流 * 4.相對定位會使元素提升一個層級 * 5.相對定位不會改變元素的性質，塊還是塊，內聯還是內聯 */ position: relative; /** * 當開啟了元素的定位(position屬性是一個非static值)時 * 通過top right left bottom設置偏移量 * 或者給定指定數值 * 通常偏移量只需要設定水平和垂直方向兩個值 */ top: 100px; left: 100px; } </style> ``` ### 2、絕對定位 ```html <style type="text/css"> .box2{ width: 200px; height: 200px; background-color: yellow; /** * absolute 絕對定位 * 1.開啟絕對定位，會使元素脫離文檔流 * 2.開啟絕對定位后如果不設置偏移量，元素的位置不會發生變化 * 3.絕對定位是相對于離他最近的開啟了定位的祖先元素進行定的（一般開啟子元素的絕對定位時都會同時開啟父元素的相對定位） * 4.絕對定位會使元素提升一個層級 * 5.絕對定位會改變元素的性質，內聯元素會變成塊元素 */ position: absolute; top: 100px; } </style> ``` ### 3、固定定位 ```html <style type="text/css"> .box2 { width: 200px; height: 200px; background-color: yellow; /** * fixed 固定定位 * 1.大部分特點與絕對定位相同 * 2.固定定位永遠都會相對于瀏覽器窗口進行定位 * 3.固定定位會固定在瀏覽器窗口某個位置，不會隨滾動條滾動 */ position: fixed; left: 0px; top: 0px; } </style> ``` ## 十、圖片整合 ```html <style type="text/css"> /** * 問題：點擊鏈接產生視覺點擊效果需要切換背景圖片來完成使用不同圖片進行加載有閃爍效果出現體驗不佳 * 原因：背景圖片以外部資源的形式加載進網頁，每加載一次需要發送一次請求 * 而外部資源并不是同時加載，只有在使用的時候才會開始加載 * 本次由于瀏覽器開始只會加載link時的背景圖片當hover和active被觸發時才開始加載對應圖片需要一定時間所以可能會產生視覺上的閃爍效果 * 解決：將三張圖片整合同時加載 * 再通過background-position切換圖片的位置進行顯示 * 這樣瀏覽器只需要發送一次請求 */ .btn:link{ display: block; width: 93px; height: 29px; background-image: url(img/btn.png); background-repeat: no-repeat; } .btn:hover{ background-position: -93px 0px; } .btn:active{ background-position: -186px 0px; } </style> ```