HTML-零基础入门
HTML零基礎入門學習
- HTML基本結構
- HTML基本標簽
- HTML標簽
- head標簽
- body標簽
- body標簽內部使用的標簽
- 段落標簽
- 段落與文字標簽
- 文本格式化標簽
- 網頁特殊符號
- 自閉合標簽
- 塊元素與行內元素
- 媒體標簽
- 圖片標簽
- 音頻標簽
- 視頻標簽
- 鏈接標簽
- 列表標簽
- 無序列表
- 有序列表
- 自定義列表
- 表格標簽
- 表格的基本標簽
- 表格的結構標簽（了解）
- 表格屬性補充——合并單元格
- 表單標簽
- Input系列標簽的基本介紹
- input系列標簽——文本框
- input系列標簽——文件選擇
- Input系列標簽——按鈕
- button按鈕標簽
- select下拉菜單標簽
- textarea文本域標簽
- label標簽
- 語義化標簽
- 字符實體
- 常見的字符實體
HTML基本結構
<!DOCTYPE html><!--文檔聲明--> <html lang="en"> <head> <!--頁頭開始--><meta charset="UTF-8"><title>Title</title> </head> <!--頁頭結束--> <body> <!--頁身開始--> </body> <!--頁身結束--> </html>HTML基本標簽
HTML標簽
整個網頁是從開始，然后到結束。
head標簽
head標簽代表網頁的“頭”，定義一些特殊內容，這些內容往往是“不可 見內容”（即在瀏覽器內不可見)。
<head>頭部標簽| tiltile | 定義網頁標題 |
| meta | 定義網頁的基本信息（供搜索引擎） |
| style | 定義CSS樣式 |
| link | 連接外部CSS文件或腳本文件 |
| script | 定義腳本語言 |
| base | 定義頁面所有鏈接的基礎定位（base標簽用的很少) |
body標簽
body標簽代表頁面的“身”，定義網頁展示內容，這些內容往往都是“可見內容”（即在瀏覽器內可見）。
body標簽內部使用的標簽
段落標簽
段落與文字標簽
| h1~h6 | header | 標題（有且僅有1級到6級) |
| p | paragraph | 段落 |
| br | break | 換行 |
| hr | horizontal rule | 水平線 |
| div | division | 分割（塊元素） |
| span | span | 區域（行內元素） |
文本格式化標簽
| strong | strong（加強） | 加粗 |
| em | emphasized(強調） | 斜體 |
| cite | cite(引用） | 斜體 |
| sup | superscripted（上標） | 上標 |
| sub | subscripted(下標） | 下標 |
網頁特殊符號
只需記憶一個即可，就是HTML空格“ ”。
自閉合標簽
HTML標簽分兩種，一種是“一般標簽”，另一種是“自閉和標簽”。一般標簽有開始與結束符號，自閉合標簽則只有開始符號沒有結束符號。一般標簽可以在開始和結束符號之間插入其他的標簽和文字。自閉合標簽沒有結束符號，不能插入其他標簽或文字，只能定義自身屬性。
塊元素與行內元素
HTML元素根據瀏覽器表現形式分為兩種：①塊元素 ②行元素；
塊元素特點：
①獨占一行，排斥其他跟其位于同一行的其他元素，包括塊元素和行內元素；
②塊元素內部可以容納其他塊元素或行元素。
常見的塊元素有：h1~h6,p,hr,div等。
行內元素的特點：
①可以與其他行內元素位于同一行；
②行內內部可以容納其他行內元素，但不可以容納塊元素，不然會出現無法預知的效果。
常見的行內元素有：strong,em,span等。
媒體標簽
圖片標簽
圖片標簽的介紹：
場景：圖片標簽是在網頁中顯示的標簽。
代碼中alt的作用是當圖片不能正常顯示時所出現的提示文字。
其效果如圖：
特點：
①單標簽；
②img標簽需要展示對應的效果需要借助對應的屬性進行設置。
屬性注意點：
1.標簽的屬性寫在開始標簽內部；
2.標簽上可以同時存在多個屬性；
3.屬性之間以空格隔開；
4.標簽名與屬性之間必須以空格隔開；
5.屬性之間沒有順序之分；
補充內容
title屬性：
title提示文本，當鼠標懸停時，如懸停在某一圖片上時，才提示的內容。title屬性不僅僅可以用于圖片標簽，還可以用于其他標簽。
width和height屬性
width和height屬性用于控制圖片尺度，單位一般為像素（px）。如果只設置width或height中的一個，那么另外一個自動等比例設置（此時圖片不會變形）。如果同時設置width和height，則圖片可能變形。
音頻標簽
音頻標簽的介紹
場景：在頁面中插入音頻。
常見屬性：
| src | 音頻路徑 |
| controls | 顯示播放控件 |
| autoplay | 自動播放（部分瀏覽器不支持） |
| loop | 循環播放 |
注意
音頻多用mp3格式。
具體實現效果如下圖：
視頻標簽
視頻標簽的介紹：
場景：在頁面中插入視頻。
常見屬性：
| src | 視頻的路徑 |
| controls | 顯示播放的控件 |
| autoplay | 自動播放 |
| loop | 循環播放 |
鏈接標簽
鏈接標簽的介紹：
場景：點擊之后，從一個頁面跳轉到另一個頁面。
稱呼：a標簽，超鏈接，錨鏈接。
特點：鏈接標簽為雙標簽，其內部可以包裹內容。如果需要a標簽點擊之后去指定頁面，則需要設置a標簽的href屬性。當開發網站初期，還不知道網頁跳轉地址的時候，href的屬性值為“#”（空鏈接）。
補充內容
鏈接標簽的target屬性：
屬性名：target;
屬性值：目標網頁的打開形式；
| -shlf | 默認值，在當前網頁中跳轉（即覆蓋原網頁） |
| -blank | 在新窗口中跳轉(即保留原網頁） |
注意：我們所使用的大多數網站的網頁都為在新窗口中跳轉，保留原網頁。具體效果如下圖：
列表標簽
列表標簽分為無序列表，有序列表和自定義列表三種。
無序列表
無序列表標簽的介紹
場景：在網頁中表示一組無順序之分的列表，如：新聞列表。
標簽組成：
| ul | 表示無序列表的整體，用于包裹li標簽 |
| li | 表示無需列表的每一項，用于包含每一行的內容 |
顯示特點：列表的每一項前默認顯示原點標識。
注意點：
1.ul標簽中只允許包含li標簽。
2.li標簽可以包含任意內容。
具體效果如下圖所示：
有序列表
有序列表的介紹
場景：在網頁中表示一組有順序之分的列表，如：排行榜。
標簽組成：
| ol | 表示有序列表的整體 ，用于包裹li標簽 |
| li | 表示有序列表的每一項，用于包含每一行的內容 |
顯示特點：列表的每一項前默認顯示序號標識。
注意點
1.ol標簽中只允許包含li標簽；
2.li標簽中可包含任意內容。
具體效果如下：
自定義列表
自定義列表的介紹
場景：在網頁的底部導航中通常會使用自定義列表來實現。
標簽組成：
| dl | 表示自定義列表的整體，用于包裹dt,dd標簽 |
| dt | 表示自定義列表的主題 |
| dd | 表示自定義列表針對主題的每一項內容 |
顯示特點：dd標簽會顯示縮進效果。
注意點
1.dl標簽中只允許包含dt/dd標簽；
2.dt/dd標簽可以包含任意內容。
表格標簽
表格的基本標簽
表格的基本標簽的介紹
場景:在網頁中以行和列的單元格的方式整齊展示數據，如：學生成績表。
基本標簽：
| table | 表示整體，可用于包裹多個tr |
| tr | 表示每行，可用于包裹td |
| td | 表示單元格，可用于包裹內容 |
注意點
標簽的嵌套關系：table>tr>td
表格的相關屬性
場景：設置表格基本展示效果。
常見的相關屬性：
| border | 數字 | 加邊框 |
| width | 數字 | 表格寬度 |
| height | 數字 | 表格高度 |
注意點
實際開發針對于樣式效果推薦使用css設置。
表格標題和表頭單元格標簽
場景：在表格中表示整體大標題和一列小標題。
其他標簽：
| caption | 表格大標題 | 表示表格整體大標題（居中顯示） |
| th | 表頭單元格 | 表示一系列小標題，通常用于表格第一行，默認內部文字加粗居中顯示 |
注意點
1.caption標簽書寫在table標簽內部;
2.th標簽書寫在tr標簽內部（用于替換td標簽）。
表格的結構標簽（了解）
表格的結構標簽介紹
場景：讓表格的內容結構分組，突出表格的不同部分（頭部，主體，底部），使語義更加清晰。
結構標簽：
| thead | 表格頭部 |
| tbody | 表格主體 |
| tfoot | 表格底部 |
注意點
1.表格結構標簽內部用于包裹tr標簽；
2.表格的標簽可省略。
表格屬性補充——合并單元格
合并單元格步驟：
1.明確合并哪幾個單元格；
2.通過“左上”原則確定保留誰刪除誰：
①上下合并——只保留最上的，刪除其他的；
②左右合并——只保留最左的，刪除其他的。
3.給保留的單元格設置跨行合并或跨列合并。
具體標簽：
| rowspan | 合并單元格的個數 | 跨行合并 |
| colspan | 合并單元格的個數 | 跨列合并 |
注意點
只有同一個結構標簽中的單元格才能合并，不能跨結構標簽合并（不能跨thead,tbody,tfoot)
表單標簽
Input系列標簽的基本介紹
場景：在網頁中顯示收集用戶信息的表單效果，如：登錄頁，注冊頁。
標簽名：input；
Input標簽可以通過type屬性值的不同，展示不同的效果。
type屬性值：
| input | text | 文本框，用于輸入單行文本 |
| input | password | 密碼框，用于輸入密碼 |
| input | radio | 單選框，用于多選一 |
| input | checkbox | 多選框，用于多選多 |
| input | file | 文件選擇，用于上傳文件 |
| input | submit | 提交按鈕，用于提交 |
| input | reset | 重置按鈕，用于重置 |
| input | button | 普通按鈕，默認無功能，之后可配合js添加功能 |
input系列標簽——文本框
文本框標簽的介紹
場景：在網頁中顯示輸入單行文本的表單控件。
type屬性值：text；
常用屬性：
屬性名：placeholder
說明：占位符，提示用戶輸入文本的內容。
場景：在網頁中顯示多選一的單選表單控件。
type屬性值：radio；
常用屬性：
| name | 分組。有相同name屬性值的單選框為一組，一組同時只能選一個 |
| checked | 默認選中 |
注意
name屬性對于單選框有分組功能。有相同name屬性值的單選框為一組，一組只能同時有一個被選中。
具體效果如下圖：
input系列標簽——文件選擇
文件選擇標簽的介紹
場景：在網頁中顯示文件選擇的表單控件
type屬性值：file
常用屬性：
| multiple | 多文件選擇 |
具體效果如下圖：
Input系列標簽——按鈕
按鈕標簽的介紹
場景：在網頁中顯示不同功能的按鈕表單控件
| input | submit | 提交按鈕，點擊后提交數據給服務器 |
| input | reset | 重置按鈕，點擊之后恢復表單默認值 |
| input | button | 普通按鈕，默認無功能，之后配合js加功能 |
注意點
1.如果需要實現以上按鈕功能，需要配合form標簽使用；
2.form使用方法：用form標簽把表單標簽一起包裹起來即可；
3.value屬性用于給按鈕添加文字。
button按鈕標簽
場景：在網頁中顯示用戶點擊的按鈕；
標簽名：button
type屬性值：同input按鈕系列。
注意點
1.谷歌瀏覽器中button默認的是提交按鈕；
2.button標簽是雙標簽，更便于包裹其他內容。
具體效果如下圖：
select下拉菜單標簽
場景：在網頁中提供多個選擇項的下拉菜單表單控件。
標簽組成：
1.select標簽：下拉菜單的整體；
2.option標簽：下拉菜單的每一項。
常見屬性:
select：下拉菜單的默認選中。
具體效果見下圖：
代碼見下圖：
textarea文本域標簽
場景：在網頁中提供可輸入多行文本的表單控件。
標簽名：textarea
常見屬性：
| cols | 規定了文本域內可見寬度 |
| rows | 規定了文本域內可見行數 |
注意點
1.右下角可以拖拽改變大小；
2.實際開發針對于樣式效果推薦使用css設置。
label標簽
場景：常用于綁定內容與表單標簽的關系。
標簽名：label
使用方法1：
①使用label標簽把內容（如文本）包裹起來。
②在表單標簽上添加id屬性。
③在label標簽的for屬性中設置對應的id屬性值。
使用方法2：
①直接使用label標簽把內容（如文本）和表單標簽一起包裹起來。
②需要把label標簽的for屬性刪除即可。
語義化標簽
沒有語義的布局標簽-div和-span標簽
場景：實際開發網頁時會大量頻繁的使用到div和span這兩個沒有語義的布局標簽。
注意
-div標簽：一行只顯示一個（獨占一行）；
-span標簽：一行可顯示多個。
字符實體
常見的字符實體
場景：在網頁中展示特殊符號效果時，需要使用字符實體替代。
結構：&英文；
常見的字符實體：
| 空格 |  ；較常用 | |
| < | 小于號 | <； |
| > | 大于號 | >； |
| & | 和號 | &； |
| ‘’ | 引號 | "； |
| ， | 撇號 | &apos；（IE不支持） |
在此不再列出其他字符實體(o_ _)ﾉ
先寫這么多啦，以后若遇見新的知識在將其充盈😁
總結
以上是生活随笔為你收集整理的HTML-零基础入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用matlab进行多项式通分,Matla
- 下一篇： 花了一万多买的web前端全套教程，现在分