當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/1/8 HTML 23 豆豆

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

互聯網基礎原理

1.什么是互聯網？

互聯網：凡是能彼此通信的設備組成的網絡就叫互聯網。

(1)內部結構：

互聯網指的是通過TCP/IP協議族相互連接在一起的計算機的網絡。TCP是Transmission Control Protocol，傳輸控制協議；IP是Internet Protocol，網際協議。TCP/IP協議族是一個網絡通訊模型，是當前互聯網通訊的基礎架構。

IP用來去識別網絡上的一臺計算機。計算機要連接到一起相互通信，首先需要知道連接的目標計算機，而IP就能標識一臺計算機。做一個類比，我們人跟人之間也需要建立連接才能交流，在一群人中說話，首先喊出一個人的名字，他就知道你在跟他說話了。IP就是計算機的名字。

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

（2）互聯網、因特網、萬維網三者的關系：互聯網包含因特網，因特網包含萬維網。凡是能彼此通信的設備組成的網絡就叫互聯網，因特網是基于TCP/IP讓不同的設備彼此通信，TCP/IP協議由很多協議組成，不同類型的協議又被放在不同的層，其中，位于應用層的協議就有很多，只要應用層使用的是HTTP協議，就稱為萬維網。

2.什么是網站？

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

3.什么是服務器？

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

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

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

4.什么是瀏覽器？

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

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

2、排版引擎主要是負責獲取網頁內容（HTML、XML、圖像、CSS、JS）等信息進行解析、渲染網頁，將網頁的代碼轉換為看得到的頁面

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

5.常用瀏覽器有哪些？

瀏覽器內核備注

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

擴展閱讀：

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

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

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

頁面結構HTML

1.HTML骨架及標簽語法規則

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

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

HTML標簽名、類名、標簽屬性和大部分屬性值統一用小寫

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>標題名稱</title></head><body>內容區域</body> </html> 標簽名定義說明

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

2.HTML元信息標記meta

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

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

3.HTML常用標簽

3.1.1排版標簽

1）標題標簽 h1~h6

標題標簽語義： 作為標題使用，并且依據重要性遞減

2）段落標簽 p

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

<p> 段落文本內容</p>

3）水平線標簽 hr

**作用語義：**創建橫跨網頁水平線的標簽

<hr/>

4）換行標簽

**作用語義：**希望某段文本強制換行顯示

<br/>

5）div和span標簽

div 就是 division 的縮寫分割，分區的意思其實有很多div 來組合網頁。

span 跨度，跨距；范圍

<div>內容</div>  <span></span>

div標簽用來布局的，但是現在一行只能放一個div
span標簽用來布局的，一行上可以放好多個span

標簽名定義說明

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

3.1.2 文本格式化標簽

標簽顯示效果

<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 圖像標簽

**作用語義：**在網頁中顯示圖像就需要使用圖像標簽

3.1.4 鏈接標簽

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a> 屬性作用

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

3.1.5 注釋標簽

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

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

4.HTML語義化結構

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

錨點定位

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

預格式化文本標簽

被包圍在

<pre>

</pre>

表格標簽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> 標簽名定義說明

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

列表標簽

標簽名定義說明

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

表單標簽

input控件

屬性說明作用

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

label標簽

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

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

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

textarea控件(文本域)

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

<textarea></textarea> 表單名稱區別默認值顯示用于場景

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

下拉列表控件 select

表單域 form

在HTML中，form標簽被用于定義表單域，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。

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

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

頁面升級結構HTML5

1.HTML5多媒體標簽

1.1 audio 音頻標簽

屬性值描述

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

1.2 video 視頻標簽