您好,登錄后才能下訂單哦!
HTML含義:
HTML是的英文全稱是Text Mark-up Language(超文本標記語言)的縮寫,它也是一種制作萬維網頁面的標準語言,相當于定義統一的一套規則,這樣可以讓瀏覽器根據標記語言的規則進行解釋。
超級文本標記語言是標準通用標記語言下的一個應用,也是一種規范,一個中標準,它通過標記符號來標記要顯示網頁中的各個部分。網頁文件本身是一種文本文件,通過文本文件中添加標記符,可以告訴瀏覽器如何顯示其中的內容(如:文件如何處理,畫面如何安排,圖片如何顯示等).
網頁的組成:
一個網頁一般由兩部分組成:
HTML(Hypertext Markup Language)
CSS(Cascade Style Sheets)
HTML負責描述網頁的結構和內容(如標題、導航欄等)
<head>和</head>之間的內容,是元信息和網站的標題,元信息一般不顯示出來,但是記錄了了這個HTML文件的很多描述性質的信息
<body>和</body>之間的內容,是瀏覽器展示出來的,用戶看到的頁面效果。也就是說這里是網頁的支柱或者說主體,即body的身體之意
<html>和</html>說明這個文件是一個網頁。告訴瀏覽器這個網頁的開始和結束。包含了之后的連個元素<head>和</head>|<body>和</body>
HTML文檔
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
代碼解釋:
DOCTYPE:告訴瀏覽器使用什么樣的html或者xhtml規范來解析html文檔
DOCTYPE的模式:
BackCompat:標準兼容模式未開啟(或叫怪異模式【Quirks mode】、混雜模式)
CSS1Comat:標準兼容模式已開啟(或叫做嚴格模式[Standards mode/Strict mode])
head部分
1、meta(metadata information)
提供有關頁面的元信息,例如:頁面編碼、刷新、跳轉、針對搜索引擎和更新頻率的描述以及關鍵詞
①、頁面編碼
<meta charset="UTF-8"> #指定編碼類型為UTF-8
②、刷新和跳轉
<meta http-equiv="refresh" content="5"/> #設置每隔5秒刷新頁面一次
<meta http-equiv="refresh" content="1:Url=http://www.baidu.com"/> #指定1秒后跳轉到百度頁面
③、關鍵字
關鍵字作用其實就是用來讓爬蟲之類的收錄程序,當他們在爬我們網站的時候,如果你有關鍵字,那么他們會優先把關鍵字收錄到他們的記錄中,比如百度,如果他們收錄之后,然后我們在搜索關鍵字的時候就能找到咱們的網站。
<meta name="keywords" content="python 21天學會Python html語言精通">
④、描述
例如一個51cto里就有一個描述
<meta name="description" content="51cto技術博客 領先的IT技術博客">
⑤、X-UA-Compatible
X-UA-Compatible 這個是IE8特有的,知道即可,因為做前端的同學都很害怕IE因為他們問題比較多各個版本問題很詭異,當IE8的時候微軟想把各個版本的統一,那么這個參數就出現了,他為了向下兼容,如下的代碼如果使用IE8的時候他會以IE7的模式運行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
網頁頭部信息,如下所示:
HTML文件各標簽舉例說明如下:
<!DOCTYPE html><!--定義通用規則標準--> <html lang="en"> <head> <meta charset="UTF-8"> <!--定義字符編碼--> <meta http-equiv="refresh" Content="5"><!--每5秒鐘刷新一次請求你頁面--> <meta http-equiv="refresh" Content="5" Url=http://www.baidu.com><!--5秒鐘后刷新后跳轉到百度--> <title>Python之路</title> <link rel="shortcut icon" href="favicon.ico"> </head> <body> <h2 >addafagag</h2><!--不管內容多少一直占用整行的標簽為塊級標簽 --> <a >"汽車之家"</a><!--根據內容自己有多少內容占多少空間的標簽叫做內嵌標簽 --> <p>段落標簽①</p><!--段落標簽!--> <br/><!--換行標簽--> <p>段落標簽②</p><!--換行標簽--> <br/><!--換行標簽--> <a>Python之路</a><!--超鏈接標簽--> <br/> <a href="www.python.org">python之路</a><!--超鏈接實現跳轉,在原來的頁面打開--> <br/><!--換行標簽--> <a target="_blank" href="www.python.org">python之路</a><!--超鏈接實現跳轉,在新頁面打開,target的屬性為_blank表示在新的頁面打開--> <br/> <a href="#要跳轉的位置參數">python之路</a><!--錨的定位,注意要有#開頭--> <br/> <a href="#a1">python之路</a><!--錨的定位--> <br/> <div id="a1" > id為a1的內容所在位置 </div> <div id="a2" > id為a2的內容所在位置 </div> <h2>h2標簽作用是將標簽加大加粗</h2><!--H標簽的作用僅僅是將標簽字體進行大小粗細設置--> <h3>h3標簽作用是將標簽加大加粗</h3> <h4>h4標簽作用是將標簽加大加粗</h4> <h5>h5標簽作用是將標簽加大加粗</h5> <select> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">廣州</option> </select> <!--單選標簽-select--> <select size=2> <option value="1">上海</option> <option value="2">北京</option> <option value="2" selected="selected">廣州</option> </select> <!--多顯標簽,最多顯示2個--> <select multiple="multiple" size="4"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">廣州</option> <option value="4">深圳</option> <option value="5" selected="selected">武漢</option> </select> <!--多選標簽,在顯示4個的基礎上可以進行多選--> <select> <optgroup label="湖北省"> <option>武漢市</option> <option>襄陽市</option> <option>宜昌市</option> </optgroup> <optgroup label="廣東省"> <option>廣州市</option> <option>深圳市</option> <option>珠海市</option> </optgroup> </select> <!--分組標簽,該標簽不能進行選擇,只是對元素進行了分組--> <!--復選標簽--> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <!--input標簽系的復選框,類型為checkbox 默認是沒有選擇,如果默認要選擇則需要添加如下屬性字段checked="checked" --> <input type="checkbox" checked="checked" /> <!-- radio標簽,單選標簽,默認請三個選項都可以選擇 --> <input type="radio"/> <input type="radio"/> <input type="radio"/> <!-- radio標簽實現單選功能,可以在標簽內添加字段name="gender"來實現 --> <hr/> <input type="radio" name="gender"/> <input type="radio" name="gender"/> <input type="radio" name="gender"/> <!--標準的單行文本輸入框,類型為text--> <input type="text"/> <!--通過value屬性對文本輸入框設置默認值 --> <input type="text" value="請輸入內容"> <!--標準的密碼輸入框,類型為password --> <input type="password"/> <!--標準的email類型輸入框,類型為email,輸入類容必須滿足郵件格式,一般用于高版本瀏覽器IE或者chrome Firefox--> <input type="email"/> <!-- 標準的按鈕標簽類型為button或者為submit,當類型為submit的value值默認為提交--> <input type="button"/> <input type="submit"/> <!--值可以通過value屬性來設置,這里設置提交 --> <input type="button" value="提交"/> <input type="submit" /> <!--標準的選擇上傳文件標簽其類型為file --> <input type="file"/> <!--多行輸入,可以通過css來對輸入框的長寬進行自定義設置 ---> <textarea>Python之路Python之路Python之路Python之路</textarea> <!--通過css來設置輸入框的長寬 --> <textarea >Python之路Python之路Python之路Python之路</textarea> <!--form表單 ---> <form> <p> 用戶名:<input type="text"> </p> <p> 密 碼:<input tpye="password"> </p> </form> <hr/> <form action="提交到后臺的地址"> <p> 用戶名:<input type="text"> </p> <p> 密 碼:<input tpye="password"> </p> <input type="submit" value="提交"> <input type="button" value="按鈕"> </form> <!--submit和button的區別是,如果submit在form標簽內,就會提交整個form標簽到后臺--> <!--Label標簽作用,增加用戶體驗 --> <div> <h2>Label標簽</h2> 姓名:<input type="text"/> 婚否:<input type="checkbox"/> </div> <hr/> <!--在使用label標簽后,如果要在輸入框中輸入內容,只需要鼠標點擊旁邊的"姓名"或者"婚否"就可以自動將鼠標移至輸入框內而不需要特意點擊輸入框進行輸入 --> <div> <label for="name_1"> 姓名: <input id="name_1" type="text"/> </label> </div> <div> <label for="name_2"> 婚否: <input id="name_2" type="checkbox"/> </label> </div> <!--列表序號,ul是黑點,ol是數字序號--> <ul> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> </ul> <ol> <li>ol.li</li> <li>ol.li</li> <li>ol.li</li> </ol> <!--分組dl --> <dl> <dt>湖北省</dt><!--dt表示標題 --> <dd>武漢市</dd><!--dd表示內容 --> <dd>荊州市</dd> <dt>湖南省</dt> <dd>長沙市</dd> <dd>岳陽市</dd> </dl> <!--table 常見的表格標簽 tr表示行,td表示列--> <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </table> <!--table表格添加邊框可以通過屬性border來設置--> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <!-- table 行和列合并用屬性"colspan"和"rowspan"來設置 --> <table border="1"> <tr> <td colspan="2">1</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <!--table標簽的另外一種表示結構 --> <table border="2"> <thead> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> <th>標題4</th> </tr> </thead> <tbody> <tr> <td colspan="2">1</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> <br> <hr/> <!-- fieldset標簽 --> <fieldset> <legend>登錄</legend> <p>用戶名:</p> <p>密碼:</p> </fieldset> </body> </html>
HTML常用標簽分組:
對于a標簽屬性小竅門:
1、知識點屬性,a標簽屬性,在其調用樣式中添加:
cursor:pointer
使其指導目標時鼠標變成小手
2、a標簽中如果想實現鼠標放在目標位置時下劃線消失,在對應的樣式中添加:
text-decoration:none
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。