HTM5新手学习的一些日常总结，相互交流和相互学习。
生活随笔
收集整理的這篇文章主要介紹了
HTM5新手学习的一些日常总结，相互交流和相互学习。
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一天 一、HTML--網頁的源碼（超文本標簽語言） HTML標簽 標簽式是HTML最基本單位和最重要的組成。 使<和>擴起來 標簽都是閉合的（規范） HTML標簽屬性 是標簽的一部分，用于包含額外的信息。 可以有多個屬性 屬性和屬性值成對出現 語法 HTML文檔注釋 <！-- 這是HTML注釋--> 二、書寫規范 開頭<!DOCTYPE html> 聲明文檔類型為HTML5文件 文檔聲明，在HTML文檔必不可少。且必須放在文檔第一行。 span（文本） img（圖片） em（強調） strong（強調） q（短引用） a（超鏈接） i（傾斜） b（加粗） small（縮小字體） --> <!-- span（文本）：用于包裹一部分文字，進行特定樣式的修改。 --> 我<span style="color: red;font-size: 36px;">愛</span>我家 <!-- em(強調)：瀏覽器會顯示為傾斜 strong（強調）：瀏覽器會顯示為加粗 i（傾斜） b（加粗） [Strong/em/i/b標簽的區別] 1、em和strong都表示強調，而strong的 強調程度要大于em，strong和em標簽均可多層嵌套，表示強調程度的遞增。 2、em和i都能切斜，Strong和b都能加粗。但是Strong和em多了一層強調的語義。可以幫助搜索引擎快速抓取網絡重點。而且HTML5要求開發者，盡可能地實現代碼的語義化。 --> <em>我被em標簽強調了！！！！！</em><br /> <strong>我被strong標簽強調了!!! </strong><br /> <i>我被i標簽傾斜了。</i><br /> <b>我被b標簽加粗了。</b><br /> <!-- q（短引用）：常用于一句話的引用，cite屬性表示引用來源 瀏覽器解析時，會在內容的前后插入雙引號 --> <q cite="http：www.baidu.com">我是被q標簽聲明的一句引用的話</q> <br /> <!-- smll(縮小字體)：smll標簽可以多層嵌套，表示比默認字體小一號，直到字號小到最小號為止。 big（放大字體）：同small可以多層嵌套，直到字號最大為止。 但是，在最新規范中，small和big標簽，不被倜儻使用。提倡使用style="font-size：11px；"CSS樣式替代。 --> <small>我被small縮小了</small><br /> <small><small>我被small縮小了</small></small><br /> <big>我被big放大了</big> <br /> 圖片如下： <!-- [img 圖片標簽] 1、src屬性:表示圖片引用路徑 >>>常見路徑的方法： ① 相對路徑： ·當圖片在當前文件下一層時：文件夾名/圖片名 img/logo.png ·當圖片在當前文件同一層時：圖片名 src=logo.png ·當圖片在當前文件前一層時：../img/logo.png ② 絕對路徑：寫法file：///E：/aaa。png 但是嚴禁使用 ③ 網絡路徑：直接使用圖片的網絡地址，但是由于圖片在別人服務器，不可控。（所以不建議使用） --> <!--①案例--> <img src="img/logo.png" /> <img src="logo.png" /> <img src="../img/logo.png" /> <!--③案例--> <img src="https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=3225200470,3369676538&fm=73" 圖片如下： 第二天的學習 一、超鏈接 <!--[超鏈接a] 1.href：超鏈接的跳轉地址。可以寫網絡連接，或本地html文件的相對路徑，確定方式同img的src路徑 2.title：鼠標指上后顯示的文字 3.target：設置超鏈接打開窗口的位置。-slef 自身頁面打開（默認） -blank新頁面打開、 [功能性鏈接] mailto：//jianghao@jerei.com 發郵箱 tencent：//message/？uin=2831705549 與QQ聊天 [錨鏈接] 1、本頁面錨鏈接 ①設置一個錨點：<a name="top"></a>用name屬性表示錨點名稱 ②在朝鏈接的href屬性中，使用#name 跳轉到制定的錨點位置： <a href="#top">跳轉到錨點 2、其他頁面錨鏈接 ①徐跳轉的頁面設置錨鏈接 ②在超鏈接的href屬性，文件名.html#name <a href=aaaa.html#第二節錨點> 注：由于谷歌/ie的兼容問題，需要在錨點中，插入一個空格 才能生效： <a name="top"> </a> --> <a href="http://www.baidu.com" title="鼠標指上后顯示的文字" target="_blank">這是一個超鏈接</a> <a href="#top" title="鼠標指上后顯示的文字" target="_self">這個一個錨點</a> <a href="02常見的塊級標簽.html# " target="_blank">轉到第二個圖</a> W3C= word wide web consortium-萬維網聯盟 1、內容與表現分離，內容與行為分離 2、內容的語義化 書寫規范： 標簽名和屬性名必須小寫 HTML標簽必須關閉 屬性值必須引號括起來 標簽必須正確嵌套 二、行級標簽 <!-- [常見的行級標簽] span（文本） img（圖片） em（強調） strong（強調） q（短引用） a（超鏈接） i（傾斜） b（加粗） small（縮小字體） --> <!-- span（文本）：用于包裹一部分文字，進行特定樣式的修改。 --> 我<span style="color: red;font-size: 36px;">愛</span>我家 <!-- em(強調)：瀏覽器會顯示為傾斜 strong（強調）：瀏覽器會顯示為加粗 i（傾斜） b（加粗） [Strong/em/i/b標簽的區別] 1、em和strong都表示強調，而strong的 強調程度要大于em，strong和em標簽均可多層嵌套，表示強調程度的遞增。 2、em和i都能切斜，Strong和b都能加粗。但是Strong和em多了一層強調的語義。可以幫助搜索引擎快速抓取網絡重點。而且HTML5要求開發者，盡可能地實現代碼的語義化。 --> <em>我被em標簽強調了！！！！！</em><br /> <strong>我被strong標簽強調了!!! </strong><br /> <i>我被i標簽傾斜了。</i><br /> <b>我被b標簽加粗了。</b><br /> <!-- q（短引用）：常用于一句話的引用，cite屬性表示引用來源 瀏覽器解析時，會在內容的前后插入雙引號 --> <q cite="http：www.baidu.com">我是被q標簽聲明的一句引用的話</q> <br /> <!-- smll(縮小字體)：smll標簽可以多層嵌套，表示比默認字體小一號，直到字號小到最小號為止。 big（放大字體）：同small可以多層嵌套，直到字號最大為止。 但是，在最新規范中，small和big標簽，不被倜儻使用。提倡使用style="font-size：11px；"CSS樣式替代。 --> <small>我被small縮小了</small><br /> <small><small>我被small縮小了</small></small><br /> <big>我被big放大了</big> <br /> 圖片如下： 三、表格table <!--[表格table] 表格 <table> 表格的行 <tr></tr> 表格的列 <td></td> 表格的表頭列 <th></th> （將tr中的td，替換為th，表示本行的表頭） --> <table width="500" border="1"> <tr> <th>第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr></table> 圖如下： 案例練習： <table> <tr> <th>學號</th> <th>姓名</th> <th>數學成績</th> <th>語文成績</th> <th>英語成績</th> </tr> <tr> <td>1001</td> <td>張三</td> <td>100分</td> <td>120分</td> <td>120分</td> </tr> <tr> <td>1002</td> <td>李四</td> <td>110分</td> <td>123分</td> <td>124分</td> </tr> <tr> <td>1003</td> <td>王五</td> <td>150分</td> <td>120分</td> <td>120分</td> </tr></table> 圖如下： 表格課程： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格table</title> </head> <body> <!--[表格table] 表格 <table> 表格的行 <tr></tr> 表格的列 <td></td> 表格的表頭列 <th></th> （將tr中的td，替換為th，表示本行的表頭） --> <!-- 【表格table】 表格<table></table> 表格的行<tr></tr> 表格的列<td></td> 表格的表頭列<th></th> (將tr中的td，替換為th，表示本行為表頭) th 默認加粗，且在單元格居中顯示 【table的常用屬性】 1、Border： 表格的邊框屬性；當使用border='1'設置邊框時，會所有的td以及table上嵌套邊框，當border加大時，只有table最外層框線加粗，td單元格上的框線不會變化。 ? 2、Cellspacing：單元格與單元格之間的間隙。當cellspacomg=0時，單元格之間間隙為0，但邊框線并沒有合并（邊框線還是兩條線的寬度） [合并邊框的寫法] "style='border-collapse:collapse；"使用邊框合并后，無需設置Cellspacing ? 3、Cellpadding：段遠隔內編劇，段遠隔中文字與單元格邊框之間的距離 ? 4、Width/Height：表格的寬度高度 5、Align: 設置表格在父容其中的對齊方式；left/居左 center/居中 right/居右 【注意】當表格使用align屬性石，相當于使表格浮動，可能會導致表格后面的元素受表格浮動影像，導致布局錯亂。 6、Bgcolor： 背景色 Background： 背景圖片，后接相對路徑。當背景圖和背景色同時生效時，背景圖覆蓋背景色 Bordercolor： 邊框顏色 --> <!-- [tr td 屬性標簽] 當表格屬性與行列屬性沖突時以行列屬性為主 屬性設置優先級：td>tr>table ① Width、Height：給單個的行、列，設置寬度高度； ② bgcolor：背景色 ③ Align：設置單元格中的文字，在單元格中的水平對其方式 left/ceter/right ④ Valign：設置單元格中的文字，在單元格中的水平對其方式 top/centr/bottom ⑤ Nowrap：nowrap=nowrap 設置單元格文字行末不斷行。 --> <!-- [表格的跨行與跨列] 1、跨列：colspan，某單元格跨N列，則該單元格右邊的N-1個td就不需要了。 2、跨行：rowspan，某段遠隔跨N行，則該單元格下邊的N-1個td就不需要了。 --> <table width="500" border="1"> <tr> <th colspan="2">第一行</th> </tr> <tr> <td rowspan="3">1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-2</td> <td>2-3</td> </tr></table> <hr /> <br /> <table> <tr> <th>第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr></table> <table width="500" border="1"> <tr> <th>第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr></table> <table width="500" border="1" cellspacing='10' > <tr> <th">第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr></table> <table width="500" border="1" cellspacing='10' style="border-collapse: collapse;" bgcolor="aqua" > <tr> <th>第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr></table> <table width="500" border="1" cellspacing='10' align="left" bgcolor="aqua"> <tr> <th>第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table> <table width="500" border="1" cellspacing='10' bgcolor="aqua" style="border-collapse: collapse; <tr> <th>第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr></table> <table width="500" border="1" style="border-collapse: collapse; " background="../img/15062610214111_0.jpg" > <tr> <th>第一行</th> <th>第二行</th> <th>第三行</th> </tr> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td></tr> </body> </html> 圖片如下： 案例練習： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table width="500" border="1" bordercolor="red"> <tr> <td colspan="9" align="center">杰瑞教育</td> </tr> <tr> <td colspan="3">HTML5</td> <td colspan="4" rowspan="2">Android</td> <td colspan="2">ios</td> </tr> <tr> <td colspan="3">java</td> <td colspan="2">PHP</td> </tr> </table> <table width="1000" height="600" bordercolor="red" border="10" cellspacing="0"> <tr> <td rowspan="6" background="../img/f5_banner.png"></td> <td rowspan="3"></td> <td rowspan="2"></td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td rowspan="2"></td> <td></td> </tr> <tr> <td rowspan="3"></td> <td></td> </tr> <tr> <td rowspan="2"></td> <td></td> </tr> <tr> <td></td> </tr> </table> </body> </html> 圖片如下： 第三天 一、表單元素 元素內容： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單</title> </head> <body> <!--[form表單] 1.兩個重要屬性： action：表單需要提交的服務器地址 method：表單提交數據使用的方法：get/post >>> [get與post的區別] ①get傳參數使用URL傳遞，所有參數在地址欄可見，不安全，get傳參數據量有限； ②post傳參使用http請求傳遞，比較安全；post可以傳遞大量數據； 但是，get請求的傳輸速率要比post快。 >>>URL傳參的形式：鏈接URL地址?name1=value1&name2=value2 2.input的常用屬性： ①type：設置input的輸入類型 ②name：給input輸入框起名。一般情況下，name屬性必不可少。因為，傳遞數據時，使用那么=value（輸入內容）的形式傳遞 ③value：input輸入框的默認值 ④placeholder：輸入框的提示內容。當input有默認的value或者輸入值時，placehoder消失。 3.input-type屬性的常用屬性值： ①.text：文本輸入框 ②.password：密碼輸入框，輸入內容默認顯示小黑點。 ③.radio：單選項 >>> 使用radio時，value屬性必填。提交時，提交的為value中的默認值。 >>> radio憑借name屬性，確定是否屬于同一組，那么相同為同組，智能選一個。 >>> 使用checked='checked'屬性，設置默認選中項 ④.file：文件上傳 >>> 使用accept="類型"，設置智能上傳的文件類型， imge/* 任一格式圖片 ⑤.submit： 提交按鈕。將所有表單數據，提交至后臺服務器 ⑥.reset：重置表單數據按鈕。將表單數據恢復到默認狀態。 ⑦.image：圖形提交按鈕。跟submit一樣具有提交功能。 >>> 使用src屬性，選擇圖片路徑 ⑧.button：普通按鈕，沒有任何卵用。 4.屬性名等于屬性值的情況： ①checked="checked"屬性，設置默radio或checkbox認選中項 ②multiple="multiple" 設置select控件，為多選控件 ③selected="selected" 設置select控件，默認選中的option選項 5、【下拉選擇控件 select】 ① 寫法：<select> <option></option> //可以有N多個 </select> ② name屬性，應該寫在<select>上，所有選項只有一個 name ③ multiple="multiple" 設置select控件為多選，可在界面使用Ctrl+鼠標，進行多選。一般不用。 ④ option 常用屬性： value="":當option沒有value屬性時，往后臺傳遞的是<option></option>標簽中的文字； 當option有value屬性時，往后臺傳遞的是value屬性的值。 title="":鼠標指上后顯示的文字。 selected="selected":默認選中。 ⑤ <optgroup label="山東省"></optgroup> :用于將option標簽進行分組，label屬性表示分組名。 6、 【文本域 textarea】 ① 寫法：<textarea></textarea> ② 設置寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性，但不常用 ③ readonly="readonly" 設置為只讀模式，不允許編輯。 ④ style="resize: none;" 設置為寬高不允許修改。 ⑤ style="overflow: ;" 設置當文字超出區域時，如何處理。 >>> 也可以通過overflow-x/overflow-y分別設置水平垂直方向的顯示方式。 >>> 常用屬性值:hidden 超出區域的文字，隱藏無法顯示 scroll 無論文字多少，均會顯示滾動 auto 自動，根據文字多少自動決定是否顯示滾動條（默認樣式） 7.表格的邊框與標題 <form> <fieldset>表格的邊框 <legend>聯系方式</legend>表格標題 .....N多個表單元素（input/select/textarea） </fieldset> </form> --> <!--[HTML5智能表單] ①H5新增input的form屬性，用于指向特定form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交。 <FORM id=too> .... </FORM> <input...form="foo"> ②新增N多個TYPE新屬性，詳見表格。 ③ 新增input的屬性： Autocomplete：自動完成功能.記憶之前輸入國的內容，在下次輸入時，根據以前的內容提示，自動完成。 >>> 絕大部分瀏覽器自動開啟 >>>個屬性：off/on >>>可以在<form>標簽設置Autocomplete，控制整張表單的自動完成開關。但可以在個別input上單獨設置，覆蓋form的整體設置。 Autofocus：自動獲得焦點 Autofocus=Autofocus Form：所屬表單 通過form表單的id，指向特定表單。 Required：必填 Required=Required 設置input為必填 Pattern：驗證input的模式 Placeholder：提示 --> 源代碼： <form action="" method="get"> <table> <tr> <td>用戶名</td> <td><input type="text" name="username01" / value="123" placeholder="請輸入賬號"></td> </tr> <tr> <td>密碼：</td> <td><input type="password" name="password01" placeholder="請輸入密碼"/></td> </tr> <tr> <td>性別</td> <td><input type="radio" name="sex" value="女"/ checked="checked">女 <td><input type="radio" name="sex" value="男"/ checked="checked">男 </td> </tr> <tr> <td>愛好</td> <td><input type="checkbox" name="愛好" value="男"/>男 <td><input type="checkbox" name="愛好" value="女"/ checked="checked">女 </td> </tr> </tr> <tr> <td><input type="image" src="../img/f2_img1.jpg"/></td> <td></td> </tr> <tr> <td><input type="submit"/></td> <td></td> </tr> <tr> <td><input type="reset"/></td> <td></td> </tr> </tr> <tr> <td><input type="button" value="我就是看看"/></td> <td></td> </tr> </table> </form> </body> </html> 圖片如下： 案例練習： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>貴美商城注冊頁</title> </head> <body> <form action="" method="get"> <table> <tr> <td>用戶名：</td> <td> <input type="text" /> （可包含1-0,2-2,02 等） </td> <td rowspan="9"> <h3> <img src="../1_HTML基本標簽/img/icon.png" /> 閱讀貴美服務協議 </h3> <textarea style="width: 300px; height: 300px; resize: none; overflow-y: scroll;" readonly="readonly"> 貴美商城服務協議 </textarea> </td> </tr> <tr> <td>密碼：</td> <td> <input type="password" /> （可包含1-0,2-2,02 等） </td> </tr> <tr> <td>再次輸入密碼：</td> <td> <input type="password" /> </td> </tr> <tr> <td>電子郵箱：</td> <td> <input type="email" /> （可包含1-0,2-2,02 等） </td> </tr> <tr> <td>性別：</td> <td> <input type="radio" /> <img src="../1_HTML基本標簽/img/icon.png" /> 男 <input type="radio" /> <img src="../1_HTML基本標簽/img/icon.png" /> 女 </td> </tr> <tr> <td>頭像：</td> <td> <input type="file"/> </td> </tr> <tr> <td>愛好：</td> <td> <input type="checkbox" />運動 <input type="checkbox" />聊天 <input type="checkbox" />玩游戲 </td> </tr> <tr> <td>喜歡的城市：</td> <td> <select name="city"> <option selected="selected">[請選擇]</option> <option>青島</option> <option>煙臺</option> <option>濟南</option> </select> </td> </tr> <tr> <td></td> <td> <input type="submit" value="同意右側服務協議，提交注冊信息" disabled="disabled" /> <input type="reset" value="重置" /> </td> </tr> </table> </form> </body> </html> 圖如下： 第三天 課后習題復習。 如圖： 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表單作業</title> </head> <body> <form> <h1><span style="color: #F39900;"> 合作</span>意向書</h1> <p><span style="color: #F39900;">我們在收到您的需求后，會第一時間與您取得聯系。</span></p> <table> <tr> <td><b>公司名稱：</b></td> <td> <input type="text" name="com name" style="width: 420px;" /> </td> </tr> <tr> <td><b>姓名：</b></td> <td> <input type="text" name="name" style="width: 420px;" /> </td> </tr> <tr> <td><b>電話：</b></td> <td> <input type="text" name="phone" style="width: 420px;" /> </td> </tr> </table> <table width="600px"> <p><span style="color:#F39900;"><big>您需要的服務</big></span></p> <tr> <td> <input type="checkbox" name="1" value="網絡建設">網站建設與傳播 </td> <td> <input type="checkbox" name="1" value="電子商務">電子商務 </td> </tr> <tr> <td> <input type="checkbox" name="1" value="數字化展館">數字化展館 </td> <td> <input type="checkbox" name="1" value="多媒體互動">多媒體互動 </td> </tr> <tr> <td> <input type="checkbox" name="1" value="軟件服務">軟件服務 </td> <td> <input type="checkbox" name="1" value="移動開發">移動開發 </td> </tr> </table> <br /> <table> <tr> <td width="600px" height="110px" align="center" valign="center"> <input type="submit" name="submit" value="提交+" style="color: white;height: 37px;width: 110px; border:hidden;"> </td> </tr> </table> </form> <hr /> <hr /> <hr /><br /> <br /> <br /> <br /> <br /> <form> <table width="600px"> <tr> <td align="right">用戶名：</td> <td> <input type="text" name="username" /> </td> <td></td> <td></td> </tr> <tr> <td align="right">密 碼：</td> <td> <input type="password" name="password" /> </td> <td align="right">真實姓名：</td> <td> <input type="text" name="name" /> </td> </tr> <tr> <td align="right">確認密碼：</td> <td> <input type="password" name="password" /> </td> <td align="right">性別：</td> <td> <select name="sex" style="color:darkgray;"> <option value="男" selected="selected";">男</option> <option value="女">女</option> </select> </td> </tr> <tr> <td align="right">證件類型：</td> <td> <select name="zheng"> <option value="shenfenzheng" selected="selected">身份證</option> <option value="xueshengzheng">學生證</option> </select> </td> <td align="right">出生日期：</td> <td> <input type="text" name="day" /> </td> </tr> <tr> <td align="right">證件號碼：</td> <td> <input type="text" name="haoma" /> </td> <td align="right">國家：</td> <td> <input type="text" name="country" /> </td> </tr> <tr> <td align="right">聯系號碼：</td> <td> <input type="text" name="phone" /> </td> <td align="right">城市：</td> <td> <input type="text" name="city" /> </td> </tr> <tr> <td align="right">手機號碼：</td> <td> <input type="text" name="telephone" /> </td> <td></td> <td> </td> </tr> <tr> <td align="right">E-mail：</td> <td> <input type="text" /> </td> <td align="right">郵編：</td> <td><input type="text" name="youbian" /></td> </tr> <tr> <td align="right">聯系地址：</td> <td colspan="3"> <input type="text" name="dizhi" style="width: 460px;" /> </td> </tr> <tr> <td colspan="4" align="center"> <input type="reset" value="重 置" /> <input type="submit" value="注冊" style="color: white; border: hidden;"/> </td> </tr> </table> </form> </body> </html> 新內容： CSS樣式表(一) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Css常用選擇器</title> <!--HTML注釋--> <style type="text/css"> /*CSS語法必須卸載<style>標簽中*/ /*CSS注釋*/ /*【選擇器命名規范】 * 1.只能有字母、數字、下劃線組成； * 2.開頭不能使數字。 */ /*【標簽選擇器】 *1.寫法：HTML標簽名{ } *2.作用：選中所有對應的HTML標簽，并修改其樣式 */ li{ color: red; font-size: 36px; } /*【類選擇器】 * 1.寫法： .選擇器名字{} * 2.調用：在需要修改樣式的HTML標簽上，使用class="選擇器名" * 3.優先級：當作用于同一層時，class選擇器>標簽選擇器 */ .list{ color: blue; font-size: 48px; } /*【ID選擇器】 * 1.寫法：#選擇器名{} * 2.調用：在需要修改樣式的HTML標簽上，使用id="選擇器名" * 3.優先級：同一層時，id選擇器>class選擇器 * 4.ID選擇器是唯一的！同一頁面嚴禁出現同名ID！！！ */ #first{ color:darkorange; font-size: 52px; } /*【通用選擇器】 * 1.寫法: *{} * 2.作用：選擇頁面的所有HTML標簽 * 3.優先級：最低 */ /*【后代選擇器】 *1.寫法：選擇器1 選擇器2 …… 選擇器N {} *2.生效規則：選擇器2必須是選擇器1的后代…… */ div li{ background: brown; } /* *【子代選擇器】 * 1.寫法：選擇器1>選擇器2>……>選擇器N{} * 2.生效法則：選擇器2必須是選擇器1的直接子代 */ /*【交集選擇器】 * 1.寫法：選擇器1選擇器2……選擇器N{} * 2.生效規則：必須同時班組所有選擇器才生效 */ .qq{ font-size: 58px; } /*【并集選擇器】 *1.寫法：選擇器1，選擇器2，……，選擇器N{} *2.生效規則：滿足任意一個選擇器，均可生效 */ /*【選擇器優先級】 * 1.就近原則：近者優先。 * 2.當作用于同一層時：可由權重計算 * 權重劃分：標簽選擇器 1 * class選擇器 10 * id選擇器 100 * 行級樣式表stle="" 1000 */ </style> </head> <body> <div> <ul></ul> <li>這是列表1</li> <li class="list">這是列表2</li> <li class="list" id="first">這是列表3</li> <li class="qq">這是列表4</li> <li>這是列表5</li> </div> <div> <li>這是列表1</li> <li class="list">這是列表2</li> <li class="list" id="first">這是列表3</li> <li>這是列表4</li> <li>這是列表5</li> </div> </body> </html> 圖如下： CSS常用文本屬性 代碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS常用文本屬性</title> <style type="text/css"> .div{ width: 200px; height: 200px; background: #BCBCBC; /*[顏色常用單位] * 十六進制：#ffffff * 顏色名稱：red * RPG顏色:(255,255,255) * RPGA：第四位數，表示透明度。可選值0~1 * */ /*[CSS常用文本屬性] /* [CSS常用文本屬性] * 1、字體、字號： font-weight:字體的粗細，可選屬性值：bold加粗 lighter細體 100~900數值(400正常，700 bold) font-size:字體大小 **PX **%（瀏覽器默認字體大小的百分比，絕大部分默認16px） font-family:字體族，設置字體。 >>>多個字體樣式間用逗號分隔，瀏覽器解析時，會從左往右依次解析，選擇可用字體。 >>>一般前面使用具體字體名稱，最后一個使用字體族類名稱。 （常用字體族名稱：襯線體serif 非襯線體sans-serif(常用) 等寬體Monospace） >>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif; font-style:字體樣式,正常(normal) 斜體(italic) * font-variant：small-caps; 將字母轉為小型大寫字體。 (了解)font縮寫形式：font-style font-variant font-weight font-size line-height font-family >>> 使用注意事項 ： ① 順序必須嚴格按照上述順序； ② 多個樣式之間用空格分割，而且font-size/line-height 必須作為一對用/分割 ③ font-size和font-family必須指定，其他樣式不指定將采用默認樣式顯示； >>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif; 斜體 加粗 字號/行高 字體族(微軟雅黑，非襯線字體族) 2、字體顏色： color:字體顏色 opacity:透明度,0~1之間的數字。 調整時控件以及子控件均會透明，而使用rgba調整時，只會時本控件透明，子控件不會發生透明度變化。 3、行距、對齊等： line-height:行高 ① 像素單位 48px ② 不帶px 正常行高的倍數 ③百分數 同2 >>> 典型應用，調整控件中文垂直居中的方式：控件的height=控件的line-height text-align:塊級元素中文字的水平對齊方式 left center right letter-spacing:字符間距,字與字之間的間距 text-decoration:文本修飾 下劃線underline、刪除線line-through、上劃線overline、none overflow:控制超出范圍文本的顯示方式(auto 根據文字多少自動顯示滾動條，scroll始終顯示滾動條， hidden 超出范圍文本隱藏) 可以通過overflow-x overflow-y分別設置水平垂直方向 text-overflow:設置多余文字的顯示方式 clip裁剪掉 ellipsis省略號 >>>【重點】讓每行多余文字顯示省略號： ① white-space: nowrap; 如果是中文，需設置行末不斷行 ② overflow: hidden; 設置控件超出范圍隱藏 ③ text-overflow: ellipsis; 設置多余文本省略號顯示 white-space: nowrap; 設置中文行末不斷行顯示 word-break: 瀏覽器默認在空格處斷行，當一個單詞長度超出范圍時，會不斷行顯示， break-all 允許在單詞內換行。 text-shadow:文本陰影，有四個屬性值： ①水平陰影距離 必選，數值越大，陰影右移 ②垂直陰影距離 必選，數值越大，陰影下移 ③陰影模糊距離 可選，數值越大，陰影越模糊。默認為0，不模糊 ④陰影顏色 可選，默認為黑色 text-indent:首行縮進，可用像素值調整縮進大小 * text-stroke: -webkit-text-stroke: 0.2px #008000; 描邊的粗細，描邊的顏色 */ } .Q{ font-style: italic; font-weight: 600; } </style> </head> <body> <div class="div"> 這是div里面的文字！ </div> <br /> <div class="Q"> 這是div里面的文字！ </div> </body> </html> 案例圖： 第五天 一.復習昨天的課后練習 圖片如下： 01- 02- 03- 代碼如下： 01- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #table1 td{ color: #818181; font-size: 12px; /*height: 40px;*/ line-height: 30px; } #table1 .col1{ text-align: right; width: 70px; } #table1 td input{ width: 250px; height: 30px; } #table1 .checkbox{ width: 13px; height: 13px; } #table1 td a{ color: #5CC4EE; } #table1 .submit{ border: hidden; height: 40px; color: #FFFFFF; } #table1 td span{ color: #5A5A5A; } #table1 td span a{ color: #6DBD24; text-decoration: none; } </style> </head> <body> <h3>注冊</h3> <!--<br/>--> <table id="table1" cellspacing="10" > <tr> <td class="col1">真實姓名</td> <td> <input type="text" placeholder="用戶名（必填）" /> </td> </tr> <tr> <td class="col1">手機號/郵箱</td> <td> <input type="text" placeholder="請輸入手機號或郵箱" /> </td> </tr> <tr> <td class="col1">密碼</td> <td> <input type="password" placeholder="6-20位字母數字下劃線" /> </td> </tr> <tr> <td></td> <td> <input type="checkbox" class="checkbox" /> 我接受智聯招聘的<a href="#">用戶協議</a>和<a href="#">用戶協議</a> </td> </tr> <tr> <td></td> <td> <input type="submit" value="立即注冊" class="submit" /> </td> </tr> <tr> <td></td> <td> <span>已有賬號，<a href="#">直接登錄</a></span> </td> </tr> <tr> <td></td> <td> <span>使用其他方式登錄：</span> <a href=""><img src="../1_HTML基本標簽/img/icon.png" /></a> <img src="../1_HTML基本標簽/img/icon.png" /> <img src="../1_HTML基本標簽/img/icon.png" /> <img src="../1_HTML基本標簽/img/icon.png" /> </td> </tr> </table> </body> </html> 02- ? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #login div{ background-image: url(../2_CSS基礎語法/img/icon.gif); white-space: nowrap; text-indent: 35px; line-height: 25px; width: 30px; height: 25px; } /*#login .div1{ width: 30px; height: 25px; }*/ #login .div2{ background-position: -42px 0px; /*width: 30px; height: 25px;*/ } #login .div3{ width: 43px; height: 20px; /**/ background-position: 0px -30px ; text-indent: 0px; text-align: center; font-size: 12px; line-height: 17px; } </style> </head> <body> <div id="login"> <div class="div1"> 購物車 </div> <br /><br /> <div class="div2"> 幫助中心 </div> <br /><br /> <div class="div3"> 登錄 </div> </div> </body> </html> 03- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #ul li{ background-image: url(../2_CSS基礎語法/img/icon1.gif); list-style: none; background-repeat: no-repeat; font-family: "宋體",sans-serif; background-position:0px -80px ; width: 200px; height: 20px; text-align: center; line-height: 30px; font-size: 14px; } #ul .first{ width: 200px; height: 30px; background-position: 0px -50px; line-height: 30px; color: #FF6800; font-weight: bold; } #ul .last{ height: 35px; } </style> </head> <body> <ul id="ul"> <li class="first">商品分類</li> <li>商品分類1</li> <li>商品分類2</li> <li>商品分類3</li> <li class="last">商品分類4</li> </ul> </body> </html> -----------------------end （愛學習的小伙兒）
1、Head標簽內的信息用于描述網頁，即元數據
使用title：網頁的標題，即網頁選項卡上的文字
使用link ：
1、作用：用于為網頁連接各種文件。
2、常用屬性：
rel：用于標明被連接文件與當前文件的關系。此處選icon，表明被鏈接圖片 是當前網頁的icon圖標
type：表明被連接文件時什么類型。可以省略。
href：表明連接文件的地址
【meta標簽】 1、charset屬性：單獨使用。設置文檔字符集編碼格式。 >>>寫法：<meta charset="utf8"> >>>常見的中文編碼格式： GB-2312:國標碼，簡體中文 GBK：擴展的國際碼，簡體中文 UTF-8:萬國碼 Unicode碼 基本兼容各國語言 ? 2、http-equiv屬性：需配合content屬性使用。主要聲明瀏覽器如何解釋編譯文件 >>>寫法：<meta http-equiv="屬性值"content="屬性值詳細內容"> >>>常用屬性值：Content-Type HTML4.01之前的文檔內容編碼內容 refresh 網頁刷新 set-Cookie設置瀏覽器cookie緩存 3、name屬性：需配合content屬性使用。主要用于給搜索引擎提供必要信息。 >>>寫法：<meta name="屬性值" content="屬性值詳細內容"> >>>重要屬性值： author 作者，聲明網站作者，常用公司網址表示 keywords 網站關鍵字，多個關鍵字，用英文逗號分隔 description 網頁描述，搜索引擎顯示在title下的描述內容 *http-equiv和name屬性，必須與content屬性配合使用。前兩者只是用于聲明即將修改那些屬性值，而實際的屬性內容，在content中描述 <!--作者--> <meta name="author" content="http://www.jredu100.com" /> <!--網頁關鍵字--> <meta name="keywords" content="html5,網頁,Web前端開發" /> <!--網頁描述--> <meta name="description" content="這是我在杰瑞教育開發的第一個網頁" /> 圖片如下： 2、標簽分類 <!--[HTML的標簽分類] 1、塊級標簽：自動換行，前后隔一行。 2、行級標簽：按行逐一顯示。 （是否自動換行使我們判定塊級標簽的重要指標） --> <!--[常見的塊級標簽] 標題標簽<h1></h1>……<h6></h6> 水平線<hr/> 段落<p></p> 換行<br/> 引用<blockquote></blockquote > 預格式<pre></pre> --> <!-- 標題標簽<1><2><3><4><5><6>：默認加粗，H1最大，H6最小 --> <h1>一級標簽</h1> <h2>一級標簽</h2> <h3>一級標簽</h3> <h4>一級標簽</h4> <h5>一級標簽</h5> <h6>一級標簽</h6> <!--水平線標簽<hr />--> <hr /> <!--段落<p></p>--> <!--換行<br/>--> <p>這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落 這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落</p> <p>這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落 <br/>這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落</p> <!--引用<blockquote></blockquote> 1表明標簽中的文字，為因用戶的內容。瀏覽器顯示為段落縮進 2cite屬性，表明引用的來源，一般為引用的網址URL --> <blockquote cite="http.baidu.com">這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落 這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落這個是段落</blockquote> <!--預格式<pre></pre> 預格式:在瀏覽器解析式，會按照等寬字體顯示，并且保留標簽內的空格和回車。常用于保留代碼格式。 --> <pre> what are you from？ i am from china </pre> <p> what are you from？ i am from china </p> <p>what are you from？</p> <p> i am from china </p> 案例-唐詩 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <h1>唐詩三百首</h1> <hr /> <h2>目錄</h2> <hr /> <p>第一首：靜夜思</p> <p>第二首：憶江南</p> <p>第三首：長恨歌</p> <hr /> <h3>靜夜思</h3> <p>作者：李白</p> <p>床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。</p> <hr /> <h3>【李白簡介】</h3> <p>李白，字太白，號青蓮居士，自稱與李堂皇室同宗，祖籍隴西成紀（今甘肅天水附近），生于中亞碎葉。據野史記載，幼時隨父遷居綿州昌隆（今四川江油）青蓮鄉......</p> <pre> ↖↑↗ ←㊣→ ↙↓↘</pre> <body> </body> </html> 圖片如下： 列表練習： </head> <!--[有序列表ol order list]--> <ol> <li>列表第一項</li> <li>列表第二項</li> <li>列表第三項</li> <li>列表第四項</li> </ol> <!--[無序列表ul unorder list]--> <ul> <li>列表第一項</li> <li>列表第二項</li> <li>列表第三項</li> <li>列表第四項</li> </ul> 圖片如下： <!--[定義描述列表] <dl> <dt>標題</dt> <dd>描述項</dd> </dl> 一般情況下，標題dt只有一項。描述項dd可以有N多項。 瀏覽器顯示時，標題頂格顯示，dd會縮進顯示。 --> <dl> <dt>這是dl列表的標題</dt> <dd>列表第一項</dd> <dd>列表第二項</dd> <dd>列表第三項</dd> <dd>列表第四項</dd> </dl> 圖片如下： 列表練習： <h1>商品信息</h1> <h3>產品類別</h3> <hr /> <ul> <li>筆記本</li> <ul> <li>筆記本</li> <li>手機</li> <li>家電</li> </ul> </ul> <hr /> <dl> <dt>聯想電腦</dt> <dd>產品型號： 聯想IdeaPad Y450A-TFU(NBA紀念版)</dd> <dd>價格：4999元</dd> <dd>所在地：北京</dd> </dl> <hr /> <h3>購物流程</h3> <ol> <li>確認購買信息</li> <li>付款到貴美</li> <li>確認收貨</li> <li>付款給商家</li> <li>雙方評價</li> </ol> 圖片如下： 圖片組合標簽（塊級） <!--[圖片組合標簽figure] 1、<figure></figure>標簽有兩個子標簽 <img src>"">：一幅圖片,表示圖片的路徑。 <figcaption></figcaption>：圖片的標題 2、瀏覽器顯示為：圖片與標題上線排列，且整體向后縮進一個單位。 --> <figure> <img src="img/logo.png" /> <figcaption>折是圖片的標題</figcaption> </figure> 圖片如下: 分區標簽（塊級） <!--[分區標簽div] 常配合CSS使用，為網頁中的常用分區標簽，常用于網頁布局使用 --> <div style="width: 100%;height: 100px;"> 這是div里面的文字 <h1>這是div里面的標題</h1> </div> 圖片如下: <!-- [常見的行級標簽]轉載于:https://www.cnblogs.com/zhuanzhibukaixin/p/6534551.html
總結
以上是生活随笔為你收集整理的HTM5新手学习的一些日常总结，相互交流和相互学习。的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 值得收藏的十种常用的CSS框架-蛙课网
- 下一篇： XMReport-标签设计打印神器