網(wǎng)頁組成

前端三層

HTML（搭建一個項目的結(jié)構(gòu)） CSS（給沒有任何裝飾的結(jié)構(gòu)添加樣式） JavaScript（讓這個項目可以動起來舔清，有行為养葵，與用戶有交流）
網(wǎng)頁的組成還有其他多媒體內(nèi)容：圖片，視頻酵颁，音頻，超鏈接

互聯(lián)網(wǎng)運行過程

程序員可以將網(wǎng)頁源文件上傳到服務(wù)器進行存儲，用戶后期可以通過客戶端（例如Firefox蝌以，Chrome等瀏覽器軟件）發(fā)送HTTP請求到服務(wù)器，服務(wù)器接收請求后進行響應(yīng)户誓，把存儲的網(wǎng)頁源文件通過響應(yīng)（HTTP）傳回用戶的本地客戶端饼灿，最后通過客戶端將網(wǎng)頁文件進行渲染，顯示出最終用戶看到的樣子帝美。

互聯(lián)網(wǎng)運行原理

服務(wù)器（server）

1.特殊的計算機碍彭，也包括了處理器，硬盤悼潭，內(nèi)存庇忌，系統(tǒng)總線等，因為要提供可靠的服務(wù)舰褪，在處理能力皆疹，穩(wěn)定性，可靠性占拍，安全性上面有較高的要求
2.對于web來說略就，服務(wù)器的作用，用于存儲開發(fā)人員上傳的網(wǎng)頁數(shù)據(jù)晃酒，需要響應(yīng)服務(wù)請求表牢，進行處理
3.對于網(wǎng)站服務(wù)器來說，為了用戶能夠隨時訪問贝次，必須24小時不間斷工作

云服務(wù)器（ECS）

針對于服務(wù)器的特殊要求崔兴，云服務(wù)器應(yīng)運而生，ECS是一種簡單高效蛔翅、安全可靠敲茄、處理能力可彈性伸縮的計算服務(wù)。用戶不需要提前購買硬件山析，就可以快速的創(chuàng)建或者釋放多臺云服務(wù)器堰燎。

客戶端（Client）

也叫做用戶端，常用的就是瀏覽器盖腿，app爽待，而web開發(fā)最主要的客戶端形式還是瀏覽器

瀏覽器（Browser）

用戶上網(wǎng)搜索损同，查看信息資源的應(yīng)用程序
功能就是用戶發(fā)送HTTP請求，接收服務(wù)器發(fā)回的HTTP響應(yīng)鸟款，渲染到HTML網(wǎng)頁膏燃。

市面上的主流瀏覽器：IE，F(xiàn)irefox何什，Safari组哩，Chrome，opera

主流瀏覽器

使用Chrome瀏覽器會得到更好的學(xué)習(xí)效果（渲染效果好处渣，市場占有率很高伶贰，F(xiàn)12開發(fā)者調(diào)試工具）

HTTP協(xié)議

超文本傳輸協(xié)議，是客戶端瀏覽器或其他程序與web服務(wù)器之間的應(yīng)用層通信協(xié)議

HTTP請求

1.request罐栈，瀏覽器根據(jù)網(wǎng)址向?qū)?yīng)的服務(wù)器發(fā)送請求
2.發(fā)起請求的方法：在瀏覽器地址欄輸入網(wǎng)址或者點擊網(wǎng)址鏈接
3.HTML頁面解析過程中黍衙，會發(fā)出多個http請求，包括了網(wǎng)頁的圖片荠诬，視頻琅翻，音頻等文件請求

HTTP響應(yīng)

響應(yīng)：response，服務(wù)器根據(jù)請求響應(yīng)一個HTML文件柑贞，將HTML傳輸?shù)娇蛻舳朔阶担跒g覽器中進行HTML網(wǎng)頁的渲染。

HTML概念

純文本格式

沒有任何的文本修飾的钧嘶，沒有粗體棠众，下劃線，圖形有决，斜體闸拿，符號或者特殊打印格式的文本，只保存文本书幕，不保存格式設(shè)置胸墙。最常見的純文本格式文件就是.txt文件。

特點：

1.文本只能保存文本按咒，不保存其他的格式或非文本內(nèi)容，有利于網(wǎng)絡(luò)傳輸
2.所有的純文本格式文件但骨，可以通過直接更改拓展名的方式保存格式
3.純文本格式文件可以使用任意的純文本編輯器進行查看和編輯

富文本格式

與純文本格式相對應(yīng)的就是富文本格式励七，最常見的是.rtf文件，類似于.doc文件奔缠，內(nèi)部可以文本的樣式掠抬，圖片等等。
HTML校哎，JS两波，CSS都是純文本格式文件

HTML

Hypertext Markup Language：超文本標(biāo)記語言瞳步，是一種制作網(wǎng)頁的標(biāo)記語言，也是一種純文本格式文件腰奋。但是他能呈現(xiàn)的效果包含了文字以外的內(nèi)容单起，所以這就是HTML和其他文件的不同之處。給普通的文本添加語義劣坊，描述超文本內(nèi)容嘀倒，搭建網(wǎng)頁的基本結(jié)構(gòu)。

超文本

鏈接另一個文本或者多媒體內(nèi)容的文本局冰，比如圖片鏈接音頻視頻程序等等测蘑。

標(biāo)記

有特殊的書寫規(guī)范，寫給瀏覽器的一種語法格式康二。eg：

<h1>標(biāo)題</h1>碳胳，<p>文本</p>，<img src="路徑" alt="" />

等等

語義化網(wǎng)頁和它的優(yōu)勢：

HTML文件中利用標(biāo)記給普通的文字添加不同的語義沫勿，能夠讓網(wǎng)站的結(jié)構(gòu)劃分更加清晰
eg：

<article>文章內(nèi)容</article>    <nav>導(dǎo)航欄</nav>

1.方便代碼的閱讀和后期維護
2.便于瀏覽器或者是網(wǎng)絡(luò)爬蟲更好地解析網(wǎng)站內(nèi)容
3.使用語義化標(biāo)簽有利于SEO搜索引擎優(yōu)化挨约，提高網(wǎng)站的搜索排名（提高點擊量）

HTML基本語法

HTML規(guī)范版本

W3C，萬維網(wǎng)聯(lián)盟藕帜，發(fā)布與維護互聯(lián)網(wǎng)的規(guī)范和標(biāo)準(zhǔn)

萬維網(wǎng)發(fā)布的版本

從HTML4.0開始變得規(guī)范化烫罩，HTML4.01修復(fù)了HTML4的部分bug，XHTML變得嚴(yán)格了起來洽故，沒有新的東西贝攒。

HTML標(biāo)簽

HTML tag，遵循的語法：
1.標(biāo)簽名必須書寫在一對尖括號<>內(nèi)

<html></html>

2.標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽时甚，雙標(biāo)簽不可省略隘弊，要成對出現(xiàn)

 <p></p>
  <br />

3.雙標(biāo)簽包含開始和結(jié)束標(biāo)簽，結(jié)束時要寫關(guān)閉符號/荒适，單標(biāo)簽也要自封閉書寫梨熙，HTML5中單標(biāo)簽也可以不寫關(guān)閉符號

HTML元素

指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有內(nèi)容，包括開始標(biāo)簽刀诬，元素內(nèi)容咽扇，結(jié)束標(biāo)簽。
eg：雙標(biāo)簽內(nèi)不包含的純文本內(nèi)容陕壹，就是元素內(nèi)容

 <p>文本段落</p>

元素也可以包括其他標(biāo)簽的內(nèi)容质欲，這種我們稱之為嵌套
一個HTML元素div的內(nèi)容可能是多個其他元素組成的，比如p糠馆，h1嘶伟，img等等，我們稱div是p和h1又碌，img的父級元素九昧，相反绊袋，div，h1铸鹰，img就是div的子級元素癌别，p，h1掉奄，img就是同級元素规个，也稱之為兄弟級關(guān)系，嵌套是可以多層的
eg：

<div><h1>標(biāo)題1</h1><p>div內(nèi)部的文本段落</p><img src=" " /></div>

單標(biāo)簽是不能添加元素內(nèi)容的姓建，可以稱之為空元素诞仓。

標(biāo)簽級別

容器級：內(nèi)部可以存放任意內(nèi)容，包含容器級標(biāo)簽速兔，比如h1墅拭，div等等
文本級：內(nèi)部只可以存放文字或者類似文字的內(nèi)容，比如存放圖片涣狗，表單元素谍婉，比如p等等。

HTML元素的特性

1.元素間對空格镀钓、換行穗熬、縮進等形成的空白不敏感，有無空白對在瀏覽器中加載的效果沒有影響丁溅。瀏覽器識別的是元素的開始和結(jié)束以及相互之間的嵌套關(guān)系唤蔗。
eg：加了縮進后與上面的不加縮進的代碼展示效果是一樣的】呱停可以美化代碼妓柜，方便查看代碼

 <div>
        <h1>標(biāo)題1</h1>
        <p>div內(nèi)部的文本段落</p>
        <img src=" " />
 </div>

2.空白折疊現(xiàn)象：元素內(nèi)容如果是文本，所有文字（類似文字內(nèi)容）之間如果有空格涯穷、換行棍掐、縮進等空白字符，在瀏覽器中加載時拷况，連接在一起的空白會折疊成一個空格顯示作煌，這就是空白折疊現(xiàn)象。
eg：

<p>這是一個段落赚瘦，元素之間對空           格最疆、換
 行、縮        進形容的空白會出現(xiàn)空格折疊現(xiàn)象蚤告。</p>

顯示的結(jié)果是這樣的：

代碼塊

Chrome運行效果

HTML屬性

HTML屬性規(guī)范

1.書寫位置：必須寫在開始標(biāo)簽或者單標(biāo)簽之內(nèi)，與標(biāo)簽名之間用空格進行分隔
2.屬性包括了：屬性名（key）服爷、屬性值（value）杜恰。屬性名與屬性值之間的寫法通常稱作鍵值對寫法获诈，HTML標(biāo)簽屬性的鍵值對寫法是k=" v"。XHTML要求屬性值必須在雙引號內(nèi)部心褐。

3.一個標(biāo)簽內(nèi)可以設(shè)置多個不同的屬性舔涎，屬性與屬性之間使用空格進行分隔，每個屬性的鍵值對寫法都是k="v"

4.部分標(biāo)簽屬性k可以設(shè)置多個屬性值v逗爹，所有屬性值v都必須寫在同一對雙引號內(nèi)亡嫌，值與值之間需要使用空格分隔。

eg：

<p class="p1" id="pFrist">段落1</p>
<p class="p1 p2 p3 p4">段落2</p>
<p>段落3</p>
<p>段落4</p>

2020-10-14學(xué)習(xí)筆記（網(wǎng)頁組成——HTML屬性規(guī)范）