1、web標準
一.HTML介紹:1.概述:HTML全稱Hyper Txet Macepu Language,翻譯爲超文本標記語言,不是編程語言,是一種描述性的標記語言,用於描述超文本內容的顯示方式,好比字體,顏色,大小等.HTML 超文本:音頻,視頻,文件,稱爲超文本. 標記:<單詞或字母>這樣的格式稱爲標記,一個HTML頁面就是由各類標記組成的.沒有編譯的過程,HTML頁面直接由瀏覽器解析執行 HTML除了語義什麼都沒有2.HTML標籤對:標籤對可以給文本不一樣的語義3.HTML的網絡術語: 網頁,由各類標記組成的頁面就叫網頁 標記:<p>這樣的標記稱爲開始標記,</p>這樣的標記稱爲結束標記,也叫標籤,每一個標籤都規定好了,特殊的含義 元素:<p>內容</p>這樣的總體稱爲元素4.HTML規範 4.1編寫規範: HTML不區分大小寫,可是儘可能用小寫 HTML頁面的後綴名是html或htm(因爲有一些系統不支持後綴名的長度超過3個字符) HTML的結構: 聲明的部分:主要高告訴瀏覽器,咱們這個頁面使用的是哪一個標準,HTML標準 head部分:將不會顯示在頁面上的一些額外的信息告訴服務器 body部分:正常顯示在頁面上的內容放在此標籤內 <!--文檔的聲明,告訴咱們執行的是HTML標準--> <!DOCTYPE html> <html lang="en"> <head> <!--網站的配置--> <meta charset="UTF-8"> <!--標題標籤--> <title>shanghongyun</title> </head> <body> 正常顯示在頁面上的內容放在此標籤內 </body> </html> 4.2基本語法特徵: HTML對換行不敏感,對tab不敏感 空白摺疊 嚴格封閉5.結構詳解: 1.頭標籤: 頭標籤放在頭部之間,包含了<title>,<meta>,<link>,<style> <title>:整個網頁的標題,在瀏覽器最上方顯示 <title>中國鐵路</title> <meta>:提供有關頁面的基本信息 (1)http-equiv屬性,與之對應的屬性值爲content 兩秒後跳到對應的網址 <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> refresh是固定的 2是兩秒 跳到這個網址 指定文檔的內容類型,編碼類型 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 內容類型 編碼類型 告訴IE瀏覽器,以最高級模式渲染當前網頁 <meta http-equiv="x-ua-compatible" content="IE=edge"> (2)name屬性,與之對應的屬性爲content,主要用於頁面的關鍵字和描述 便於搜索引擎查找和分類用的關鍵字(關鍵字之間用逗號隔開) <meta name="keywords" content="文字,圖片,視頻"> 告訴搜索引擎,這個頁面是幹什麼的 <meta name="Description" content="介紹一下網易是幹什麼的"> <link>:定義文檔與外部資源的關係 <style>:定義內容樣式表與頁面的關係 2.字體標籤 字體標籤包括:h1-h6,<font>,<u>,<b>,<strong><em>,<sup>,<sub> h1-h6:定義標題的大小(h1-h6從大到小),具備align屬性,屬性值能夠是:center,left,right <h1 align="center">火車票</h1> <h2 align="left">火車票</h2> <h3 align="right">火車票</h3> <h4>火車票</h4> <h5>火車票</h5> <h6>火車票</h6> <strong>:加粗 <strong>火車票</strong> <u>:加下劃線 <u>火車票</u> <i>:斜體 <i>火車票</i> <em>:斜體 <em>火車票</em> <sup>:上標 <sub>:下標 5<sup>2</sup> 4<sub>3</sub> <br>:換行 火車票<br>zdfsdf <del>:刪除線 <del>79</del> <hr>:畫一條橫線 3.特殊字符:  :空格 <:小於號 >:大於號 ©:版權 火 車<票>©(直接連起來用就行) 更多特殊字符:http://tool.chinaz.com/Tools/HtmlChar.aspx 4.排版標籤: HTML的標籤是分等級的,HTML將全部的標籤分爲兩級: 文本級標籤:p,span,a,b,i,u,em 文本標籤裏只能放文字圖片和表單元素 容器級標籤:div,h系列,li,dt,dd 容器級標籤裏能夠聽任何東西 段落標籤:<p>,有aligen屬性,屬性值包括:left,center,right <p align="center">段落一</p> <p>段落二</p> ***p標籤是一個文本級標籤 塊級標籤:<div>,<span> div的語義是分割,span的語義是範圍,跨度 <span>和<div>的區別:<span>是不換行的,<div>是換行的,div是用來劃分大的區域的,span是用來劃分小的區域的 <div>連用時,行與行之間沒有間隙,<p>連用時,行與行之間有間隔 5.超連接 <a> 具備herf,id,class,title屬性, a是一個文本級標籤 <a href="http://www.baidu.com" id='ancher' class='foot',title='歡迎你'>百度一下</a> 這裏面的id是不能夠重複的,class是能夠重複的,title鼠標在上面懸浮時,過一段時間就會顯示的東西,title是每個標籤都具備的屬性 6.圖片標籤 <img>具備src,weight,height,title,align,alt屬性 <img src=".\18.jpg" alt="很差意思放出來" height="100"> src 是要打開的圖片,已用絕對路徑,也能夠用相對路徑,也能夠用網上的路徑 alt 是圖片顯示不出來時,顯示出來的文字 height 是圖片的高度,也有寬度weight屬性,同時使用時要注意比例,不要失真,單個使用時,自動調整比例,寬和高的單位都是px html中: 分類: (1).行內標籤 (1)在一行內顯示 span strong em i del a (2)不能設置寬高 默認的寬和高 是內容填充 1.1 行內塊標籤 img input (1) 在一行內顯示 (2) 能夠設置寬高 (2).塊級標籤 div p h1~h6 (1)獨佔一行 (2)能夠設置寬高,若是不設置寬和高,默認的寬是父親的100%。高度是內容的高度 7.表單 <form> <div> <form action="http://www.baidu.com/s"> <input type="text" name="wd" value="楊丞琳"> <input type="submit" value="搜索"> </form> </div> <div> <form action="http://www.baidu.com/s"> <input type="text" name="wd" value=""> <input type="password" name="pwd" value=""> <input type="submit" value="搜索"> </form> </div>