前端开发之基础知识-HTML（一）
?
1.1 html概述和基本結構
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
html基本結構
一個html的基本結構如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>網頁標題</title> 6 </head> 7 <body> 8 網頁顯示內容 9 </body> 10 </html>第一行是文檔聲明，第二行“<html>”標簽和最后一行“</html>”定義html文檔的整體，“<html>”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什么影響，它一般作為分析統計用。 “<head>”標簽和“<body>”標簽是它的第一層子元素，“<head>”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“<body>”內編寫網頁上顯示的內容。
html文檔規范
xhtml制定了文檔的編寫規范，html5可部分遵守，也可全部遵守，看開發要求。
1、所有的標簽必須小寫
2、所有的屬性必須用雙引號括起來
3、所有標簽必須閉合
4、img必須要加alt屬性(對圖片的描述)
html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：
?1 <!-- 這是一段注釋 -->?
1.2 html標題
通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說： <h1>用作主標題（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。
1 <h1>這是一級標題</h1> 2 <h2>這是二級標題</h2> 3 <h3>這是三級標題</h3>?
1.3 html段落、換行與字符實體
html段落
<p>標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：
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 的首字母簡寫，意思是超文本標記語言，超 9 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的 10 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。 11 </p> 12 13 <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方 14 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網 15 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p> 16 </body> 17 </html>html換行
代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入<br />來強制換行，代碼如下：
1 <p> 2 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 3 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 4 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。 5 </p>html字符實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
1 <!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： --> 2 <p> 3 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 4 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 5 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：
1 <!-- “<” 和 “>” 的字符實體為 < 和 > --> 2 <p> 3 3 < 5 <br> 4 10 > 5 5 </p>1.4 html塊、含樣式的標簽
html塊
1、div標簽 塊元素，表示一塊內容，沒有具體的語義。
2、span標簽 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標簽
1、em標簽 行內元素，表示語氣中的強調詞
2、i標簽 行內元素，原本沒有語義，w3c強加了語義，表示專業詞匯
3、b標簽 行內元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
4、strong標簽 行內元素，表示非常重要的內容
語義化的標簽
語義化的標簽，就是在布局的時候多使用語義化的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。
1.5 html圖像、絕對路徑和相對路徑
html圖像
<img>標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片加載失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟件的支持。
?1 <img src="images/pic.jpg" alt="產品圖片" />?
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
- 絕對地址：相對于磁盤的位置去定位文件的地址
- 相對地址：相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
-
“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
-
“ ../ ” 表示當前文件所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hh1c2ihj&title=前端開發之基礎知識-HTML（一）
總結
以上是生活随笔為你收集整理的前端开发之基础知识-HTML（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VUE.js 中取得后台原生HTML字符
- 下一篇： 前端基础-CSS的各种选择器的特点以及C