html概述
HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫，意思是超文本標(biāo)記語(yǔ)言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。
html基本結(jié)構(gòu)
一個(gè)html的基本結(jié)構(gòu)如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網(wǎng)頁(yè)標(biāo)題</title> </head> <body> 網(wǎng)頁(yè)顯示內(nèi)容 </body> </html>
第一行是文檔聲明，第二行“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁(yè)的語(yǔ)言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒(méi)什么影響，它一般作為分析統(tǒng)計(jì)用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁(yè)的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄，“”內(nèi)編寫網(wǎng)頁(yè)上顯示的內(nèi)容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個(gè)常用的版本，目前許多網(wǎng)站仍然使用此版本。
此版本文檔用sublime text創(chuàng)建方法： html:xt + tab
文檔示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創(chuàng)建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區(qū)別
1、文檔聲明和編碼聲明
2、html5新增了標(biāo)簽元素以及元素屬性
html注釋：
html文檔代碼中可以插入注釋，注釋是對(duì)代碼的說(shuō)明和解釋，注釋的內(nèi)容不會(huì)顯示在頁(yè)面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過(guò)
、
、
、
、
,標(biāo)簽可以在網(wǎng)頁(yè)上定義6種級(jí)別的標(biāo)題。6種級(jí)別的標(biāo)題表示文檔的6級(jí)目錄層級(jí)關(guān)系，比如說(shuō)：
，再其次是
，以此類推。搜索引擎會(huì)使用標(biāo)題將網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁(yè)上使用標(biāo)題是很重要的。
<h1>這是一級(jí)標(biāo)題</h1> <h2>這是二級(jí)標(biāo)題</h2> <h3>這是三級(jí)標(biāo)題</h3>
html段落標(biāo)簽
標(biāo)簽定義一個(gè)文本段落，一個(gè)段落含有默認(rèn)的上下間距，段落之間會(huì)用這種默認(rèn)間距隔開(kāi)，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡(jiǎn)寫，意思是超文本標(biāo)記語(yǔ)言，超 文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言，這種語(yǔ)言由一個(gè)個(gè)的 標(biāo)簽組成，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm。 </p> <p>一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)，顯示的網(wǎng) 頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p> </body> </html>
html換行標(biāo)簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網(wǎng)頁(yè)時(shí)候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入
來(lái)強(qiáng)制換行，代碼如下：
<p> 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。 </p>
html字符實(shí)體
代碼中成段的文字，如果文字間想空多個(gè)空格，在代碼中空多個(gè)空格，在渲染成網(wǎng)頁(yè)時(shí)只會(huì)顯示一個(gè)空格，如果想顯示多個(gè)空格，可以使用空格的字符實(shí)體,代碼如下：
<!-- 在段落前想縮進(jìn)兩個(gè)文字的空格，使用空格的字符實(shí)體： --> <p> 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開(kāi)顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開(kāi)，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁(yè)，顯示的網(wǎng)頁(yè)可以從一個(gè)網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)。</p>
在網(wǎng)頁(yè)上顯示 “<” 和 “>” 會(huì)誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁(yè)上顯示“<”和“>”可以使用它們的字符實(shí)體，比如：
<!-- “<” 和 “>” 的字符實(shí)體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標(biāo)簽
1、
標(biāo)簽 塊元素，表示一塊內(nèi)容，沒(méi)有具體的語(yǔ)義。
2、 標(biāo)簽 行內(nèi)元素，表示一行中的一小段內(nèi)容，沒(méi)有具體的語(yǔ)義。
含樣式和語(yǔ)義的標(biāo)簽
1、 標(biāo)簽 行內(nèi)元素，表示語(yǔ)氣中的強(qiáng)調(diào)詞
2、 標(biāo)簽 行內(nèi)元素，表示專業(yè)詞匯
3、 標(biāo)簽 行內(nèi)元素，表示文檔中的關(guān)鍵字或者產(chǎn)品名
4、 標(biāo)簽 行內(nèi)元素，表示非常重要的內(nèi)容
語(yǔ)義化的標(biāo)簽
語(yǔ)義化的標(biāo)簽，就是在布局的時(shí)候多使用有語(yǔ)義的標(biāo)簽，搜索引擎在爬網(wǎng)的時(shí)候能認(rèn)識(shí)這些標(biāo)簽，理解文檔的結(jié)構(gòu)，方便網(wǎng)站的收錄。比如：h1標(biāo)簽是表示標(biāo)題，p標(biāo)簽是表示段落，ul、li標(biāo)簽是表示列表，a標(biāo)簽表示鏈接，dl、dt、dd表示定義列表等，語(yǔ)義化的標(biāo)簽不多。
html圖像標(biāo)簽
標(biāo)簽可以在網(wǎng)頁(yè)上插入一張圖片，它是獨(dú)立使用的標(biāo)簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時(shí)顯示的文字，搜索引擎會(huì)使用這個(gè)文字收錄圖片、盲人讀屏軟件會(huì)讀取這個(gè)文字讓盲人識(shí)別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產(chǎn)品圖片" />
絕對(duì)路徑和相對(duì)路徑
像網(wǎng)頁(yè)上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對(duì)地址和相對(duì)地址。
絕對(duì)地址：相對(duì)于磁盤的位置去定位文件的地址
相對(duì)地址：相對(duì)于引用文件本身去定位被引用的文件地址
絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P和頂層目錄的改變而找不到文件，相對(duì)路徑就沒(méi)有這個(gè)問(wèn)題。相對(duì)路徑的定義技巧：
“ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略。
“ …/ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄，比如：“…/images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。
標(biāo)簽可以在網(wǎng)頁(yè)上定義一個(gè)鏈接地址，它的常用屬性有：
href屬性 定義跳轉(zhuǎn)的地址
title屬性 定義鼠標(biāo)懸停時(shí)彈出的提示文字框
target屬性 定義鏈接窗口打開(kāi)的位置
target="_self" 缺省值，新頁(yè)面替換原來(lái)的頁(yè)面，在原來(lái)位置打開(kāi)
target="_blank" 新頁(yè)面會(huì)在新開(kāi)的一個(gè)瀏覽器窗口打開(kāi)
如果您看過(guò)《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》這篇教程，請(qǐng)按照其中說(shuō)明創(chuàng)建一個(gè)txt文件。具體過(guò)程如下：
step1：在您方便的磁盤中建立一個(gè)文件夾，命名為"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"。例如我在D盤中建立了"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"文件夾。
step2：在文件夾中創(chuàng)建"HTML框架.txt"文件。鼠標(biāo)移動(dòng)到空白處點(diǎn)擊右鍵選擇"文本文檔"。
命名為"html框架"，如下圖所示。
如果您的電腦沒(méi)有顯示".txt"后綴的話，請(qǐng)做如下操作：點(diǎn)擊"工具"，找到"文件夾選項(xiàng)"
菜單如下：點(diǎn)擊"查看選項(xiàng)"。
下拉滑條，找到"隱藏已知文件類型的擴(kuò)展名"選項(xiàng)，將前面的對(duì)勾去掉。
如果您使用的是win10的話請(qǐng)參考《邊學(xué)邊做網(wǎng)頁(yè)篇------初識(shí)HTML》，這也是我做的教程，不過(guò)以后都使用這個(gè)賬號(hào)來(lái)發(fā)了。
step3：把"HTML框架"復(fù)制粘貼到"html框架.txt"文件中。HTML框架代碼如下：
<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>代碼講解請(qǐng)參照《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》這篇教程中的講解。
粘貼后效果如下：使用CTRL+s組合鍵保存文件。
step4：復(fù)制"html框架.txt"文件，更名為"第一個(gè)網(wǎng)頁(yè).txt"。原始的"html框架.txt"文件為以后備用。
如圖所示：
step5：把"第一個(gè)網(wǎng)頁(yè).txt"的后綴名".txt"改為".html"。
首先將光標(biāo)放在"第一個(gè)網(wǎng)頁(yè).txt"文件上，點(diǎn)擊右鍵，選擇"重命名"。如圖：
選擇".txt"
更改為".html",敲擊回車鍵。這時(shí)會(huì)彈出一個(gè)對(duì)話框，如圖:
大膽的點(diǎn)擊"是"即可。
修改后文件是這樣的，如圖：因?yàn)槲业哪J(rèn)瀏覽器是360，所以，".html"文件圖標(biāo)顯示為360瀏覽器的圖標(biāo)，顯示其他瀏覽器的圖標(biāo)也沒(méi)有問(wèn)題。
step6：將鼠標(biāo)移動(dòng)到"第一個(gè)網(wǎng)頁(yè).html"文件上，單擊右鍵，選擇打開(kāi)方式，如圖：
選擇任何一個(gè)瀏覽器打開(kāi)即可，我使用的是火狐瀏覽器（Firefox），打開(kāi)后如圖所示：空白一片。
點(diǎn)擊鍵盤F12鍵，看一下控制臺(tái)，如圖：查看器中已經(jīng)顯示我們的代碼框架了。成功！
如果網(wǎng)頁(yè)是一道菜，那么，html框架我們可以理解為裝菜的白盤子，所以我們打開(kāi)框架時(shí)，瀏覽器顯示一片白。下面我們?yōu)楸P子中加些簡(jiǎn)單的"菜"。
首先我們?yōu)轫?yè)面添加"標(biāo)題"
在添加標(biāo)題前，我們來(lái)看一下html框架代碼中的內(nèi)容，在<html></html>標(biāo)簽中有<head></head>和<body></body>兩個(gè)兄弟標(biāo)簽。
我們?cè)陧?yè)面中看到的所有的內(nèi)容都是添加到<body></body>標(biāo)簽中間！
<head></head>標(biāo)簽中的內(nèi)容并不會(huì)顯示在頁(yè)面中。
那么如何添加"標(biāo)題"呢？
標(biāo)題在HTML中用<h></h>標(biāo)簽表示。在<h></h>中間加入文字內(nèi)容即可。如下所示：
<h>第一個(gè)頁(yè)面</h>右鍵，使用"記事本"打開(kāi)"第一個(gè)網(wǎng)頁(yè).html"文件。如圖所示：如果您的"打開(kāi)方式"中沒(méi)有"記事本"請(qǐng)點(diǎn)擊"選擇默認(rèn)程序"
在"其他程序"中找到"記事本"。點(diǎn)擊"確定"。從此，"記事本"就一直存在于"打開(kāi)方式"中了。
我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開(kāi)。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一個(gè)頁(yè)面</h> </body> </html>然后，使用瀏覽器打開(kāi)，如圖所示：標(biāo)題出現(xiàn)在頁(yè)面中了。
下面，我們來(lái)添加段落內(nèi)容。
段落在HTML中使用<p></p>標(biāo)簽添加。代碼如下
<p>千里之行始于足下</p>請(qǐng)各位自行將代碼添加到"第一個(gè)網(wǎng)頁(yè).html"文件中吧！示例代碼如下：
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個(gè)網(wǎng)頁(yè)</h><p>千里之行始于足下</p> </body> </html>結(jié)果如圖所示：
通過(guò)這個(gè)練習(xí)，我們可以發(fā)現(xiàn)一個(gè)規(guī)律，在<body></body>中，子元素代碼的上下順序代表了它在頁(yè)面中顯示的排版順序。
這也簡(jiǎn)單回答了代碼結(jié)構(gòu)與排版的關(guān)系，html的標(biāo)簽語(yǔ)句只是標(biāo)記了它所承載的信息的屬性和版面位置。
基于這個(gè)特性，html被稱為超文本標(biāo)記語(yǔ)言。
下一期我們具體討論頁(yè)面中文字編輯的技巧。
喜歡的小伙伴請(qǐng)加關(guān)注，有任何問(wèn)題請(qǐng)給我留言，歡迎大家給與指正！感激不盡！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作