https://www.bilibili.com/video/av15241731 筆記來源:黑馬程式員 HTML(Hyper Text Markup Language):超文本標簽語言 HTML標簽關係: 1.嵌套關係 2.併列關係 Sublime快捷鍵:html:5+Tab 或者!+Tab可以生... ...
https://www.bilibili.com/video/av15241731 筆記來源:黑馬程式員 HTML(Hyper Text Markup Language):超文本標簽語言 HTML標簽關係: 1.嵌套關係 2.併列關係 Sublime快捷鍵:html:5+Tab 或者!+Tab可以生成如下模板: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> =============================================================================================================== <!DOCTYPE html>這句是告訴我們使用哪個html版本. <!DOCTYPE>標簽位於文檔的最前面,用於向瀏覽器說明當前文檔使用哪種HTML或XHTML標準規範.必須在開頭處使用<!DOCTYPE> 該標簽為所有的XHTML文檔指定XHTML版本和類型,只有這樣瀏覽器才能按指定的文檔類型進行解析. 註意:一些老網站可能用的還是老版本的文檔類型比如XHTML之類,但我們學習的是HTML5,而且HTML5的文檔類型相容性很好(向下相容原則), 所以大家放心的使用HTML5的文檔類型就好了. xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本.此版本文檔用sublime text創建方法： html:xt + tab pc端可以使用xhtml 1.0，也可以使用html5，html5是向下相容的 此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab 上述兩種文檔的區別: 1、文檔聲明和編碼聲明 2、html5新增了標簽元素以及元素屬性 “<html>”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它一般作為分析統計用。 “<head>”標簽和“<body>”標簽是它的第一層子元素，“<head>”標簽裡面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式， 外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“<body>”內編寫網頁上顯示的內容。 <meta charset="UTF-8">用於定義字元集. UTF-8 是目前最常用的字元集編碼方式,常用的字元集編碼方式還有gbk和gb2312 gb2312:簡單中文,包括6763個漢字 BIG5:繁體中文,港澳台使用 GBK:包含全部中文字元集,是GB2312的擴展,加入對繁體的支持,相容GB2312 UTF-8:包含全世界所有國家需要用到的字元,萬國碼的一種. html文檔規範 xhtml制定了文檔的編寫規範，html5可部分遵守，也可全部遵守，看開發要求。 1、所有的標簽必須小寫 2、所有的屬性必須用雙引號括起來 3、所有標簽必須閉合 4、img必須要加alt屬性(對圖片的描述) HTML標簽: 1.排版標簽: 排版標簽主要和CSS搭配使用,顯示網頁結構的標簽,是網頁佈局最常用的標簽. 2.標題標簽: 為了使網頁更具有語義化,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的標題標簽,即:h1-h6. h1標簽因為重要,要儘量少用. 3.段落標簽:<p>文本內容</p>,單詞縮寫:paragraph 段落標簽是HTML文檔中最常見的標簽,預設情況下,文本在一個段落中會根據瀏覽器視窗的大小自動換行. 4.水平線標簽<hr />,單詞縮寫horizontal,這是一個單標簽. 用於在網頁中將段落與段落隔開,使文檔結構清晰. 5.換行標簽<br />,單詞縮寫:break 在HTML中,一個鍛落中的文字會從左到右依次排列,直到瀏覽器視窗的右端,然後自動換行.如果希望某段文字強制換行,就需要使用該標簽. 6.div span標簽 div,span是沒有語義的,是我們網頁佈局主要的2個盒子. div就是division的縮寫,分割,分區的意思,其實是很多div來組合網頁. span,跨度,跨距,範圍 語法格式:<div>這是頭部</div><span>今日價格</span> 7.文本格式化標簽 在網頁中,有時需要為文字設置粗體,斜體或下劃線效果,這裡就需要用到HTML中的文本格式化標記,使文字以特殊的方式顯示. <em></em>:表示語氣中的強調詞 <b></b>,<strong></strong>:文字以粗體方式顯示(XHTML推薦使用strong) <i></i>和<em></em>:文字以斜體方式顯示(XHTML推薦使用em) <s></s>和<del></del>:文字以加刪除線方式顯示(XHTML推薦使用del) <u></u>和<ins></ins>:文字以加下劃線方式顯示(XHTML推薦使用u) <b>,<s>,<u>只使用,沒有強調的意思 <strong>,<em>,<del>,<ins>語義更加強烈. 標簽屬性: HTML屬性基本語法格式如下: <標簽名 屬性1="屬性值1" 屬性2="屬性值2"...>內容</標簽名> 在上面的語法中: 1.標簽可以擁有多個屬性,必須寫在開始標簽中,位於標簽名後面. 2.屬性之間不分先後順序,標簽名與屬性,屬性與屬性之間均以空格分開. 3.任何標簽的屬性都有預設值,省略該屬性則取預設值. 圖像標簽img(重點) 單詞縮寫:image HTML網頁中任何元素的實現都要依靠HTML標簽,要想在網頁中顯示圖像就需要使用圖像標簽.其基本語法格式如下: 該語法中src屬性用於指定圖像文件的路徑和文件名,他是img標簽的必需屬性. <img src="圖像url" /> <img />標簽的屬性 scr-->url-->圖像的路徑 alt-->文本-->圖像不能顯示時的替換文本 title-->文本-->滑鼠懸念時顯示的內容 width-->像素(XHTML不支持%頁面百分比)-->設置圖像的寬度 height-->像素(XHTML不支持%頁面百分比)-->設置圖像的高度 圖片會根據寬或高等比縮放,要保持圖像原比例只需設置一個寬屬性或一個高屬性. border-->數字-->設置圖像邊框的寬度 鏈接標簽(重點) 單詞縮寫:anchor,錨 在HTML中創建超鏈接非常簡單,只需要用標簽環繞需要被鏈接的對象即可,語法如下: <a href="跳轉目標" target="目標視窗的彈出方式">文本或圖像</a> href,用於指定鏈接目標的Url,當為標簽應用href屬性時,它就具有了超鏈接的功能.href是 Hypertext Reference的縮寫,意思是超文本引用 其中的target屬性,用於指定鏈接頁面的打開方式,其取值有_self和_blank兩種,其中self為預設值,blank為在新視窗中打開方式. 註意: 1.外部鏈接需要添加 http://www.baidu.com 2.內部鏈接 直接鏈接內部頁面名稱即可,比如 <a herf="index.html">頁面</a> 3.如果當時沒有確定鏈接目標是,通常將鏈接標簽的href屬性值定義為"#",表示鏈接暫時為一個空鏈接. 4.不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像,表格,音頻,視頻都可以添加超鏈接. 錨點定位(難點) 通過創建錨點鏈接,用戶能夠快速定位到目標內容 創建錨點鏈接為分兩步: 1.使用<a href="#id名">鏈接文本</a>來創建鏈接文本 2.使用相應的id名標註跳轉目標的位置 base標簽 base標簽是個單標簽,可以設置整體鏈接的打開狀態. 示例:<base target="_blank" /> 特殊字元標簽 " "-->空格--> "<"-->小於號-->< ">"-->大於號-->> "&"-->和號-->& "￥"-->人民幣-->¥ "©"-->版權-->© "®"-->註冊商標-->® "℃"-->攝氏度-->° "+-"-->正負號-->&plusms; "*"-->乘號-->× "/"-->除號-->÷ "²"-->平方-->² "³"-->立方-->³ 註釋標簽: <!-- 註釋語句 --> {# 註釋語句 #} 路徑(重點) 相對路徑: 1.圖像文件和HTML文件位於同一文件夾,只輸入圖像文件的名稱即可,如<img src="logo.gif" /> 2.圖像文件位於HTML文件的下一級文件夾,輸入文件夾名和文件名,之間用"/"隔開,如<img src="img/img01/logo.gif" /> 3.圖像文件位於HTML文件的上一級文件夾,在文件名之前輸入"../",如果是上兩級,輸入"../../",以此類推,如<<img src="../logo.gif" /> 絕對路徑(儘量不要用,移值性差) 文件絕對路徑示例:C:\Users\allen\Desktop\logo.gif 網頁絕對路徑:http://www.baidu.com 列表 無序列表ul(重點),格式如下: ul里只能嵌套li標簽,直接在ul標簽中輸入其他標簽或者文字的做法是不被允許的. li標簽相當於一個容器,可以容納所有元素 無序列表會帶有自己樣式的屬性,要改變其預設屬性可以通過css進行. <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ... </ul> 有序列表ol(重點),格式如下: <ol> <li></li> <li></li> <li></li> </ol> ol標簽與ul標簽特性基本相當.但儘量多用ul少用ol. 自定義列表(理解) 定義列表通常用於對術語或名詞進行解釋和描述,定義列表的列表項前沒有任何項目符號,基本語法如下: <dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞2解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ... </dl> 表格table(會使用),使用例子:http://finance.sina.com.cn/stock/ 中的板塊行情,示例如下: <table> <caption>table title and/or explanatory text</caption> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> table常用標簽 1、table標簽：聲明一個表格 2、tr標簽：定義表格中的一行 3、td和th標簽：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格 註:tr標簽裡面只能放td標簽,td標簽相當於一個容器,可以任何標簽. 表格屬性: border-->設置表格的邊框(預設border="0"無邊框)-->像素值 cellspacing-->設置單元格與單元格邊框之間的空白間距-->像素值,預設為2個像素 cellpadding-->設置單元格內容與單元格邊框之間的空白間距-->像素值,預設為1個像素 width-->寬度 height-->高度 align-->設置表格在網頁中的水平對齊方式-->left,center,right valign 設置單元格中內容的垂直對齊方式-->top,middle,bottom colspan 設置單元格水平合併 rowspan 設置單元格垂直合併 表頭標簽 表頭一般位於表格的第一行或第一列,其文本加粗居中.設置表頭只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可. 表格標題:caption caption標簽必須緊隨table標簽之後,只能對每個表格定義一個標題.通常這個標題會被居中於表格之上. 合併單元格 跨行合併:rowspan,跨列合併:colspan 合併單元格的思想: 將多個內容合併的時候,就會有多餘的東西,把它刪除. 合併的順序:先上,先左 傳統佈局： 傳統的佈局方式就是使用table來做整體頁面的佈局，佈局的技巧歸納為如下幾點： 1、定義表格寬高，將border、cellpadding、cellspacing全部設置為0 2、單元格裡面嵌套表格 3、單元格中的元素和嵌套的表格用align和valign設置對齊方式 4、通過屬性或者css樣式設置單元格中元素的樣式 傳統佈局目前應用： 1、快速製作用於演示的html頁面 2、商業推廣EDM製作(廣告郵件) 表格常用樣式屬性 border-collapse:collapse 設置邊框合併，製作一像素寬的邊線的表格 總結表格: 1.表格提供了HTML中定義表格式數據的方法. 2.表格中由行中的單元格組成. 3.表格中沒有列元素,列的個數取決於行的單元格個數. 4.表格外觀最好通過CSS設定. 表單控制項: 包含了具體的表單功能項,如單行文本輸入框,密碼輸入框,覆選框,提交按鈕,重置按鈕等. 提示信息: 一個表單中通常還需要包含一些說明性的文字,提示用戶進行填寫操作. 表單域: 相當於一個容器,用來容納所有的表單控牛和提示信息,可以通過他定義處理表單數據所用程式的Url地址,以及數據提交到伺服器的方法. 如果不定義表單域,表單中的數據就無法傳送到後臺伺服器. input控制項(重點) 在上面的語法中,<input />標簽為單標簽,type屬性為其最基本的屬性,其取值有多種,用於指定不同控制項類型.除了type屬性之外, input標簽還可以定義很多其他的屬性,其常用屬性如下: type-->text-->單行文本輸入框 type-->password-->密碼輸入框 type-->radio-->單選按鈕 type-->checkbox-->覆選框 type-->button-->普通按鈕 type-->submit-->提交按鍵 type-->reset-->重置按鍵 type-->image-->圖像提交按鍵 type-->file-->文件域 name-->由用戶定義-->控制項名稱 value-->由用戶定義-->input控制項中的預設文本值 size-->正整數-->input控制項在頁面中顯示的寬度 checked-->checked-->定義選擇控制項預設被選中的項 maxlength-->正整數-->控制項允許輸入的最多字元數,可用於限制賬號長度和密碼長度. 其中圖像按鈕為:<<input type="image" src="im.jpg" /> label標簽(理解) label標簽為input元素定義標註(標簽). 作用:用於綁定一個表單元素,當點擊label標簽的時候,被的綁定的表單元素就會獲得輸入焦點. 1.直接用label標簽進行包裹: <label><input type="text" name="hobby" value="01"></label> 2.for屬性規定label與哪個表單元素綁定: <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> 文本域標簽:格式如下: <textarea cols="每行中的字元數" rows="顯示的行數"> 文本內容 </textarea> 下拉菜單: 使用select控制項定義下拉菜單的基本語法格式如下: <select name=""> <option value="">選項1</option> <option value="">選項2</option> <option value="">選項3</option> ... </select> select標簽中至少應當包含一個option標簽 在option中定義selected="selected"時,當前項即為預設選中項. 表單域 在HTML中,form標簽被用於定義表單域,即創建一個表單,以實現用戶信息的收集與傳遞.form中所有內容都會被提交至伺服器. 創建表單的基本語法格式如下: <form action="url地址" method="提交方式" name="表單名字" accept-charset="utf-8"> 各種表單控制項 </form> 1.action:在表單收集到信息後,需要將信息傳遞給伺服器進行處理.action屬性用於指定接收並處理表單數據的伺服器程式的Url地址. 文檔類設定: document: HTML:sublime 輸入 html:4s XHTML:sublime 輸入 html:xt HTML5 sublime 輸入 <!DOCTYPE html> 或!+Tab 字元設定: <meta http-equiv="charset" content="utf-8"> HTML與XHTML中建議這樣去寫 <meta charset="utf-8"> HTML5的標簽中建議這樣去寫 常用新標簽: w3c 手冊中文官網:http://w3school.com.cn/ header:定義文檔的頁眉. nav:定義導航鏈接的部分. footer:定義文檔或節的頁腳 article:標簽規定獨立的自包含內容 section:定義文檔中的節(section,區段) aside:定義所外內容之外的內容 datalist:標簽定義選項列表,請與input元素配合使用該元素,datalist示例如下: <input type="text" value="輸入明星" list="star"> <datalist id="star"> <option>張學友</option> <option>劉德華</option> <option>周傑倫</option> <option>謝霆鋒</option> </datalist> fieldset:元素將表單內的相關元素分組,打包,和legend搭配使用.fieldset示例: <fieldset> <legend>用戶登錄</legend> 用戶名:<input type="text"><br /><br /> 密 碼:<input type="password"> </fieldset> 常用新屬性: placeholder--><input type="text" placeholder="請輸入用戶名"> 占位符,顯示自己設置的提示信息 autofocus--><input type="text" autofocus=""> 規定當頁面載入時input元素應該自動獲得焦點 multiple--><input type="file" multiple> 多文件上傳 autocomplete--><input type="text" autocomplete="off"> 規定表單是否應當啟用自動完成(補全)功能,需要與submit結合,且這個表單需要有name屬性才有效 required--><input type="text" required=""> 表示必填項 accesskey--><input type="text" accesskey="s"> 規定激活(使元素獲得焦點)元素的快捷鍵 示例:昵稱:<input type="text" required accesskey="s">,意味著不管游標在哪裡,只要按住alt+s就可以把游標定位到該元素 新增的input type屬性值: email--><input type="email"> 輸入郵箱格式 tel--><input type="tel"> 輸入手機號碼格式 url--><input type="url"> 輸入url格式 number--><input type="number"> 輸入數字格式 search--><input type="search"> 搜索框 range--><input type="range"> 自由拖動滑塊 time--><input type="time"> 小時分鐘 date--><input type="date"> 年月日 datetime--><input type="datetime"> 時間 month--><input type="month"> 年月 week--><input type="week"> 星期 年 color--><input type="color" /> 顏色 示例: <form action="" accept-charset="utf-8"> <!-- 下列標簽必須結合form使用 --> 郵箱:<input type="email" /> <!-- 只能是郵箱格式 --> 手機:<input type="tel" /> <!-- 在PC端上不明顯 --> 數字:<input type="number" /> <!-- 不能輸入數字外的字元 --> url:<input type="url" /> <!-- 必須輸入網址 --> 搜索:<input type="search" /> 區域:<input type="range" /> 時間:<input type="time" /> 年月日:<input type="date" /> 年月:<input type="month" /> 星期:<input type="week" /> datetime:<input type="datetime" /> 顏色:<input type="color" /> <input type="submit" /> </form> 多媒體標簽: embed:標簽定義嵌入的內容 audio:播放音頻 video:播放視頻 多媒體embed(會使用) embed可以用來插入各種多媒體,格式可以是Midl,Wav,AIFF,AU,MP3等等,url為音頻或視頻文件及其路徑, 可以是相對路徑或絕對路徑. <embed src="視頻地址" allowfullScreen="true" quality="heigh" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed> 多媒體audio HTML5通過<audio>標簽來解決音頻播放的問題,示例如下: <audio src="./music/See You Again.mp3"></audio> 並且可以通過附加屬性可以更加友好地控制音頻的播放: autoplay:自動播放 controls:是否顯示不預設播放控制項 loop:迴圈播放 示例: 我們的視頻支持 ogg, mp4, webM三種視頻格式 <video autoplay controls> <source src="/media/video.oga"> <source src="/media/video.m4v"> <object type="video/ogg" data="/media/video.oga" width="320" height="240"> <param name="src" value="/media/video.oga"> <param name="autoplay" value="false"> <param name="autoStart" value="0"> <p><a href="/media/video.oga">Download this video file.</a></p> </object> </video> html內嵌框架 <iframe>標簽會創建包含另外一個html文件的內聯框架（即行內框架），src屬性來定義另一個html文件的引用地址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條，代碼如下： <iframe src="http://www..." frameborder="0" scrolling="no"></iframe> 內嵌框架與a標簽配合使用 a標簽的target屬性可以將鏈接到的頁面直接顯示在當前頁面的iframe中，代碼如下： <a href="01.html" target="myframe">頁面一</a> <a href="02.html" target="myframe">頁面二</a> <a href="03.html" target="myframe">頁面三</a> <iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe> 單標簽:input,br,hr,img,base
