整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
互聯(lián)網(wǎng)時代人們通過上網(wǎng)瀏覽信息，打開瀏覽器上網(wǎng)看到豐富的圖文、視頻、音樂等多媒體信息，一系列信息反饋和視覺沖擊之后，您有沒有想過，互聯(lián)網(wǎng)這么發(fā)達的時代，您覺得花一點點時間學會做個網(wǎng)站頁面不真香？
“超文本標記語言“（HTML）作為文檔信息載體。當我們用html創(chuàng)建文檔時，它將我們的語言轉(zhuǎn)換成計算機可以理解的語言。這使得計算機能執(zhí)行特定任務至關(guān)重要。人與計算機交互，需要一套編輯規(guī)范，編輯者（相對于計算機，這里指寫html的人）使用html標簽（機器識別的關(guān)鍵字）對內(nèi)容做排版，填寫內(nèi)容，然后定義板塊的樣式和動畫后的一份字符串文本，發(fā)布到遠程服務器，最終被機器解析成網(wǎng)絡傳輸報文協(xié)議，傳輸?shù)角岸耍ㄒ话闱闆r下就是我們的瀏覽器），就能夠呈現(xiàn)出大家熟悉的網(wǎng)站頁面了。
這里有一個小的指導教程，大家可以跟著來學習
一、 準備工具
編輯器 - windows系統(tǒng)自帶的記事本工具（右擊鼠標快捷鍵-> 新建 -> 文本文檔 )
瀏覽器
二、 實現(xiàn)步驟
電腦桌面上右擊鼠標，新建文本文檔，helloword.html,需要注意修改.txt后綴名為.html
2.輸入以下內(nèi)容
<html>
<head>
<title>第一個頁面</title>
</head>
<body>
<h1>您的成果</h1>
<p>hello word!</p>
</body>
</html>
用瀏覽器打開這個文檔，可以通過修改打開方式也可以把文檔拖到瀏覽器快捷鍵圖標上面選擇瀏覽器打開，預覽成果。
三、總結(jié)一下您做的事情
使用windows系統(tǒng)的文本文檔工具寫了一份文本。這是一份主要信息內(nèi)容（“第一個頁面”、“您的成果”、“hello word!”），和信息結(jié)構(gòu)化載體關(guān)鍵字（“html”,“head“,“title“,“body”,“h1”,“p”）的文本，組成了一份帶結(jié)構(gòu)的文本。我為什么稱之為帶結(jié)構(gòu)呢？主要原因是，讀者閱讀需要清楚知道內(nèi)容排版、模塊、段落信息等等,例如：一份word文檔，首行就是一個大標題，其次副標題，然后就是段落內(nèi)容，其組成成分可能有圖片、視頻、跳轉(zhuǎn)鏈接、注釋等，它們組成了一個word文檔的結(jié)構(gòu)，按word文檔結(jié)構(gòu)規(guī)范編輯word文檔是掌握word的基本要領(lǐng)。掌握html，需要認識html的基本結(jié)構(gòu)。按照教程的html內(nèi)容，它組成了html的最基本結(jié)構(gòu)，<html> </html>, 可告知瀏覽器其自身是一個 HTML 文檔。<head></head>,可告知瀏覽器這里是文檔的頭部。<body></body> 這里是文檔的主體。“<>” 告知瀏覽器，將要用到元素標簽,即“<html>”用了html標簽。“<>”是標簽的開始，“</>”則是標簽的結(jié)束。標簽是HTML語言中最基本的單位，標簽的組合使用即是自由組合，也是相互約束的。例如：“<title></title>”標簽，告訴瀏覽器本頁的標題，只能在“<head></head>”標簽里面使用。掌握html需要知道各種標簽的作用范圍，定義和用法。以上 “<h1></h1>” 是文檔內(nèi)容大標題,副標題有 “<h12></h2>” 、 “<h3></h3>” ..... “<h5></h5>”。“<p></p>” 標簽定義了段落內(nèi)容，每一次 “<p></p>”,文本內(nèi)容將產(chǎn)生一個段落。編寫html為了方便閱讀，需要有良好的編寫格式。每一個子標簽需要頂格，“<head>"相對“<html>頂格了，我是通過輸入Tab實現(xiàn)的。平級的標簽不需要頂格，例如 ,案例中的排版 “<h1>" “<p>" 是相對于“<body>"平級的。
充分利用html標簽，完成頁面內(nèi)容的布局，需要掌握以下要點
掌握基本的html標簽，參考網(wǎng)絡學習資源鏈接:https://www.w3school.com.cn/html/html_basic.asp掌握html排版技巧，使得頁面內(nèi)容整整齊齊
使用css，層疊樣式定義，它主要是負責控制內(nèi)容展示的形式，并不具有具體信息內(nèi)容，它能控制html元素的布局、屬性、例如在css里面，定義了某類元素的名字（.className = {}），這類元素統(tǒng)一長度為10px( .className = {width:10px} )，之后通過把名字賦予元素(<div class="className" > <div>),擁有class="className"的元素都會顯示出長度為10px的樣子。
參考內(nèi)容https://www.w3cschool.cn/css/
使用script,可以控制元素的響應動作，例如移動元素、改變元素的大小，顏色、切換圖片、提交表單、校驗內(nèi)容等等。頁面常用的是javascript，需要較輕的編程知識，但是由于javascript的出現(xiàn)，使得頁面的前端開發(fā)技術(shù)的進步，永無止境。
參考內(nèi)容 https://www.w3school.com.cn/tags/tag_script.asp
html如此簡單，只要您不被標簽內(nèi)容影響了您對超文本的閱讀理解，了解html標簽對內(nèi)容做了結(jié)構(gòu)化，掌握起來，便能夠進入互聯(lián)網(wǎng)的大舞臺時代了！
獲得精彩內(nèi)容，記得關(guān)注哦！
輸入URL到頁面加載的全過程涉及多個步驟，包括域名解析、建立TCP連接、發(fā)送HTTP請求、處理服務器響應、頁面渲染等。以下是詳細的過程：
總結(jié)：從輸入URL到頁面加載的全過程涉及到多個環(huán)節(jié)，包括域名解析、建立TCP連接、發(fā)送HTTP請求、服務器處理請求、返回HTTP響應、瀏覽器解析HTML、下載資源、執(zhí)行JavaScript、頁面渲染和關(guān)閉TCP連接。了解這個過程可以幫助我們更好地理解Web頁面的加載原理，優(yōu)化頁面性能。
、認識WEB
網(wǎng)頁主要是由文字、圖像和超鏈接等元素構(gòu)成，除了這些基本的元素以外，還包含一些多媒體元素等，比如音頻、視頻等。
比如我們常見的有小米商城、京東商城、以及淘寶等，都屬于我們的大型的購物平臺網(wǎng)站，而這些網(wǎng)站都包含了網(wǎng)頁中基本的元素。那么網(wǎng)頁是怎么形成的呢？
其實網(wǎng)頁的形參很簡單，當我們前端小姐姐將頁面通過代碼構(gòu)建好以后，再通過瀏覽器（IE、谷歌等瀏覽器）將其渲染成為用戶眼中所能看得到的各種樣式的頁面。
既然我們的網(wǎng)頁是通過瀏覽器的渲染而顯示不同的頁面，那么常見的瀏覽器有哪一些呢？如常見的五大瀏覽器，分別是IE、火狐、谷歌、Safari以及Opera等。
五大瀏覽器
但是在開發(fā)過程中，谷歌和火狐用得比較多，可以更好地幫助開發(fā)人員進行調(diào)試。IE瀏覽器相對來說存在兼容性問題，所以很少去使用。
為什么網(wǎng)頁代碼通過瀏覽器的渲染就能顯示出各種不同的樣式的頁面呢？此處就不得不提到瀏覽器的內(nèi)核，通常瀏覽器的內(nèi)核分為如下幾種：
而五大瀏覽器之間的內(nèi)核都是什么呢？如下圖所示：
五大瀏覽器的內(nèi)核
二、Web標準
什么是Web標準？Web標準是由W3C組織和其它標準化組織，制定的一系列標準的集合。
W3C萬維網(wǎng)聯(lián)盟是國際最著名的標準化組織。他是1994年成立后，至今已發(fā)布了近百項相關(guān)萬維網(wǎng)的標準。
w3c組織
那為什么要制定Web標準呢？
作用：由于市場上誕生了許多不同類型的瀏覽器，而這些瀏覽器都存在不同的內(nèi)核，導致前端小姐姐開發(fā)的頁面在不同的瀏覽器上顯示會存在不同的差異，這樣就會給前端開發(fā)者帶來了許多麻煩。而通過Web標準就會降低這種頁面之間的差異化，讓瀏覽器在解析前端代碼的時候，轉(zhuǎn)向W3C的標準，呈現(xiàn)出統(tǒng)一的效果。
優(yōu)點：
那么一個漂亮的頁面是怎樣構(gòu)成的呢？它的構(gòu)成分別是如下幾種類型：
漂亮頁面的構(gòu)成
好啦！[微笑]本節(jié)就分享到這兒哦！對前端感興趣的小伙伴，可以關(guān)注我的，我會繼續(xù)給大家分享前端以及其它開發(fā)內(nèi)容的知識，也歡迎大家給我在評論區(qū)留言[作揖]。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
