用戶體驗設(shè)計案例鄭州seo技術(shù)服務(wù)顧問
簡介
CSS用于美化內(nèi)容
HTML用于擺放內(nèi)容
可以理解為HTML是基礎(chǔ)，CSS是工具
HTML定義
HTML 超文本標(biāo)記語言——HyperText Markup Language
超文本——鏈接
標(biāo)記——標(biāo)簽，即帶尖括號的文本
標(biāo)簽語法
雙標(biāo)簽
- 開始標(biāo)簽：
<xxx>即尖括號+標(biāo)簽文字 - 結(jié)束標(biāo)簽：
</xxx>即尖括號中+‘/’+標(biāo)簽文字
開始標(biāo)簽和結(jié)束標(biāo)簽中文字需要相同
標(biāo)簽成對出現(xiàn)
單標(biāo)簽
只有開始標(biāo)簽，沒有結(jié)束標(biāo)簽
例如：<br>、<hr>
標(biāo)簽關(guān)系
標(biāo)簽的書寫位置和標(biāo)簽的關(guān)系相關(guān)
父子關(guān)系嵌套，兄弟關(guān)系并列
體現(xiàn)在代碼格式上：
- 父子關(guān)系：子級標(biāo)簽換行且縮進（Tab鍵）
- 兄弟關(guān)系：兄弟標(biāo)簽換行要對齊
注釋
使用<!--...-->在文檔中插入注釋，注釋不會在文檔中顯示
VS Code中使用Ctrl+/即可快速添加注釋
基本骨架
<html>整個網(wǎng)頁的所有內(nèi)容都在其中書寫
</html>
<html><head>網(wǎng)頁頭部</head><body>網(wǎng)頁主體內(nèi)容</body>
</html>
<html><head><title>網(wǎng)頁標(biāo)題</title></head></html>
上述看到的CSDN - 專業(yè)開發(fā)者社區(qū)就是網(wǎng)頁標(biāo)題
如果使用VS Code進行html開發(fā)的話，使用!+Enter/Tab即可快速生成如下基本骨架
標(biāo)簽分類
標(biāo)題標(biāo)簽
使用<h1>-<h6>(雙標(biāo)簽)即可在頁面中添加標(biāo)題
<html><body><h1>章節(jié)標(biāo)題</h1><h2>次標(biāo)題</h2></body>
</html>
顯示特點：
- 文字加粗
- 字號逐漸減小
- 獨占一行（換行）
一般用于新聞標(biāo)題、文章標(biāo)題、網(wǎng)頁區(qū)域名稱等
h1在一個網(wǎng)頁中只能使用一次（用來放新聞標(biāo)題或者網(wǎng)頁LOGO）
h2-h6沒有使用次數(shù)的限制
段落標(biāo)簽
<p>(雙標(biāo)簽)，用于將文章分段
顯示特點：
- 獨占一行
- 段落之間存在間隙
換行和水平線標(biāo)簽
換行：<br>(單標(biāo)簽)
水平線：<hr>(單標(biāo)簽)
文本格式化標(biāo)簽
為文本添加特殊格式，以突出重點。常見的文本格式：加粗、傾斜、下劃線、刪除線等
| 標(biāo)簽名 | 效果 |
|---|---|
| strong | 加粗 |
| b | 加粗 |
| em | 傾斜 |
| i | 傾斜 |
| ins | 下劃線 |
| u | 下劃線 |
| del | |
| s |
strong、em、ins、del標(biāo)簽自帶強調(diào)含義
圖像標(biāo)簽
作用：在網(wǎng)頁中插入圖片
<img src="圖片的 URL">
src用于指定圖像的位置和名稱，是<img>的必須屬性
URL可以是服務(wù)器本地路徑，也可以是其他服務(wù)器的資源路徑
-
相對路徑：從當(dāng)前文件位置出發(fā)查找目標(biāo)文件
-
文件夾名字/表示進入某個文件夾里面 -
./表示當(dāng)前文件所在文件夾 -
../表示當(dāng)前文件的上一級文件夾
-
-
絕對路徑：從盤符出發(fā)查找目標(biāo)文件
img標(biāo)簽還有以下一些屬性：
| 屬性 | 作用 | 說明 |
|---|---|---|
| alt | 替換文本 | 圖片無法顯示的時候顯示的文字 |
| title | 提示文本 | 鼠標(biāo)懸停在圖片上面的時候顯示的文字 |
| width | 圖片寬度 | 值為數(shù)字，沒有單位 |
| height | 圖片高度 | 值為數(shù)字，沒有單位 |
示例：<img src= "./cat.jpg" alt= "替換文本" title= "提示文本">
屬性名=“屬性值”
屬性寫在尖括號里面，標(biāo)簽名后面，標(biāo)簽名和屬性之間用空格隔開，不區(qū)分先后順序
音頻標(biāo)簽
<audio src="音頻的 URL"></audio>
常見屬性：
| 屬性 | 作用 | 特殊說明 |
|---|---|---|
| src(必須屬性) | 音頻URL | 支持格式：MP3、Ogg、Wav |
| controls | 顯示音頻控制面板 | |
| loop | 循環(huán)播放 | |
| autoplay | 自動播放 | 瀏覽器一般禁用自動播放 |
視頻標(biāo)簽
<video src="視頻的 URL"></video>
常見屬性：
| 屬性 | 作用 | 特殊說明 |
|---|---|---|
| src(必須屬性) | 音頻URL | 支持格式：MP4、Ogg、WebM |
| controls | 顯示音頻控制面板 | |
| loop | 循環(huán)播放 | |
| muted | 靜音播放 | |
| autoplay | 自動播放 | 瀏覽器支持在靜音狀態(tài)自動播放 |
超鏈接標(biāo)簽
作用：點擊跳轉(zhuǎn)到其他頁面。
示例：<a href="https://www.baidu.com">跳轉(zhuǎn)到百度</a>
href是跳轉(zhuǎn)地址，是超鏈接的必須屬性
超鏈接默認在當(dāng)前窗口跳轉(zhuǎn)頁面，添加 target=“_blank” 實現(xiàn)新窗口打開頁面。
列表
無序列表
作用：布局排列整齊的不需要規(guī)定順序的區(qū)域。
標(biāo)簽：ul 嵌套 li，ul 是無序列表，li 是列表條目。
<ul><li>第一項</li><li>第二項</li><li>第三項</li> ……
</ul>
ul 標(biāo)簽里面只能包裹 li 標(biāo)簽
li 標(biāo)簽里面可以包裹任何內(nèi)容
有序列表
作用：布局排列整齊的需要規(guī)定順序的區(qū)域。
標(biāo)簽：ol 嵌套 li，ol 是有序列表，li 是列表條目
<ol><li>第一項</li><li>第二項</li><li>第三項</li> ……
</ol>
ol 標(biāo)簽里面只能包裹 li 標(biāo)簽
li 標(biāo)簽里面可以包裹任何內(nèi)容
定義列表
標(biāo)簽：dl 嵌套 dt 和 dd
dl 是定義列表，dt 是定義列表的標(biāo)題，dd 是定義列表的描述 / 詳情。
<dl><dt>列表標(biāo)題</dt><dd>列表描述 / 詳情</dd> ……
</dl>
dl 里面只能包含dt 和 dd
dt 和 dd 里面可以包含任何內(nèi)容
表格
網(wǎng)頁中的表格與 Excel 表格類似，用來展示數(shù)據(jù)。
標(biāo)簽：table 嵌套 tr，tr 嵌套 td / th。
| 標(biāo)簽名 | 說明 |
|---|---|
| table | 表格 |
| tr | 行 |
| th | 表頭單元格 |
| td | 內(nèi)容單元格 |
示例：
<table><tr><th>姓名</th><th>語文</th><th>數(shù)學(xué)</th><th>總分</th></tr><tr><td>張三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>總結(jié)</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
網(wǎng)頁中表格默認沒有邊框線，加上border="1"屬性即可為表格添加邊框線
用表格結(jié)構(gòu)標(biāo)簽把內(nèi)容劃分區(qū)域，讓表格結(jié)構(gòu)更清晰，語義更清晰。
| 標(biāo)簽名 | 說明 | 特殊說明 |
|---|---|---|
| thead | 表格頭部 | 表格頭部內(nèi)容 |
| tbody | 表格主體 | 主要內(nèi)容區(qū)域 |
| tfoot | 表格底部 | 匯總信息區(qū)域 |
修改后的語句如下：
<table border="1"><thead><tr><th>姓名</th><th>語文</th><th>數(shù)學(xué)</th><th>總分</th></tr></thead><tbody><tr><td>張三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>總結(jié)</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
但實際效果并無區(qū)別，因此表結(jié)構(gòu)標(biāo)簽也可省略
合并單元格
合并單元格的步驟：
-
明確合并的目標(biāo)
-
保留最左最上的單元格，添加屬性（取值是數(shù)字，表示需要合并的單元格數(shù)量）
-
跨行合并，保留最上單元格，添加屬性 rowspan
-
跨列合并，保留最左單元格，添加屬性 colspan
-
-
刪除其他單元格
示例：
<table border="1"><tr><th>姓名</th><th>語文</th><th>數(shù)學(xué)</th><th>總分</th></tr><tr><td>張三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>198</td></tr><tr><td>總結(jié)</td><td colspan="3">全市第一</td></tr></table>
表單
作用：收集用戶信息。
使用場景：
- 登錄頁面
- 注冊頁面
- 搜索區(qū)域
input
input (單標(biāo)簽)標(biāo)簽 type 屬性值不同，則功能不同。
<input type="..." >
| type屬性值 | 說明 |
|---|---|
| text | 文本框，用于輸入單行文本 |
| password | 密碼框 |
| radio | 單選框 |
| checkbox | 多選框 |
| file | 上傳文件 |
占位文本：placeholder屬性，文本框和密碼框都可以使用
<input type="..." placeholder="提示信息">
radio
常用屬性：
| 屬性名 | 作用 | 特殊說明 |
|---|---|---|
| name | 控件名稱 | 控件分組，同組只能選中一個(單選功能) |
| checked | 默認選中 | 屬性名和屬性值相同，簡寫為一個單詞 |
示例：
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
file
默認情況下，文件上傳表單控件只能上傳一個文件，添加multiple屬性可以實現(xiàn)文件多選功能
示例：
<input type="file" multiple>
checkbox
復(fù)選框：默認選中同樣使用checked屬性
<input type="checkbox" checked>
下拉菜單
標(biāo)簽：select 嵌套 option，select 是下拉菜單整體，option是下拉菜單的每一項。
示例代碼：
<select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option><option selected>武漢</option></select>
默認顯示第一項，selected屬性實現(xiàn)默認選中功能
文本域
多行輸入文本的表單控件
標(biāo)簽：textarea，雙標(biāo)簽。
<textarea>默認提示文字</textarea>
實際開發(fā)中用CSS設(shè)置文本域的尺寸以及禁用右下角的拖拽功能
label
label標(biāo)簽，雙標(biāo)簽，網(wǎng)頁中用作某個標(biāo)簽的說明文本
可以用label標(biāo)簽綁定文字和表單控件的關(guān)系，增大表單控件的點擊范圍。
-
label 標(biāo)簽只包裹內(nèi)容，不包裹表單控件
設(shè)置 label 標(biāo)簽的 for 屬性值 和表單控件的 id 屬性值相同
<input type="radio" id="man"> <label for="man">男</label> -
使用 label 標(biāo)簽包裹文字和表單控件，不需要屬性
<label><input type="radio"> 女</label>
支持 label 標(biāo)簽增大點擊范圍的表單控件：文本框、密碼框、上傳文件、單選框、多選框、下拉菜單、文本域等等
button
按鈕
<button type="xxx">按鈕</button>
type屬性值：
| type屬性值 | 說明 |
|---|---|
| submit | 提交按鈕，點擊后可以提交數(shù)據(jù)到后臺(默認功能) |
| reset | 重置按鈕，點擊后將表單控件恢復(fù)默認 |
| button | 普通按鈕，默認沒有功能，一般配合JavaScript使用 |
按鈕需配合 form 標(biāo)簽（表單區(qū)域）才能實現(xiàn)對應(yīng)的功能。
示例：
<form><input type="radio" checked name="gender"> 男<input type="radio" name="gender"> 女<button type="reset">重置</button></form>
語義化
無語義的布局標(biāo)簽
- div：獨占一行
- span：不換行
可以理解為div自帶結(jié)束換行，span沒有結(jié)束換行
有語義的布局標(biāo)簽
| 標(biāo)簽名 | 語義 |
|---|---|
| header | 網(wǎng)頁頭部 |
| nav | 網(wǎng)頁導(dǎo)航 |
| footer | 網(wǎng)頁底部 |
| aside | 網(wǎng)頁側(cè)邊欄 |
| section | 網(wǎng)頁區(qū)塊 |
| article | 網(wǎng)頁文章 |
字符實體
作用：在網(wǎng)頁中顯示預(yù)留字符。
| 顯示結(jié)果 | 描述 | 實體名稱 |
|---|---|---|
| 空格 |   | |
| < | 小于號 | < |
| > | 大于號 | > |