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