web標準
web標準的構成
主要由結構、表現、行為三個方面組成
| 標準 | 說明 |
|---|---|
| 結構 | 結構用于對網頁元素進行整理和分類，現階段主要學的是HTML， |
| 表現 | 表現用于設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是css |
| 行為 | 行為是指網頁模型的定義及互動的撰寫，現階段主要學的是Javascript |
HTML的語法規范
- 所有的標簽都包含在<>中間，并且大部分標簽都是成對出現，稱為雙標簽
? 例：—>開始標簽
</html>—>結束標簽（有反斜杠）
2.標簽關系
雙標簽關系可以分為兩類：包含關系和并列關系
包含關系
<head> 父親
<title></title> 兒子
</head>
并列關系
<head> </head>
<body> </body>
2.HTML基本結構標簽
2第一個HTML的網頁
每個網頁都會有都會有一個基本的結構標簽（即骨架標簽），頁面內容也是在這些基本標簽上寫
<html>
<head>
<title>我的第一個頁面</title>
</head>
<body>
姜宇，許諾百年好合
</body>
</html>
| 標簽名 | 定義 | 說明 |
|---|---|---|
| HTML的標簽 | 頁面中最大的標簽，我們稱為根標簽 | |
| 檔案的頭部 | 注意在head標簽中我們必須要設定的標簽是title | |
| 檔案的標題 | 讓頁面擁有一個屬于自己的網頁標題 | |
| 檔案的主體 | 元素包含檔案的所有內容，頁面內容基本都是放到Body里面 |
3 . vscode工具生成骨架標簽新增代碼
3.1<！DOCTYPE>標簽
? 必須放到最前面，宣告標簽、
3.2 lang 語言種類
用來定義當前檔案顯示的語言
- en定義語言為英語
- zh-CN定義語言為中文
en就是英文網站，zh—CN為中文網站
3.3 字符集
字符集（Character set）是多個字符的集合
在標簽內，可以通過標簽的charset屬性來規定HTML檔案應該使用哪種字符編碼，
<meta charset="UTF-8"/>
4.HTML常用標簽
4 .1標簽語意
根據標簽的語意，在合適的地方給一個最為合理的標簽，可以讓頁面結構清晰
4.2 標題標簽《h1》 -《h6》(重要)
HTML提供了6個等級的網頁標題，即
-
.
<body>
<h1> 我是一級標題 </h1>
</body>
是單詞head的縮寫
標簽語意：作為標題使用，并且依據重要性遞減，（一級比二級重要）
特點：
1.加了標題的文字會變得加粗，字號會依次變小
2.一個標題獨占一行
4.3 段落和換行標簽（重要）
4.3.1 分段標簽 p
網頁中，將文字分段顯示，需要用標簽
，用于定義段落，可以將整個網頁分成若干個段落
<p> 我是一個段落標簽 </p>
特點：
- 文本在一個段落會根據瀏覽器視窗大小自動換行，
- 段落與段落之間保有空隙
4.3.2 換行標簽 br/
強制換行break縮寫，只有這一個單標簽
標簽語意：強制換行，
特點：
- br/ 是個單標簽
- br/標簽只是簡單的另起一行，跟段落不一樣，段落之間會插入一些垂直的間距
4.4 文本格式化標簽
-
《strong》《/strong》加粗標簽
-
《b》《/b》也是加粗的標簽
strong比b語氣更加強烈
-
《em》《/em》或者《i》《/i》是傾斜
em語意更強烈
-
《del》《/del》或者《s》《/s》是洗掉線，del語意更強烈
-
《ins》《/ins》或者《u》《/u》是下劃線，ins語意更強烈
-
《hr/》分割線
4.5《div》和《span》標簽（盒子）
兩個標簽沒有語意，僅僅是盒子，裝內容（雙標簽）
特點：
1.div是division的縮寫，表示分割、磁區，span意為跨度，跨距，
2.《div》標簽用來布局，一行只能放一個《div》，大盒子
3.《span》標簽用來間隔，小盒子，一行可以很多個
4.6影像標簽和路徑（重點）img
-
影像標簽
在HTML標簽中，《img》標簽用于定義HTML頁面中的影像，
《img src=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“影像URL（這里寫的是圖片的路徑）”/》為單標簽
src是《img》標簽的必須屬性 ，它用于指定影像檔案的路徑和檔案名
所謂屬性：就是屬于這個影像標簽的特性
屬性 屬性值 說明 src 圖片路徑 必須屬性 alt 文本 替換文本，圖片不能顯示的文字 title 文本 提示文本，滑鼠放到影像上，顯示的文字 width 像素 設定影像的寬度 height 像素 設定影像的高度 border 像素 設定影像的邊框粗細
4.6.1 影像標簽的注意點
- 影像標簽有多個屬性，必須寫在標簽名的后面
- 屬性之間不分前后順序，標簽名和屬性、屬性和屬性之間均以空格分開
- 屬性采取形式為，屬性=“屬性值”
4.7路徑（重點）
4.7.1相對路徑
| 相對路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 影像檔案位于HTML檔案同一級，如《img src=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“baidu.gif”/》 | |
| 下一級路徑 | / | 影像檔案位于HTML檔案下一級，如《img src=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“images/baidu.gif”/》 |
| 上一級路徑 | ../ | 影像檔案位于HTML檔案上一級，如《img src=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“../baidu.gif”》 |
4.7.2 絕對路徑
不多說了
4.8 超鏈接標簽《a》（重點）
《a》標簽用于定義超鏈接，作用是從一個網頁鏈接到另一個網頁
4.8.1 鏈接的語法格式
《a href="https://www.cnblogs.com/sipc-love/archive/2020/11/22/跳轉目標" target=“目標視窗的彈出方式”》文本或影像《/a》
| 屬性 | 作用 |
|---|---|
| href | 用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，他就具有了超鏈接的功能 |
| target | 用于指定鏈接頁面的打開方式，其中 _self為默認值, _blank為新視窗的打開方式 |
4.8.2 鏈接分類
- 外部鏈接：例如《a href=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“http://www.baidu.com”>百度《/a》
- 內部鏈接：網站內部網頁之間的相互鏈接，直接連接內部頁面名稱即可，例如《a href=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“index.html”》首頁《/a》
- 空鏈接：如果當時沒有明確鏈接目標時，《a href=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“#”》首頁《/a》
- 下載鏈接：如果href里面地址是一個檔案或者壓縮包，會下載這個檔案，
- 網頁元素的鏈接：在網頁中的各種網頁元素，如文本、影像、表格、音頻、、視頻等都可以添加超鏈接，
《a href="https://www.cnblogs.com/sipc-love/archive/2020/11/22/http:bababa"》<img src="https://www.cnblogs.com/sipc-love/archive/2020/11/22/圖片檔案"/>《/a》
6.錨點鏈接：點我們的點擊鏈接，可以迅速定位到某個位置，
- 在鏈接文本的href屬性中，設定屬性值為#名字的形式，如《a href=https://www.cnblogs.com/sipc-love/archive/2020/11/22/“#two”》第二集《/a》
- 找到目標位置標簽，里面添加一個id屬性=剛才的名字，如：《h3 id=“two”》第二季介紹《/h3》
自己總結一點：如果在《a》《/a》之間放的是一段話，直接把那段話打在中間就行
如果是一個圖片檔案或者其他檔案，用相應的標簽來引入
4.9HTML中的注釋《！----》
注釋標簽
以《！--》開頭，以“--》”結束
快捷鍵ctrl+/
4.10表格標簽《table》
4.10.1 表格主要作用
主要用于展示資料，布局頁面
4.10.2表格基本用法
<table>
<tr>
<td>單元格內的文字</td>
</tr>
</table>
-
《table》是用于定義表格的標簽
-
《tr》標簽使用預定義表格中的行，必須嵌套在《table》中
-
《td》用于定義表格中的單元格（可以認為是列），必須嵌套在《tr》中
-
字母td指表格資料，即資料單元格的內容
4.10.3 表頭單元格標簽
位于表格第一行或者第一列，居中加粗顯示
《th》《/th》
跟td一個等級
4.10.4表格屬性
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left、center、right | 規定表格相對周圍元素的對齊方式 |
| border | 1或“” | 規定表格單元是否擁有邊框，默認為“”，表示沒有邊框 |
| cellpadding | 像素值 | 規定單元邊沿與其內容之間的空白，默認1像素 |
| cellspacing | 像素值 | 規定單元格之間的空白，默認2像素 |
| width | 像素值或百分比 | 規定表格的寬度 |
這些屬性要寫到《table 這里》
4.10.5表格結構標簽《thead》《tbody》
《thead》標簽表示表格頭部區域，《tbody》標簽表示表格的主體區域
4.10.6 合并單元格《colspan和rowspan》
例：《td colspan=“幾個”》《/td》
跨列合并：colspan=“合并單元格的個數”
跨行合并：rowspan=”合并單元格的個數“
4.11 串列標簽《ul》《li》《dl》
分為三大類：無序串列《ul》串列項《li》、有序串列《ol》串列項《li》
自定義串列《dl》
<dl>
<dt>名詞1</dt>
<dd>小弟</dd>
<dl>
注：串列標簽中只能放li（自定義除外），但《li》可以放其他元素
4.12表單標簽
包括（表單域、表單控制元件、提示資訊）
4.12.1表單域《form》
《form》標簽
<form action="url地址"> methon="提交方式" name="表單域名稱">
各種表單元素控制元件
</form>
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接受并處理表單資料的服務器程式的url地址 |
| method | get/post | 用于設定表單資料的提交方式，其取值為get或post |
| name | 名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單域 |
4.12.2 表單控制元件《input》《select》《textarea》
- 《input/》<--單標簽 輸入表單元素，《input type=”屬性值“/》
- 《select》下拉表單元素
- 《textarea》文本域元素
4.12.3 提示資訊元素定義標簽 《label》標簽
《label》可以系結一個表單元素，當點擊《label》標簽內的文本時，瀏覽器會自動聚焦到相對應的表單元素上
《label for=“sex”》男《/label》
《input type=”radio“ name=”sex“ id=”sex“/》
這個for的屬性值和id的要一樣
4. 13 擴展內容（塊元素和行內元素）
4.13.1 塊元素
塊元素會排斥別的元素和他位于同一行，一般情況下，塊元素內部可以容納其他塊元素和行內元素，
| 塊元素 | 說明 |
|---|---|
| h1~h6 | 標題元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平線 |
| ol | 有序串列 |
| ul | 無序串列 |
4.13.2 行內元素
行內元素只可以容納其他行內元素，不可以容納其他元素
| 行內元素 | 說明 |
|---|---|
| stong | 粗體元素 |
| em | 斜體元素 |
| a | 超鏈接 |
| span | 常用行內元素，結合css定義樣式 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/226361.html
標籤：其他
上一篇：vue實作增刪改查（內附源代碼）