整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML相關(guān)知識之文檔聲明標(biāo)簽-HTML學(xué)習(xí)之路(2)

          篇文章介紹了<!--...--> 注釋標(biāo)簽,我個人感覺很容易理解,在日常編碼中,大多數(shù)編輯器都有注釋標(biāo)簽的快捷鍵,如sublime或VS code里在html代碼里,選中想要注釋掉的代碼后,直接按ctrl+/即可。幾乎不用手動輸入了。還是很方便的。

          這篇我寫<!DOCTYPE>標(biāo)簽,說起來這個標(biāo)簽,很常見,因?yàn)樗鼤霈F(xiàn)在每一個httml文檔的最開頭,然而,我們很少去重視它,為什么呢?

          說到這個標(biāo)簽,我不得不說起html的版本歷史了。

          在大約10年前吧,html5應(yīng)用還不如今天這么廣泛吧,于是當(dāng)時的文檔類型聲明如下

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

          很長,也很難記,由于我入行晚,懂得這玩意就只是一個聲明了,比如strict表示嚴(yán)格模式。其他的我也不想知道了。

          當(dāng)然html版本的規(guī)范從4到5的過渡經(jīng)歷了太多年,因?yàn)橐紤]老瀏覽器的兼容性,再加上前期移動設(shè)備配置低,不支持較為復(fù)雜的媒體元素。于是,一些資歷深的前端開發(fā)人員,面對這么長的代碼還是有很長一段時間。

          當(dāng)然,9102年都快過完了,我們這邊已經(jīng)不需要再考慮這些了,于是,我直接就用html5了。

          然后聲明文檔給格式,就變得很簡單了。

          <!DOCTYPE html>
          

          最開始我是使用sublime生成的模板練習(xí)的,然后,犯懶,直接輸入了<html>就出來下面的代碼:

          <!DOCTYPE html>
          <html>
          <head>
          	<title></title>
          </head>
          <body>
          </body>
          </html>
          

          然后就開始進(jìn)行填充了。

          直到今天我才注意到原來<!DOCTYPE html>是單獨(dú)的一行,與下方<html></html>是兩碼事。

          所以,我重新看了下書上的強(qiáng)調(diào)內(nèi)容:

          1. <!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于 <html> 標(biāo)簽之前,沒有結(jié)束標(biāo)簽,對大小寫不敏感。
          2. <!DOCTYPE> 聲明不是 HTML 標(biāo)簽;它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。
          3. 在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD(文檔類型定義),因?yàn)?HTML 4.01 基于 SGML(標(biāo)準(zhǔn)通用標(biāo)記語言))。DTD 規(guī)定了標(biāo)記語言的規(guī)則,這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
          4. HTML5 不基于 SGML,所以不需要引用 DTD。

          關(guān)于SGML,參見https://wiki.mbalib.com/wiki/SGML

          常用的 DOCTYPE 聲明

          HTML 5

          <!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">
          

          XHTML 1.1

          該 DTD 等同于 XHTML 1.0 Strict,但允許添加模型(例如提供對東亞語系的 ruby 支持)。

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
          

          最后,雖然上方的html4和xml的文檔類型聲明這么麻煩了,但是這里沒什么知識點(diǎn)了,因?yàn)槿缃瘢琱tml5應(yīng)用這么普及了,我們只需在文檔開頭寫<!DOCTYPE html>即可,當(dāng)然html4的嚴(yán)格模式和傳統(tǒng)模式大概知道就行了。

          TML教程

          超文本標(biāo)記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

          您可以使用 HTML 來建立自己的 WEB 站點(diǎn),HTML 運(yùn)行在瀏覽器上,由瀏覽器來解析。

          在本教程中,您將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點(diǎn)。

          HTML 很容易學(xué)習(xí)!相信您能很快學(xué)會它!

          本教程包含了數(shù)百個 HTML 實(shí)例。

          使用本站的編輯器,您可以輕松實(shí)現(xiàn)在線修改 HTML,并查看實(shí)例運(yùn)行結(jié)果。

          <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="utf-8">
                  <title>孫叫獸的博客</title>
              </head>
              <body>
                  <h1>我的第一個標(biāo)題</h1>
                  <p>我的第一個段落。</p>
              </body>
          </html>

          HTML 文檔的后綴名

          .html

          .htm

          都可以。

          • HTML 簡介

          實(shí)例:

          <!doctype html>
          <html>
          <header>
          <meta charset="utf-8">
          <title>孫叫獸的博客</title>
          </header>
          <body>
          <h1>這是我的標(biāo)題</h1>
          <p>這是我的段落</p>
          </body>
          </html>

          實(shí)例解析

          • <!DOCTYPE html> 聲明為 HTML5 文檔
          • <html> 元素是 HTML 頁面的根元素
          • <head> 元素包含了文檔的元(meta)數(shù)據(jù),如 <meta charset=“utf-8”> 定義網(wǎng)頁編碼格式為 utf-8。
          • <title> 元素描述了文檔的標(biāo)題
          • <body> 元素包含了可見的頁面內(nèi)容
          • <h1> 元素定義一個大標(biāo)題
          • <p> 元素定義一個段落

          什么是HTML?

          • HTML 是用來描述網(wǎng)頁的一種語言。
          • HTML 指的是超文本標(biāo)記語言: HyperText Markup Language
          • HTML 不是一種編程語言,而是一種標(biāo)記語言
          • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
          • HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
          • HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
          • HTML文檔也叫做 web 頁面
          • HTML 標(biāo)簽
          • HTML 標(biāo)記標(biāo)簽通常被稱為 HTML

          標(biāo)簽

        1. HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞,比如 <html>
        2. HTML 標(biāo)簽通常是成對出現(xiàn)的,比如 <b> 和 </b>
        3. 標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽,第二個標(biāo)簽是結(jié)束標(biāo)簽
        4. 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
        5. <標(biāo)簽>內(nèi)容</標(biāo)簽>

          html元素

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

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

          HTML 元素:

          <p>這是一個段落</p>

          web瀏覽器

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

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

          html網(wǎng)頁結(jié)構(gòu)

          <html>
              <head>
                  <title>頁面標(biāo)題</title>
              </head>
              <body>
                  <h1>這是一個標(biāo)題</h1>
                  <p>這是一個段落。</p>
                  <p>這是另外一個段落。</p>
              </body>
          </html>

          html的版本:

          <!DOCTYPE>聲明

          <!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。

          網(wǎng)絡(luò)上有很多不同的文件,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。

          doctype 聲明是不區(qū)分大小寫的,以下方式均可:

          <!DOCTYPE html>
          <!DOCTYPE HTML>
          <!doctype html>
          <!Doctype Html>

          html5

          <!DOCTYPE html>

          html4

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

          xhtml1.0

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

          中文編碼

          目前在大部分瀏覽器中,直接輸出中文會出現(xiàn)中文亂碼的情況,這時候我們就需要在頭部將字符聲明為 UTF-8。

          果想開發(fā)一個網(wǎng)站,除了要精通后端開發(fā)語言(如:php)外,還要精通HTML代碼。那么,什么是HTML呢?HTML是一種超文本標(biāo)記語言,它包含有眾多的標(biāo)簽,我們可以通過這些標(biāo)簽,把不同的internet資源(如:文字、圖片、視頻、音頻、表單等等)整合在一個統(tǒng)一的文檔中,這就形成了我們可以看得見的網(wǎng)頁。那么,HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

          一、文檔類型聲明。

          html5文檔類型聲明:<!doctype html>

          html4文檔類型聲明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          二、html主標(biāo)簽。

          這個標(biāo)簽是html最外層的標(biāo)簽,所有其它的HTML標(biāo)簽都要放在這個標(biāo)簽的內(nèi)部。

          <html>

          <head></head>

          <body></body>

          </html>

          三、雙標(biāo)簽和單標(biāo)簽。

          在HTML標(biāo)簽中,有的標(biāo)簽是成雙成對的,如:<html></html>(如下圖);而有的標(biāo)簽是單個的,如:<hr>橫線標(biāo)簽。

          四、head頭部標(biāo)簽。

          head頭部有以下幾種常用標(biāo)簽:

          meta:主要提供有關(guān)頁面的元信息。

          link:用來定義文檔與外部資源的關(guān)系,最常用的是調(diào)用CSS樣式文件。

          title:頁面標(biāo)題的標(biāo)簽。

          script:用來調(diào)用JS文件或JS代碼。當(dāng)然,script標(biāo)簽也可以在body主體中使用。

          五、body主體標(biāo)簽。

          1、塊級標(biāo)簽。

          塊級標(biāo)簽的特性是:獨(dú)自占有一行;標(biāo)簽的高與寬、邊距可以修改;沒有設(shè)置寬與高時,默認(rèn)繼承父標(biāo)簽。例如:


          <div>div1</div>

          <div>div2</div>

          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>


          前端頁面顯示的效果如下圖:

          常用的塊級標(biāo)簽有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

          2、內(nèi)聯(lián)標(biāo)簽。

          內(nèi)聯(lián)標(biāo)簽與塊級標(biāo)簽不同,它不能獨(dú)自占有一行,會與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示;內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的,它里面的文字或圖片有多高,它就是多高。例如如下代碼:


          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>

          <span>span1</span>

          <span>span2</span>


          CSS樣式代碼跟塊級標(biāo)簽的例子是一樣的,而顯示的效果就不一樣了,寬與高、上下邊距沒有效果。如下圖:

          常用的內(nèi)聯(lián)標(biāo)簽有:span、a、b、strong、i、em 。

          3、內(nèi)聯(lián)塊級標(biāo)簽。

          內(nèi)聯(lián)塊級標(biāo)簽,既有一些內(nèi)聯(lián)標(biāo)簽的特性,也有一些塊級標(biāo)簽的特點(diǎn):它不能獨(dú)自占有一行,但是可以修改它的寬度和高度。例如下面這段代碼:


          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>

          <img src="w5.jpg" alt="">

          <img src="w5.jpg" alt="">


          CSS樣式代碼跟塊級標(biāo)簽的那個例子仍然是一樣的,圖片的寬和高、上下邊距修改成功,而2個圖片不能獨(dú)自占有一行,而是在同一行。如下圖:

          常用的內(nèi)聯(lián)塊級標(biāo)簽有:img、input、textarea。

          4、區(qū)域標(biāo)簽。

          所謂區(qū)域標(biāo)簽,就是主要用來劃分布局頁面區(qū)域的。如:頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是:讓頁面布局更加清晰明了。

          常用的區(qū)域標(biāo)簽有:header(頭部)、footer(底部)、nav(導(dǎo)航)、aside(側(cè)邊欄)、section(主體)、article(獨(dú)立內(nèi)容)。

          5、表單標(biāo)簽。

          這個表單標(biāo)簽我們也是會經(jīng)常用到的,如:登錄網(wǎng)站的時候、提交數(shù)據(jù)的時候。如下圖的評論表單:

          ?表單常用的標(biāo)簽有:form、input、select、option、textarea 。

          以上就是我們開發(fā)網(wǎng)頁時,會常用到的HTML標(biāo)簽。當(dāng)然,HTML標(biāo)簽遠(yuǎn)不止這些,尤其是html5出來后,新增了許多的新標(biāo)簽。但是,有些標(biāo)簽在我們開發(fā)中很少用到,所以,這里就沒有做相應(yīng)的介紹。


          主站蜘蛛池模板: 亚洲AV香蕉一区区二区三区| 国产经典一区二区三区蜜芽| 国产综合一区二区在线观看| 久久无码人妻一区二区三区午夜| 亚洲综合一区国产精品| 国产SUV精品一区二区88L| 久久er99热精品一区二区| 黄桃AV无码免费一区二区三区| 亚洲AV无码一区二区三区系列| 国产大秀视频一区二区三区| 久久精品岛国av一区二区无码| 日本强伦姧人妻一区二区| 伊人色综合视频一区二区三区| 国产精品视频一区二区噜噜| 日韩精品福利视频一区二区三区| 无码欧精品亚洲日韩一区| 香蕉视频一区二区| 国产精品视频第一区二区三区| 一区二区精品久久| 在线视频一区二区三区三区不卡| 国产精品免费综合一区视频| 日韩高清一区二区三区不卡| 国产在线视频一区二区三区| 日本一区二区三区在线网| 国产av一区二区精品久久凹凸| 日韩一区二区三区免费播放| jazzjazz国产精品一区二区| 在线精品亚洲一区二区小说| 中文字幕在线播放一区| 亚洲国产日韩在线一区| 国产在线观看一区二区三区四区| 国产成人午夜精品一区二区三区 | 国产精品美女一区二区| 亚洲av高清在线观看一区二区| 精品人妻少妇一区二区三区在线 | 亚洲视频一区二区三区四区| 日韩一区二区在线免费观看| 国产在线观看一区精品| 人妻av无码一区二区三区| 成人精品一区久久久久| 久久久精品日本一区二区三区|