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