當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端学习之html——基本结构

發(fā)布時間：2025/4/16 HTML 48 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习之html——基本结构小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

? ? ??HTML主要是各種標(biāo)簽組成，基本由下面組成：

首先需要<！DOCTYPE html> 聲明下文檔是html文件，接著整個頁面是由兩個<html>標(biāo)簽包裹起來，中間有<head>和<body>標(biāo)簽并且組成。<head>一般用來聲明標(biāo)題的信息與屬性，以及編碼格式。而<body>標(biāo)簽中是頁面的主體，標(biāo)簽中再嵌套著標(biāo)簽。

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>html5文檔類型</title> </head> <body><div class="aa" id="div1"></div><br><br /><img src="images/001.jpg " alt="風(fēng)景圖" /> </body> </html>

其中四個注意點(diǎn)如下：

1.標(biāo)簽小寫 2.屬性的聲明是放在標(biāo)簽里面的<>，并且引號引起來。

3.標(biāo)簽一般成對出現(xiàn)，單個標(biāo)簽需要加 "/" 4.插入圖片時需要聲明圖片的信息，便于圖片加載出現(xiàn)問題時可以顯示，以及便于爬取

HTML標(biāo)題、段落、換行、空格

HTML的標(biāo)題有六級，通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>標(biāo)簽可以在網(wǎng)頁上定義。6種級別的標(biāo)題表示文檔的6級目錄層級關(guān)系，比如說： <h1>用作主標(biāo)題（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此類推。搜索引擎會使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁上使用標(biāo)題是很重要的。

HTML的段落是有<p>標(biāo)簽來定義，其中，不同段落之間會有默認(rèn)的空行隔開。而在代碼中自己換行的段落，在渲染成網(wǎng)頁時候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入<br />來強(qiáng)制換行如果想自己添加空行。同時，需要注意，在段落文字想要空格，無論自己敲多少個空格，都只會渲染出一個，可以自己添加&nbsp；來實(shí)現(xiàn)空格。

HTML中的塊、含樣式的標(biāo)簽

<div>用來表示html中的一塊內(nèi)容，比較常用，無具體的語義。其中<sapn>用來標(biāo)簽行內(nèi)元素，表示一段話可以某部分內(nèi)容，也沒有具體語義。

含樣式的標(biāo)簽，表示標(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)簽，搜索引擎在爬網(wǎng)的時候能認(rèn)識這些標(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中圖片的插入和相對絕對路徑

<img>標(biāo)簽可以在網(wǎng)頁上插入一張圖片，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片加載失敗時顯示的文字，以及對搜索引擎和盲人讀屏軟件的支持。例如 <img src="images/001.jpg" alt="人物圖" />

其中的image/001.jpg就是指的相對地址，即相對于引用文件本身去定位被引用的文件地址。與相對路徑對應(yīng)的是絕對地址，指的相對于磁盤的位置去定位文件的地址。在日常使用中，相對地址使用較多，原因是：絕對地址在整體文件遷移時會因?yàn)榇疟P和頂層目錄的改變而找不到文件，而相對路徑就沒有這個問題。

在使用中，./表示當(dāng)前目錄，默認(rèn)是當(dāng)前目錄，../表示上一層目錄“ 例如：../images/pic.jpg” 表示當(dāng)前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

HTML中的鏈接和列表

在html中，用<a>標(biāo)簽可以在網(wǎng)頁上定義一個鏈接地址，通過src屬性定義跳轉(zhuǎn)的地址，通過title屬性定義鼠標(biāo)懸停時彈出的提示文字框。例如：

同時可以通過鏈接實(shí)現(xiàn)頁面內(nèi)跳轉(zhuǎn)滾動，頁面內(nèi)定義了“id”或者“name”的元素，可以通過<a>標(biāo)簽鏈接到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。例如：

html列表

html列表主要有三種，有序列表、無序列表、定義列表

有序列表

在網(wǎng)頁上定義一個有編號的內(nèi)容列表可以用<ol>、<li>配合使用來實(shí)現(xiàn)，代碼如下：

<ol><li>列表文字一</li><li>列表文字二</li><li>列表文字三</li> </ol>

在網(wǎng)頁上生成的列表，每條項(xiàng)目上會按1、2、3編號，有序列表在實(shí)際開發(fā)中較少使用。

無序列表

在網(wǎng)頁上定義一個無編號的內(nèi)容列表可以用<ul>、<li>配合使用來實(shí)現(xiàn)，代碼如下：

<ul><li>列表文字一</li><li>列表文字二</li><li>列表文字三</li> </ul>

在網(wǎng)頁上生成的列表，每條項(xiàng)目上會有一個小圖標(biāo)，這個小圖標(biāo)在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉默認(rèn)的小圖標(biāo)，如果需要圖標(biāo)，可以用樣式自定義圖標(biāo)，從而達(dá)到在不同瀏覽器上顯示的效果相同,實(shí)際開發(fā)中一般用這種列表。

定義列表

定義列表通常用于術(shù)語的定義：<dl>標(biāo)簽表示列表的整體，<dt>標(biāo)簽定義術(shù)語的題目，<dd>標(biāo)簽是術(shù)語的解釋。一個<dl>中可以有多個題目和解釋，可以用在設(shè)置選擇題、定義等方面。代碼如下：

<h3>前端三大塊</h3> <dl><dt>html</dt><dd>負(fù)責(zé)頁面的結(jié)構(gòu)</dd><dt>css</dt><dd>負(fù)責(zé)頁面的表現(xiàn)</dd><dt>javascript</dt><dd>負(fù)責(zé)頁面的行為</dd></dl>

總結(jié)

以上是生活随笔為你收集整理的前端学习之html——基本结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

html
结构

上一篇：进程的创建-fork
下一篇：从零开始发布前端代码到服务器上_无服务器