目錄
- 〇、基礎概念
- 瀏覽器和服務器
- 訪問原理
- 什么是URL
- 一、認識HTML
- 1.概念
- 2.作用
- 3.注意事項
- 二、HTML發展史
- 1.IETF簡介
- 2.W3C簡介
- 三、網頁格式
- 1.HTML基本結構
- 1.Head標簽
- 2.Title標簽
- 3.Body標簽
- 2.字符集
- 1.meta標簽
- 2.GBK（gbk2312）與UTF-8區別
- 3.標簽分類
- 4.DTD檔案宣告
- 概念
- 規范
- 5.開發工具
- 1.HTML基本結構
- 四、基礎標簽
- 注釋
- ● 格式
- H標簽
- ● 作用
- ● 格式
- ● 注意
- P標簽
- ● 作用
- ● 格式
- ● 注意
- Hr標簽-廢棄
- ● 作用
- ● 格式
- ● 注意
- br標簽-廢棄
- ● 作用
- ● 格式
- ● 注意
- img標簽
- ● 作用
- ● 格式
- ● 注意
- ● 屬性
- ● 圖片路徑
- 相對路徑
- 絕對路徑
- a標簽
- ● 作用
- ● 格式
- ● 注意
- ● 屬性
- base標簽
- ● 作用
- ● 格式
- ● 注意
- 假鏈接
- ● 作用
- ● 格式
- ● 區別
- 錨點
- ● 作用
- ● 格式
- ● 注意
- 串列標簽
- ● 串列標簽
- ● 串列分類
- ● 無序串列
- 作用
- 格式
- 應用場景
- ● 定義串列
- 格式
- 應用場景
- 注意
- 表格標簽
- ● 作用
- ● 格式
- ● 注意
- ● 屬性
- ● 其他標簽
- ● 表格結構
- 表格存盤的資料分類
- 表格完整結構
- 注意
- ● 單元格合并
- 表單標簽
- ● 作用
- ● 格式
- 表單_input標簽
- ● type屬性
- ● HTML5新增型別
- 表單-Label標簽
- ● 格式
- ● 注意
- 表單_dalist標簽
- ● 格式
- 表單_select標簽
- ● 格式
- 分組顯示格式
- 表單_textarea標簽
- ● 格式
- video標簽
- ● 作用
- ● 格式
- ● 屬性
- video第二種格式
- ● 注意
- audio標簽
- ● 作用
- ● 格式
- ● 注意
- 詳情和概要標簽
- ● 作用
- ● 格式
- marquee標簽
- ● 作用
- ● 格式
- ● 屬性
- ● 注意
- 注釋
- 五、HTML中被廢棄的標簽
- 1.標簽型別
- 2.注意
- 3.替代標簽
- 六、字符物體
- 1.空格
- 2.大于小于
- 3.著作權符號
- 4.其他
〇、基礎概念
瀏覽器和服務器
了解什么是瀏覽器和服務器，
訪問原理
了解瀏覽器訪問網頁的原理和請求資料的程序，
什么是URL
了解什么是URL，HTTP協議等內容，
一、認識HTML
1.概念
HTML是超文本標記語言，
2.作用
描述文本語意的，告訴瀏覽器哪些是標題，哪些是段落，用于描述文本語意的文本，稱為標簽，并且在瀏覽器中不會顯示，我們稱這些文本為“超文本”，
3.注意事項
利用標簽描述一段文本之后，在瀏覽器中顯示會被放大或加粗，但是要記住它是添加語意的，而不是修改樣式的，
二、HTML發展史
1993年IETF發布1.0——1995年W3C發布2.0——2000年W3C發布XHTML——2004年TWG發布HTML5——W3C放棄XHTML，
1.IETF簡介
2.W3C簡介
三、網頁格式
1.HTML基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王清</title>
</head>
<body>
</body>
</html>
? HTML基本結構所有的標簽都是成對出現的，分為開始標簽和結束標簽，其他所有的標簽都寫在html標簽中，
1.Head標簽
作用
給網站添加一些配置資訊，
比如網站的標題，圖片，關鍵字，SFO相關的，外掛一些css/js檔案，
注意點：寫在head內的內容都不會顯示給用戶查看，
2.Title標簽
作用
專門用于指定網站的標題，作為用戶保存網頁的默認標題，
必須寫在head標簽內，
3.Body標簽
作用
定義html檔案中給用戶查看的內容，
注意點：一對HTML標簽中只能一對body標簽，
2.字符集
<meta charset="UTF-8"> ‘寫在head里面
1.meta標簽
，指定當前網頁的字符集，解決網頁沒有指定字符集出現的亂碼問題，
字符集，就是字符的集合，就像活字印刷術，
2.GBK（gbk2312）與UTF-8區別
GBK（gbk2312）存盤的字符比較少，存盤了漢字和常用的外文，體積較小，
UTF-8存盤了所有的字符，體積較大，
注意點：僅僅指定字符集不一定解決亂碼，還要檔案的保存編碼與指定字符一致，
3.標簽分類
單標簽
? 只有開始標簽，沒有結束標簽，如meta標簽，
雙標簽
? 由<>和</>組成，
并列關系（兄弟/平級）
嵌套關系（父子/上下)
4.DTD檔案宣告
概念
? DTD宣告在網頁第一行，告訴瀏覽器我們用的哪一個版本的HTML，能夠正確的渲染/決議網頁，
? 每一個版本的宣告都不一樣，
規范
<!DOCTYPE html> “ 不區分大小寫
? DTD宣告不是一個標簽，不寫也能正常運行，按規定寫，
5.開發工具
記事本：提示功能差；
editpus/nodepad：提示功能差，
Dreamwaver：偏向設計，
Sublime：輕量級，自帶功能不全，插件豐富，
Webstorm：重量級，自帶功能全面，
四、基礎標簽
注釋
W3C網址：www.w3school.com.cn
● 格式
<!--內容-->
H標簽
● 作用
給文本添加標題語意，
● 格式
<h1> 內容</h1>
● 注意
——H標簽包裹的內容會獨占一行；
——H標簽最多6個，H1最大，H6最小，
——H標簽要慎用，H1標簽一個界面只能一個，和SFO有關，
P標簽
● 作用
段落標記
● 格式
<p>內容</p>
● 注意
在瀏覽器中會獨占一行，
Hr標簽-廢棄
● 作用
在瀏覽器中顯示一條分割線
● 格式
<Hr>
● 注意
在瀏覽中獨占一行，
br標簽-廢棄
● 作用
換行
● 格式
<br>
● 注意
——可以連續使用，一個br標簽換一行，
——br標簽的語意是補靈氣一個段落換行，企業開發使用很少，
img標簽
● 作用
告訴瀏覽器顯示一張圖片
● 格式
<img src=""> 'image,source縮寫'
src是圖片需要顯示的圖片名稱，
● 注意
——img標簽不會獨占一行，
——未指定寬高或按照默認的顯示，，
——手動指定了寬高，可能會導致圖片變形；只指定寬高一個值，會自動計算另一個值，保持等比，
● 屬性
——width：寬度
——height：高度
——title：當滑鼠懸停到圖片，顯示什么內容，
——alt：應為alternate的縮寫，顯示的圖片找不到時，顯示什么內容，
● 圖片路徑
src賦值有兩種方式，
相對路徑
概念
從檔案所在的檔案夾開始查看，
方法
——同級
? 圖片和html檔案存盤在同一個檔案夾
? 格式
src = "https://www.cnblogs.com/sdsnwq/p/圖片名稱" ‘帶后綴
——下級
? 存盤圖片的檔案夾和html檔案在同一個檔案夾，
? 格式
src = "https://www.cnblogs.com/sdsnwq/p/圖片檔案夾/圖片名稱"
——上級
? 圖片和htnl檔案夾在同一個檔案夾，
? 格式
src = "https://www.cnblogs.com/sdsnwq/圖片名稱" '../代表從當前位置找到上一級
絕對路徑
每次都從指定的盤符查找，
格式
src="https://www.cnblogs.com/sdsnwq/p/圖片路徑/圖片名稱"
注意
路徑不要出現中文，不能夸盤符，開發中基本不用，
a標簽
● 作用
用于控制頁面與頁面之間跳轉，
● 格式
<a href="https://www.cnblogs.com/sdsnwq/p/跳轉的目標界面">需要展示給用戶的內容</a>
● 注意
——a標簽可以讓文字、圖片點擊，
——a標簽必須有href屬性，否則抓瞎了，
——Href屬性是完整的URL地址或路徑，
——可以跳轉到網路地址，也可以跳轉到本地html檔案，
● 屬性
——Target：控制如何跳轉，有兩個屬性，
? _self：用于在當前選項卡中跳轉，不新建界面跳轉，
? _blank：用于在新的選項卡跳轉，
——title：滑鼠懸停提示文本，
base標簽
● 作用
專門用來統一指定當前網頁中所有的超鏈接（a標簽）如何打開，
● 格式
<base target="">
● 注意
——必須寫在head標簽內，
——如果base和a都指定了，瀏覽器會按照a指定的執行，
假鏈接
● 作用
點擊之后不會跳轉的鏈接，存在的意義，就是其他界面還未寫出時，不知道跳轉何處，用來代替，
● 格式
分為兩種
<a href="https://www.cnblogs.com/sdsnwq/p/#"></a>
<a href="https://www.cnblogs.com/sdsnwq/p/javascript"></a>
● 區別
—— #：會自動回到網頁的頂部，
—— javascript：不會自動回到網頁的頂部，
錨點
● 作用
? 就像目錄，點擊跳轉到頁面的指定位置，
? 要想通過a標簽跳轉的頁面指定位置，必須給a標簽添加一個id屬性，id屬性是跳轉到指定地方的id，
● 格式
<a href="https://www.cnblogs.com/sdsnwq/p/#h2id"> xx</a> 'h2id為id'
<br>
<h2 id="h2id">內容</h2>
● 注意
——通過a標簽跳轉到當面頁面指定位置，沒有過度影片，一下子跳轉到，
——a標簽除了 可以跳轉到當前指定位置，還可以跳轉到其他界面的指定位置，就是在href屬性“#”前面加上網頁地址，
串列標簽
● 串列標簽
是給一堆資料添加串列語意，是一個整體，
● 串列分類
有序串列（ordered list），有前后之分，用的最少，
無序串列（unordered list），用的最多，
定義串列（defintion list），其次，
● 無序串列
作用
是給一堆資料添加串列語意，并且無先后之分，
格式
<ul>
<li>需要顯示的條目內容</li>
<li>需要顯示的條目內容</li>
</ul>
? ul：unordered list的縮寫，
? li：list item的縮寫，
? 其他標簽添加在li標簽內，也可以在嵌套ul標簽，表示多級串列形式，
應用場景
——新聞串列
——商品串列
——導航條
● 定義串列
格式
<dl>
<dt>北京</dt>
<dd>中國的首都</dd>
<dt></dt>
<dd></dd>
</dl>
? dt：definition title的縮寫，用來定義串列中的標題，
? dd：definition description的縮寫，用來定義串列對應的描述，
應用場景
——網站尾部的相關資訊，
——圖文混排，
注意
——成對出現，組合標簽，
——一個dt可以沒有對應的dd，也可以對應多個dd，推薦對應一個，
——在dt和dd里添加其他標簽，
表格標簽
是一個時代的代表，以前經常用！
● 作用
? 給一堆資訊添加表格語意，當資料量非常大的時候，是最為清晰的展現形式，
● 格式
<table>
<tr>
<td></td>
</tr>
</table>
? 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
? 只能給table標簽使用
? 單元格的邊框和文字之間的間隙，
——細線表格
? 通過指定外邊距為0是不靠譜的，是2條線合并為一條線，
? 設定方式：給table設定bgcolor屬性顏色，給tr標簽設定bgcolor屬性顏色，給table設定外邊距等于1px，
● 其他標簽
——表格標題
? caption標簽 ，必須放到table標簽，自動居中，
——列標題
? th標簽，表示為列標題，自動加粗，
——頁尾資訊
? tfoot標簽，
● 表格結構
表格存盤的資料分類
表格的標題
表格的表頭
表格的主題
表格的頁尾
表格完整結構
<table>
<caption>表格的標題</caption> '表格的標題
<thead>
<tr>
<th>每一行的標題</th> '表格的表頭
</tr>
</thead>
<tbody> '表格的資料
<tr>
<td>資料</td>
</tr>
</tbody>
<tfoot> '表格的頁尾
<tr>
<td>資料</td>
</tr>
</tfoot>
</table>
注意
——如果沒有撰寫tbody，瀏覽器會自動添加，
——thead與tfoot，高度不會隨著表格高度變化，手動指定也不會變化，
● 單元格合并
水平方向上的單元格合并
? 方法：td添加colspan屬性，向后合并——把某一個單元格當做多個單元格看待，需要注意的是，后面會多出一些單元格，需要手動刪掉多出的單元格，
垂直方向上的單元格合并
? 方法：td添加rowspan屬性，
表單標簽
● 作用
收集用戶資訊
● 格式
<form>
<表單元素>
</form>
表單元素
在HTML中，標簽/標記/元素都是指標簽，有自己的默認功能，
表單_input標簽
● type屬性
? 屬性值的不同，決定input各項功能和外觀，
? type屬性值介紹
——明文輸入屬性：text
——暗文輸入屬性：password
<input type="text">
<input type="password">
——默認值屬性：value
<input type="text" value="https://www.cnblogs.com/sdsnwq/p/默認">
——單選框屬性
? 默認情況下是不互斥的，要想互斥，必須設定一個name屬性，name屬性的值要相同，值隨便寫，
? 要想設定默認選擇某一個，添加checked屬性，
<input type="radio" name="X" >男
<input type="radio" name="X" >女
<input type="radio" name="X" checked='checked'>保密
——多選框屬性
? 要想設定默認選擇某幾個，添加checked屬性，
<input type="checkbox">籃球
<input type="checkbox">足球
——按鈕屬性
定義一個普通按鈕
? 作用：配合js完成一些操作，onclick會有彈窗
<input type="button" value="https://www.cnblogs.com/sdsnwq/p/我是按鈕" Onclick="alert('彈出提示')" >
定義一個圖片按鈕
<input type="image" srce="圖片" Onlick="alert('inj')" >
定義一個重置按鈕
? 作用：清空表單中的資料，有默認的標題，通過value修改，
<input type="reset" value="https://www.cnblogs.com/sdsnwq/p/顯示內容" >
提交按鈕
? 作用：將表單中的資料提交到遠程服務器，條件，需要指定哪個服務器，哪些資料需要提交，
? 通過form標簽的action屬性告訴表單，提交的服務器，
? 通過input的name屬性代表的提交的內容，
<input type="submit" value="https://www.cnblogs.com/sdsnwq/p/顯示內容" >
<form action="服務器地址" >
——隱藏域：hidden
? 作用：悄悄咪咪的收集資訊，
● HTML5新增型別
僅供了解，很多瀏覽器不支持，
郵箱——自動校驗輸入的是否為郵箱格式
<input text="email">
域名——校驗域名
<input text="url">
電話號碼——數字
<input text="number">
時間——通過日歷選擇時間
<input text="date">
顏色——通過取色版選擇顏色
<input text="color">
表單-Label標簽
默認情況下，文字和輸入框是沒有關聯關系的，如果想點擊文字時讓對應的輸入框聚焦，需要進行系結，使用Label標簽，
● 格式
<form>
<label for ="account">賬號：</label><input type="text" id="account"><br>
<label for ="account">密碼：</label><input type="password" id="account"><br>
</form>
將文字用label標簽包裹起來；
給輸入框添加一個ID屬性；
將ID屬性值賦給label進行系結，
● 注意
不用id，將文字和輸入框整個放到label也可以系結，但有局限性，不建議使用，
<label >賬號：<input type="text" ></label>
表單_dalist標簽
給輸入框系結待選項，
很多瀏覽器不支持，僅供了解，
● 格式
<input type"text" list="cars">
<dalist id="cars">
<option>待選項內容1</option>
<option>待選項內容2</option>
</dalist>
給dlist添加一個id屬性，將該屬性值賦值給input的list屬性，
表單_select標簽
定義一個下拉串列，
● 格式
<select>
<option>內容1</option>
<option selected="selected">內容2</option>
</select>
可以通過給option添加一個 selected屬性更改默認內容，
分組顯示格式
<select>
<optgroup label="北京">
<option>區1</option>
<option selected="selected">區2</option>
</optgroup>
<optgroup label="上海">
<option>區1</option>
<option selected="selected">區2</option>
</optgroup>
</select>
表單_textarea標簽
定義一個可以換行的文本框，多行輸入文本框，
● 格式
<textarea></textarea>
默認，輸入框可以無限換行，有默認的寬度和高度，
修改寬高引數，即使指定了也可以無限往下輸入，也可以手動拉伸，
不想手動拉伸，通過css修改（reseze:none），
<textarea cols="列數" rows="行數"></textarea>
video標簽
了解HTML5新增標簽，學習瀏覽器用過的標簽，不支持的了解即可，不建議重點掌握學習，
● 作用
播放視頻
● 格式
<video src="" autoplay="autoplay" controls="controls" >.....</video>
● 屬性
src：視頻地址，必須的屬性，
autoplay：是否需要自動播放，
controls：是否需要顯示控制條，
poster：沒有自動播放之前的占位圖片等，
<video src="" controls="controls" poster="圖片地址">.....</video>
loop：做廣告視頻，視頻播放完畢之后，是否需要回圈播放，
preload：預加載視頻，（不是自動播放使用）
muted：靜音播放
width：視頻寬度
height：視頻高度
video第二種格式
<video>
<source src="" type="video/webm"></source>
<source src="" type="video/mp4"></source>
<source src="" type="video/ogg"></source>
</video>
存在的意義，解決瀏覽器適配不同視頻格式的問題，
● 注意
當前通過video標簽，想要瀏覽器都通過video播放，瀏覽器必須支持HTML5，不然無法播放；若想所有瀏覽器都支持，可通過js的media標簽，
audio標簽
● 作用
播放音頻，
● 格式
和video一樣，
● 注意
——使用方式基本和video一樣，
——有三個屬性不能用：height、width、poster，
詳情和概要標簽
● 作用
利用summary描述概要資訊，用details描述詳情，默認情況下，是折疊模式，
● 格式
<details>
<summary>概要資訊</summary>
詳情資訊
</details>
marquee標簽
● 作用
跑馬燈效果，
● 格式
<marquee>內容</marquee>
● 屬性
滾動方向：direction，上下左右方向控制
<marquee direction="方向控制right、left、up、down">內容</marquee>
滾動速度： scrollamount
<marquee scrollamount="數值">內容</marquee>
回圈次數： loop，默認是-1，無限，
<marquee loop="數值">內容</marquee>
滾動型別：behavior，兩個值，slide滾動到邊界停止，alternate滾動到邊界彈回，
<marquee behavior="alternate、slide">內容</marquee>
● 注意
——不是W3C推薦的，在其文旦各種查找不到，但各瀏覽器都支持，
——還可以設定圖片滾動，
五、HTML中被廢棄的標簽
因為當前HTML標簽只有一個作用就是添加語意，有部分標簽是修改樣式的，雖有被廢棄了，
1.標簽型別
換行
<br>
分割線
<hr>
大小
<font>
文本加粗：bold的縮寫，
<b>
文本添加下劃線：underlined的縮寫，
<u>
文本傾斜：italic的縮寫，
<i>
文本洗掉線：strikethrough的縮寫，
<s>
2.注意
——不到萬不得已不能使用，
——如果要使用，一般作為css的鉤子來使用，
3.替代標簽
strong == b：定義重要性強調的文字，（strong）
ins == u：定義插入的文字，（inserted）
em == i：定義強調的文字，（emphasized）
del == s：定義洗掉的文字，（deleted）
六、字符物體
在HTML中對空格/tab/回車不敏感，會把空格/tab/回車當一個空格處理，
物體區分大小寫哦！
1.空格
一個代表一個空格，記得后面還有分號，
2.大于小于
< ‘less than
> 'greater than
3.著作權符號
©
4.其他
查找吧，網址：https://www.w3school.com.cn/html/html_entities.asp，
------結束-----
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/347281.html
標籤：Html/Css