當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端学习之———互联网与HTML篇

發(fā)布時間：2024/1/8 HTML 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端学习之———互联网与HTML篇小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

互聯(lián)網(wǎng)基礎(chǔ)原理

1.什么是互聯(lián)網(wǎng)？

互聯(lián)網(wǎng)：凡是能彼此通信的設(shè)備組成的網(wǎng)絡(luò)就叫互聯(lián)網(wǎng)。

(1)內(nèi)部結(jié)構(gòu)：

互聯(lián)網(wǎng)指的是通過TCP/IP協(xié)議族相互連接在一起的計算機(jī)的網(wǎng)絡(luò)。TCP是Transmission Control Protocol，傳輸控制協(xié)議；IP是Internet Protocol，網(wǎng)際協(xié)議。TCP/IP協(xié)議族是一個網(wǎng)絡(luò)通訊模型，是當(dāng)前互聯(lián)網(wǎng)通訊的基礎(chǔ)架構(gòu)。

IP用來去識別網(wǎng)絡(luò)上的一臺計算機(jī)。計算機(jī)要連接到一起相互通信，首先需要知道連接的目標(biāo)計算機(jī)，而IP就能標(biāo)識一臺計算機(jī)。做一個類比，我們?nèi)烁酥g也需要建立連接才能交流，在一群人中說話，首先喊出一個人的名字，他就知道你在跟他說話了。IP就是計算機(jī)的名字。

TCP是計算機(jī)之間控制傳輸信息的協(xié)議，同樣的類比，就是人與人之間溝通的語言和方式。一個不會外語的中國人跟一個美國人交流是無效的，就跟好像一臺計算機(jī)發(fā)送目標(biāo)計算機(jī)無法識別的數(shù)據(jù)包。能夠識別出網(wǎng)絡(luò)上的計算機(jī)，同時也能以相互理解的方式進(jìn)行通訊，這樣計算機(jī)就可以連接到一起了。

（2）互聯(lián)網(wǎng)、因特網(wǎng)、萬維網(wǎng)三者的關(guān)系：互聯(lián)網(wǎng)包含因特網(wǎng)，因特網(wǎng)包含萬維網(wǎng)。凡是能彼此通信的設(shè)備組成的網(wǎng)絡(luò)就叫互聯(lián)網(wǎng)，因特網(wǎng)是基于TCP/IP讓不同的設(shè)備彼此通信，TCP/IP協(xié)議由很多協(xié)議組成，不同類型的協(xié)議又被放在不同的層，其中，位于應(yīng)用層的協(xié)議就有很多，只要應(yīng)用層使用的是HTTP協(xié)議，就稱為萬維網(wǎng)。

2.什么是網(wǎng)站？

網(wǎng)站(Website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種溝通工具，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。

3.什么是服務(wù)器？

從廣義上講，服務(wù)器是指網(wǎng)絡(luò)中能對其它機(jī)器提供某些服務(wù)的計算機(jī)系統(tǒng)。從狹義上講，服務(wù)器是專指某些高性能計算機(jī)，能通過網(wǎng)絡(luò)，對外提供服務(wù)。相對于普通PC來說，穩(wěn)定性、安全性、性能等方面都要求更高，因此在CPU、芯片組、內(nèi)存、磁盤系統(tǒng)、網(wǎng)絡(luò)等硬件和普通PC有所不同。

服務(wù)器作為網(wǎng)絡(luò)的節(jié)點(diǎn)，存儲、處理網(wǎng)絡(luò)上80％的數(shù)據(jù)、信息，因此也被稱為網(wǎng)絡(luò)的靈魂。做一個形象的比喻：服務(wù)器就像是郵局的交換機(jī)，而微機(jī)、筆記本、PDA、手機(jī)等固定或移動的網(wǎng)絡(luò)終端，就如散落在家庭、各種辦公場所、公共場所等處的電話機(jī)。我們與外界日常的生活、工作中的電話交流、溝通，必須經(jīng)過交換機(jī)，才能到達(dá)目標(biāo)電話；同樣如此，網(wǎng)絡(luò)終端設(shè)備如家庭、企業(yè)中的微機(jī)上網(wǎng)，獲取資訊，與外界溝通、娛樂等，也必須經(jīng)過服務(wù)器，因此也可以說是服務(wù)器在“組織”和“領(lǐng)導(dǎo)”這些設(shè)備。

服務(wù)器的構(gòu)成與微機(jī)基本相似，有處理器、硬盤、內(nèi)存、系統(tǒng)總線等，它們是針對具體的網(wǎng)絡(luò)應(yīng)用特別制定的，因而服務(wù)器與微機(jī)在處理能力、穩(wěn)定性、可靠性、安全性、可擴(kuò)展性、可管理性等方面存在差異很大。尤其是隨著信息技術(shù)的進(jìn)步，網(wǎng)絡(luò)的作用越來越明顯，對自己信息系統(tǒng)的數(shù)據(jù)處理能力、安全性等的要求也越來越高，如果您在進(jìn)行電子商務(wù)的過程中被黑客竊走密碼、損失關(guān)鍵商業(yè)數(shù)據(jù)；如果您在自動取款機(jī)上不能正常的存取，您應(yīng)該考慮在這些設(shè)備系統(tǒng)的幕后指揮者————服務(wù)器，而不是埋怨工作人員的素質(zhì)和其他客觀條件的限制。

4.什么是瀏覽器？

瀏覽器是網(wǎng)頁顯示、運(yùn)行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。

1、瀏覽器內(nèi)核也可以理解為排版引擎，主要由2部分組成，渲染引擎和 JS 引擎

2、排版引擎主要是負(fù)責(zé)獲取網(wǎng)頁內(nèi)容（HTML、XML、圖像、CSS、JS）等信息進(jìn)行解析、渲染網(wǎng)頁，將網(wǎng)頁的代碼轉(zhuǎn)換為看得到的頁面

3、瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同，常見的內(nèi)核有Trident、 Gecko、 Webkit、 Presto、 Blink五種

5.常用瀏覽器有哪些？

瀏覽器內(nèi)核備注

IE	Trident	IE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefox	Gecko	可惜這幾年已經(jīng)沒落了，打開速度慢、升級頻繁、豬一樣的隊友flash、神一樣的對手chrome。
Safari	webkit	現(xiàn)在很多人錯誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。蘋果感覺像被別人搶了媳婦，都哭暈再廁所里面了。
chrome	Chromium/Blink	在 Chromium 項目中研發(fā) Blink 渲染引擎（即瀏覽器核心），內(nèi)置于 Chrome 瀏覽器之中。Blink 其實是 WebKit 的分支。大部分國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開發(fā)
Opera	blink	現(xiàn)在跟隨chrome用blink內(nèi)核。

擴(kuò)展閱讀：

移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核，基本上也是屬于webkit二次開發(fā)。iOS以及WP7平臺上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的

6.http請求是如何完成的？

1.解析URL首先瀏覽器會檢測這個url是否正確存在，如果不合法，將會返回一個默認(rèn)的搜索引擎。如果存在并合法，那么可以解析得到協(xié)議（http或者h(yuǎn)ttps）、域名（baidu）、資源（首頁）等信息。 2.DNS查詢- 瀏覽器會先檢查域名信息是否在緩存中。 - 再檢查域名是否在本地的Hosts文件中。 - 如果還不在，那么瀏覽器會向DNS服務(wù)器發(fā)送一個查詢請求，獲得目標(biāo)服務(wù)器的IP地址 3.TCP傳輸及運(yùn)輸這時候瀏覽器獲得了目標(biāo)服務(wù)器的IP（DNS返回）、端口（URL中包含，沒有就使用默認(rèn)（HTTP默認(rèn)80端口）），瀏覽器會調(diào)用庫函數(shù)socket，生成一個TCP流套接字，也就是完成了TCP的封包。TCP封包完成之后，就可以傳輸了，瀏覽器和服務(wù)器就完成了TCP的三次握手，建立了連接，后面就可以請求服務(wù)器資源了。 4.服務(wù)器接收請求并響應(yīng)HTTP有很多請求方法，比如：GET/POST/PUT/DELETE等等，我們?yōu)g覽器輸入URL這種，是GET方法。服務(wù)器接收到GET請求，服務(wù)器根據(jù)請求信息，獲得相應(yīng)的相應(yīng)內(nèi)容。例如我們輸入的是：\[百度一下，你就知道](https://link.zhihu.com/?target=http%3A//www.baidu.com)\，那么意味著訪問百度的首頁文件 5.瀏覽器解析并渲染瀏覽器從服務(wù)器拿到了想要訪問的資源，大多數(shù)時候，這個資源就是HTML頁面，當(dāng)然也可能是一個其他類型的文件。瀏覽器先對HTML文檔進(jìn)行解析，生成解析樹（以DOM元素為節(jié)點(diǎn)的樹）。加載頁面的外部資源，比如JS、CSS、圖片。遍歷DOM樹，并計算每個節(jié)點(diǎn)的樣式，最終完成渲染，變成我們看到的頁面。

頁面結(jié)構(gòu)HTML

1.HTML骨架及標(biāo)簽語法規(guī)則

HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)是用來描述網(wǎng)頁的一種語言。
HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)

標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

HTML標(biāo)簽名、類名、標(biāo)簽屬性和大部分屬性值統(tǒng)一用小寫

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>標(biāo)題名稱</title></head><body>內(nèi)容區(qū)域</body> </html> 標(biāo)簽名定義說明

<html></html>	HTML標(biāo)簽	頁面中最大的標(biāo)簽，我們成為根標(biāo)簽
<head></head>	文檔的頭部	注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title
<titile></title>	文檔的標(biāo)題	讓頁面擁有一個屬于自己的網(wǎng)頁標(biāo)題
<body></body>	文檔的主體	元素包含文檔的所有內(nèi)容，頁面內(nèi)容基本都是放到body里面的

2.HTML元信息標(biāo)記meta

meta 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
meta標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。

<meta charset="utf-8">  <meta name="keywords" content="your tags" />  <meta name="description" content="150 words" />

3.HTML常用標(biāo)簽

3.1.1排版標(biāo)簽

1）標(biāo)題標(biāo)簽 h1~h6

標(biāo)題標(biāo)簽語義： 作為標(biāo)題使用，并且依據(jù)重要性遞減

2）段落標(biāo)簽 p

作用語義： 可以把 HTML 文檔分割為若干段落

<p> 段落文本內(nèi)容</p>

3）水平線標(biāo)簽 hr

**作用語義：**創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)簽

<hr/>

4）換行標(biāo)簽

**作用語義：**希望某段文本強(qiáng)制換行顯示

<br/>

5）div和span標(biāo)簽

div 就是 division 的縮寫分割，分區(qū)的意思其實有很多div 來組合網(wǎng)頁。

span 跨度，跨距；范圍

<div>內(nèi)容</div>  <span></span>

div標(biāo)簽用來布局的，但是現(xiàn)在一行只能放一個div
span標(biāo)簽用來布局的，一行上可以放好多個span

標(biāo)簽名定義說明

<hx></hx>	標(biāo)題標(biāo)簽	作為標(biāo)題使用，并且依據(jù)重要性遞減
<p></p>	段落標(biāo)簽	可以把 HTML 文檔分割為若干段落
<hr />	水平線標(biāo)簽	沒啥可說的，就是一條線
<br />	換行標(biāo)簽
<div></div>	div標(biāo)簽	用來布局的，但是現(xiàn)在一行只能放一個div
<span></span>	span標(biāo)簽	用來布局的，一行上可以放好多個span

3.1.2 文本格式化標(biāo)簽

標(biāo)簽顯示效果

<b></b>&&<strong></strong>	文字以粗體方式顯示(XHTML推薦strong)
<i></i>&&<em></em>	文字以斜體方式顯示(XHTML推薦em)
<s></s>&&<del></del>	文字以加刪除線方式顯示(XHTML推薦del)
<u></u>&&<ins></ins>	文字以加下劃線方式顯示(XHTML推薦u)

3.1.3 圖像標(biāo)簽

**作用語義：**在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)簽

3.1.4 鏈接標(biāo)簽

<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a> 屬性作用

href	用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時，它就具有了超鏈接的功能
target	用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認(rèn)值，_blank為在新窗口中打開方式。

3.1.5 注釋標(biāo)簽

注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機(jī)上，查看源代碼時就可以看到。

快捷鍵是： ctrl + / 或者 ctrl +shift + /

4.HTML語義化結(jié)構(gòu)

<title>：頁面主體內(nèi)容。
<hx>：h1~h6，分級標(biāo)題，<h1> 與 <title> 協(xié)調(diào)有利于搜索引擎優(yōu)化。
<ul>：無序列表。
<li>：有序列表。
<header>：頁眉通常包括網(wǎng)站標(biāo)志、主導(dǎo)航、全站鏈接以及搜索框。
<nav>：標(biāo)記導(dǎo)航，僅對文檔中重要的鏈接群使用。
<main>：頁面主要內(nèi)容，一個頁面只能使用一次。如果是web應(yīng)用，則包圍其主要功能。
<article>：定義外部的內(nèi)容，其中的內(nèi)容獨(dú)立于文檔的其余部分。
<section>：定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
<aside>：定義其所處內(nèi)容之外的內(nèi)容。如側(cè)欄、文章的一組鏈接、廣告、友情鏈接、相關(guān)產(chǎn)品列表等。
<footer>：頁腳，只有當(dāng)父級是body時，才是整個頁面的頁腳。
<small>：呈現(xiàn)小號字體效果，指定細(xì)則，輸入免責(zé)聲明、注解、署名、版權(quán)。
<strong>：和 em 標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。
<em>：將其中的文本表示為強(qiáng)調(diào)的內(nèi)容，表現(xiàn)為斜體。
<mark>：使用黃色突出顯示部分文本。
<figure>：規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）（默認(rèn)有40px左右margin）。
<figcaption>：定義 figure 元素的標(biāo)題，應(yīng)該被置于 figure 元素的第一個或最后一個子元素的位置。
<cite>：表示所包含的文本對某個參考文獻(xiàn)的引用，比如書籍或者雜志的標(biāo)題。
<blockquoto>：定義塊引用，塊引用擁有它們自己的空間。
<q>：短的引述（跨瀏覽器問題，盡量避免使用）。
<time>：datetime屬性遵循特定格式，如果忽略此屬性，文本內(nèi)容必須是合法的日期或者時間格式。
<abbr>：簡稱或縮寫。
<dfn>：定義術(shù)語元素，與定義必須緊挨著，可以在描述列表dl元素中使用。
<address>：作者、相關(guān)人士或組織的聯(lián)系信息（電子郵件地址、指向聯(lián)系信息頁的鏈接）。
<del>：移除的內(nèi)容。
<ins>：添加的內(nèi)容。
<code>：標(biāo)記代碼。
<meter>：定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量。（Internet Explorer 不支持 meter 標(biāo)簽）
<progress>：定義運(yùn)行中的進(jìn)度（進(jìn)程）。

錨點(diǎn)定位

通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。
1. 使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 (找目標(biāo))<h3 id="two">第2集</h3> 2. 使用<a href="#id名">鏈接文本</a>創(chuàng)建鏈接文本（被點(diǎn)擊的）（拉關(guān)系）我也有一個姓畢的姥爺..<a href="#two">
base標(biāo)簽
base 可以設(shè)置整體鏈接的打開狀態(tài)
base 寫到之間
把所有的連接都默認(rèn)添加 target="_blank"

預(yù)格式化文本標(biāo)簽

被包圍在

<pre>

</pre>

表格標(biāo)簽table

<table width="" border="1" cellspacing="0" cellpadding="0" align="center"><caption></caption> <thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody><tfooter></tfooter> </table> 標(biāo)簽名定義說明

<table></table>	表格標(biāo)簽	就是一個四方的盒子
<tr></tr>	表格行標(biāo)簽	行標(biāo)簽要再table標(biāo)簽內(nèi)部才有意義
<td></td>	單元格標(biāo)簽	單元格標(biāo)簽是個容器級元素，可以放任何東西
<th></th>	表頭單元格標(biāo)簽	它還是一個單元格，但是里面的文字會居中且加粗
<caption></caption>	表格標(biāo)題標(biāo)簽	表格的標(biāo)題，跟著表格一起走，和表格居中對齊
clospan 和 rowspan	合并屬性	用來合并單元格的

列表標(biāo)簽

標(biāo)簽名定義說明

<ul></ul>	無序標(biāo)簽	里面只能包含li 沒有順序，我們以后布局中最常用的列表
<ol></ol>	有序標(biāo)簽	里面只能包含li 有順序，使用情況較少
<dl></dl>	自定義列表	里面有2個兄弟， dt 和 dd

表單標(biāo)簽

input控件

屬性說明作用

type	表單類型	用來指定不同的控件類型
value	表單值	表單里面默認(rèn)顯示的文本
name	表單名字	頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。
checked	默認(rèn)選中	表示那個單選或者復(fù)選按鈕一開始就被選中了

label標(biāo)簽

用于綁定一個表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時候, 被綁定的表單元素就會獲得輸入焦點(diǎn)。

第一種用法就是用label直接包括input表單。

第二種用法 for 屬性規(guī)定 label 與哪個表單元素綁定。

textarea控件(文本域)

通過textarea控件可以輕松地創(chuàng)建多行文本輸入框.

<textarea></textarea> 表單名稱區(qū)別默認(rèn)值顯示用于場景

input type=“text”	文本框	只能顯示一行文本	單標(biāo)簽，通過value顯示默認(rèn)值	用戶名、昵稱、密碼等
textarea	文本域	可以顯示多行文本	雙標(biāo)簽，默認(rèn)值寫到標(biāo)簽中間	留言板

下拉列表控件 select

表單域 form

在HTML中，form標(biāo)簽被用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務(wù)器。

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

action	url地址	用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
method	get/post	用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。
name	名稱	用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。

頁面升級結(jié)構(gòu)HTML5

1.HTML5多媒體標(biāo)簽

1.1 audio 音頻標(biāo)簽

屬性值描述

autoplay	autoplay	如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時重新開始播放。
preload	preload	如果出現(xiàn)該屬性，則音頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用 “autoplay”，則忽略該屬性。
src	url	要播放的音頻的 URL。

1.2 video 視頻標(biāo)簽