當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/4/16 HTML 39 豆豆

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

HTML基本結構

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

? ? ??HTML主要是各種標簽組成，基本由下面組成：

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

<!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="風景圖" /> </body> </html>

其中四個注意點如下：

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

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

HTML標題、段落、換行、空格

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

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

HTML中的塊、含樣式的標簽

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

含樣式的標簽，表示標簽帶有語義，帶有一定的指示修飾作用，主要包括以下幾種：

1、em 標簽行內元素，表示語氣中的強調詞
2、i 標簽行內元素，原本沒有語義，w3c強加了語義，表示專業詞匯
3、b 標簽行內元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者產品名
4、strong 標簽行內元素，表示非常重要的內容

語義化的標簽，就是在布局的時候多使用語義化的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。

HTML中圖片的插入和相對絕對路徑

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

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

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

HTML中的鏈接和列表

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

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

html列表

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

有序列表

在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，代碼如下：

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

在網頁上生成的列表，每條項目上會按1、2、3編號，有序列表在實際開發中較少使用。

無序列表

在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，代碼如下：

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

在網頁上生成的列表，每條項目上會有一個小圖標，這個小圖標在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉默認的小圖標，如果需要圖標，可以用樣式自定義圖標，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。

定義列表

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

<h3>前端三大塊</h3> <dl><dt>html</dt><dd>負責頁面的結構</dd><dt>css</dt><dd>負責頁面的表現</dd><dt>javascript</dt><dd>負責頁面的行為</dd></dl>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
结构