HTML基礎

看李南江老師視訊學習記錄。

了解什麼是浏覽器和伺服器。

了解浏覽器通路網頁的原理和請求資料的過程。

了解什麼是URL，HTTP協定等内容。

HTML是超文本标記語言。

描述文本語義的，告訴浏覽器哪些是标題，哪些是段落，用于描述文本語義的文本，稱為标簽，并且在浏覽器中不會顯示，我們稱這些文本為“超文本”。

利用标簽描述一段文本之後，在浏覽器中顯示會被放大或加粗，但是要記住它是添加語義的，而不是修改樣式的。

1993年IETF釋出1.0——1995年W3C釋出2.0——2000年W3C釋出XHTML——2004年TWG釋出HTML5——W3C放棄XHTML。

​ HTML基本結構所有的标簽都是成對出現的，分為開始标簽和結束标簽。其他所有的标簽都寫在html标簽中。

作用

給網站添加一些配置資訊。

比如網站的标題，圖檔，關鍵字，SFO相關的，外挂一些css/js檔案。

注意點：寫在head内的内容都不會顯示給使用者檢視。

專門用于指定網站的标題，作為使用者儲存網頁的預設标題。

必須寫在head标簽内。

定義html文檔中給使用者檢視的内容。

注意點：一對HTML标簽中隻能一對body标簽。

，指定目前網頁的字元集，解決網頁沒有指定字元集出現的亂碼問題。

字元集，就是字元的集合，就像活字印刷術。

GBK（gbk2312）存儲的字元比較少，存儲了漢字和常用的外文。體積較小。

UTF-8存儲了所有的字元。體積較大。

注意點：僅僅指定字元集不一定解決亂碼，還要檔案的儲存編碼與指定字元一緻。

單标簽

​ 隻有開始标簽，沒有結束标簽，如meta标簽。

雙标簽

​ 由<>和</>組成。

并列關系（兄弟/平級）

嵌套關系（父子/上下)

​ DTD聲明在網頁第一行，告訴浏覽器我們用的哪一個版本的HTML，能夠正确的渲染/解析網頁。

​ 每一個版本的聲明都不一樣。

​ DTD聲明不是一個标簽。不寫也能正常運作。按規定寫。

記事本：提示功能差；

editpus/nodepad：提示功能差。

Dreamwaver：偏向設計。

Sublime：輕量級，自帶功能不全，插件豐富。

Webstorm：重量級，自帶功能全面。

W3C網址：www.w3school.com.cn

給文本添加标題語義。

——H标簽包裹的内容會獨占一行；

——H标簽最多6個，H1最大，H6最小。

——H标簽要慎用，H1标簽一個界面隻能一個，和SFO有關。

段落标記

在浏覽器中會獨占一行。

在浏覽器中顯示一條分割線

在浏覽中獨占一行。

換行

——可以連續使用，一個br标簽換一行。

——br标簽的語義是補靈氣一個段落換行，企業開發使用很少。

告訴浏覽器顯示一張圖檔

src是圖檔需要顯示的圖檔名稱。

——img标簽不會獨占一行。

——未指定寬高或按照預設的顯示。。

——手動指定了寬高，可能會導緻圖檔變形；隻指定寬高一個值，會自動計算另一個值，保持等比。

——width：寬度

——height：高度

——title：當滑鼠懸停到圖檔，顯示什麼内容。

——alt：應為alternate的縮寫，顯示的圖檔找不到時，顯示什麼内容。

src指派有兩種方式。

概念

從檔案所在的檔案夾開始檢視。

方法

——同級

​ 圖檔和html檔案存儲在同一個檔案夾

​ 格式

——下級

​ 存儲圖檔的檔案夾和html檔案在同一個檔案夾。

——上級

​ 圖檔和htnl檔案夾在同一個檔案夾。

每次都從指定的盤符查找。

格式

注意

路徑不要出現中文，不能誇盤符，開發中基本不用。

用于控制頁面與頁面之間跳轉。

——a标簽可以讓文字、圖檔點選。

——a标簽必須有href屬性，否則抓瞎了。

——Href屬性是完整的URL位址或路徑。

——可以跳轉到網絡位址，也可以跳轉到本地html檔案。

——Target：控制如何跳轉，有兩個屬性。

​ _self：用于在目前頁籤中跳轉，不建立界面跳轉。

​ _blank：用于在新的頁籤跳轉。

——title：滑鼠懸停提示文本。

專門用來統一指定目前網頁中所有的超連結（a标簽）如何打開。

——必須寫在head标簽内。

——如果base和a都指定了，浏覽器會按照a指定的執行。

點選之後不會跳轉的連結，存在的意義，就是其他界面還未寫出時，不知道跳轉何處，用來代替。

分為兩種

—— #：會自動回到網頁的頂部。

—— javascript：不會自動回到網頁的頂部。

​ 就像目錄，點選跳轉到頁面的指定位置。

​ 要想通過a标簽跳轉的頁面指定位置，必須給a标簽添加一個id屬性，id屬性是跳轉到指定地方的id。

——通過a标簽跳轉到當面頁面指定位置，沒有過度動畫，一下子跳轉到。

——a标簽除了 可以跳轉到目前指定位置，還可以跳轉到其他界面的指定位置。就是在href屬性“#”前面加上網頁位址。

是給一堆資料添加清單語義，是一個整體。

有序清單（ordered list），有前後之分，用的最少。

無序清單（unordered list），用的最多。

定義清單（defintion list），其次。

是給一堆資料添加清單語義，并且無先後之分。

​ ul：unordered list的縮寫。

​ li：list item的縮寫。

​ 其他标簽添加在li标簽内，也可以在嵌套ul标簽，表示多級清單形式。

——新聞清單

——商品清單

——導覽列

​ dt：definition title的縮寫，用來定義清單中的标題。

​ dd：definition description的縮寫，用來定義清單對應的描述。

——網站尾部的相關資訊。

——圖文混排。

——成對出現，組合标簽。

——一個dt可以沒有對應的dd，也可以對應多個dd，推薦對應一個。

——在dt和dd裡添加其他标簽。

是一個時代的代表，以前經常用！

​ 給一堆資訊添加表格語義，當資料量非常大的時候，是最為清晰的展現形式。

​ table：代表整個表格。

​ tr：代表整個表格中的一行資料。

​ td：代表表格中一行中的一個單元格。

——表格标簽有一個邊框屬性，決定了邊框的寬度，預設是0，看不到；

——是一個組合标簽。

以下内容作為了解，開發中用CSS修改樣式。

——寬度和高度：width/height

​ 給table标簽和td标簽使用。

​ 預設是按照内容的尺寸來調整的，也可以通過給table标簽設定width/height屬性手動指定。

​ 如果給td标簽設定寬高，會修改目前單元格的寬高，不會影響整個表格的寬高。

——水準對齊：align

​ 水準對齊給table标簽、tr标簽、td标簽都可以使用。

​ 給table設定align屬性，控制表格在水準方向的對齊方式。

​ 給tr标簽設定align屬性，控制目前行所有單元格的對齊方式。

​ 給td标簽設定align屬性，控制目前單元格内容中的對齊方式。

——垂直對齊：valign

​ 垂直對齊隻能給tr和td使用。

——外邊距：cellspacing

​ 隻能給table标簽使用

​ 外邊距就是單元格和單元格之間的距離。

​ 預設情況下外邊距是：2px。

——内邊距：cellpadding

​ 單元格的邊框和文字之間的間隙。

——細線表格

​ 通過指定外邊距為0是不靠譜的，是2條線合并為一條線。

​ 設定方式：給table設定bgcolor屬性顔色，給tr标簽設定bgcolor屬性顔色，給table設定外邊距等于1px。

——表格标題

​ caption标簽 ，必須放到table标簽，自動居中。

——列标題

​ th标簽。表示為列标題，自動加粗。

——頁尾資訊

​ tfoot标簽。

表格的标題

表格的表頭

表格的主題

表格的頁尾

——如果沒有編寫tbody，浏覽器會自動添加。

——thead與tfoot，高度不會随着表格高度變化，手動指定也不會變化。

水準方向上的單元格合并

​ 方法：td添加colspan屬性。向後合并——把某一個單元格當做多個單元格看待。需要注意的是，後面會多出一些單元格，需要手動删掉多出的單元格。

垂直方向上的單元格合并

​ 方法：td添加rowspan屬性。

收集使用者資訊

表單元素

在HTML中，标簽/标記/元素都是名額簽，有自己的預設功能。

​ 屬性值的不同，決定input各項功能和外觀。

​ type屬性值介紹

——明文輸入屬性：text

——暗文輸入屬性：password

——預設值屬性：value

——單選框屬性

​ 預設情況下是不互斥的，要想互斥，必須設定一個name屬性，name屬性的值要相同，值随便寫。

​ 要想設定預設選擇某一個，添加checked屬性。

——多選框屬性

​ 要想設定預設選擇某幾個，添加checked屬性。

——按鈕屬性

定義一個普通按鈕

​ 作用：配合js完成一些操作。onclick會有彈窗

定義一個圖檔按鈕

定義一個重置按鈕

​ 作用：清空表單中的資料，有預設的标題。通過value修改。

送出按鈕

​ 作用：将表單中的資料送出到遠端伺服器，條件，需要指定哪個伺服器，哪些資料需要送出。

​ 通過form标簽的action屬性告訴表單，送出的伺服器。

​ 通過input的name屬性代表的送出的内容。

——隐藏域：hidden

​ 作用：悄悄咪咪的收集資訊。

僅供了解，很多浏覽器不支援。

郵箱——自動校驗輸入的是否為郵箱格式

域名——校驗域名

電話号碼——數字

時間——通過月曆選擇時間

顔色——通過取色版選擇顔色

預設情況下，文字和輸入框是沒有關聯關系的，如果想點選文字時讓對應的輸入框聚焦，需要進行綁定，使用Label标簽。

将文字用label标簽包裹起來；

給輸入框添加一個ID屬性；

将ID屬性值賦給label進行綁定。

不用id，将文字和輸入框整個放到label也可以綁定，但有局限性，不建議使用。

給輸入框綁定待選項。

很多浏覽器不支援，僅供了解。

給dlist添加一個id屬性，将該屬性值指派給input的list屬性。

定義一個下拉清單。

可以通過給option添加一個 selected屬性更改預設内容。

定義一個可以換行的文本框，多行輸入文本框。

預設，輸入框可以無限換行，有預設的寬度和高度。

修改寬高參數，即使指定了也可以無限往下輸入，也可以手動拉伸。

不想手動拉伸，通過css修改（reseze:none）。

了解HTML5新增标簽，學習浏覽器用過的标簽，不支援的了解即可，不建議重點掌握學習。

播放視訊

src：視訊位址，必須的屬性。

autoplay：是否需要自動播放。

controls：是否需要顯示控制條。

poster：沒有自動播放之前的占位圖檔等。

loop：做廣告視訊，視訊播放完畢之後，是否需要循環播放。

preload：預加載視訊。（不是自動播放使用）

muted：靜音播放

width：視訊寬度

height：視訊高度

存在的意義，解決浏覽器适配不同視訊格式的問題。

目前通過video标簽，想要浏覽器都通過video播放，浏覽器必須支援HTML5，不然無法播放；若想所有浏覽器都支援，可通過js的media标簽。

播放音頻。

和video一樣。

——使用方式基本和video一樣。

——有三個屬性不能用：height、width、poster。

利用summary描述概要資訊，用details描述詳情，預設情況下，是折疊模式。

跑馬燈效果。

滾動方向：direction，上下左右方向控制

滾動速度： scrollamount

循環次數： loop，預設是-1，無限。

滾動類型：behavior，兩個值，slide滾動到邊界停止，alternate滾動到邊界彈回。

——不是W3C推薦的，在其文旦各種查找不到，但各浏覽器都支援。

——還可以設定圖檔滾動。

因為目前HTML标簽隻有一個作用就是添加語義，有部分标簽是修改樣式的，雖有被廢棄了。

分割線

大小

文本加粗：bold的縮寫。

文本添加下劃線：underlined的縮寫。

文本傾斜：italic的縮寫。

文本删除線：strikethrough的縮寫。

——不到萬不得已不能使用。

——如果要使用，一般作為css的鈎子來使用。

strong == b：定義重要性強調的文字。（strong）

ins == u：定義插入的文字。（inserted）

em == i：定義強調的文字。（emphasized）

del == s：定義删除的文字。（deleted）

在HTML中對空格/tab/回車不敏感，會把空格/tab/回車當一個空格處理。

實體區分大小寫哦！

一個代表一個空格，記得後面還有分号。

查找吧，網址：https://www.w3school.com.cn/html/html_entities.asp。

------結束-----