一、html介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

1.web標準? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

web準備介紹：

• w3c：萬維網聯盟組織，用來制定web標準的機構（組織）
• web標準：制作網頁遵循的規(guī)范
• web準備規(guī)范的分類：結構標準、表現標準、行為標準。
• 結構：html。表示：css。行為：Javascript。

web準備總結：

• 結構標準：相當于人的身體。html就是用來制作網頁的。
• 表現標準： 相當于人的衣服。css就是對網頁進行美化的。
• 行為標準： 相當于人的動作。JS就是讓網頁動起來，具有生命力的

二、瀏覽器介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

瀏覽器是網頁運行的平臺，常用的瀏覽器有IE、火狐（Firefox)、谷歌（Chrome）、獵豹瀏覽器、Safari和Opera等

瀏覽器內核：

瀏覽器	內核
IE	trident
chrome	blink
火狐	gecko
Safari	webkit

?

?

?

?

?

PS：「瀏覽器內核」也就是瀏覽器所采用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。渲染引擎是兼容性問題出現的根本原因。

三、開發(fā)工具介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Sublime Text的使用

參考鏈接：Sublime Text使用技巧

還有其他的前端編輯工具，比如：

vscode，是微軟推出的一款輕量編輯器,采取了和VS相同的UI界面,搭配合適的插件可以優(yōu)化前端開發(fā)的體驗。

Hbuilder，HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發(fā)IDE

webstorm，WebStorm 是jetbrains公司旗下一款JavaScript 開發(fā)工具。目前已經被廣大中國JS開發(fā)者譽為“Web前端開發(fā)神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。

這3者對比：

vscode比較輕便，Hbuilder針對移動端，方便調試代碼。

webstorm是一個重量級web開發(fā)工具。

?

本文主要用的是Sublime Text3

四、HTML介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

1.HTML的概述? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

html全稱HyperText Mackeup Language，翻譯為超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用于描述超文本內容的顯示方式。比如字體、顏色、大小等。

• 超文本：音頻，視頻，圖片稱為超文本。
• 標記 ：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。

作用：HTML是負責描述文檔語義的語言。

注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執(zhí)行。

HTML是負責描述文檔語義的語言

html中，除了語義，其他什么都沒有。

html是一個純本文文件（就是用txt文件改名而成），用一些標簽來描述文字的語義，這些標簽在瀏覽器里面是看不到的，所以稱為“超文本”，所以就是“超文本標記語言”了。
所以，接下來，我們肯定要學習一堆html中的標簽對兒，這些標簽對兒能夠給文本不同的語義。

比如，面試的時候問你，h1標簽有什么作用？

• • 正確答案：給文本增加主標題的語義。
  • 錯誤答案：給文字加粗、加黑、變大。

2.HTML的網絡術語? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

• • 網頁 ：由各種標記組成的一個頁面就叫網頁。
  • 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
  • 標記：?<p>稱為開始標記 ，</p>稱為結束標記，也叫標簽。每個標簽都規(guī)定好了特殊的含義。
  • 元素：<p>內容</p>稱為元素.
  • 屬性：給每一個標簽所做的輔助信息。

五、HTML顏色介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

顏色表示:? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

• 純單詞表示：red、green、blue、orange、gray等
• 10進制表示：rgb(255,0,0)
• 16進制表示：#FF0000、#0000FF、#00FF00等

我們大家先記住幾個純單詞的顏色，css課程中會詳細講10進制和16進制。

在公司中，UI設計師的設計圖，顏色主要采用的是16進制表示，每種顏色會有相應的注釋。

前端工程師拿到設計圖之后，用html+css+js 做出這個網頁，給最終用戶展示。

RGB色彩模式：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

• 自然界中所有的顏色都可以用紅、綠、藍(RGB)這三種顏色波長的不同強度組合而得，這就是人們常說的三原色原理。
• RGB三原色也叫加色模式，這是因為當我們把不同光的波長加到一起的時候，可以得到不同的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
• 在數字視頻中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是我們常說的真彩色。所有顯示設備都采用的是RGB色彩模式。
• RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

六、HTML規(guī)范? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

• HTML是一個弱勢語言
• HTML不區(qū)分大小寫
• HTML頁面的后綴名是html或者htm(有一些系統不支持后綴名長度超過3個字符，比如dos系統)
• HTML的結構：
  • 聲明部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標準。是HTML5標準。
  • head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
  • body部分：我們所寫的代碼必須放在此標簽內。

1、編寫HTML的規(guī)范? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

1）所有標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>

（2）所有的標記都必須小寫。

（3）所有的標記都必須關閉。

• 雙邊標記：<span></span>
• 單邊標記：<br>?轉成?<br />?<hr>?轉成?<hr />，還有<img src=“URL” />

（4）所有的屬性值必須加引號。<h1 id="head"></h1>

（5）所有的屬性必須有值。<input type="radio" checked="checked" />

2、HTML的基本語法特征? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

（1）HTML對換行不敏感，對tab不敏感? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。

也就是說，HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系。但是，我們發(fā)現有良好的縮進，代碼更易讀。要求大家都正確縮進標簽。

? (2) 空白折疊現象? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。

?舉例：

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> <html lang = "en" > <head> ???? <meta charset = "UTF-8" > ???? <title>Document< / title> < / head> <body> ???? <span>今天 ???????? 2222 < / span> < / body> < / html>

訪問網頁，效果如下：

?

?（3）標簽要嚴格封閉? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

下面這種，是不規(guī)范的寫法

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html lang = "en" > <head> ???? <meta charset = "UTF-8" > ???? <title>Document< / title> < / head> <body> ???? <span>今天很涼爽 < / body> < / html>

　　

七、HTML結構詳解? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

新建HTML文件，輸入 html:5,按tab鍵后，自動生成的代碼如下：

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html> <html lang = "en" > <head> ???? <meta charset = "UTF-8" > ???? <title>Document< / title> < / head> <body> ????? < / body> < / html>

注意：文件名不能是中文，到公司里面，代碼是放到linux服務器中的，它對中文的識別度不是太好。盡量以英文名來起名，名字不要太長。

1、文檔聲明頭? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

任何一個標準的HTML頁面，第一行一定是一個以

1	<!DOCTYPE...

開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

PS:

XHTML：Extensible Hypertext Markup Language，可擴展超文本標注語言。

XHTML的主要目的是為了取代HTML，也可以理解為HTML的升級版。

HTML的標記書寫很不規(guī)范，會造成其它的設備(ipad、手機、電視等)無法正常顯示。

XHTML與HTML4.0的標記基本上一樣。

XHTML是嚴格的、純凈的HTML

?

以下內容僅做了解：

HTML4.01有哪些規(guī)范呢？? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

首先我們先確定一件事兒，我們現在學習的是HTML4.01這個版本，這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰，所以這幾年網頁還是應該用HTML4.01來制作。如今，手機、移動端的網頁，就可以使用HTML5了，因為其兼容性更高。

說個題外話，html1 至 html3 是美國軍方以及高等研究所用的，并未對外公開。

HTML4.01里面有兩大種規(guī)范，每大種規(guī)范里面又各有3種小規(guī)范。所以一共6種規(guī)范（見下面）：

HTML4.01里面規(guī)定了普通和XHTML兩大種規(guī)范。

HTML覺得自己有一些規(guī)定不嚴謹，比如，標簽是否可以用大寫字母呢？<H1></H1>

所以，HTML就覺得，把一些規(guī)范嚴格的標準，又制定了一個XHTML1.0。在XHTML中的字母X，表示“嚴格的”。

總結一下，HTML4.01一共有6種DTD，說白了，HTML第一行語句一共有6種：

下面對上圖中的三種小規(guī)范進行解釋：

• strict：表示“嚴格的”，這種模式里面的要求更為嚴格。這種嚴格體現在哪里？有一些標簽不能使用。
  比如，u標簽，就是給一個本文加下劃線，但是這和HTML的本質有沖突，因為HTML只能負責語義，不能負責樣式，而u這個下劃線是樣式。所以，在strict中是不能使用u標簽的。
  那怎么給文本增加下劃線呢？今后的css將使用css屬性來解決。
  那么，XHTML1.0更為嚴格，因為這個體系本身規(guī)定比如標簽必須是小寫字母、必須嚴格閉合標簽、必須使用引號引起屬性等等。

• Transitional：表示“普通的”，這種模式就是沒有一些別的規(guī)范。

• Frameset：表示“框架”，在框架的頁面使用。

在sublime輸入的html:xt，x表示XHTML，t表示transitional。
HTML5中極大的簡化了DTD，也就是說HTML5中就沒有XHTML了（W3C自己打臉了）：

1	<!DOCTYPE html>

　　

ok，下面重點的來了。

2、頭標簽（head）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

head標簽都放在頭部分之間。這里面包含了：<title>、<meta>、<link>，<style>

• <title>：指定整個網頁的標題，在瀏覽器最上方顯示。
• <meta>：提供有關頁面的基本信息
• <link>：定義文檔與外部資源的關系。
• <style>:定義內部樣式表與網頁的關系

2.1 Meta標簽介紹：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。

標簽位于文檔的頭部，不包含任何內容。

提供的信息是用戶不可見的。 meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。

常用的meta標簽：

（1）http-equiv屬性

它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

1 2 3 4 5 6

<! - - 重定向? 2 秒后跳轉到對應的網址，注意分號 - - > <meta http - equiv = "refresh"? content = "2;URL=http://www.luffycity.com" > <! - - 指定文檔的內容類型和編碼類型? - - > <meta http - equiv = "Content-Type"? content = "text/html;charset=utf-8"? / > <! - - 告訴IE瀏覽器以最高級模式渲染當前網頁 - - > <meta http - equiv = "x-ua-compatible"? content = "IE=edge" >

注意：meta一定要指定編碼，否則IE瀏覽器展示中文時，會亂碼。

?

（2）name屬性

主要用于頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

1	<meta name = "Keywords"? content = "網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信"? / >

　　這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到。

1	<meta name = "Description"? content = "網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。"? / >

只要設置Description頁面描述，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜索引擎優(yōu)化）。

?

注意事項：
（1）如果要想保證圖片等比例縮放，請只設置width和height中其中一個。
（2）如果想實現圖文混排的效果，請使用align屬性，取值為left或right

如果想點擊圖片的時候跳轉到某個鏈接，應該是：

1 2 3

<a> ??? <img src = "images/lzl.jpg"? alt = "林志玲"? title = '林志玲' > < / a>

今日作業(yè)：

1 2 3 4 5 6 7 8 9 10 11

主要利用今天學習的知識來做 第一個作業(yè)：個人博客 展示姓名，年齡，職業(yè) 個人介紹，頭像，個人博客地址 第二個作業(yè)： 展示春，夏，秋，冬? 4 個字，每個點擊之后，會跳轉到對應的頁面 比如春，展示一張春天的圖片 提示： 第一種寫法，使用top跳轉 第二種寫法，使用 4 個頁面，分別展示

　

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" charset="utf-8"><meta name="Keywords" content="john,博客,IT技術，html學習"/><meta name="Description" content="最好的博客，最牛的IT技術，最好IT知識"/><title>day_43_作業(yè)</title> </head> <body><div id="container" style="align-content: center"><!--<-–> 009966--><div id="header" style="background:#00b0e8 ;text-align: center;height: 80px;"><!--<h1 style="text-align:center ;"> John 博客</h1>--><span style="line-height: 70px; font-weight:bold;font-size: 30px" >John 博客</span><div id="subject" style="background-color:#fffff0;text-align: center;height: 550px;"><div id="menu" style="background-color:#e6e2c3 ;width:360px;height: auto;float:right"><p >博客信息</p><p style="text-align: left">姓名:<span>John 嘉豪</span></p><p style="text-align: left">年齡:<span>18</span></p><p style="text-align: left">職業(yè):<span>程序猿</span></p><p><img src="./img/001.ico"><br><a href="http://www.cnblogs.com/haowen980/" style="text-decoration: none">博客地址: www.cnblogs.com/haowen980</a></p><hr ><p > <a href="http://pic1.sc.chinaz.com/files/pic/pic9/201803/bpic6334.jpg" style="text-decoration:none;color: green;font-weight: bold">春 季<img src="./img/spring.png" style="margin-left: auto"></a></p><!--<hr>--><p><a href="./img/02.png" style="text-decoration:none;color:#00ccff;font-weight:bold;">夏季<img src="./img/summer.png"/></a></p><!--<hr>--><p><a href="./img/03.png" style="text-decoration:none;color:#FF8C00;font-weight: bold"> 秋季<img src="./img/autumn.png"></a></p><!--<hr>--><p><a href="./img/04.png" style="text-decoration:none;color:#5c5c5c;font-weight: bold">冬季<img src="./img/winter.png" ></a></p><div><div style="float: left;background-color: green;;width: 40px;height: 40px">春</div><div style="float: left;background-color: #00ccff;width: 40px;height: 40px">夏</div><div style="clear: both"></div><div style="background-color: #FF8C00;float: left;width: 40px;height: 40px">秋</div><div style="float:left;background-color: #5c5c5c;width: 40px;height: 40px">冬天</div></div></div><!--<p>過秦論</p>--><h2>過秦論</h2><br>秦孝公據崤函之固，擁雍州之地，君臣固守以窺周室，有席卷天下，包舉宇內，囊括四海之意，并吞八荒之心。當是時也，商君佐之，內立法度，務耕織，修守戰(zhàn)之具；外連衡而斗諸侯。于是秦人拱手而取西河之外。孝公既沒，惠文、武、昭襄蒙故業(yè)，因遺策，南取漢中，西舉巴、蜀，東割膏腴之地，北收要害之郡。諸侯恐懼，會盟而謀弱秦，不愛珍器重寶肥饒之地，以致天下之士，合從締交，相與為一。<br>當此之時，齊有孟嘗，趙有平原，楚有春申，魏有信陵。此四君者，皆明智而忠信，寬厚而愛人，尊賢而重士，約從離衡，兼韓、魏、燕、楚、齊、趙、宋、衛(wèi)、中山之眾。于是六國之士，有寧越、徐尚、蘇秦、杜赫之屬為之謀，齊明、周最、陳軫、召滑、樓緩、翟景、蘇厲、樂毅之徒通其意，吳起、孫臏、帶佗、倪良、王廖、田忌、廉頗、趙奢之倫制其兵。嘗以十倍之地，百萬之眾，叩關而攻秦。秦人開關延敵，九國之師，逡巡而不敢進。秦無亡矢遺鏃之費，而天下諸侯已困矣。于是從散約敗，爭割地而賂秦。秦有余力而制其弊，追亡逐北，伏尸百萬，流血漂櫓。因利乘便，宰割天下，分裂山河。強國請服，弱國入朝。延及孝文王、莊襄王，享國之日淺，國家無事。<br>及至始皇，奮六世之余烈，振長策而御宇內，吞二周而亡諸侯，履至尊而制六合，執(zhí)敲撲而鞭笞天下，威振四海。南取百越之地，以為桂林、象郡；百越之君，俯首系頸，委命下吏。乃使蒙恬北筑長城而守藩籬，卻匈奴七百余里。胡人不敢南下而牧馬，士不敢彎弓而報怨。于是廢先王之道，焚百家之言，以愚黔首；隳名城，殺豪杰，收天下之兵，聚之咸陽，銷鋒鏑，鑄以為金人十二，以弱天下之民。然后踐華為城，因河為池，據億丈之城，臨不測之淵，以為固。良將勁弩守要害之處，信臣精卒陳利兵而誰何。天下已定，始皇之心，自以為關中之固，金城千里，子孫帝王萬世之業(yè)也。<br>始皇既沒，余威震于殊俗。然陳涉甕牖繩樞之子，氓隸之人，而遷徙之徒也；才能不及中人，非有仲尼、墨翟之賢，陶朱、猗頓之富；躡足行伍之間，而倔起阡陌之中，率疲弊之卒，將數百之眾，轉而攻秦，斬木為兵，揭竿為旗，天下云集響應，贏糧而景從。山東豪俊遂并起而亡秦族矣。<br>且夫天下非小弱也，雍州之地，崤函之固，自若也。陳涉之位，非尊于齊、楚、燕、趙、韓、魏、宋、衛(wèi)、中山之君也；鋤耰棘矜，非铦于鉤戟長鎩也；謫戍之眾，非抗于九國之師也；深謀遠慮，行軍用兵之道，非及向時之士也。然而成敗異變，功業(yè)相反，何也?試使山東之國與陳涉度長絜大，比權量力，則不可同年而語矣。然秦以區(qū)區(qū)之地，致萬乘之勢，序八州而朝同列，百有余年矣；然后以六合為家，崤函為宮；一夫作難而七廟隳，身死人手，為天下笑者，何也？仁義不施而攻守之勢異也。</div></div></div><br> <div id="footer" style="background-color:#FFEBCD;clear:both;text-align:center;">版權 ? john_嘉豪</div> </body> </html>

　　

?

?

　

轉載于:https://www.cnblogs.com/haowen980/p/9070350.html

總結

以上是生活随笔為你收集整理的python全栈学习--day45(前端HTML)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。