前端初學(xué)大綱02~（第一篇 Web頁面制作基礎(chǔ)）
時間：2023-10-06 01:00:02 | 來源：網(wǎng)站運營
時間：2023-10-06 01:00:02 來源：網(wǎng)站運營
前端初學(xué)大綱02~（第一篇 Web頁面制作基礎(chǔ)）：
第一章 HTML標(biāo)簽介紹
? HTML 標(biāo)簽是由<>包圍的關(guān)鍵詞，例：<html>
? HTML 標(biāo)簽通常成對出現(xiàn)，分為標(biāo)簽開頭和標(biāo)簽結(jié)尾，例：<html> </html>
? 有部分標(biāo)簽是沒有結(jié)束標(biāo)簽，成為單標(biāo)簽，單標(biāo)簽內(nèi)必須用 / 結(jié)尾，例：<br/>
? 頁面中所有的內(nèi)容，都要放在HTML標(biāo)簽中
? HTML標(biāo)簽主題分為三個部分
– 標(biāo)簽名稱
– 標(biāo)簽內(nèi)容
– 標(biāo)簽屬性
? HTML 標(biāo)簽具有語義化
– 語義化：就是僅通過標(biāo)簽名就能判斷出該標(biāo)簽的內(nèi)容。
– 語義化的作用
? 網(wǎng)頁結(jié)構(gòu)層次更清晰。
? 更容易被搜索引擎收錄。
? 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
? 標(biāo)簽的內(nèi)容就是在一對標(biāo)簽內(nèi)部的內(nèi)容
? 標(biāo)簽的內(nèi)容可以是其他標(biāo)簽
第二節(jié) 標(biāo)簽（元素）全局標(biāo)準(zhǔn)屬性
在HTML規(guī)范中，規(guī)定了8個全局標(biāo)準(zhǔn)屬性：
class屬性
? 用于定義元素的類名。
id屬性
? 用于指定元素的唯一id
? 要注意該屬性的值在整個HTML文檔中要具有唯一性
style屬性
? 用于指定元素的行內(nèi)樣式
? 使用該屬性后將會覆蓋任何全局的樣式設(shè)定
title屬性
? 用于指定元素的額外信息
accesskey屬性
? 用于指定激活元素（獲得焦點）的快捷鍵。
tabindex屬性
? 用于指定元素在tab鍵下的次序
dir屬性
? 用于指定元素中內(nèi)容的文本方向
? 屬性值只有l(wèi)tr或rtl兩種，含義分別是left to right和right to left。
lang屬性
? 用于指定元素內(nèi)容的語言
第三節(jié) HTML的全局事件屬性
Window窗口事件
? onload：在頁面加載結(jié)束之后觸發(fā)。
? onunload：在用戶從頁面離開時發(fā)生，例如點擊跳轉(zhuǎn)，頁面重載，關(guān)閉瀏覽器窗口等。
Form表單事件
? onblur：當(dāng)元素失去焦點時觸發(fā)。
? onchange：在元素的元素值被改變時觸發(fā)。
? onfocus：當(dāng)元素獲得焦點時觸發(fā)。
? onreset：當(dāng)表單中的重置按鈕被點擊時觸發(fā)。
? onselest：在元素中文本被選中后觸發(fā)。
? onsubmit：在提交表單時觸發(fā)。
? oninput：改變表單內(nèi)容的時候觸發(fā)
Keyboard鍵盤事件
? onkeydown：在用戶按下按鍵時觸發(fā)。
? onkeypress：在用戶按下按鍵后，按著按鍵時觸發(fā)。該屬性不會對所有按鍵生效，不生效的有：ALT、CTRL、SHIFT、ESC
? onkeyup：當(dāng)用戶釋放按鍵時觸發(fā)。
Mouse鼠標(biāo)事件
? onclick：當(dāng)在元素上發(fā)生鼠標(biāo)點擊時觸發(fā)。
? onblclick：當(dāng)在元素上發(fā)生鼠標(biāo)雙擊時觸發(fā)。
? onmousedown：當(dāng)在元素上按下鼠標(biāo)按鈕時觸發(fā)。
? onmousemove：當(dāng)鼠標(biāo)指針移動到元素上時觸發(fā)。
? onmouseout：當(dāng)鼠標(biāo)指針移出元素時觸發(fā)。
? onmouseover：當(dāng)鼠標(biāo)指針移動到元素上時觸發(fā)。
? onmouseup：當(dāng)在元素上釋放鼠標(biāo)按鈕時觸發(fā)。
? Media媒體事件
? onabort：當(dāng)退出時觸發(fā)。
onwaiting：當(dāng)媒體已停止播放但打算繼續(xù)播放時觸發(fā)。
第二章 HTML的標(biāo)簽（元素）
第一節(jié) 文本標(biāo)簽
段落標(biāo)簽 <p></p>
段落標(biāo)簽用來描述一段文字
標(biāo)題標(biāo)簽 <hx></hx>
? 標(biāo)題標(biāo)簽用來描述一個標(biāo)題
? 標(biāo)題標(biāo)簽總共有六個級別，由高到低分別是h1,h2,h3,h4,h5,h6
? <h1></h1>標(biāo)簽在每個頁面中通常只出現(xiàn)一次
強調(diào)語句標(biāo)簽<em></em>
用于強調(diào)某些文字的重要性
更加強調(diào)標(biāo)簽<strong></strong>
和 <em>標(biāo)簽一樣，用于強調(diào)文本，但它強調(diào)的程度更強一些
無語義標(biāo)簽<span></span>
<span>標(biāo)簽是沒有語義。
短文本引用標(biāo)簽<q></q>
簡短文字的引用。
長文本引用標(biāo)簽<blockquote></blockquote>
定義長的文本引用
換行標(biāo)簽<br/>
<br/>標(biāo)簽作用相當(dāng)于word文檔中的回車,起到文字換行的作用
第二節(jié) 多媒體標(biāo)簽
鏈接標(biāo)簽 <a></a>
圖片標(biāo)簽 <img/>
視頻標(biāo)簽<video></video>
? <video src="mov.mp4" controls="controls">
? Controls:是否有控制面板
? 目前video支持三種視頻格式
– Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
– MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
– WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
音頻標(biāo)簽<audio></audio>
<audio src="a01.mp3"></audio>
第三節(jié) 列表
無序列表標(biāo)簽<ul><li><li/></ul>
? ul-li是沒有前后順序的信息列表
? <ul><ul/>列表定義一個無序列表
? <li><li/>代表無需列表中的每一個元素
<ul>
<li>HTML<li/>
<li>CSS<li/>
<li>JavaScript<li/>
</ul>
有序列表<ol><li><li/></ol>
ol-li列表默認(rèn)情況下，每個li在瀏覽器中都會顯示一個數(shù)字，代表自己的序號
定義列表<dl></dl>
? 定義列表通常和<dt></dt>和<dd></dd>標(biāo)簽一起使用
? <dt></dt>定義列表中的項目
? <dd></dd>描述列表中的項目
<dl>
<dt>學(xué)習(xí)WEB前段需要掌握哪三種語言</dt>
<dd>需要掌握HTML，搭建網(wǎng)頁結(jié)構(gòu)</dd>
<dd>需要掌握CSS，用于修改網(wǎng)頁結(jié)構(gòu)的樣式</dd>
<dd>需要掌握J(rèn)avaScript，用于用戶和計算機交互</dd>
</dl>
第四節(jié) 表格
表格標(biāo)簽<table></table>
表格的一行<tr></tr>
有幾對tr, 表格就有幾行。
表格的表頭<th></th>
表格的頭部的一個單元格，表格表頭。
單元格<td></td>
? 表格的一個單元格，一行中包含幾對<td><td/>，說明一行中就有幾列。
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>小花</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>28</td>
</tr>
</table>
表格合并
? 同一行內(nèi)，合并幾列colspan=“2”
? 同一列內(nèi)，合并幾行rowspan="3"
?
第五節(jié) 表單標(biāo)簽系列
表單標(biāo)簽<form>
? <form></form>表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
? <form method="傳送方式" action="服務(wù)器文件">
? action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php)
? method ： 數(shù)據(jù)傳送的方式（get/post）
輸入標(biāo)簽<input/>
input是最重要的表單標(biāo)簽，重要屬性包括：
? name：為文本框命名，用于提交表單，后臺接收數(shù)據(jù)用。
? value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
? type：通過定義不同的type類型，input的功能有所不同（見下表）
?
type
功能說明
text
單行文本輸入框
password
密碼輸入框（密碼顯示為***)
radio
單選框 （checked屬性用于顯示選中狀態(tài)）
checkbox
復(fù)選框（checked屬性用于顯示選中狀態(tài)）
file
上傳文件
button
普通按鈕
reset
重置按鈕（點擊按鈕，會觸發(fā)form表單的reset事件）
submit
提交按鈕（點擊按鈕，會吃飯form表單的submit事件）
email
專門用于輸入 e-mail
url
專門用于輸入 url
number
專門用于number
range
顯示為滑動條，用于輸入一定范圍內(nèi)的值
date
選取日期和時間（還包含：month、week、time、datetime、datetime-local）
color
選取顏色
<button>按鈕
button標(biāo)簽的功能與<input>按鈕功能相同，button是雙標(biāo)簽，內(nèi)部可以嵌套其他行內(nèi)元素。
下拉選擇框<select></select>
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
? <option value="提交值">選項</option>是下拉選擇框里面的每一個選項
? selected：當(dāng)某個option選項有這個屬性時候，select默認(rèn)選中這個選項
文本域 <textarea></textarea>
? 當(dāng)用戶想輸入大量文字的時候，使用文本域
? cols ：多行輸入域的列數(shù)。
? rows ：多行輸入域的行數(shù)
第六節(jié) 其他語義化標(biāo)簽
盒子<div></div>
? 俗稱為盒子，division（分割）
? 在網(wǎng)頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標(biāo)簽中，這個<div>標(biāo)簽的作用就相當(dāng)于一個容器。
? 什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨立的欄目版塊，就是一個典型的邏輯部分。
網(wǎng)頁頭部<header></header>
? HTML5新增語義化標(biāo)簽，定義網(wǎng)頁的頭部
? 主要用于布局，分割頁面的結(jié)構(gòu)
底部信息<footer></footer>
? HTML5新增語義化標(biāo)簽，定義網(wǎng)頁的底部
? 主要用于布局，分割頁面的結(jié)構(gòu)
導(dǎo)航<nav></nav>
? HTML5新增語義化標(biāo)簽，定義一個導(dǎo)航
? 主要用于布局，分割頁面的結(jié)構(gòu)
文章<article></article>
? HTML5新增語義化標(biāo)簽，定義一篇文章
? 主要用于布局，分割頁面的結(jié)構(gòu)
側(cè)邊欄<aside></aside>
? 語義化標(biāo)簽，定義主題內(nèi)容外的信息
? 主要用于布局，分割頁面的結(jié)構(gòu)
時間標(biāo)簽<time></time>
? 語義化標(biāo)簽，定義一個時間
第三章 頁面結(jié)構(gòu)與模塊劃分
第一節(jié) 網(wǎng)頁結(jié)構(gòu)
? 一個HTML文件是有自己固定的結(jié)構(gòu)的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
? <!DOCTYPE html> 定義文檔類型，告知瀏覽器用哪一種標(biāo)準(zhǔn)解釋HTML
? <html></html>可告知瀏覽器其自身是一個 HTML 文檔。
? <head></head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、<style>、<link>、<meta>等標(biāo)簽.
? <body></body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來。
? <title></title>元素可定義文檔的標(biāo)題。
? <link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)
? <meta>定義文檔的元數(shù)據(jù)，網(wǎng)頁的元信息（charset=“utf-8” 國際編碼類型）
第二節(jié) 模塊劃分
? 每個網(wǎng)頁都是由不同的功能模塊組成的，因此在將制作網(wǎng)頁的時候，我們要將網(wǎng)頁的每個功能模塊分開
– 常見的企業(yè)網(wǎng)站，多由頭部區(qū)，展示圖片區(qū)域，主題區(qū)域，底部信息區(qū)域組成
? 網(wǎng)頁拆分原則
– 由上到下
– 由內(nèi)到外
? div header footer nav article aside等標(biāo)簽多用于模塊劃分
在線咨詢