HTML
HTML，HyperText Markup Language，超文本標(biāo)記語(yǔ)言。
標(biāo)簽
標(biāo)簽是HTML的基本組成單位。
標(biāo)簽分為：雙標(biāo)簽和單標(biāo)簽.
標(biāo)簽名不區(qū)分大小寫(xiě)，但是推薦小寫(xiě)
雙標(biāo)簽:
<標(biāo)簽名>標(biāo)簽體</標(biāo)簽名>
單標(biāo)簽:
<標(biāo)簽名>
標(biāo)簽屬性
用于給標(biāo)簽提供附加屬性。
可以寫(xiě)在起始標(biāo)簽或單標(biāo)簽中。
<標(biāo)簽名 屬性名=“屬性值”>
天下
有些特殊的屬性，沒(méi)有屬性名，只有屬性值。
注意點(diǎn)：
1、不同的標(biāo)簽，有不同的屬性；也有一些通用屬性
2、屬性名、屬性值不能亂寫(xiě)，是W3C規(guī)定好的
3、屬性名、屬性值，都不區(qū)分大小寫(xiě)，但推薦小寫(xiě)
4、標(biāo)簽中不要出現(xiàn)同名屬性。
基本結(jié)構(gòu)
想要呈現(xiàn)在網(wǎng)頁(yè)中的內(nèi)容寫(xiě)在body標(biāo)簽中。
head標(biāo)簽中的內(nèi)容不會(huì)出現(xiàn)在網(wǎng)頁(yè)中。
head標(biāo)簽中的title標(biāo)簽可以指定網(wǎng)頁(yè)的標(biāo)題。
<html>
<head>
<title>網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
......
</body>
</html>
文檔聲明
作用：告訴瀏覽器當(dāng)前網(wǎng)頁(yè)的般般
寫(xiě)法： <!DOCTYPE html>
注意：文檔聲明必須在網(wǎng)頁(yè)的第一行，且在HTML標(biāo)簽的外側(cè)
HTML標(biāo)準(zhǔn)結(jié)構(gòu)
標(biāo)準(zhǔn)結(jié)構(gòu)如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 輸入
!，然后回車(chē)，可以快速生成標(biāo)準(zhǔn)結(jié)構(gòu)。 - 在存放代碼的文件夾中，存放一個(gè)favicon.ico圖片，可配置網(wǎng)站圖標(biāo)。
HTML基礎(chǔ)
排版標(biāo)簽
| 標(biāo)簽名 | 標(biāo)簽含義 | 單/雙標(biāo)簽 |
|---|---|---|
| h1~h6 | 標(biāo)題 | 雙 |
| p | 段落 | 雙 |
| div | 沒(méi)有任何意義，用于整體布局 | 雙 |
- h1 最好寫(xiě)一個(gè)， h2~h6 能適當(dāng)多寫(xiě)。
- h1~h6 不能互相嵌套，例如： h1 標(biāo)簽中最好不要寫(xiě) h2 標(biāo)簽了。
- p 標(biāo)簽很特殊！它里面不能有： h1~h6 、 p 、 div 標(biāo)簽
語(yǔ)義化標(biāo)簽
標(biāo)簽?zāi)J(rèn)的效果不重要，語(yǔ)義最重要！
塊級(jí)元素與行內(nèi)元素
塊級(jí)元素：獨(dú)占一行（排版標(biāo)簽都是塊級(jí)元素）
行內(nèi)元素：不獨(dú)占一行（比如input），其中只能寫(xiě)行內(nèi)元素，但不能寫(xiě)塊級(jí)元素。
<body>
<!-- 塊級(jí)元素，獨(dú)占一行 -->
<marquee>學(xué)習(xí)</marquee>
<!-- 行內(nèi)元素，不獨(dú)占一行-->
<input type="text">
<!-- 規(guī)則1：塊級(jí)元素中能寫(xiě)行內(nèi)元素、塊級(jí)元素(幾乎什么都能寫(xiě))-->
<div>
<span>學(xué)習(xí)1</span>
<input type="text">
<div>學(xué)習(xí)2</div>
</div>
<!-- 規(guī)則2：行內(nèi)元素中能寫(xiě)行內(nèi)元素，不能寫(xiě)塊級(jí)元素-->
<span>
<span>學(xué)習(xí)1</span>
<input type="text">
</span>
</body>
文本標(biāo)簽
用于包裹詞匯、短語(yǔ)等。
通常寫(xiě)在排版標(biāo)簽中。
排版標(biāo)簽更宏觀（大段文字），文本標(biāo)簽更微觀（詞匯、短語(yǔ)）。
文本標(biāo)簽通常是行內(nèi)元素。
blockquote和address是塊級(jí)元素，其他的是文本標(biāo)簽，都是行內(nèi)元素。
圖片標(biāo)簽
| 標(biāo)簽名 | 標(biāo)簽語(yǔ)義 | 常用屬性 | 單雙標(biāo)簽 |
|---|---|---|---|
| img | 圖片 | src：圖片路徑，具體位置 alt：圖片描述 width：圖片寬度，像素，200px或200 height：圖片高度 |
單 |
示例代碼：
<body>
<img src="./11.PNG" width="100" alt="操作系統(tǒng)">
</body>
像素px是單位
盡量不要同時(shí)修改圖片的寬和高。
alt屬性的作用：
- 搜索引擎通過(guò)alt屬性得知圖片的內(nèi)容。
- 當(dāng)圖片無(wú)法展示時(shí)，瀏覽器會(huì)呈現(xiàn)alt屬性的值。
- 盲人閱讀器會(huì)朗讀alt屬性的值。
src路徑：
相對(duì)路徑和絕對(duì)路徑
圖片格式：jpg、png、bmp、GIF、webp、base64等。
超鏈接
主要作用：從當(dāng)前頁(yè)面進(jìn)行跳轉(zhuǎn)。
實(shí)現(xiàn)功能：
- 跳轉(zhuǎn)到指定頁(yè)面
- 跳轉(zhuǎn)到指定文件
- 跳轉(zhuǎn)到錨點(diǎn)位置
- 喚起指定應(yīng)用
| 標(biāo)簽名 | 標(biāo)簽語(yǔ)義 | 常用屬性 |
|---|---|---|
| a | 超鏈接 |
href:指定要跳轉(zhuǎn)的具體目標(biāo)。target：控制跳轉(zhuǎn)時(shí)如何打開(kāi)頁(yè)面，常用值如下：_self：在本窗口打開(kāi)。_blank：在新窗口打開(kāi)。id：元素的唯一標(biāo)識(shí)，可用于設(shè)置錨點(diǎn)。name：元素的名字，寫(xiě)在a標(biāo)簽中，也能設(shè)置錨點(diǎn)。 |
跳轉(zhuǎn)到指定頁(yè)面
<body>
<a href="https://www.jd.com/" target="_blank">去京東</a>
<a href="./10塊級(jí)元素和行內(nèi)元素.html" target="_self">去看行內(nèi)元素</a>
</body>
跳轉(zhuǎn)到文件
代碼如下：
<body>
<!--跳轉(zhuǎn)到文件-->
<!--瀏覽器可以直接打開(kāi)的文件-->
<a href="./resource/學(xué)習(xí).mp4">學(xué)習(xí)</a>
<a href="./resource/報(bào)名.pdf">報(bào)名表</a>
<a href="./resource/皮卡丘.gif">皮卡丘</a>
<a href="./resource/風(fēng)景.jpg">風(fēng)景</a>
<!--瀏覽器不能打開(kāi)的文件，會(huì)自動(dòng)觸發(fā)下載-->
<a href="./resource/資料.zip">內(nèi)部資料</a>
<!--強(qiáng)制觸發(fā)下載-->
<a href="./resource/學(xué)習(xí).mp4" download="學(xué)習(xí)片段.mp4">下載電影</a>
</body>
跳轉(zhuǎn)到錨點(diǎn)
錨點(diǎn)：網(wǎng)頁(yè)中的一個(gè)標(biāo)記點(diǎn)。
使用方式：
-
設(shè)置錨點(diǎn)
<!-- 第一種方式：a標(biāo)簽配合name屬性 --> <a name="test1"></a> <!-- 第二種方式：其他標(biāo)簽配合id屬性,a以外的其他標(biāo)簽都可以使用id屬性--> <h2 id="test2">我是一個(gè)位置</h2>注意：
- 具有href屬性的a標(biāo)簽是超鏈接，具有name屬性的a標(biāo)簽是錨點(diǎn)。
- name和id是區(qū)分大小寫(xiě)的，且id最好不要用數(shù)字開(kāi)頭。
-
跳轉(zhuǎn)錨點(diǎn)
<!-- 跳轉(zhuǎn)到test1錨點(diǎn)--> <a href="#test1">去test1錨點(diǎn)</a> <!-- 跳到本頁(yè)面頂部 --> <a href="#">回到頂部</a> <!-- 跳轉(zhuǎn)到其他頁(yè)面錨點(diǎn) --> <a href="demo.html#test1">去demo.html頁(yè)面的test1錨點(diǎn)</a> <!-- 刷新本頁(yè)面 --> <a href="">刷新本頁(yè)面</a> <!-- 執(zhí)行一段js,如果還不知道執(zhí)行什么，可以留空，javascript:; --> <a href="javascript:alert(1);">點(diǎn)我彈窗</a>
喚起指定應(yīng)用
通過(guò)a標(biāo)簽，可以喚起設(shè)備應(yīng)用程序。
<!-- 喚起設(shè)備撥號(hào) -->
<a href="tel:10010">電話聯(lián)系</a>
<!-- 喚起設(shè)備發(fā)送郵件 -->
<a href="mailto:10010@qq.com">郵件聯(lián)系</a>
<!-- 喚起設(shè)備發(fā)送短信 -->
<a href="sms:10086">短信聯(lián)系</a>
列表
有序列表
概念：有順序或側(cè)重順序的列表。
<h2>要把大象放冰箱總共分幾步</h2>
<ol>
<li>把冰箱門(mén)打開(kāi)</li>
<li>把大象放進(jìn)去</li>
<li>把冰箱門(mén)關(guān)上</li>
</ol>
無(wú)序列表
概念：無(wú)順序或不側(cè)重順序的列表。
<h2>我想去的幾個(gè)城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武漢</li>
</ul>
列表嵌套
概念：列表中的某項(xiàng)內(nèi)容，包含一個(gè)列表(注意：嵌套時(shí)，請(qǐng)將解構(gòu)寫(xiě)完整)。
示例如下：
<!--嵌套列表-->
<h2>我想去的幾個(gè)城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外灘</li>
<li>杜莎夫人蠟像館</li>
<li>
<a href="https://www.opg.cn">東方明珠</a>
</li>
<li>迪士尼</li>
</ul>
</li>
<li>武漢</li>
<li>西安</li>
</ul>
顯示結(jié)果：
注意：li標(biāo)簽最好寫(xiě)在 ul 或 ol 中，不要單獨(dú)使用。
自定義列表
概念：自定義列表，是一個(gè)包含術(shù)語(yǔ)名稱以及術(shù)語(yǔ)描述的列表。
一個(gè)dl是一個(gè)自定義列表，一個(gè)dt是一個(gè)術(shù)語(yǔ)名稱，一個(gè)dd是一條術(shù)語(yǔ)描述。
示例如下：
<!--自定義列表-->
<h2>如何高效的學(xué)習(xí)？</h2>
<dl>
<dt>做好筆記</dt>
<dd>筆記是我們以后復(fù)習(xí)的一個(gè)抓手</dd>
<dd>筆記可以是電子版，也可以是紙質(zhì)版</dd>
<dt>多加練習(xí)</dt>
<dd>只有敲出來(lái)的代碼，才是自己的</dd>
<dt>別怕出錯(cuò)</dt>
<dd>錯(cuò)很正常，改正后并記住，就是經(jīng)驗(yàn)</dd>
</dl>
顯示結(jié)果：
表格
基本結(jié)構(gòu)
表格涉及到的標(biāo)簽：
-
table：表格 -
caption：表格標(biāo)題 -
thead：表格頭部 -
tbody：表格主體 -
tfoot：表格注腳 -
tr：每一行 -
th、td：每一個(gè)單元格（備注：表格頭部中用 th ，表格主體、表格腳注中用： td ）
示例：
<body>
<table border="1">
<!--表格標(biāo)題-->
<caption>學(xué)生信息</caption>
<!--表格頭部-->
<thead>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>民族</td>
<td>政治面貌</td>
</tr>
</thead>
<!--表格主體-->
<tbody>
<tr>
<td>張三</td>
<td>男</td>
<td>18</td>
<td>漢族</td>
<td>團(tuán)員</td>
</tr>
</tbody>
<!--表格注腳-->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共計(jì)1人</td>
</tr>
</tfoot>
</table>
</body>
結(jié)果：
常用屬性
注意：
<table>元素的border屬性可以控制表格邊框，但是border值的大小，不能控制單元格邊框的寬度，只能控制表格最外側(cè)邊框的寬度，——后期CSS控制。- 默認(rèn)情況下，每列的寬度，看這一列單元格最長(zhǎng)的那個(gè)文字。
- 給某個(gè)
th或td設(shè)置了寬度或高度后，所在行或列的寬度或高度就確定了。
跨行跨列
-
rowspan：指定要跨的行數(shù)。 -
colspan：指定要跨的列數(shù)。
本節(jié)主要是舉例來(lái)理解跨行跨列的使用。
課程表效果：
代碼：
<body>
<table border="1">
<!--表格標(biāo)題-->
<caption>課程表</caption>
<!--表格頭部-->
<thead>
<tr>
<th>項(xiàng)目</th>
<th colspan="5">上課</th>
<th colspan="2">活動(dòng)與休息</th>
</tr>
</thead>
<!--表格主體-->
<tbody>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<th rowspan="4">上午</th>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>英語(yǔ)</th>
<th>英語(yǔ)</th>
<th>物理</th>
<th>數(shù)學(xué)競(jìng)賽</th>
<th rowspan="4">休息</th>
</tr>
<tr>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>英語(yǔ)</th>
<th>英語(yǔ)</th>
<th>物理</th>
<th>數(shù)學(xué)競(jìng)賽</th>
</tr>
<tr>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>英語(yǔ)</th>
<th>英語(yǔ)</th>
<th>物理</th>
<th>數(shù)學(xué)競(jìng)賽</th>
</tr>
<tr>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>英語(yǔ)</th>
<th>英語(yǔ)</th>
<th>物理</th>
<th>數(shù)學(xué)競(jìng)賽</th>
</tr>
<tr>
<th rowspan="2">下午</th>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>英語(yǔ)</th>
<th>英語(yǔ)</th>
<th>物理</th>
<th>數(shù)學(xué)競(jìng)賽</th>
<th rowspan="2">休息</th>
</tr>
<tr>
<th>語(yǔ)文</th>
<th>數(shù)學(xué)</th>
<th>英語(yǔ)</th>
<th>英語(yǔ)</th>
<th>物理</th>
<th>數(shù)學(xué)競(jìng)賽</th>
</tr>
</tbody>
</table>
</body>
結(jié)果示例：
常用標(biāo)簽
| 標(biāo)簽名 | 標(biāo)簽含義 | 單/雙標(biāo)簽 |
|---|---|---|
br |
換行 | 單 |
hr |
分隔 | 單 |
pre |
按原文顯示 | 雙 |
- 使用
<p>標(biāo)簽來(lái)增加文本之間的行間隔，或者使用CSS中的margin屬性。<hr>的語(yǔ)義是分隔。
表單
概念：一個(gè)包含交互的區(qū)域，用于收集用戶提供的數(shù)據(jù)。
基本結(jié)構(gòu)
| 標(biāo)簽名 | 常用屬性 | 標(biāo)簽語(yǔ)義 |
|---|---|---|
form |
action：用于指定表單的提交地址，要與后端人員溝通后確定。target：用于控制表單提交后，如何打開(kāi)頁(yè)面，常用值如下：_self：在本窗口打開(kāi)。_blank：在新窗口打開(kāi)。method：用于控制表單的提交方式，后續(xù)會(huì)詳細(xì)講解。 |
表單 |
input |
type：設(shè)置輸入框的類型，text表示普通文本。name：用于指定提交數(shù)據(jù)的名字，主要用于與后端人員溝通。 |
輸入框 |
button |
按鈕 |
示例：
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
常用表單控件
文本輸入框
<input type="text">
- name屬性：數(shù)據(jù)名稱。
- value屬性：輸入框的默認(rèn)輸入值。
- maxlength：輸入框最大可輸入長(zhǎng)度。
密碼輸入框
<input type="password">
- name屬性：數(shù)據(jù)名稱。
- value屬性：輸入框的默認(rèn)輸入值，一般不用，無(wú)意義。
- maxlength：輸入框最大可輸入長(zhǎng)度。
單選框
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
- name 屬性：數(shù)據(jù)的名稱，注意：想要單選效果，多個(gè) radio 的 name 屬性值要保持一致。
- value 屬性：提交的數(shù)據(jù)值。
- checked 屬性：讓該單選按鈕默認(rèn)選中。
復(fù)選框
<input type="checkbox" name="hobby" value="smoke">抽煙
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">燙頭
- name 屬性：數(shù)據(jù)的名稱。
- value 屬性：提交的數(shù)據(jù)值。
- checked 屬性：讓該復(fù)選框默認(rèn)選中。
隱藏域
<input type="hidden" name="tag" value="100">
用戶不可見(jiàn)的一個(gè)輸入?yún)^(qū)域，作用是： 提交表單的時(shí)候，攜帶一些固定的數(shù)據(jù)。
name 屬性：指定數(shù)據(jù)的名稱。
value 屬性：指定的是真正提交的數(shù)據(jù)。
提交按鈕
<input type="submit" value="點(diǎn)我提交表單">
<button>點(diǎn)我提交表單</button>
- button 標(biāo)簽 type 屬性的默認(rèn)值是 submit 。
- button 不要指定 name 屬性
- input 標(biāo)簽編寫(xiě)的按鈕，使用 value 屬性指定按鈕文字。
重置按鈕
<input type="reset" value="點(diǎn)我重置">
<button type="reset">點(diǎn)我重置</button>
- button 不要指定 name 屬性
- input 標(biāo)簽編寫(xiě)的按鈕，使用 value 屬性指定按鈕文字。
普通按鈕
<input type="button" value="普通按鈕">
<button type="button">普通按鈕</button>
普通按鈕的 type 值為 button ，若不寫(xiě) type 值是 submit 會(huì)引起表單的提交。
文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
- rows 屬性：指定默認(rèn)顯示的行數(shù)，會(huì)影響文本域的高度。
- cols 屬性：指定默認(rèn)顯示的列數(shù)，會(huì)影響文本域的寬度。
- 不能編寫(xiě) type 屬性，其他屬性，與普通文本輸入框一致
下拉框
<select name="from">
<option value="黑">黑龍江</option>
<option value="遼">遼寧</option>
<option value="吉">吉林</option>
<option value="粵" selected>廣東</option>
</select>
- name 屬性：指定數(shù)據(jù)的名稱。
- option 標(biāo)簽設(shè)置 value 屬性， 如果沒(méi)有 value 屬性，提交的數(shù)據(jù)是 option 中間的文字；如果設(shè)置了 value 屬性，提交的數(shù)據(jù)就是 value 的值（建議設(shè)置 value 屬性）
- option 標(biāo)簽設(shè)置了 selected 屬性，表示默認(rèn)選中。
禁用表單控件
給表單空間的標(biāo)簽設(shè)置disabled，可以禁用表單控件。
input 、 textarea 、 button 、 select 、 option 都可以設(shè)置 disabled 屬性.
label標(biāo)簽
label標(biāo)簽可與表單控件相關(guān)聯(lián)，關(guān)聯(lián)后點(diǎn)擊文字，與之對(duì)應(yīng)的表單控件會(huì)獲取焦點(diǎn)。
兩種與 label 關(guān)聯(lián)方式如下：
-
讓 label 標(biāo)簽的 for 屬性的值等于表單控件的 id 。
-
把表單控件套在 label 標(biāo)簽的里面。
總體示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>18表單-常用表單控件</title>
</head>
<body>
<form action="https://search.JD.com/search">
<!--文本框-->
<label for="zhanghu">賬戶：</label>
<input id="zhanghu" type="text" name="account"><br>
<!--密碼框-->
<label>
密碼：
<input type="password" name="pwd"><br>
</label>
<!--單選框-->
性別：
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="famale" checked>女
</label>
<br>
<!--復(fù)選框-->
愛(ài)好：
<input type="checkbox" name="hobby" value="smoke" checked disabled>抽煙
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">燙頭
<br>
<!-- 文本域 -->
其他：
<textarea name="other" cols="30" rows="3"></textarea>
<br>
<!-- 下拉框 -->
籍貫：
<select name="place">
<option value="冀">河北</option>
<option value="鄂" selected>湖北</option>
<option value="湘">湖南</option>
<option value="閱" disabled>廣東</option>
</select>
<br>
<!--隱藏域-->
<input type="hidden" name="abc" value="123"><br>
<!-- 確認(rèn)按鈕 第一種 -->
<!--<button>確認(rèn)</button>-->
<!-- 確認(rèn)按鈕 第二種 -->
<input type="submit" value="確認(rèn)">
<!-- 重置按鈕 第一種 -->
<!-- <button type="reset">重置</button> -->
<!-- 重置按鈕 第二種 -->
<input type="reset" value="重置">
<!-- 普通按鈕 第一種 -->
<!--<button type="button">檢測(cè)賬號(hào)是否被注冊(cè)</button>-->
<!-- 普通按鈕 第二種 -->
<input type="button" value="檢測(cè)賬號(hào)是否被注冊(cè)">
</form>
</body>
</html>
效果：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-820183.html
表單總結(jié)
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-820183.html
到了這里，關(guān)于【前端HTML】HTML基礎(chǔ)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
