用半天時間從零開始復(fù)習(xí)前端之html

這篇具有很好參考價值的文章主要介紹了用半天時間從零開始復(fù)習(xí)前端之html。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

前言

科班生的標(biāo)配：半天聽完一門標(biāo)記型語言

準(zhǔn)備工作

webstorm2022

webstrom

第一個html頁面

body

h系列標(biāo)簽

行標(biāo)簽和塊標(biāo)簽

列表標(biāo)簽

表格標(biāo)簽（另起一篇）

萬能的input

1.快速生成多個標(biāo)簽

2.同時選中多個

前言

科班生的標(biāo)配：半天聽完一門標(biāo)記型語言

首先就是玩編程必備的編譯器，這里推薦vscode（微軟開發(fā)，免費，性能好，插件多）；不過這里老師帶我們用的是webStorm2022版（收費但網(wǎng)上有破解，針對前端大型開發(fā)的一款編譯器，專業(yè)性強“新手的話建議vscode，有后端語言例如java，python，go等用這個會更舒服??”）

準(zhǔn)備工作

webstorm2022

云盤：獲取激活與安裝包（越來越嚴(yán)格了，審核了3次，才通過??，貌似不能放百度網(wǎng)盤了，去百度網(wǎng)站獲取吧）

webstrom

首先點擊左上角的文件（file），并進入設(shè)置（setting）

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

在搜索欄輸入chinse（漢化插件），下載并啟動（禁用那里）

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

第一個html頁面

說是頁面，也是文件（畢竟軟件就是無數(shù)存儲著代碼的文件組成的）

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

創(chuàng)建好后的樣子

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

下面逐一解釋下每個部分

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

在vscode中快速生成第一個html文件

在寫代碼的區(qū)域輸入！+ 回車快速生成“效果同webstrom創(chuàng)建好后的樣子”

body

body是承載我們代碼的主要部分，現(xiàn)在在body里輸入內(nèi)容，即可得到效果了??！

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

<!DOCTYPE html>
<html lang="en">
<head>
 ?  <meta charset="UTF-8">
 ?  <title>藍媽媽</title>
</head>
<body>
洛琪希??
?
</body>
</html>

什么？你說你想知道這個??酷酷的小表情怎么做到的，雖然我忘記之前那一篇博客寫的了(window+.)召喚崽子們

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

h系列標(biāo)簽

h1到h6，沒錯有6個這樣的標(biāo)簽（你問為什么不是7個??，大概是6個就已經(jīng)夠用了），那如果強行輸入呢，我就是想知道有沒有第7個葫蘆娃??(小伙子，你很勇嘛)

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

結(jié)果如圖所示，并沒有序列7以上的h標(biāo)簽??，不過求知的態(tài)度是很好的，遇到多了，你自然會有判斷對錯的直覺，在這之前保持你的天真或者聽取前輩們的意見同樣重要??????（過來，讓我看看??！）

這六個標(biāo)簽所顯示的內(nèi)容是依次變小的

如果你嘗試去看網(wǎng)站的源碼，打開f12開發(fā)者工具；早期的很多網(wǎng)站在加入大型框架技術(shù)（vue，react，aj等??）前，包括在用到css技術(shù)亦或者是SEO優(yōu)化時，h標(biāo)簽占了舉足輕重的地位

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

<!DOCTYPE html>
<html lang="en">
<head>
 ?  <meta charset="UTF-8">
 ?  <title>藍媽媽</title>
</head>
<body>
洛琪希??
<h1>1111</h1>
<h2>222</h2>
<h3>333</h3>
<h4>444</h4>
<h5>555</h5>
<h6>666</h6>
<h7>777</h7>
<h8>888</h8>
<h9>999</h9>
<h10>101010</h10>
<h11>11111111111a</h11>
</body>
</html>

行標(biāo)簽和塊標(biāo)簽

p標(biāo)簽和span標(biāo)簽

下面是10個p和10個span的效果

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

<!DOCTYPE html>
<html lang="en">
<head>
 ?  <meta charset="UTF-8">
 ?  <title>藍媽媽</title>
</head>
<body>
?
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span>
</body>
</html>

其實知道這兩個就夠用了，不過嘛，將來準(zhǔn)備考試和面試的時候仍然有必不可少知識點，放在下面自取

常用的行內(nèi)標(biāo)簽(inline)和塊級標(biāo)簽(block)如下:
行內(nèi)標(biāo)簽:
- <span> - 泛用行內(nèi)容器
- <a> - 鏈接
- <strong>, <b> - 加粗
- <em>, <i> - 斜體
- <sup> - 上標(biāo)
- <sub> - 下標(biāo)
- <img> - 圖片
塊級標(biāo)簽:
- <div> - 泛用塊級容器
- <p> - 段落
- <h1>到<h6> - 標(biāo)題
- <ol>, <ul>, <li> - 列表
- <table>, <tr>, <td> - 表格
- <form> - 表單
- <header>, <footer> - 頭部、尾部
- <section>, <article> - 文章內(nèi)容
- <aside> - 側(cè)邊欄
- <pre> - 預(yù)格式化文本
行內(nèi)標(biāo)簽不能換行,塊級標(biāo)簽?zāi)J(rèn)占滿整行。合理使用兩種標(biāo)簽可以構(gòu)建網(wǎng)頁布局。
一般來說,塊級標(biāo)簽用來布局,行內(nèi)標(biāo)簽用來包裹文字及內(nèi)聯(lián)元素。將不同的塊級標(biāo)簽和行內(nèi)標(biāo)簽嵌套搭配可以對網(wǎng)頁進行語義化的布局。

換行和分區(qū)(我是這么叫的，無所謂了??)

br換行，hr換區(qū)

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

<!DOCTYPE html>
<html lang="en">
<head>
 ?  <meta charset="UTF-8">
 ?  <title>藍媽媽</title>
</head>
<body>
?
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<hr>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
<span>我是span</span><span>我是span</span><br><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span><span>我是span</span>
</body>
</html>

列表標(biāo)簽

有序ol，無序ul；當(dāng)然這需要搭配li標(biāo)簽才行

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

（什么，你問我搭配div行不行，h標(biāo)簽行不行??，你很勇嘛）

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

<!DOCTYPE html>
<html lang="en">
<head>
 ?  <meta charset="UTF-8">
 ?  <title>藍媽媽</title>
</head>
<body>
<ol>這里是ol標(biāo)簽</ol>
<ol>這里是ol標(biāo)簽</ol>
<ol>這里是ol標(biāo)簽</ol>
<ol>這里是ol標(biāo)簽</ol>
<ol>這里是ol標(biāo)簽</ol>
<hr>
<ul>這里是ul標(biāo)簽</ul>
<ul>這里是ul標(biāo)簽</ul>
<ul>這里是ul標(biāo)簽</ul>
<ul>這里是ul標(biāo)簽</ul>
<ul>這里是ul標(biāo)簽</ul>
<hr>
<ol>ol
 ?  <ul>ul</ul>
 ?  <ul>ul</ul>
 ?  <ul>ul</ul>
 ?  <ul>ul</ul>
</ol>
<ol>ol
 ?  <ul>ul</ul>
 ?  <ul>ul</ul>
 ?  <ul>ul</ul>
 ?  <ul>ul</ul>
</ol>
<hr>
?
<ul>無序ul
 ?  <div>div1</div>
 ?  <div>div2</div>
?
 ?  <li>1</li>
 ?  <li>1</li>
 ?  <li>1</li>
 ?  <li>1</li>
 ?  <li>1</li></ul>
<hr>
<ol>
有序ol
 ?  <li>2</li>
 ?  <li>2</li>
 ?  <li>2</li>
 ?  <li>2</li>
 ?  <li>2</li>
</ol>
</body>
</html>

表格標(biāo)簽（另起一篇）

HTML 表格 | 菜鳥教程

表單(也需要另起一篇作為補充)

萬能的input

這里列舉了最簡單的情況，其中的提交和重置是默認(rèn)的（在表單中，另外在實際開發(fā)中很少用這種input，大概是很low，沒辦法嘛，少年；畢竟不是所有人都看的很全面??）

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

<!DOCTYPE html>
<html lang="en">
<head>
 ?  <meta charset="UTF-8">
 ?  <title>藍媽媽</title>
</head>
<body>
<form action="">
<!-- ?  action里是兩種提交方式-->
?
</form>
<input type="text">
<input type="password">
<input type="hidden">
?
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="button">
</body>
</html>

下面是補充完整的片段

用半天時間從零開始復(fù)習(xí)前端之html,大前端干貨鋪,學(xué)習(xí),html,前端

<!DOCTYPE html>
<html lang="en">
<head>
 ?  <meta charset="UTF-8">
 ?  <title>藍媽媽</title>
</head>
<body>
<form action="">
<!-- ?  action里是兩種提交方式-->
 ?  <input type="text">
 ?  <input type="password">
 ?  <input type="hidden">
?
 ?  <input type="checkbox">
 ?  <input type="submit">
 ?  <input type="reset">
 ?  <input type="button">
</form>
?
<from>
 ?  用戶名 <input type="text" name="username"><br>
 ?  密碼：<input type="password" name="password">
 ?  <input type="hidden" name="username" value="admin">
 ?  <!-- ? 單選-->
 ?  <input type="radio" name="gender" value=" female" checked="checked">女
 ?  <input type="radio" name="gender" value="male">男
 ?  <br>
 ?  <!-- ? 多選-->
 ?  <input type="checkbox" name="m1" value="music" checked="checked">音樂
 ?  <input type="checkbox" name="m2" value="trip"> 旅游
 ?  <input type="checkbox" name="m3" value="reading" checked="checked">閱讀
 ?  <input type="submit">提交
 ?  <input type="reset">重置
 ?  <input type="button">普通按鈕
 ?  <input type="image" name="btnlmage" src="洛琪希.jpg" width="60" height="30">
 ?  <form enctype="multipart/form-data">文件file</form>
 ?  <input type="file" name="photo">提交
 ?  <!-- ? 表單元素-->
 ?  <select name="fruits" size="5" multiple="multiple">
 ? ? ?  <option value="apple" selected="selected">蘋果</option>
 ? ? ?  <option value="banana">香蕉</option>
 ? ? ?  <option value="grape" selected="selected">葡萄</option>
 ? ? ?  <option value="pear">梨子</option>
 ? ? ?  <option value="peach" selected="selected" >桃子</option>
 ? ? ?  <option value="watermelon"> 西瓜
 ?  </select>
 ?  <br>
 ?  <hr>
 ?  <select name="degree" >
 ? ? ?  <option value="1">博士后</option>
 ? ? ?  <option value="2" >博士</option>
 ? ? ?  <!-- ? ?  selected="selected" 默認(rèn)/默認(rèn)選中-->
 ? ? ?  <option value="3"selected="selected">碩士</option>
 ? ? ?  <option value="0">其他</option>
?
 ?  </select>
 ?  <!-- ? <fieldset></fieldset>元素用于分組， -->
 ?  <!-- ? 這個地方也不太清晰？？-->
 ?  <fieldset>
 ? ? ?  <legend>必填信息</legend>
 ? ? ?  <label for="usernanme"> 用戶名:<input type="text" id="usernanme" value=""></label>
 ? ? ?  <label for="password">密碼</label><input type="password" id="password">
?
 ?  </fieldset>
 ?  <fieldset>
 ? ? ?  <legend>選填信息</legend>
 ? ? ?  <label for="man">男</label><input type="radio" value="1" id="man">
 ? ? ?  <label for="woman">女</label><input type="radio" value="2" id="woman">
 ?  </fieldset>
</from>
?
</body>
</html>

常用快捷技巧