整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
avaScript 常見錯誤
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的標(biāo)簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。
html基本結(jié)構(gòu)
一個html的基本結(jié)構(gòu)如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網(wǎng)頁標(biāo)題</title> </head> <body> 網(wǎng)頁顯示內(nèi)容 </body> </html>
第一行是文檔聲明，第二行“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統(tǒng)計用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負責(zé)對網(wǎng)頁進行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會顯示在標(biāo)題欄，“”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本，目前許多網(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文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內(nèi)容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過
、
、
、
、
,標(biāo)簽可以在網(wǎng)頁上定義6種級別的標(biāo)題。6種級別的標(biāo)題表示文檔的6級目錄層級關(guān)系，比如說：
，再其次是
，以此類推。搜索引擎會使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁上使用標(biāo)題是很重要的。
<h1>這是一級標(biāo)題</h1> <h2>這是二級標(biāo)題</h2> <h3>這是三級標(biāo)題</h3>
html段落標(biāo)簽
標(biāo)簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超 文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的 標(biāo)簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。 </p> <p>一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁，顯示的網(wǎng) 頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。</p> </body> </html>
html換行標(biāo)簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網(wǎng)頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入
來強制換行，代碼如下：
<p> 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。 </p>
html字符實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網(wǎng)頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： --> <p> 一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。</p>
在網(wǎng)頁上顯示 “<” 和 “>” 會誤認為是標(biāo)簽，想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實體，比如：
<!-- “<” 和 “>” 的字符實體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標(biāo)簽
1、
標(biāo)簽 塊元素，表示一塊內(nèi)容，沒有具體的語義。
2、 標(biāo)簽 行內(nèi)元素，表示一行中的一小段內(nèi)容，沒有具體的語義。
含樣式和語義的標(biāo)簽
1、 標(biāo)簽 行內(nèi)元素，表示語氣中的強調(diào)詞
2、 標(biāo)簽 行內(nèi)元素，表示專業(yè)詞匯
3、 標(biāo)簽 行內(nèi)元素，表示文檔中的關(guān)鍵字或者產(chǎn)品名
4、 標(biāo)簽 行內(nèi)元素，表示非常重要的內(nèi)容
語義化的標(biāo)簽
語義化的標(biāo)簽，就是在布局的時候多使用有語義的標(biāo)簽，搜索引擎在爬網(wǎng)的時候能認識這些標(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表示定義列表等，語義化的標(biāo)簽不多。
html圖像標(biāo)簽
標(biāo)簽可以在網(wǎng)頁上插入一張圖片，它是獨立使用的標(biāo)簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產(chǎn)品圖片" />
絕對路徑和相對路徑
像網(wǎng)頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
絕對地址：相對于磁盤的位置去定位文件的地址
相對地址：相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
“ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ …/ ” 表示當(dāng)前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當(dāng)前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
標(biāo)簽可以在網(wǎng)頁上定義一個鏈接地址，它的常用屬性有：
href屬性 定義跳轉(zhuǎn)的地址
title屬性 定義鼠標(biāo)懸停時彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
HTML簡介
HTML是用來描述網(wǎng)頁的一種語言，它是一種超文本標(biāo)記語言，由一套標(biāo)記標(biāo)簽組成，在制作網(wǎng)頁時，HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。
發(fā)展史
HTML：Hyper Text Markup Language超文本標(biāo)記語言
超文本標(biāo)記語言—在1993年6月互聯(lián)網(wǎng)工程工作小組工作案發(fā)布（并非標(biāo)準(zhǔn)）
HTML2.0—1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時。
HTML3.2—1996年1月14日，W3C推薦標(biāo)準(zhǔn)
HTML4.0—1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML4.01（微小改進）—1999年12月24日，W3C推薦標(biāo)準(zhǔn)，2000年5月15日發(fā)布基本嚴格的HTML4.01語法，是國標(biāo)標(biāo)準(zhǔn)化組織和國際電工委員會的標(biāo)準(zhǔn)
XHTML1.0—發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布
XHTML1.1—2001年5月31日發(fā)布
XHTML2.0是W3C的工作草案，由于改動過大，學(xué)習(xí)這個新技術(shù)的成本過高而最終胎死腹中，因此，現(xiàn)在最常用的還是XHTML1.0標(biāo)準(zhǔn)。
目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團隊，
2008年1月22日公布HTML5第一份正式草案，
2012年12月17日HTML5規(guī)范正式定稿，
2013年5月6日，HTML5.1正式草案公布。
HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規(guī)則。這些元素、特性和規(guī)則的建立，提供了許多新的網(wǎng)頁功能，如使用網(wǎng)頁實現(xiàn)動態(tài)渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網(wǎng)頁播放視頻等。目前企業(yè)開發(fā)中也在增大使用HTML5的力度
HTML的優(yōu)勢
h1~h6
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標(biāo)題標(biāo)簽</title> </head> <body> <h1>這是一級標(biāo)題</h1> <h2>這是二級標(biāo)題</h2> <h3>這是三級標(biāo)題</h3> <h4>這是四級標(biāo)題</h4> <h5>這是五級標(biāo)題</h5> <h6>這是六級標(biāo)題</h6> <h7>這是七級標(biāo)題</h7>效果怎么顯示不出來呢？？？ <h1>這是一級標(biāo)題</h1> </body> </html> |
瀏覽器預(yù)覽效果
p標(biāo)簽為段落標(biāo)簽，br標(biāo)簽為換行標(biāo)簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落和換行標(biāo)簽</title> </head> <body> <h1>北京歡迎你</h1> <p>北京歡迎你，<br>為你開天辟地</p> <p>北京歡迎你，<br/>有有勇氣就會有奇跡</p> </body> </html> |
瀏覽器預(yù)覽效果圖
hr標(biāo)簽為水平線標(biāo)簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平線標(biāo)簽</title> </head> <body> <h1>漂洋過海來看你</h1> <hr> <p>為你我用了半年的積蓄，<br>漂洋過海來看你</p> <hr/> </body> </html> |
瀏覽器預(yù)覽效果圖
em為斜體標(biāo)簽，strong為字體加粗標(biāo)簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字體樣式標(biāo)簽</title> </head> <body> <h1>漂洋過海來看你</h1> <hr> <p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br> <em><strong>漂洋過海</strong></em>來看你 </p> <hr/> </body> </html> |
瀏覽器預(yù)覽效果圖
注釋使用：<!--被注釋的內(nèi)容-->
大于號：> great than的縮寫
小于號：< less than的縮寫
雙引號：""
版權(quán)符號：©
空格：
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注釋和特殊符號</title> </head> <body> <pre> 注釋使用：<!--被注釋的內(nèi)容--> 大于號：> great than的縮寫 小于號：< less than的縮寫 雙引號："" 版權(quán)符號：© 空格： </pre> <!-- 我是被注釋的內(nèi)容，我只留給你們看，不會在頁面上顯示 --> 5<10>6 <br> "我是被雙引號引起來的內(nèi)容"<br> ©自由職業(yè)開發(fā)者公司<br> 我是 測試 空 格的 </body> </html> |
瀏覽器預(yù)覽效果圖
以上就是HTML的簡單入門，后續(xù)帶大家更深入的了解HTML
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
