大前端學(xué)習(xí)筆記2-HTML網(wǎng)頁開發(fā)
時(shí)間：2023-07-05 12:27:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-05 12:27:02 來源：網(wǎng)站運(yùn)營
大前端學(xué)習(xí)筆記2-HTML網(wǎng)頁開發(fā)：
一、HTML概述（一）網(wǎng)頁的本質(zhì)
- HTML就是用制作網(wǎng)頁文件的
- 瀏覽器查看網(wǎng)頁都是.html或.htm文件
- HTML叫做超文本標(biāo)記語言（Hypertext Markup Language），用于搭建網(wǎng)頁的結(jié)構(gòu)
（二）網(wǎng)頁的組成
- 前端三層：HTML(結(jié)構(gòu)層)、CSS(樣式層)、JavaScript(行為層)
- 其他多媒體內(nèi)容：圖片、視頻、音頻、超級(jí)鏈接等
- 所有的網(wǎng)頁文件都是真實(shí)的、物理存在的文件
二、互聯(lián)網(wǎng)原理（一）互聯(lián)網(wǎng)運(yùn)行過程
- 程序員將網(wǎng)頁源文件上傳到服務(wù)器進(jìn)行存儲(chǔ)，用戶后期通過客戶端（如瀏覽器軟件）發(fā)送HTTP請(qǐng)示到服務(wù)器，服務(wù)器接收請(qǐng)求后進(jìn)行響應(yīng)，將存儲(chǔ)的相關(guān)文件通過HTTP響應(yīng)傳到用戶本地客戶端，最終通過客戶端將網(wǎng)頁文件進(jìn)行渲染，顯示出最終用戶看到的網(wǎng)頁效果。
互聯(lián)網(wǎng)運(yùn)行過程服務(wù)器
- 服務(wù)器（server），就是一種特殊的計(jì)算機(jī)，也包括處理器、硬盤、內(nèi)存、系統(tǒng)產(chǎn)品線等，但是由于需要提供更可靠的服務(wù)，因此在處理能力、穩(wěn)定性、可靠性、安全性等方面要求較高。
- 云服務(wù)器
- 目前絕大多數(shù)網(wǎng)站都采用的是云服務(wù)器（Elastic Compute Service，ECS），云服務(wù)器是一種簡(jiǎn)單高效、安全可靠、處理能力可彈性伸縮的計(jì)算服務(wù)。其管理方式比物理服務(wù)器更簡(jiǎn)單高效。用戶無需提前購買硬件，即可迅速創(chuàng)建或釋放任意多臺(tái)云服務(wù)器。
客戶端
- 客戶端（Client）也叫用戶端，指的是普通用戶使用的終端，客戶端有多種形式，比如最常用就是瀏覽器、app等，而Web開發(fā)最主要的客戶端形式還是瀏覽器。
- 瀏覽器（Browser），是一種用戶上網(wǎng)搜索、查看信息資源的應(yīng)用程序。
- 功能：用于發(fā)送HTTP請(qǐng)求到服務(wù)器，接收服務(wù)器發(fā)回的HTTP響應(yīng)，渲染HTML網(wǎng)頁。
- 主流的Web頁面瀏覽器：微軟的IE和Microsoft Edge、Mozilla的Firefox、蘋果公司的Safari、Google的Chrome以及Opera軟件公司的Opera。平時(shí)稱為五大瀏覽器：
- 主流瀏覽器內(nèi)核：因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同，對(duì)網(wǎng)頁的渲染效果會(huì)有差異。
推薦：使用Chrome瀏覽器（渲染效果好、市場(chǎng)占有率高、自帶開發(fā)者調(diào)試工具）HTTP協(xié)議
- Hypertext Transfer Protocol：超文本傳輸協(xié)議。是客戶端瀏覽器或其他程序WEB服務(wù)器之間的應(yīng)用層通信協(xié)議。
- HTTP協(xié)議包含以下兩部分
三、HTML概念（一）純文本格式
- 純文本格式，就是沒有任何文本修飾的，沒有任何粗體、下劃線、斜體、圖形、符號(hào)或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式設(shè)置。
- 格式對(duì)比
（二）HTML
- Hypertext Markup Language：超文本標(biāo)記語言，是用來制作網(wǎng)頁的一種標(biāo)記語言。
- HTML是一種純文本格式的文件，內(nèi)部只能書寫文字內(nèi)容，不能添加圖片、音頻、視頻等，但是在網(wǎng)頁中給用戶呈現(xiàn)的效果卻包含了文字以外的內(nèi)容，這種效果就是HTML語言區(qū)別于其他文件的不同之處。
HTML的功能：利用標(biāo)記給普通的文本添加語義、描述超文本內(nèi)容，搭建網(wǎng)頁的基本結(jié)構(gòu)。
HTML的語義化：HTML文件中，如果沒有使用特殊語義的標(biāo)記，也可以實(shí)現(xiàn)網(wǎng)頁顯示效果，但是利用標(biāo)記給普通的文字添加了不同的語義，能夠讓網(wǎng)站的結(jié)構(gòu)劃分更加清晰。
- 語義化網(wǎng)頁的優(yōu)勢(shì)：
- 方便代碼的閱讀和后期維護(hù)。
- 便于瀏覽器或是網(wǎng)絡(luò)爬蟲更好地解析網(wǎng)站內(nèi)容。
- 使用語義化標(biāo)簽有利于SEO搜索引擎優(yōu)化，提高網(wǎng)站的搜索排名。
四、HTML基本語法（一）HTML規(guī)范版本
- W3C：World Wide Web Consortium，萬維網(wǎng)聯(lián)盟。專門發(fā)布和維護(hù)互聯(lián)網(wǎng)的規(guī)范和標(biāo)準(zhǔn)。
（二）HTML標(biāo)簽
- HTML標(biāo)記通常被稱為HTML標(biāo)簽（HTML tag）。標(biāo)簽在書寫和使用過程中，必須遵循特定的語法。
- HTML標(biāo)簽語法：
（三）HTML元素
- HTML元素指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有內(nèi)容，包含開始標(biāo)簽、元素內(nèi)容、結(jié)束標(biāo)簽。
- 根據(jù)標(biāo)簽內(nèi)部可以存放的元素內(nèi)容不同，可以將雙標(biāo)簽劃分為兩個(gè)級(jí)別。
1.元素間對(duì)空格、換行、縮進(jìn)等形成的空白不敏感，有無空白對(duì)在瀏覽器中加載的效果沒有影響。瀏覽器識(shí)別的是元素的開始和結(jié)束以及互相之間的嵌套關(guān)系。
2.空白折疊現(xiàn)象：元素內(nèi)容如果是文本，所有文字（類似文字內(nèi)容）之間如果有空格、換行、縮進(jìn)等空白字符，在瀏覽器中加載時(shí)，連接在一起的空白會(huì)折疊成一個(gè)空格顯示，這就是空白折疊現(xiàn)象。
（四）HTML屬性
1.書寫位置：必須寫在開始標(biāo)簽或者單標(biāo)簽之內(nèi)，與標(biāo)簽名之間用空格進(jìn)行分隔。
2.屬性包含：屬性名（key）、屬性值（value）。屬性名與屬性值之間的寫法通常稱做
鍵值對(duì)寫法，HTML標(biāo)簽屬性的鍵值對(duì)寫法是：k="v"。XHTML要求屬性值必須在雙引號(hào)內(nèi)部。
如：<p
k="v"></p>
3.一個(gè)標(biāo)簽內(nèi)可以設(shè)置多個(gè)不同的屬性，屬性與屬性之間使用空格進(jìn)行分隔，每個(gè)屬性的鍵值對(duì)寫法都是：k="v"。
如：<p
k="v" k="v" k="v"></p>
4.部分標(biāo)簽屬性k可以設(shè)置多個(gè)屬性值v，所有屬性值v都必須寫在同一對(duì)雙引號(hào)內(nèi)，值與值之間需要使用空格分隔。
如：<p
k="v1 v2 v3 v4"></p>
五、HTML編輯器- 純文本編輯器：所有的純文本編輯器都能編輯HTML文件，例如記事本、Editplus、notepad等。
- 專門制作網(wǎng)頁的軟件
- VS code編輯器（推薦使用）
- VS code軟件，是微軟公司研發(fā)的一款非常方便使用的編輯器（重點(diǎn)是免費(fèi)）。
- VS code擁有超級(jí)豐富的插件擴(kuò)展，可以根據(jù)自己的需求使用不同的插件，對(duì)于開發(fā)者來說更加友好。
- VS code插件安裝
1.打開VS code后，使用ctrl+shift+X打開擴(kuò)展
2.輸入要安裝的插件名稱，點(diǎn)擊Install安裝
六、HTML基本結(jié)構(gòu)（一）基本骨架
- HTML文件最基本的四個(gè)標(biāo)簽，組成了網(wǎng)頁的基本骨架，包括：<html>、<head>、<title、<body>四組標(biāo)簽。
- HTML基本結(jié)構(gòu)標(biāo)簽總結(jié)
（二）DTD
- 完整的HTML文件的第一行內(nèi)容叫做文檔定義類型，英文DocType Definition，簡(jiǎn)稱DTD。也稱作文檔聲明類型，DocType Declaration。
- 作用：告知瀏覽器該網(wǎng)頁使用的是哪個(gè)版本的HTML規(guī)范，讓瀏覽器按照對(duì)應(yīng)版本的HTML語法進(jìn)行解析頁面。
- HTML5版本的DTD：<!DOCTYPE html>
- <!DOCTYPE>聲明位于文檔中的最前面的位置，處于<html>標(biāo)簽之前
- <!DOCTYPE>不是一個(gè)HTML標(biāo)簽，它就是文檔類型聲明標(biāo)簽
（三）命名空間
- <html>元素表示整個(gè)網(wǎng)頁文檔，在開始標(biāo)簽上設(shè)置了命名空間xmlns屬性。
- <html>元素的命名空間規(guī)定了在不同用戶的瀏覽器中標(biāo)簽語義遵循的統(tǒng)一標(biāo)準(zhǔn)，避免出現(xiàn)標(biāo)簽名沖突，這個(gè)標(biāo)準(zhǔn)使用的就是一個(gè)固定的網(wǎng)址http://www.w3.org/1999/xhtml中的規(guī)范。
- lang語言種類
- HTML5版本的命名空間：<html lang="en"></html>
（四）字符集
- <head>標(biāo)簽內(nèi)部的<meta>標(biāo)簽通過http-equiv屬性定義了當(dāng)前的網(wǎng)頁所使用的字符編碼。
- char：character，字符。
- set：集合。
- HTML5版本的字符集：<meta charset="UTF-8">
- 常用字符集編碼：
字符集使用情況建議：
- 如果沒有網(wǎng)頁加載速度要求，或者制作的是外文網(wǎng)站，使用UTF-8。
- 如果含有大量中文漢字的網(wǎng)站，而且要求網(wǎng)頁加載速度快，使用GBK。
- 注意：meta標(biāo)簽聲明的字庫，必須和編輯器軟件默認(rèn)編譯字庫相同，否則會(huì)出現(xiàn)兩個(gè)字庫不匹配，瀏覽器加載時(shí)出現(xiàn)亂碼。
七、HTML常用標(biāo)簽（一）注釋標(biāo)簽
- 在很多代碼技術(shù)中都可以添加注釋內(nèi)容，我們也可以向HTML源代碼添加注釋。
（二）標(biāo)題標(biāo)簽
- 標(biāo)題（Heading）,是通過<h1>~<h6>六個(gè)標(biāo)簽分別來對(duì)六個(gè)級(jí)別的標(biāo)題進(jìn)行定義的。
- <h1>定義最大的標(biāo)題，<h6>定義最小的標(biāo)題。
（三）段落和換行標(biāo)簽
- 段落（paragragh）是通過<p>標(biāo)簽進(jìn)行定義的。
- <br />（breaking）標(biāo)簽是HTML中一個(gè)簡(jiǎn)單的換行符。
（四）文本格式化標(biāo)簽
- HTML中有部分標(biāo)簽是用來對(duì)文字進(jìn)行格式化顯示設(shè)置的，比如：粗體、斜體、下劃線等。
- 文本格式化標(biāo)簽：文本級(jí)（雙標(biāo)簽），內(nèi)部只能書寫文字。
- 在HTML4.0版本規(guī)范后，結(jié)構(gòu)和樣式進(jìn)行了分離，HTML只負(fù)責(zé)搭建結(jié)構(gòu)，CSS負(fù)責(zé)格式化樣式，所以大部分文本格式化標(biāo)簽被廢棄，但是在HTML4.01和HTML1.0 transitional版本中依舊可以使用。
（五）圖像標(biāo)簽和路徑
- 圖像（image）由<img>標(biāo)簽進(jìn)行定義。
- <img>標(biāo)簽是單標(biāo)簽，本身相當(dāng)于一個(gè)特殊的文本。
- <img>標(biāo)簽的作用是在指定的位置插入一張圖片。
- 在HTML文件，常用的插入圖片的類型有：jpg、png、jif。
- 由于<img>為單標(biāo)簽，所以它只能通過屬性進(jìn)行相關(guān)的圖像設(shè)置。
- <img>標(biāo)簽常用屬性：
- 路徑：指的是尋找文件時(shí)所歷經(jīng)的線路，在HTML中有特殊的書寫語法。
- 路徑分為相對(duì)路徑和絕對(duì)路徑，不同的方式出發(fā)點(diǎn)和參考位置不同。
- 建議多使用相對(duì)路徑，可適當(dāng)使用網(wǎng)址形式的絕對(duì)路徑。
- 使用相對(duì)路徑必須將圖片或文件與HTML同時(shí)上傳，而且需要保持相對(duì)位置不變。
（六）音頻和視頻標(biāo)簽（H5新增）
（七）超級(jí)鏈接標(biāo)簽
- HTML使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
- 在HTML中使用<a>標(biāo)簽可以創(chuàng)建鏈接。
- a全稱anchor，錨的意思。
- <a>為雙標(biāo)簽。
- 作用：在指定的位置添加超級(jí)鏈接，提供用戶進(jìn)行點(diǎn)擊和跳轉(zhuǎn)。
- <a>標(biāo)簽可以實(shí)現(xiàn)兩種跳轉(zhuǎn)：跨頁面跳轉(zhuǎn)、頁面內(nèi)跳轉(zhuǎn)。實(shí)現(xiàn)跳轉(zhuǎn)的方式需要用到一些標(biāo)簽屬性。
（八）列表標(biāo)簽（無序列表、有序列表、定義列表）
- 列表用于制作HTML中的一系列項(xiàng)目。
- 通常我們會(huì)將內(nèi)容相關(guān)、結(jié)構(gòu)相似、樣式相近的內(nèi)容使用列表結(jié)構(gòu)進(jìn)行搭建。
- 根據(jù)項(xiàng)目的內(nèi)容不同，可以有三種語義的列表結(jié)構(gòu)：無序列表、有序列表、定義列表。
（九）布局標(biāo)簽（div標(biāo)簽、span標(biāo)簽）
- div和span是最常見的2個(gè)布局標(biāo)簽，<div>和<span>標(biāo)簽常用作布局工具，俗稱盒子。
- <div>和<span>都是沒有具體明確的語義的。
（十）表格標(biāo)簽
- 創(chuàng)建一個(gè)簡(jiǎn)單的表格至少有三個(gè)標(biāo)簽組成，分別是<table>、<tr>、<td>標(biāo)簽。
- 如果要繪制表頭，使用標(biāo)簽<th>
- 一個(gè)完整的表格分為四個(gè)大的區(qū)域：表格標(biāo)題、表格頭部、表格主體、表格頁腳
- 合并單元格：表格的單元格可以進(jìn)行合并，通過th和td的兩個(gè)屬性可以進(jìn)行合并設(shè)置。
- 先列出所有行<tr>，以最小單元格為標(biāo)準(zhǔn)。
- 再添加每一行的<td>或<th>單元格。
- 劃分單元格所在行時(shí)，頂邊對(duì)齊的屬于同一行。
- 將所有行和列寫完后，再查看哪個(gè)單元格有跨行或跨列，屬性值的個(gè)數(shù)要參考最小的單元格。
（十一）表單標(biāo)簽
- HMTL表單用于搜集不同類型的用戶輸入，表單元素就是網(wǎng)頁中提供用戶進(jìn)行輸入或點(diǎn)擊的小控件。
- 在HTML中，一個(gè)完整的表單通常由表單域、提示信息和表單控件（也稱為表單元素）3個(gè)部分構(gòu)成。
1、<input>標(biāo)簽
（1）<input>標(biāo)簽是最重要的一個(gè)表單元素。
（2）<input>標(biāo)簽為單標(biāo)簽，本身相當(dāng)于一個(gè)特殊的文本。
（3）<input>標(biāo)簽需要通過標(biāo)簽屬性實(shí)現(xiàn)各種功能。
2、文本域<textarea>
（1）文本域使用<textarea>標(biāo)簽定義，制作可以輸入多行文本的區(qū)域。
（2）<textarea>標(biāo)簽為雙標(biāo)簽，本身相當(dāng)于一個(gè)特殊的文字。
（3）文本域可以設(shè)置默認(rèn)輸入的文字，在雙標(biāo)簽之間書寫默認(rèn)文字。
3、下拉菜單：HTML中的下拉菜單提前設(shè)置一些選項(xiàng)，然后可以通過點(diǎn)擊選擇其中一項(xiàng)。
4、label標(biāo)簽
八、HTML字符實(shí)體- 在普通文字書寫時(shí)，有一些特殊符號(hào)不能直接書寫（例如：連續(xù)的空格），或者符號(hào)具有特殊功能也不能直接書寫（例如：<>符號(hào)）。
- 可以使用一些HTML提前預(yù)留好的替換字符進(jìn)行書寫，這些替換字符叫做字符實(shí)體。
- 通過查詢W3school手冊(cè)，查看所有的字符實(shí)體。
- 使用方法：可以查詢特殊字符的替換寫法，包含實(shí)體名稱以及實(shí)體編號(hào)。
上一篇筆記：
下一篇筆記：
在線咨詢
