HTML超文本標(biāo)記語言
http超文本傳輸協(xié)議
URL統(tǒng)一資源定位符那HTML是用來做什么的呢？超文本鏈接語言，是用來做靜態(tài)網(wǎng)頁的，也是做動態(tài)網(wǎng)頁的基礎(chǔ)，作用的話就是做個(gè)標(biāo)記，用來" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 5個(gè)小時(shí)帶你走進(jìn)HTML

5個(gè)小時(shí)帶你走進(jìn)HTML

時(shí)間：2023-08-29 20:42:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-29 20:42:01 來源：網(wǎng)站運(yùn)營

5個(gè)小時(shí)帶你走進(jìn)HTML：

什么是HTML？

互聯(lián)網(wǎng)的三大基石
HTML超文本標(biāo)記語言
http超文本傳輸協(xié)議
URL統(tǒng)一資源定位符

那HTML是用來做什么的呢？

超文本鏈接語言，是用來做靜態(tài)網(wǎng)頁的，也是做動態(tài)網(wǎng)頁的基礎(chǔ)，作用的話就是做個(gè)標(biāo)記，用來讓瀏覽器解析，最后顯示出頁面。

接下來的5個(gè)小時(shí)就跟我一起學(xué)習(xí)吧！

學(xué)習(xí)目標(biāo)

節(jié)數(shù)知識點(diǎn)要求
第一節(jié)Web前端現(xiàn)狀了解
第二節(jié)IDE介紹了解
第三節(jié)Webstrom使用掌握
第四節(jié)HTML介紹熟悉
一、Web前端現(xiàn)狀

1.1市場缺口

前端程序員缺口非常大，因?yàn)樗匠蔀橐粋€(gè)崗位才幾年，國內(nèi)最早出現(xiàn)前端招聘崗位在2012年左右，在此之前，前端工作基本上都是由服務(wù)端工程師包辦的，或者是由設(shè)計(jì)師來產(chǎn)出HTML頁面。隨著現(xiàn)代互聯(lián)網(wǎng)應(yīng)用的火爆，前端難度加大，導(dǎo)致后臺程序員不能完全搞定，所以企業(yè)們急切需要真正懂前端技術(shù)的“前端人員”。

1.2發(fā)展前景

近十年以來，IT行業(yè)發(fā)展火熱，衍生了很多新職業(yè)，例如UI設(shè)計(jì)師、開發(fā)工程師、軟件測試工程師等等，在眾多備受矚目的新生職業(yè)中，Web前端工程師是其中的一員。

Web前端在IT行業(yè)真正受到重視大概也就六七年的時(shí)間。隨著互聯(lián)網(wǎng)的迅猛發(fā)展，各種互聯(lián)網(wǎng)項(xiàng)目也不斷興起，對用戶體驗(yàn)提出了更高的要求，前端開發(fā)也由此逐漸成為了重要的研發(fā)角色。從2012年至今，“Web前端工程師”的需求持續(xù)走高，薪酬也是水漲船高，所以，有不少人立志要成為前端開發(fā)工程師，但同時(shí)又擔(dān)心Web前端開發(fā)到底還能熱多久。

“女怕嫁錯(cuò)郎，男怕入錯(cuò)行”，今天，就讓我這位資深的Web前端的“程序猿”來給大家分析一下Web前端開發(fā)在2019年的發(fā)展前景和就業(yè)形勢吧。

在了解Web前端的發(fā)展前景和就業(yè)形勢前，我們還是來了解一下什么是Web前端和學(xué)習(xí)Web前端應(yīng)該掌握哪些知識吧！

1.2.1什么是web前端

Web前端是互聯(lián)網(wǎng)時(shí)代軟件產(chǎn)品研發(fā)中不可缺少的角色。從廣義上來講，所有用戶終端產(chǎn)品與視覺和交互有關(guān)的部分，都屬于前端工程師的專業(yè)領(lǐng)域。

從狹義上講，Web前端就是使用HTML、CSS、JavaScript等專業(yè)技能和工具將產(chǎn)品的UI設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶PC端、移動端等網(wǎng)頁，處理視覺和交互問題。

在Web前端這個(gè)崗位興起之前，html+css的工作是被視覺人員所承擔(dān)的，而js這部分則是由后端完成的。隨著智能手機(jī)和移動互聯(lián)網(wǎng)的普及，PC端、手機(jī)端等五花八門的應(yīng)用占領(lǐng)著每個(gè)人的手機(jī)，隨之而來各種定制化的UI風(fēng)格讓兼容問題變得越來越頭疼。因此，有企業(yè)開始把html+css+js這部分工作獨(dú)立出來，由一個(gè)新的崗位來處理，成為了一個(gè)處理視覺和交互的綜合崗位，這才有了Web前端這個(gè)崗位的出現(xiàn)。

因此，Web前端開發(fā)行業(yè)是伴隨Web興起而細(xì)分出來的行業(yè)。實(shí)際上，Web前端是最接近產(chǎn)品和設(shè)計(jì)的工程師，起到銜接產(chǎn)品和技術(shù)的作用，它存在在互聯(lián)網(wǎng)的每個(gè)角落，我們使用的微信里面的各種功能、小程序等都離不開web前端技術(shù)。

1.2.2做一名web前端工程師需要哪些知識

與其他計(jì)算機(jī)主流技術(shù)所不同的是，Web前端所包含的知識模塊很多，就目前而言，HTML、CSS、JS、DOM是目前前端技術(shù)最為基礎(chǔ)也是最為主要的四大模塊，但會隨著實(shí)際需求而有所改變。

一名優(yōu)秀的Web前端工程師，需要JavaScript語言基礎(chǔ)扎實(shí)，具有良好的規(guī)范開發(fā)習(xí)慣；熟悉常用的設(shè)計(jì)模式，熟練使用Vue、Angular技術(shù)棧開發(fā)；能夠熟練使用angular、vue、echarts、jquery、react等框架進(jìn)行傳統(tǒng)開發(fā)；要熟悉MVVM、MVC開發(fā)模式；熟悉前端工程化、自動化技術(shù)，可以根據(jù)需求配置Gulp文件及更改Webpack配置文件；熟練使用git版本管理工具。

此外，還要熟悉HTML5、CSS3的新特性，了解不同瀏覽器之間的差異，制作出的頁面能夠有很好的兼容性。

Web發(fā)展得很快，幾乎每天都在變化！如果沒有快速學(xué)習(xí)的能力，就跟不上 Web發(fā)展的步伐。作為前端工程師僅僅依靠今天的知識是無法適應(yīng)未來的，必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式。因此，不僅作為新人小白要努力學(xué)習(xí)，提高自己；就連已經(jīng)入職三五的前端開發(fā)工程師，也需要不斷學(xué)習(xí)，了解前端技術(shù)的變化，提高自己的技術(shù)技能。

1.2.3web前端的前景和就業(yè)形勢

學(xué)習(xí)Web前端的就業(yè)面很廣，選擇的崗位有：前端開發(fā)工程師、資深前端開發(fā)工程師、網(wǎng)站重構(gòu)工程師、前端架構(gòu)師等等。

雖然近兩年大數(shù)據(jù)、人工智能等很火，但Web前端開發(fā)依然是十分熱門的，特別是隨著谷歌、YouTube、FireFox等大型企業(yè)紛紛將視線轉(zhuǎn)向HTML5，前端開發(fā)已經(jīng)進(jìn)入HTML5時(shí)代，所以，Web前端在今后十年仍有很大的發(fā)展空間。

據(jù)統(tǒng)計(jì)，我國HTML5前端工程師人員的缺口將達(dá)到10多萬，因此，Web前端工程師是一個(gè)非常有“錢”途的職業(yè)，并且薪酬會根據(jù)技能的深入而有不同程度的增長，其中杭州、杭州、杭州、杭州等地前端工程師的薪資待遇更是一路飆升。

所以總的來說， web前端在目前和未來都是稀缺的，是一個(gè)有“錢”途的職業(yè)。

1.3誰和前端人員打交道

產(chǎn)品經(jīng)理把用戶可能的需求提出來，和前端還有后端交涉，這個(gè)東西如何實(shí)現(xiàn)。確定可行后，由設(shè)計(jì)設(shè)計(jì)出UI圖，前端把它做出來，第一步可能是靜態(tài)的，純html css，然后我們再用angularjs、js實(shí)現(xiàn)一些業(yè)務(wù)方面的功能，最后和后臺的接口進(jìn)行聯(lián)調(diào)，一般會是這么一個(gè)過程。那運(yùn)營呢？有時(shí)候會需要你配合他們的營銷方案對產(chǎn)品做一些調(diào)整，比如圣誕節(jié)到了，它要求你對公司的官網(wǎng)加一些雪花的特效。這也是需要你配合的。

1.4常用網(wǎng)站

w3cschool、w3c菜鳥、百度

前端大牛的博客 http://caibaojian.com/some-fe

這個(gè)里面收集了許多前端大牛博客的地址，你們有時(shí)間要多去學(xué)習(xí)，里面推薦幾個(gè)人，阮一峰，有句話叫阮一峰出品，必屬精品，他是學(xué)金融的，現(xiàn)在在IT方面這么有成就，轉(zhuǎn)行過來的同學(xué)是不是更有信心了？

張鑫旭，它博客里面會把一些技術(shù)講的非常細(xì)，騰訊的前端。

李松峰，大名鼎鼎，你們學(xué)到第二階段會學(xué)習(xí)javascript，而javascript非常權(quán)威的書箱是《javascript高級程序設(shè)計(jì)》，就是他翻譯的。

二、IDE介紹

2.1IDE介紹

我們都知道網(wǎng)上的頁面是編程人員寫出來的，用什么寫的呢？用編碼工具或IDE集成開發(fā)環(huán)境。

編碼工具：

輔助程序員編寫源代碼的工具，它類似word，我們寫文檔會打開word文檔來編寫。

寫代碼也一樣，需要借助工具來開發(fā)。

常見的編碼工具有記事本、sublime Text、notepad++




集成開發(fā)環(huán)境（IDE，Integrated Development Environment ）是用于提供程序開發(fā)環(huán)境的應(yīng)用程序，一般包括代碼編輯器、編譯器、調(diào)試器和圖形用戶界面等工具。集成了代碼編寫功能、分析功能、編譯功能、調(diào)試功能等一體化的開發(fā)軟件服務(wù)套。所有具備這一特性的軟件或者軟件套（組）都可以叫集成開發(fā)環(huán)境。如微軟的Visual Studio系列，Borland的C++ Builder、Delphi系列等。該程序可以獨(dú)立運(yùn)行，也可以和其它程序并用。IDE多被用于開發(fā)HTML應(yīng)用軟件。例如，許多人在設(shè)計(jì)網(wǎng)站時(shí)使用IDE（如webstorm、DreamWeaver等），因?yàn)楹芏囗?xiàng)任務(wù)會自動生成。

這里我們是不推薦使用Dreamweaver，它更多的是針對前端設(shè)計(jì)人員來用，而不是我們編程人員。

其它語言的常見IDE有：eclipse、visio studio、Visual Studio Code等。

2.2瀏覽器介紹

前面講了IDE用來編碼，寫好的代碼如何展示？通過瀏覽器來展示。

以上這些，都不要再使用，身為前端，要不論是學(xué)習(xí)還是工作都應(yīng)該使用更符合業(yè)W3C規(guī)范的瀏覽器。

推薦使用的瀏覽器：




前兩者都非常的優(yōu)秀，它們比其它瀏覽器優(yōu)先之處在于

1.速度快，不是指打開的速度，而是指解析頁面CSS、JS的速度

2.支持更多新的功能，比如最新的標(biāo)準(zhǔn)html5、css3的一些新功能

3.插件化開發(fā)，chrome和firefox提示了應(yīng)用商店，你可以安裝自己喜歡的插件，定制自己的瀏覽器

2.3調(diào)試工具

chrome自帶的開發(fā)者工具、firebug、IE有HttpWatch




三、Webstorm使用

3.1安裝

3.2常規(guī)操作

  1. 創(chuàng)建項(xiàng)目
file-->new project-->指定路徑-->點(diǎn)擊上面的新建按鈕創(chuàng)建一個(gè)文件夾，然后ok，創(chuàng)建好項(xiàng)目后，項(xiàng)目文件夾中會帶有.idea這樣一個(gè)文件

  1. 創(chuàng)建文件
右擊項(xiàng)目-->new-->html file-->輸入文件名-->下面的下拉框可以選擇h5還是h4或是xhtml類型的文檔，我們選擇h5，也就是默認(rèn)的。寫名字的時(shí)候不用加html后綴，webstrom會自動為我們添加

  1. 重命名
右擊html文件-->refactor-->rename---改好后回車

  1. 刪除文件
右擊html文件-->delete-->ok（或者直接按電腦上的del鍵，回車）

3.3常規(guī)配置

1、如何更改主體

file->setting->editor->colors&fonts->scheme選擇你的主題

2、如何更改字體大小

file->setting->editor->colors&fonts->only前面的對勾去掉->size修改字體大小

3、如何設(shè)置代碼自動換行

file-settings-editor->general-> "use soft wraps in editor" 打上鉤，代碼就自動換行了。

四、HTML介紹

4.1什么是HTML

HTML 是用來描述網(wǎng)頁的一種語言。

HTML 指的是超文本標(biāo)記語言: HyperText Markup Language

4.2什么是標(biāo)簽

4.3什么是元素

"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.

但是嚴(yán)格來講, 一個(gè) HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:

HTML 元素:

4.4web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁顯示。

瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶：

4.5HTML版本

4.6HTML屬性

屬性是用來修飾元素的，屬性必須位于開始標(biāo)簽里，一個(gè)元素的屬性可能不止一個(gè)，多個(gè)屬性之間用空格隔開，多個(gè)屬性之間不區(qū)分先后順序。

每個(gè)屬性都有值，屬性和屬性的值之間用等號鏈接，屬性的值包含在引號當(dāng)中，屬性總是以名稱/值對的形式出現(xiàn)。

4.7HTML注釋

為代碼添加適當(dāng)?shù)淖⑨屖且环N良好的編程習(xí)慣，注釋只在編輯文本情況下可見，在瀏覽器展示頁面是并不會顯示，注釋標(biāo)簽不支持任何屬性。

語法：

<!-- 注釋的文本內(nèi)容 -->

4.8HTML基本結(jié)構(gòu)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>標(biāo)題</title></head><body></body></html>
4.8.1doctype的作用

DOCTYPE是document type (文檔類型) 的縮寫。<!DOCTYPE >聲明位于文檔的最前面，處于標(biāo)簽之前，它不是html標(biāo)簽。主要作用是告訴瀏覽器的解析器使用哪種HTML規(guī)范或者XHTML規(guī)范來解析頁面。

4.8.2刪除<!DOCTYPE>會發(fā)生什么

在W3C標(biāo)準(zhǔn)出來之前，不同的瀏覽器對頁面渲染有不同的標(biāo)準(zhǔn)，產(chǎn)生了一定的差異。這種渲染方式叫做混雜模式。在W3C標(biāo)準(zhǔn)出來之后，瀏覽器對頁面的渲染有了統(tǒng)一的標(biāo)準(zhǔn)，這種渲染方式叫做標(biāo)準(zhǔn)模式。<!DOCTYPE>不存在或者形式不正確會導(dǎo)致HTML或XHTML文檔以混雜模式呈現(xiàn)，就是把如何渲染html頁面的權(quán)利交給了瀏覽器，有多少種瀏覽器就有多少種展示方式。因此要提高瀏覽器兼容性就必須重視<!DOCTYPE>

4.8.3嚴(yán)格模式和混雜模式

嚴(yán)格模式和混雜模式都是瀏覽器的呈現(xiàn)模式，瀏覽器究竟使用混雜模式還是嚴(yán)格模式呈現(xiàn)頁面與網(wǎng)頁中的DTD（文件類型定義）有關(guān)。

嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照W3C標(biāo)準(zhǔn)來解析代碼，呈現(xiàn)頁面

混雜模式：又稱為怪異模式或者兼容模式，是指瀏覽器按照自己的方式來解析代碼，使用一種比較寬松的向后兼容的方式來顯示頁面。

我們寫好一份HTML文檔，這時(shí)候全是代碼，用戶看不懂，是不是得用瀏覽器里的引擎給翻譯一下？用戶才看得到界面。關(guān)鍵是HTML有好多個(gè)版本，瀏覽器怎么知道按哪個(gè)版本解釋？你老爸讓你去掃地，你老媽讓你去洗碗，你是聽誰的，都是長輩，這時(shí)候如果你們家規(guī)定好了，凡事都聽你老爸的，這個(gè)就很好解決了，去掃地。這個(gè)DTD文檔模型就是這個(gè)意思，管它多少個(gè)HTML版本，我規(guī)定好我寫的這個(gè)HTML文檔以哪個(gè)為準(zhǔn)就行，那我就知道我最終頁面會被解釋成一個(gè)什么樣子。

DTD文檔模型=DOCTYPE=DOCTYPE文檔聲明

4.8.4常見的DOCTYPE聲明

HTML5

<!DOCTYPE html>
HTML 4.01 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset

該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內(nèi)容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標(biāo)記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標(biāo)記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset

該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內(nèi)容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4.8.4HTML標(biāo)簽

定義 HTML 文檔，這個(gè)元素我們?yōu)g覽器看到后就明白這是個(gè)HTML文檔了，所以你的其它元素要包裹在它里面，標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)，在它們之間是文檔的頭部和主體。

<html><head> <title>我的第一個(gè) HTML 頁面</title></head><body></body></html>

<html><head> <title>我的第一個(gè) HTML 頁面</title></head><body></body></html>

<html><head> <title>我的第一個(gè) HTML 頁面</title></head><body></body></html>

<html><head> <title>我的第一個(gè) HTML 頁面</title></head><body></body></html>

<html><head> <title>我的第一個(gè) HTML 頁面</title></head><body></body></html>

<html><head> <title>我的第一個(gè) HTML 頁面</title></head><body></body></html>

<html><head> <title>我的第一個(gè) HTML 頁面</title></head><body></body></html>
4.8.5head標(biāo)簽

Head標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

下面這些標(biāo)簽可用在 head 部分：

<title>、<meta>、<link>、<style>、 <script>。

應(yīng)該把 <head> 標(biāo)簽放在文檔的開始處，緊跟在 <html> 后面，并處于 <body> 標(biāo)簽之前。

文檔的頭部經(jīng)常會包含一些 <meta> 標(biāo)簽，用來告訴瀏覽器關(guān)于文檔的附加信息。

<head lang="en"></head>
lang是language的意思，lang=”en”屬性對每張頁面中的主要語言進(jìn)行聲明，en代表了英文，只是個(gè)聲明，聲明了它，對搜索引擎和瀏覽器更友好，并不會更改顯示內(nèi)容。它還有常見的值是zh-CN，代表了中文。（搜索引擎不會判斷該站點(diǎn)是中文還是英文，它讓搜索引擎知道你的站點(diǎn)是中文站，這些都是html規(guī)范，越規(guī)范，越容易被收錄）

4.8.5title標(biāo)簽

1.可定義文檔的標(biāo)題。

2.它顯示在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上。

3.當(dāng)把文檔加入用戶的收藏夾或書簽列表時(shí)，標(biāo)題將成為該文檔的默認(rèn)名稱。

4.<title> 標(biāo)簽是 <head> 標(biāo)簽中唯一必須要求包含的東西，就是說寫head一定要寫title，不是說其它的不加，而是title一定要加。

5.title寫和你網(wǎng)頁相關(guān)的關(guān)鍵詞有利于SEO優(yōu)化

<html><head> <title>我會顯示在收藏欄里</title></head> <body>...</body></html>

<html><head> <title>我會顯示在收藏欄里</title></head> <body>...</body></html>

<html><head> <title>我會顯示在收藏欄里</title></head> <body>...</body></html>

<html><head> <title>我會顯示在收藏欄里</title></head> <body>...</body></html>

<html><head> <title>我會顯示在收藏欄里</title></head> <body>...</body></html>

<html><head> <title>我會顯示在收藏欄里</title></head> <body>...</body></html>
SEO是搜索引擎優(yōu)化的英文縮寫。通過對網(wǎng)站內(nèi)容調(diào)整，滿足搜索引擎的排名需求，從而提高自己網(wǎng)站被搜索引擎平臺錄取的幾率，從而把精準(zhǔn)用戶帶到網(wǎng)站。

網(wǎng)站都有目標(biāo)群體，通過title、meta標(biāo)簽可以讓目標(biāo)群體通過關(guān)鍵詞找到你的網(wǎng)站，所以你定義的關(guān)鍵詞決定了會吸引什么樣的群體。

4.8.6meta標(biāo)簽

META標(biāo)簽用來描述一個(gè)HTML網(wǎng)頁文檔的屬性，此處的charset=”utf-8”是說當(dāng)前使用的是utf-8編碼格式，在開發(fā)中我們經(jīng)常會看到utf-8，或是gbk，這些都是編碼格式。國外一般會用gbk、gb2312，國內(nèi)通常使用utf-8。

元素可提供有關(guān)頁面的元信息（meta-information），用來向?yàn)g覽器或搜索引擎描述頁面。比如文檔的描述和關(guān)鍵詞。它只可以放在head中。屬于元信息標(biāo)簽。

常見的meta有：

Keywords(關(guān)鍵字)　keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。

<meta name="keywords" content="web前端,尚學(xué)堂培訓(xùn)">
description(網(wǎng)站內(nèi)容描述) description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

<meta name="description" content="杭州尚學(xué)堂,web前端培訓(xùn)">
author作者 標(biāo)注網(wǎng)頁的作者

<meta name="author" content="root,root@xxxx.com">
4.9標(biāo)簽相互嵌套

標(biāo)簽之間可以相互嵌套，但要注意嵌套順序

4.10語義化標(biāo)簽

4.10.1什么是HTML語義化標(biāo)簽

語義化的標(biāo)簽，旨在讓標(biāo)簽有自己的含義。

<p>一行文字</p><span>一行文字</span>

<p>一行文字</p><span>一行文字</span>
如上代碼，p 標(biāo)簽與 span 標(biāo)簽都區(qū)別之一就是，p 標(biāo)簽的含義是：段落。而 span 標(biāo)簽責(zé)沒有獨(dú)特的含義。

4.10.2語義化標(biāo)簽的優(yōu)勢

1、代碼結(jié)構(gòu)清晰，方便閱讀，有利于團(tuán)隊(duì)合作開發(fā)。

2、方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以語義的方式來渲染網(wǎng)頁。

3、有利于搜索引擎優(yōu)化（SEO）。

  1. 作業(yè)
安裝webstorm、熟練使用快捷鍵













關(guān)鍵詞：小時(shí)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉