Web前端开发之HTML篇
????????前端開(kāi)發(fā)是用來(lái)設(shè)計(jì)給用戶看的網(wǎng)頁(yè)的部分，而Web前端開(kāi)發(fā)則是通過(guò)創(chuàng)建Web頁(yè)面來(lái)呈現(xiàn)給用戶的過(guò)程，其包含了html（結(jié)構(gòu)），css（樣式），JavaScript（行為）三大部分。在本篇文章中，我主要對(duì)html進(jìn)行一個(gè)講解。
目錄
基本概念
html簡(jiǎn)介
標(biāo)簽，元素和屬性
html的文件結(jié)構(gòu)
html中的注釋
HTML的基本標(biāo)簽
標(biāo)題字體
段落
水平分割線
換行
預(yù)留格式
段內(nèi)分組
超鏈接與圖像
超鏈接
圖像
表格與分組
區(qū)域標(biāo)簽
表格標(biāo)簽
列表標(biāo)簽
表單
文本框和密碼框
按鈕
單選框和復(fù)選框
下拉列表框
文本域
id，name和value
其他標(biāo)簽
dl，dt和dd
強(qiáng)調(diào)與斜體
基本概念
html簡(jiǎn)介
html是一種“超文本標(biāo)記語(yǔ)言”它是制作網(wǎng)頁(yè)的標(biāo)準(zhǔn)語(yǔ)言。它包括了一系列標(biāo)簽，并通過(guò)這些標(biāo)簽來(lái)讓資源形成一個(gè)邏輯整體。
對(duì)于html的編寫，我們可以使用Webstorm，sublime，notepad，vscode等等，這具體看自己的喜好。不過(guò)要注意html文件后綴為.htm或.html。
標(biāo)簽，元素和屬性
標(biāo)簽是由尖括號(hào)包圍的通常成對(duì)出現(xiàn)的，元素則是夾在一對(duì)標(biāo)簽之間的內(nèi)容。下面我們舉個(gè)栗子。
<p>Hello World！</p>在這里呢，<p>就是標(biāo)簽，<p></p>這一對(duì)標(biāo)簽中間的Hello World！就是元素。對(duì)于幾對(duì)標(biāo)簽，我們也要進(jìn)行正確的嵌套，例如
<h1><p>歐西給</p></h1>則是正確的嵌套，而
<h1><p>歐內(nèi)的手</h1></p>則是錯(cuò)誤的嵌套，這與括號(hào)匹配是同一個(gè)道理。
<img src="#">而對(duì)于這個(gè)標(biāo)簽，src就是屬性。
html的文件結(jié)構(gòu)
對(duì)于一個(gè)html的文件，我們需要在最上面添加一個(gè)聲明：
<!DOCTYPE html>用來(lái)告知 Web 瀏覽器頁(yè)面使用了哪種 HTML 版本。
html為.htm或.html文件，它包括了頭部和主體部分
<!DOCTYPE html> <html><head><title>歐內(nèi)的手</title></head><body></body> </html>head即為頭部，而body即為主體部分。
頭部提供了瀏覽器和搜索引擎所需要的信息，而主體部分則為該網(wǎng)頁(yè)（網(wǎng)頁(yè)指的就是單個(gè).htm或html文件，而網(wǎng)站則是由一系列網(wǎng)頁(yè)組成的文件夾，這里需要區(qū)分一下）的內(nèi)容
在上述粒子中，對(duì)該編寫的代碼運(yùn)行以后，可以看到上面的標(biāo)簽卡出現(xiàn)了以下的內(nèi)容。
?
?這就是title標(biāo)簽中的內(nèi)容，可為什么是亂碼呢？那是因?yàn)槲覀儧](méi)有設(shè)置正確的編碼，具體的編碼大家自行在空余時(shí)間去自己學(xué)習(xí)。這里出現(xiàn)亂碼是因?yàn)樵次募４鏁r(shí)的代碼和聲明時(shí)的代碼不一致，所以我們需要添加一行代碼，這里我們才取UTF-8的編碼方式。
<!DOCTYPE html> <html><head><meta charset ="UTF-8"><title>歐內(nèi)的手</title></head><body></body> </html>這樣我們運(yùn)行出來(lái)的結(jié)果就是
?正常的了。
html中的注釋
在html中，如果代碼太多了，我們有時(shí)候也會(huì)變得很難理解，這個(gè)時(shí)候我們就需要添加注釋。這與C/C++和java等不一樣，在html我們需要通過(guò) <!--?? -->來(lái)添加注釋。例如：
<body><!-- 歐內(nèi)的手是注釋 --><!-- 我超 --> </body>在這代碼中，可以清晰的看到這注釋，同時(shí)我們可以發(fā)現(xiàn)，注釋是可以換行的。
HTML的基本標(biāo)簽
標(biāo)題字體
在網(wǎng)頁(yè)主體部分中，我們使用<h1>~<h6>來(lái)表示標(biāo)題字體，從h1-h6字體逐漸變小，并且每個(gè)標(biāo)簽都會(huì)被加粗顯示。對(duì)于以下代碼
<!DOCTYPE html> <html> <head><meta charset ="UTF-8"><title>歐內(nèi)的手</title> </head> <body><h1>一號(hào)標(biāo)題</h1><h2>二號(hào)標(biāo)題</h2><h3>三號(hào)標(biāo)題</h3><h4>四號(hào)標(biāo)題</h4><h5>五號(hào)標(biāo)題</h5><h6>六號(hào)標(biāo)題</h6> </body> </html>運(yùn)行后可以出現(xiàn)以下結(jié)果
?
段落
我們用一對(duì)<p></p>來(lái)表示段落，在段落內(nèi)部，連續(xù)空格只顯示一個(gè)空格，在段落內(nèi)部中的換行則被替換為一個(gè)空格。每對(duì)<p></p>標(biāo)簽會(huì)自動(dòng)換行，對(duì)下列代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><p>哈陛下</p><p>P H I G R O S</p><p>霧雨魔理沙</p> </body> </html>?
我們得到了上圖的結(jié)果。
水平分割線
</hr>表示水平分割線
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><p>嘉然</p><hr><p>向晚</p> </body> </html>其效果如圖：
?
換行
上面我們說(shuō)過(guò)在<p>標(biāo)簽對(duì)內(nèi)部我們的換行會(huì)被轉(zhuǎn)化為一個(gè)空格，那么我們應(yīng)該如何在<p>標(biāo)簽內(nèi)部呈現(xiàn)多個(gè)空格的形式和換行呢？
在<p>標(biāo)簽對(duì)內(nèi)部，我們使用 來(lái)表示空格，分好不能少，如圖
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><p>P h i g r o s</p> </body> </html>?
可見(jiàn)中間隔了三個(gè)空格。
對(duì)于端內(nèi)換行，我們使用<br>標(biāo)簽嵌進(jìn)<p>標(biāo)簽對(duì)中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><p>流<br>汗</p> </body> </html>?
得到了上圖的流汗
預(yù)留格式
使用預(yù)留格式標(biāo)簽可讓我們的網(wǎng)頁(yè)呈現(xiàn)和文本編輯器中我們代碼一樣的格式，被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符，而文本也會(huì)呈現(xiàn)為等寬字體。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><pre><p>歐 內(nèi)的手 </p></pre> </body> </html>?
段內(nèi)分組
<span>標(biāo)簽對(duì)嵌在<p>標(biāo)簽對(duì)中主要用于后面CSS樣式的設(shè)計(jì)，這個(gè)我后面在CSS中會(huì)詳細(xì)道來(lái)。
<p>我和我的<span>動(dòng)物</span>朋友</p>超鏈接與圖像
超鏈接
超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，可以是一段文本或者是一個(gè)圖片，你可以通過(guò)點(diǎn)擊該文本或圖像來(lái)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)或文檔。
我們用<a>標(biāo)簽來(lái)建立超鏈接，其中href屬性則是鏈接的對(duì)象。如圖：
<p><a href="index.html">孫笑川</a></p><p><a href="https://www.baidu.com">我的世界</a></p><p><a href="#">嘉心糖</a></p>對(duì)于href屬性的詞，你可以使用本站點(diǎn)的其他網(wǎng)頁(yè)，其他網(wǎng)頁(yè)或者“#”。其中“#”則是虛擬超鏈接，即代碼運(yùn)行后你點(diǎn)擊該超鏈接的字體不會(huì)有任何跳轉(zhuǎn)。
注意：連接到其他站點(diǎn)使用具體鏈接時(shí)，你需要將傳輸協(xié)議加上（即網(wǎng)址前面的https/http）
圖像
在html語(yǔ)言中，要顯示一個(gè)圖像，需要用到<img>標(biāo)簽，它帶有 src和alt屬性，src屬性表示該圖像的鏈接，可以是url，也可以是本地圖片的位置。alt屬性則是當(dāng)圖片不能夠正常顯示時(shí)，就以alt屬性中的文字所代替。
<img src="jiaran.png">則會(huì)顯示當(dāng)前html文件同目錄下的jiaran.png圖像文件，如果圖像文件和當(dāng)前html不在同一個(gè)文件。
如果是這種關(guān)系，其中jiaran.png放在Asoul文件夾里，那么我們可以使用
<img src="Asoul/jiaran.png">而如果是jiaran.png在Asoul文件夾外面，而index.html在文件夾里邊，那么我們采用
<img src="../jiaran.png"/>使用../來(lái)退回到上一文件目錄。返回前幾層文件可以以此類推../../../
在學(xué)用了<img>標(biāo)簽和<a>標(biāo)簽后，我們可以建立圖像的超鏈接，可以寫為下列代碼
<a href="https://www.baidu.com"><img src="../jiaran.png"/></a>那么點(diǎn)擊該圖片就會(huì)跳轉(zhuǎn)到百度首頁(yè)。
表格與分組
區(qū)域標(biāo)簽
區(qū)域標(biāo)簽用<div>表示，用于分區(qū)，通常與CSS搭配使用來(lái)布置網(wǎng)站的樣式。
<div align="center"><p>我超</p><p>牛批</p></div>?對(duì)于該代碼，我們將劃分在了同一個(gè)區(qū)域<div>中，并添加了屬性align="center"，其效果就是使該區(qū)域的字體居中顯示，如上圖。
表格標(biāo)簽
對(duì)于表格，我們使用<table><tr><td>標(biāo)簽來(lái)表示，我們來(lái)舉個(gè)例子：
<table><tr><th>姓名</th><th>力量</th></tr><tr><td>嘉然</td><td>233</td></tr><tr><td>向晚</td><td>232</td></tr></table>在這個(gè)粒子中，<th> 是表頭標(biāo)簽，會(huì)加粗顯示，<tr> 標(biāo)簽定義 HTML 表格中的行，<td> 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。如果我們對(duì)上述的<table>標(biāo)簽加上屬性
則會(huì)呈現(xiàn)出該效果
列表標(biāo)簽
html中列表分為有序列表<ol>和無(wú)序列表<ul>，<ol>的列表排序會(huì)以數(shù)字顯示，<li> 標(biāo)簽定義列表項(xiàng)目，我們給一個(gè)粒子：
<ol><li>嘉然</li><li>向晚</li><li>乃琳</li><li>貝拉</li><li>珈樂(lè)</li> </ol>而對(duì)于無(wú)序列表則是以·顯示的
<ul><li>嘉然</li><li>向晚</li><li>乃琳</li><li>貝拉</li><li>珈樂(lè)</li> </ul>?
表單
表單<form>元素，其格式為
<form action="數(shù)據(jù)處理網(wǎng)頁(yè)">表單元素 </form>文本框和密碼框
文本框和密碼框的設(shè)置需要在<form>中添加表單元素<input>，并設(shè)置其類型type="text"，而密碼框則是type="password"，對(duì)文本框，你所輸入的內(nèi)容都是正常顯示的，密碼框中你所輸入的內(nèi)容都是以*代替的：
<form>賬號(hào)：<input type="text">密碼：<input type="password"></form>?而如果我們?cè)偬砑右粋€(gè)屬性：
<form>賬號(hào)：<input type="text" value="默認(rèn)賬號(hào)">密碼：<input type="password"></form>那么該賬號(hào)框就會(huì)默認(rèn)地顯示value中的內(nèi)容
?
按鈕
對(duì)于按鈕，我們?nèi)匀皇窃诒韱问褂?span style="color:#ffd900;"><input>標(biāo)簽，有兩種類型的按鈕，我們可以設(shè)置成type="submit"和type="reset"，顯然，他們分別是提交按鈕和重置按鈕，而我們也需要對(duì)value屬性進(jìn)行設(shè)置來(lái)讓按鈕上顯示字體，同時(shí)，我們最好能給不同按鈕一個(gè)不同的name屬性
<form>賬號(hào)：<input type="text" value="默認(rèn)賬號(hào)">密碼：<input type="password"><br><input type="submit" value="提交" name="text-submit"><input type="reset" value="重置" name="text-reset"></form>?
單選框和復(fù)選框
html的單選框和復(fù)選框同樣是對(duì)表單中input標(biāo)簽的type屬性更改即可，單選框即為type="radio"，復(fù)選框則為type="checkbox"。
注意：對(duì)于同一組單選框，我們需要把name屬性設(shè)置為同一值，而復(fù)選框則沒(méi)有這個(gè)要求
這里我們應(yīng)該把不同按鈕的value只設(shè)置成不一樣的值，以便進(jìn)行后續(xù)操作。
我們還可以使用checked="checked"來(lái)設(shè)置默認(rèn)選中
<form>單選：<input type="radio" value="boy" name="gender" checked="checked">男<input type="radio" value="girl" name="gender">女<br>多選：<input type="checkbox" value="Seven-Sea" name="sevensea">七海<input type="checkbox" value="azi" name="azi" checked="checked">阿梓<input type="checkbox" value="Xiaoke" name="small-ko">小可</form>?
下拉列表框
對(duì)于下拉列表框，我們不用嵌套于<form>標(biāo)簽中使用，我們使用<select>標(biāo)簽來(lái)代表下拉列表框元素，其中<option>標(biāo)簽表示各個(gè)選項(xiàng)，我們可以添加selected="selected"來(lái)設(shè)置默認(rèn)選中選項(xiàng)
<select><option value="1">七海</option><option value="2" selected="selected">阿梓</option><option value="3">小可</option></select>?
文本域
文本域我們使用<textarea>標(biāo)簽來(lái)表示，rows屬性代表行數(shù)，cols屬性代表列數(shù)：
<textarea rows="10" cols="300">請(qǐng)?jiān)诖溯斎雰?nèi)容捏~</textarea>?
id，name和value
在前面我們提到了name和value，不是所有元素都有name，name可以不唯一，他主要用于提供數(shù)據(jù)給后端的，而value則是提供給后端的那個(gè)值。
id是唯一的，他可以唯一地定位到該元素，主要用在JavaScript中。
其他標(biāo)簽
dl，dt和dd
<dl> 標(biāo)簽定義了定義列表，<dt> 標(biāo)簽定義了定義列表中的項(xiàng)目，而<dd> 在定義列表中定義條目的定義部分,這三個(gè)標(biāo)簽是用于進(jìn)行描述說(shuō)明的
<dl><dt>嘉然</dt><dd>一個(gè)國(guó)產(chǎn)虛擬主播</dd><dt>東雪蓮</dt><dd>勾罕見(jiàn)</dd></dl>?
強(qiáng)調(diào)與斜體
html中有兩種方法可以將文字加粗，一種是<b>，一種<strong>，相比于<b>，<strong>的語(yǔ)義化更強(qiáng)，所以我建議大家加粗文字盡量使用<strong>
對(duì)于斜體，html中使用<i>標(biāo)簽或<em>，同樣<em>語(yǔ)義化更強(qiáng)，他是英文單詞emphasis的縮寫，表達(dá)強(qiáng)調(diào)的意思
<b>晉元帝</b><strong>歐內(nèi)的手</strong><em>歐西給</em><i>哈陛下</i>?以上就是我對(duì)html部分的總結(jié)了，本人也是在邊學(xué)習(xí)的時(shí)候進(jìn)行筆記整理寫的這一篇文章，如有問(wèn)題和不足，還請(qǐng)各位大佬多多指出
總結(jié)
以上是生活随笔為你收集整理的Web前端开发之HTML篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Flutter调试ios中的报错——Xc
- 下一篇： web前端之城市级联