前端開發(fā)之基礎(chǔ)知識(shí)-HTML（一）

番茄西紅柿發(fā)布于2019-04-23 13:41 / 2537人閱讀

摘要：文檔規(guī)范文檔規(guī)范制定了文檔的編寫規(guī)范，可部分遵守，也可全部遵守，看開發(fā)要求。標(biāo)簽行內(nèi)元素，表示一行中的一小段內(nèi)容，沒有具體的語義。表示當(dāng)前文件所在目錄下的上一級(jí)目錄，比如表示當(dāng)前目錄下的上一級(jí)目錄下的文件夾中的的圖片。

1.1 html概述和基本結(jié)構(gòu)

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個(gè)個(gè)的標(biāo)簽組成，用這種語言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。

html基本結(jié)構(gòu)

一個(gè)html的基本結(jié)構(gòu)如下：

 1 DOCTYPE html>
 2 <html lang="en">
 3     <head>            
 4         <meta charset="UTF-8">
 5         <title>網(wǎng)頁標(biāo)題title>
 6     head>
 7     <body>
 8           網(wǎng)頁顯示內(nèi)容
 9     body>
10 html>

第一行是文檔聲明，第二行“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文，定義成中文是lang="zh-CN",不定義也沒什么影響，它一般作為分析統(tǒng)計(jì)用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負(fù)責(zé)對(duì)網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會(huì)顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會(huì)顯示在標(biāo)題欄，“”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。

html文檔規(guī)范

xhtml制定了文檔的編寫規(guī)范，html5可部分遵守，也可全部遵守，看開發(fā)要求。

1、所有的標(biāo)簽必須小寫

2、所有的屬性必須用雙引號(hào)括起來

3、所有標(biāo)簽必須閉合

4、img必須要加alt屬性(對(duì)圖片的描述)

html注釋：

html文檔代碼中可以插入注釋，注釋是對(duì)代碼的說明和解釋，注釋的內(nèi)容不會(huì)顯示在頁面上，html代碼中插入注釋的方法是：

1.2 html標(biāo)題

通過

、

,標(biāo)簽可以在網(wǎng)頁上定義6種級(jí)別的標(biāo)題。6種級(jí)別的標(biāo)題表示文檔的6級(jí)目錄層級(jí)關(guān)系，比如說：

用作主標(biāo)題（最重要的），其后是

（次重要的），再其次是

，以此類推。搜索引擎會(huì)使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁上使用標(biāo)題是很重要的。

1 <h1>這是一級(jí)標(biāo)題h1>
2 <h2>這是二級(jí)標(biāo)題h2>
3 <h3>這是三級(jí)標(biāo)題h3>

1.3 html段落、換行與字符實(shí)體

html段落

標(biāo)簽定義一個(gè)文本段落，一個(gè)段落含有默認(rèn)的上下間距，段落之間會(huì)用這種默認(rèn)間距隔開，代碼如下：

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>段落title>
 6 head>
 7 <body>
 8     <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超
 9     文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個(gè)個(gè)的
10     標(biāo)簽組成，用這種語言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm。
11     p>
12 
13     <p>一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方
14     式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁，顯示的網(wǎng)
15     頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。p>
16 body>
17 html>

html換行

代碼中成段的文字，直接在代碼中回車換行，在渲染成網(wǎng)頁時(shí)候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入
來強(qiáng)制換行，代碼如下：

1 <p>
2 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br />
3 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br />
4 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。
5 p>

html字符實(shí)體

代碼中成段的文字，如果文字間想空多個(gè)空格，在代碼中空多個(gè)空格，在渲染成網(wǎng)頁時(shí)只會(huì)顯示一個(gè)空格，如果想顯示多個(gè)空格，可以使用空格的字符實(shí)體,代碼如下：

1 
2 <p>
3   一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br />
4 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件<br />
5 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。p>

在網(wǎng)頁上顯示 “<” 和 “>” 會(huì)誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實(shí)體，比如：

1 
2 <p>
3     3 < 5 <br>
4     10 > 5
5 p>

1.4 html塊、含樣式的標(biāo)簽

html塊

1、div標(biāo)簽塊元素，表示一塊內(nèi)容，沒有具體的語義。
2、span標(biāo)簽行內(nèi)元素，表示一行中的一小段內(nèi)容，沒有具體的語義。

含樣式和語義的標(biāo)簽

1、em標(biāo)簽行內(nèi)元素，表示語氣中的強(qiáng)調(diào)詞
2、i標(biāo)簽行內(nèi)元素，原本沒有語義，w3c強(qiáng)加了語義，表示專業(yè)詞匯
3、b標(biāo)簽行內(nèi)元素，原本沒有語義，w3c強(qiáng)加了語義，表示文檔中的關(guān)鍵字或者產(chǎn)品名
4、strong標(biāo)簽行內(nèi)元素，表示非常重要的內(nèi)容

語義化的標(biāo)簽

語義化的標(biāo)簽，就是在布局的時(shí)候多使用語義化的標(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表示定義列表等，語義化的標(biāo)簽不多。

1.5 html圖像、絕對(duì)路徑和相對(duì)路徑

html圖像

標(biāo)簽可以在網(wǎng)頁上插入一張圖片，它是獨(dú)立使用的標(biāo)簽，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片加載失敗時(shí)顯示的文字，以及對(duì)搜索引擎和盲人讀屏軟件的支持。

1 <img src="images/pic.jpg" alt="產(chǎn)品圖片" />

絕對(duì)路徑和相對(duì)路徑

像網(wǎng)頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對(duì)地址和相對(duì)地址。

絕對(duì)地址：相對(duì)于磁盤的位置去定位文件的地址
相對(duì)地址：相對(duì)于引用文件本身去定位被引用的文件地址

絕對(duì)地址在整體文件遷移時(shí)會(huì)因?yàn)榇疟P和頂層目錄的改變而找不到文件，相對(duì)路徑就沒有這個(gè)問題。相對(duì)路徑的定義技巧：

“ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略。
“ ../ ” 表示當(dāng)前文件所在目錄下的上一級(jí)目錄，比如：“../images/pic.jpg” 表示當(dāng)前目錄下的上一級(jí)目錄下的images文件夾中的pic.jpg的圖片。

云服務(wù)器 GPU云服務(wù)器前端開發(fā)基礎(chǔ)知識(shí) html前端知識(shí) html前端開發(fā) html5前端開發(fā)師

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2207.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 734·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3980·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3806·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3870·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3801·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3902·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6182·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！