Html基础知识详解
一定要做的符合客戶要求，不是自己認為對的。
一.基礎標簽
1.1 大小顏色位置
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Html和CSS的關系</title><style type="text/css">h1{font-size：12px;color:#930;text-align:center;}</style></head><body><h1>Hello World!</h1></body> </html>1.2 強調
如在網上商城中，某產品的打折后的價格是需要強調的。如下圖。
代碼實現：
?
1.3 span
<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。
我來試試:把“美國夢”設置為藍色
1. 在右部編輯器中的第13行對“美國夢”文本加上<span>標簽。
2. 在第8行輸入color:blue;，為<span>元素設置文本顏色為藍色。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>了不起的蓋茨比</title> 6 <style> 7 span{ 8 color:blue; 9 } 10 </style> 11 </head> 12 <body> 13 <p>1922年的春天，一個想要成名名叫尼克?卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道<span>美國夢</span>，他搬入紐約附近一海灣居住。</p> 14 <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p> 15 </body> 16 </html>1.4 引用
比如引用一句詩歌，用雙引號，網頁利用<q></q>，自動識別為雙引號；
上一節<q>標簽不是也是對文本的引用嗎？不要忘記<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>標簽。
??????如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用<blockquote>。
注意事項blockquote，不是blackquote，瀏覽器對<blockquote>標簽的解析是縮進樣式。
既然縮進了，那么不用加雙引號。
1.5 換行
比如一手絕句，前三行每行后面<br/>，最后一行不需要。
1.6 割線
<hr/>和<br/>一樣，是一個灰色的分割線。
1.7 address
地址標簽，其實就是斜體，功能和em一樣。
1.8 代碼標簽
單行用<code></code>，多行用<pre></pre>，其實pre在需要顯示預設文本的格式的時候均可以使用。
1.9列表
<ul><li></li> </ul>//有序 <ol><li></li> </ol>二.Div的應用
2.1 table
<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。
<th>…</th>：表格的頭部的一個單元格，表格表頭。
摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
????語法：<table summary="表格簡介文本">
1. 在右部編輯器中為表格添加摘要，摘要的內容為“本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量”。
2. 在右部編輯器中為表格添加標題，標題的內容為“2012年到2013年庫存記錄”。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>認識table表標簽</title> 6 <style type="text/css"> 7 table tr td,th{ 8 border:1px solid #000; 9 } 10 </style> 11 </head> 12 <body> 13 <table summary="本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量"> 14 <caption>2012年到2013年庫存記錄</caption> 15 <tr> 16 <th>產品名稱 </th> 17 <th>品牌 </th> 18 <th>庫存量（個） </th> 19 <th>入庫時間 </th> 20 </tr> 21 <tr> 22 <td>耳機 </td> 23 <td>聯想 </td> 24 <td>500</td> 25 <td>2013-1-2</td> 26 </tr> 27 <tr> 28 <td>U盤 </td> 29 <td>金士頓 </td> 30 <td>120</td> 31 <td>2013-8-10</td> 32 </tr> 33 <tr> 34 <td>U盤 </td> 35 <td>愛國者 </td> 36 <td>133</td> 37 <td>2013-3-25</td> 38 </tr> 39 </table> 40 </body> 41 </html>2.2 超鏈接
title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好）。
加入超鏈接后為藍色，點擊后為紫色。
發郵件
2.3圖像
1、src：標識圖像的位置；
2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件
2.4 textarea
1、<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4、在<textarea></textarea>標簽之間可以輸入默認值。
舉例：
<form method="post" action="save.php"><label>聯系我們</label><textarea cols="50" rows="10" >在這里輸入內容...</textarea> </form>
2.4 label
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。?
注意：標簽的?for 屬性中的值應當與相關控件的?id 屬性值一定要相同。
我來試試：完成下面任務
要求：慢跑、登山和籃球復選框要與各自的復選項用for屬性關聯。效果圖如下
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>form中的lable標簽</title> 6 </head> 7 8 <body> 9 <form> 10 <label for="sport">你對什么感興趣</label></br> 11 慢跑<input type="checkbox" name="gender" id="sport" /> 12 <br /> 13 登山<input type="checkbox" name="gender" id="sport" /> 14 <br /> 15 籃球<input type="checkbox" id="sport" > 16 17 </form> 18 19 </body> 20 </html>
三、補充
網頁中所有顯示的內容都要放在標簽中。
標簽不區分大小寫。
網頁中展示的內容在body里。
em標簽是強調，就是斜體。
Strong加粗。
SPAN標記有一個重要而實用的特性，即它什么事也不會做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。
例子如下：
<p><span>some text.</span>some other text.</p>
例子解釋如下：
如果不對 span 應用樣式，那么 span 元素中的文本與其他文本不會任何視覺上的差異。盡管如此，上例中的 span 元素仍然為 p 元素增加了額外的結構。
可以為 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便于對 span 應用樣式。
總結
以上是生活随笔為你收集整理的Html基础知识详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cheerio的小案例
- 下一篇： 屏幕适配 部分知识点总结，CSDN小冰原