前言 勤做筆記不僅可以讓自己學的扎實，更重要的是可以讓自己少走彎路。有人說:"再次翻開筆記是什么感覺"，我的回答是:"初戀般的感覺"?；蛟S筆記不一定十全" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > HTML基礎(chǔ)（新手入門必看）

HTML基礎(chǔ)（新手入門必看）

時間：2023-09-26 06:54:02 | 來源：網(wǎng)站運營

時間：2023-09-26 06:54:02 來源：網(wǎng)站運營

HTML基礎(chǔ)（新手入門必看）：「學習筆記」HTML基礎(chǔ)

前言

勤做筆記不僅可以讓自己學的扎實，更重要的是可以讓自己少走彎路。有人說:"再次翻開筆記是什么感覺"，我的回答是:"初戀般的感覺"?；蛟S筆記不一定十全十美，但肯定會讓你有種初戀般的怦然心動。 本章著重復習Html的基礎(chǔ)內(nèi)容，學習Html究竟要學些什么呢？主要是學習各種標簽，來搭建網(wǎng)頁的“結(jié)構(gòu)”。?? 本篇文章主要由五個章節(jié)構(gòu)成，從WEB標準到初識HTML，接著學習HTML常用標簽，最后學習表格列表和表單。 開始充電之旅啦~~~

一、認識WEB

「網(wǎng)頁」主要是由文字、圖像和超鏈接等元素構(gòu)成，當然除了這些元素，網(wǎng)頁中還可以包括音頻、視頻以及Flash等。

「瀏覽器」是網(wǎng)頁顯示、運行的平臺。

「瀏覽器內(nèi)核」(排版引擎、解釋引擎、渲染引擎)

負責讀取網(wǎng)頁內(nèi)容，整理訊息，計算網(wǎng)頁的顯示方式并顯示頁面。
瀏覽器內(nèi)核備注

Web標準

「構(gòu)成」 結(jié)構(gòu)標準，表現(xiàn)標準和行為標準

「Web標準的優(yōu)點」










二、HTML初識

HTML初識

「HTML」(Hyper Text Markup Language):超文本標記語言

「所謂超文本，有2層含義：」

「HTML骨架格式」

<!-- 頁面中最大的標簽 根標簽 --><html> <!-- 頭部標簽 --> <head> <!-- 標題標簽 --> <title></title> </head> <!-- 文檔的主體 --> <body> </body></html>「團隊約定大小寫」

「HTML元素標簽分類」

常規(guī)元素(雙標簽) <標簽名> 內(nèi)容 </標簽名> 比如<body>我是文字</body>? 空元素(單標簽) <標簽名 /> 比如 <br />或<br>「HTML標簽關(guān)系」




文檔類型<!DOCTYPE >

「文檔類型」用來說明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告訴瀏覽器按照HTML5標準解析頁面。

頁面語言lang

lang指定該html標簽內(nèi)容所用的語言

<html lang="en"> en 定義語言為英語 zh-CN定義語言為中文「lang的作用」

字符集

「字符集」(Character set)是多個字符的集合,計算機要準確的處理各種字符集文字，需要進行字符編碼，以便計算機能夠識別和存儲各種文字。

<meta charset="UTF-8" />「meta viewport的用法」 通常viewport是指視窗、視口。瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域。在移動端和pc端視口是不同的，pc端的視口是瀏覽器窗口區(qū)域，而在移動端有三個不同的視口概念：布局視口、視覺視口、理想視口

meta有兩個屬性name 和 http-equiv

name屬性的取值

http-equiv有以下參數(shù)

http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML標簽的語義化

「拓展」 標簽：規(guī)定頁面上所有鏈接的默認 URL 和設(shè)置整體鏈接的打開狀態(tài)

<head> <base href="http://www.baidu.com" target="_blank"> <base target="_self"></head><body> <a href="">測試</a> 跳轉(zhuǎn)到 百度</body>








HTML常用標簽

常用標簽

「1. 排版標簽」主要和css搭配使用，顯示網(wǎng)頁結(jié)構(gòu)的標簽，是網(wǎng)頁布局最常用的標簽。

「2. 排版標簽」

「3. 標簽屬性(行內(nèi)式)」

使用HTML制作網(wǎng)頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設(shè)置。

<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標簽名><手機 顏色="紅色" 大小="5寸"> </手機>「4. 圖像標簽img」




注意：

<img src="cz.jpg" width="300" height="300" border="3" title="這是個小蒲公英" />「5. 鏈接標簽(重點)」

<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>target="_self" 默認窗口彈出方式target="_blank" 新窗口彈出
屬性作用
src 和 href 的區(qū)別

一句話概括:src 是引入資源的 href 是跳轉(zhuǎn)url的

  1. src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯(lián)系。
  2. src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
  3. href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接。如果我們在文檔中添加那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
注意：

  1. 外部鏈接 需要添加 http:// www.baidu.com
  2. 內(nèi)部鏈接 直接鏈接內(nèi)部頁面名稱即可 比如 < a href="index.html"> 首頁
  3. 如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
  4. 不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
錨點定位：通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。

1. 使用相應(yīng)的id名標注跳轉(zhuǎn)目標的位置。 (找目標) <h3 id="two">第2集</h3> ?2. 使用<a href="#id名">鏈接文本</a>創(chuàng)建鏈接文本（被點擊的） <a href="#two"> 「6. 注釋標簽」

<!-- 注釋語句 --> 快捷鍵是： ctrl + / 或者 ctrl +shift + / 團隊約定：注釋內(nèi)容前后各一個空格字符，注釋位于要注釋代碼的上面，單獨占一行

「7. 路徑」




「8. 其他知識」

預(yù)格式化文本pre標簽元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。格式化文本就是 ，按照我們預(yù)先寫好的文字格式來顯示頁面， 保留空格和換行等。

特殊字符

什么是XHTML




寫HTML代碼時應(yīng)注意什么？







表格

「1. 表格」

現(xiàn)在還是較為常用的一種標簽，但不是用來布局，常見顯示、展示表格式數(shù)據(jù)。因為它可以讓數(shù)據(jù)顯示的非常的規(guī)整，可讀性非常好。特別是后臺展示數(shù)據(jù)的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數(shù)據(jù)表現(xiàn)得很有條理。

「2. 創(chuàng)建表格」

<table> <tr> <td>單元格內(nèi)的文字</td> ... </tr> ...</table>table、tr、td，他們是創(chuàng)建表格的基本標簽，缺一不可




表頭單元格標簽th:一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中,只需用表頭標簽<th></th>替代相應(yīng)的單元格標簽<td></td>即可。







表格標題caption通常這個標題會被居中且顯示于表格之上。caption 標簽必須緊隨 table 標簽之后。這個標簽只存在 表格里面才有意義。你是風兒我是沙

<table> <caption>我是表格標題</caption></table>「3. 表格屬性」




三參為0，平時開發(fā)的我們這三個參數(shù) border cellpadding cellspacing 為 0

「4. 合并單元格」,合并的順序我們按照 先上 后下 先左 后右 的順序 ,合并完之后需要刪除多余的單元格。

「5. 總結(jié)表格」

標簽名定義說明
「6. 表格劃分結(jié)構(gòu)」

對于比較復雜的表格，表格的結(jié)構(gòu)也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結(jié)構(gòu)。

注意： 1.<thead></thead>：用于定義表格的頭部。用來放標題之類的東西。<thead> 內(nèi)部必須擁有<tr> 標簽！ /2. <tbody></tbody>：用于定義表格的主體。放數(shù)據(jù)本體 。 /3. <tfoot></tfoot>放表格的腳注之類。 /4. 以上標簽都是放到table標簽中。










列表

「列表ul」容器里面裝載著結(jié)構(gòu)，樣式一致的文字或圖表的一種形式，叫列表。

列表最大的特點就是整齊 、整潔、 有序，跟表格類似，但是它可組合自由度會更高。

「1. 無序列表 ul」

，直接在標簽中輸入其他標簽或者文字的做法是不被允許的。?

<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ......</ul>「2. 有序列表 ol」

<ol type="A"> <li>列表項1</li> <li>列表二</li> <li>列表三</li></ol>「2. 自定義列表 dl」

<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ...</dl>














表單

在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構(gòu)成。表單目的是為了收集用戶信息。




表單控件： 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。 提示信息： 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。 表單域： 它相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。

「1. input 控件」

<input type="屬性值" value="你好">常用屬性：







用戶名: <input type="text" /> 密 碼：<input type="password" />value屬性

用戶名:<input type="text" name="username" value="請輸入用戶名"> name屬性




<input type="radio" name="sex" />男<input type="radio" name="sex" />女checked屬性

性 別:<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女 input 屬性小結(jié)

屬性說明作用
「2. label標簽」

作用：用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。

如何綁定元素呢

第一種 <label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label> 第二種 <label for="sex">男</label> <input type="radio" name="sex" id="sex">「3. textarea控件(文本域)」







<textarea > 文本內(nèi)容 </textarea>文本框和文本域區(qū)別

表單名稱區(qū)別默認值顯示用于場景
「4. select下拉列表」







<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ...</select>

form表單域







<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件</form>常用屬性：

屬性屬性值作用
GET 和 POST 的區(qū)別

團隊約定：

推薦<input type="text" /> <input type="radio" name="name" checked="checked" />











瀏覽器的多進程架構(gòu)

從瀏覽器輸入 URL 到頁面渲染的整個過程都是由 瀏覽器架構(gòu)中的各個進程之間的配合完成。

  1. 瀏覽器主進程: 管理子進程、提供服務(wù)功能
  2. 渲染進程：將HTML、CSS、JS渲染成界面，js引擎v8和排版引擎Blink就在上面，他會為每一個tab頁面創(chuàng)建一個渲染進程
  3. GPU進程：本來是負責處理3Dcss的，后來慢慢的UI界面也交給GPU來繪制
  4. 網(wǎng)絡(luò)進程：就是負責網(wǎng)絡(luò)請求，網(wǎng)絡(luò)資源加載的進程
  5. 插件進程：負責插件的運行的，因為插件很容易崩潰，把它放到獨立的進程里不要讓它影響別人
瀏覽器的多進程架構(gòu)

從用戶輸入信息到頁面展示的不同階段，是不同的進程在發(fā)揮作用，示意圖如下：

從圖中可以看出，整個過程是需要各個進程之間相互配合完成的，過程大致可以描述為：

  1. 用戶輸入url,處理輸入信息，主進程開始導航，交給網(wǎng)絡(luò)進程干活
  2. 網(wǎng)絡(luò)進程發(fā)起網(wǎng)絡(luò)請求，其中有可能會發(fā)生重定向
  3. 服務(wù)器響應(yīng)URL之后，主進程就要通知渲染進程，你要開始干活了
  4. 渲染進程準備好了，要想渲染進程提交數(shù)據(jù)，這個時間叫做提交文檔
  5. 渲染進程接受到數(shù)據(jù)，完成頁面渲染。
具體過程

1.輸入url

2.1 查找瀏覽器緩存

網(wǎng)絡(luò)進程會先看看是否存在本地緩存，如果有就直接返回資源給瀏覽器進程，無則下一步 DNS-> IP -> TCP2.2 DNS解析網(wǎng)絡(luò)進程拿到url后，先會進行DNS域名解析得到IP地址。如果請求協(xié)議是HTTPS，那么還需要建立TLS連接。

2.2 建立TCP連接，三次握手

接下來就是利用IP地址和服務(wù)器建立TCP連接。連接建立之后，向服務(wù)器發(fā)送請求。

3.服務(wù)器響應(yīng)

3.1 重定向

如果響應(yīng)行狀態(tài)碼為301（永久重定向）和302（臨時），那么說明需要重定向到其他url。這時候網(wǎng)絡(luò)進程會從響應(yīng)頭中的Location字段里讀取重定向的地址，并重新發(fā)起網(wǎng)絡(luò)請求。

3.2 響應(yīng)數(shù)據(jù)處理

導航會通過請求頭的Content-type字段判斷響應(yīng)體數(shù)據(jù)的類型。瀏覽器通過這個來決定如何顯示響應(yīng)體的內(nèi)容。比如：若為application/octet-stream，則會按照下載類型來處理這個請求，導航結(jié)束。若為text/html，這就告訴瀏覽器服務(wù)器返回的是html格式，瀏覽器會通知渲染進程，你要干活了。

4.準備渲染進程

默認情況，每個頁面一個渲染進程。但若處于同一站點（同根域名+協(xié)議），那么渲染進程就會復用。

5.提交文檔

「iframe的優(yōu)點」




「iframe的缺點」

label的作用是什么？是怎么用的？

例子1: 點擊" 用戶名:" 就可以定位光標到輸入框

<form><label for="myid "> 用戶名:</label><input type="text" id="myid" /></form>

例子2: 點擊" 用戶名:" 或按鍵alt+1, 都可以定位光標到輸入框

<form> <label for="myid" accesskey="1"> 用戶名:</label> <input type="text" id="myid" tabindex="1" /></form>

for 屬性

功能：表示Label 標簽要綁定的HTML 元素，你點擊這個標簽的時候，所綁定的元素將獲取焦點。

acesskey 屬性 功能：表示訪問Label 標簽所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。 局限性：accessKey 屬性所設(shè)置的快捷鍵不能與瀏覽器的快捷鍵沖突，否則將優(yōu)先激活瀏覽器的快捷鍵。HTML5的form如何關(guān)閉自動完成功能？ HTML的輸入框可以擁有自動完成的功能，當你往輸入框輸入內(nèi)容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列在輸入框下面，這樣就不用全部輸入進去了，直接選擇列表中的項目就可以了。 但有時候我們希望關(guān)閉輸入框的自動完成功能，例如當用戶輸入內(nèi)容的時候，我們希望使用AJAX技術(shù)從數(shù)據(jù)庫搜索并列舉而不是在用戶的歷史記錄中搜索。

關(guān)閉輸入框的自動完成功能有3種方法：在IE的Internet選項菜單里的內(nèi)容--自動完成里面設(shè)置設(shè)置form的autocomplete為"on"或者"off"來開啟或者關(guān)閉自動完成功能設(shè)置輸入框的autocomplete為"on"或者"off"來開啟或者關(guān)閉該輸入框的自動完成功能將 HTML5 看作成開放的網(wǎng)絡(luò)平臺

「什么是 HTML5 的基本構(gòu)件（building block）？」語義 - 提供更準確地描述內(nèi)容。連接 - 提供新的方式與服務(wù)器通信。離線和存儲 - 允許網(wǎng)頁在本地存儲數(shù)據(jù)并有效地離線運行。多媒體 - 在 Open Web 中，視頻和音頻被視為一等公民（first-class citizens）。2D/3D 圖形和特效 - 提供更多種演示選項。性能和集成 - 提供更快的訪問速度和性能更好的計算機硬件。設(shè)備訪問 - 允許使用各種輸入、輸出設(shè)備。外觀 - 可以開發(fā)豐富的主題。瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？ 在瀏覽器的html頭部加上manifest屬性，如果是第一次訪問瀏覽器會根據(jù)manifest的內(nèi)容進行下載存儲離線內(nèi)容，如果已經(jīng)訪問過則從離線存儲中進行加載，然后在比對服務(wù)器如果有新內(nèi)容在更新離線存儲 離線的情況下，瀏覽器就直接使用離線存儲的資源。瀏覽器的渲染過程？

1、將獲取的html解析成dom樹

2、處理css，構(gòu)成層疊樣式表模型CSSOM

3、將dom樹和CSSOM合并為渲染樹

4、根據(jù)CSSOM將渲染樹的節(jié)點布局計算

5、將渲染樹節(jié)點樣式繪制到頁面上 // 注意在渲染的過程中是自上而下渲染，js會阻塞頁面的渲染，優(yōu)先等js執(zhí)行完成如果在渲染的過程中改變了樣式，會造成回流需要重新渲染

link和@import的區(qū)別？

1、從屬關(guān)系區(qū)別：link屬于html標簽，而@import是css提供的。

2、加載順序區(qū)別：頁面被加載時，link會同時被加載，而@import引用的css會等到頁面被加載完再加載。

3、兼容性區(qū)別：import只在IE5以上才能識別，而link是html標簽，無兼容問題。

4、dom可操作性區(qū)別：可以通過JS 操作 DOM ，插入link標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用@import的方式插入樣式

5、權(quán)重區(qū)別：如果已經(jīng)存在相同樣式，@import引入的這個樣式將被該 CSS 文件本身的樣式層疊掉，表現(xiàn)出link方式的樣式權(quán)重高于@import的權(quán)重這樣的直觀效果。（簡而言之，link和@import，誰寫在后面，誰的樣式就被應(yīng)用，后面的樣式覆蓋前面的樣式。）

src與href的區(qū)別？

1、href 是指向網(wǎng)絡(luò)資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

2、src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標



關(guān)鍵詞：入門,新手,基礎(chǔ)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉