HTML的入門(mén)及結(jié)構(gòu)組成

大家在瀏覽網(wǎng)頁(yè)的時(shí)候，是否思考過(guò)這樣一個(gè)問(wèn)題：怎樣才能制作出一個(gè)網(wǎng)頁(yè)呢？制作出一個(gè)網(wǎng)頁(yè)是很簡(jiǎn)單的，只要知道什么是HTML并掌握HTML的基礎(chǔ)知識(shí)就可以制作出一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，今天我就為講解HTML的入門(mén)及結(jié)構(gòu)組成。

一、什么是HTML?

1、在我們開(kāi)始學(xué)習(xí)HTML之前我們需要知道什么是HTML？

HTML的全稱(chēng)為Hyper Text Markup Language，中文名稱(chēng)為超文本標(biāo)記語(yǔ)言，閱覽方式為網(wǎng)頁(yè)瀏覽器，同時(shí)HTML也被稱(chēng)為網(wǎng)頁(yè)。

2、一個(gè)簡(jiǎn)單的HTML文檔

二、HTML編輯器

我們?cè)诳梢允褂肨XT文本文檔或者專(zhuān)業(yè)的HTML編輯器來(lái)編輯HTML。

1、記事本

①　創(chuàng)建一個(gè)TXT文本

②　輸入HTML代碼

③　點(diǎn)擊文件—另存為—輸入名稱(chēng)+“html”的后綴名即可得到你的第一個(gè)HTML文件。

④　然后雙擊這個(gè)文件運(yùn)行。

運(yùn)行結(jié)果

2、專(zhuān)業(yè)編輯器

①　Sublime Text

②　HBuilder

③　Adobe Dreamweaver

④　CoffeeCup HTML Editor

這其中我比較推薦HBuilder這款編輯器，界面簡(jiǎn)單，編輯起來(lái)很快。

三、HTML的組成部分

在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。

1、頭部（head）

通常包含標(biāo)題（title），也就是一個(gè)網(wǎng)頁(yè)的名稱(chēng)

網(wǎng)頁(yè)標(biāo)題

2、身體（body）

body的部分是整個(gè)網(wǎng)頁(yè)的重要內(nèi)容部分，讓人一眼就瀏覽到這個(gè)網(wǎng)頁(yè)的內(nèi)容，可以插入文本、圖片、多媒體等內(nèi)容。

四、HTML元素

l HTML元素是指以開(kāi)始標(biāo)簽起始，以結(jié)束標(biāo)簽終止的元素：元素內(nèi)容即為開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容。

l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個(gè)元素。

l 也有部分元素只有開(kāi)始標(biāo)簽，例如<br>,以開(kāi)始標(biāo)簽的結(jié)束而結(jié)束。

五、HTML的屬性

l 一般來(lái)說(shuō)HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。

l 屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn)，比如：name=”value”。

l 屬性一般描述于開(kāi)始標(biāo)簽。

l style中會(huì)有更多的屬性。

六、HTML格式化

HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。

HTML文本格式化標(biāo)簽

標(biāo)簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號(hào)字
<strong>	定義加重語(yǔ)氣
<sub>	定義下標(biāo)字
<sup>	定義上標(biāo)字
<ins>	定義插入字
<del>	定義刪除字

運(yùn)行結(jié)果示意圖

HTML“計(jì)算機(jī)輸出”標(biāo)簽

標(biāo)簽	描述
<code>	定義計(jì)算機(jī)代碼
<kdd>	定義鍵盤(pán)碼
<samp>	定義計(jì)算機(jī)代碼樣本
<var>	定義變量
<pre>	定義預(yù)格式文本

HTML引文、引用及標(biāo)簽定義

標(biāo)簽	描述
<abbr>	定義縮寫(xiě)
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長(zhǎng)的引用
<q>	定義短的引用語(yǔ)
<cite>	定義引用、引證
<dfn>	定義一個(gè)定義項(xiàng)目

七、HTML超鏈接

超鏈接可以是圖片、文字、多媒體也可以是一個(gè)網(wǎng)址

示例：

結(jié)果：

點(diǎn)擊帶有下劃線(xiàn)的兩個(gè)字就可以進(jìn)入某度的網(wǎng)站

八、HTML CSS

1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進(jìn)行排版

2、CSS有三種方式：

l 內(nèi)部樣式，在HTML元素中使用“style”屬性

l 內(nèi)部樣式表，在頭部<head>區(qū)域使用<style>元素來(lái)包含CSS

l 外部引用，引用帶有后綴css的文件，示例：

html文檔

css文檔

如果你看到了這里，就說(shuō)明你已經(jīng)打開(kāi)了制作網(wǎng)頁(yè)的大門(mén)啦~

、www：

萬(wàn)維網(wǎng)，建立在internet上，全球性的、交互、多平臺(tái)、分布的信息資源。

wwwf組成：

url：統(tǒng)一資源定位器，通俗來(lái)說(shuō)就是訪問(wèn)地址
HTTP：超文本傳輸協(xié)議
HTML：超文本標(biāo)記語(yǔ)言

2、網(wǎng)頁(yè)的后綴名：html和htm

3、標(biāo)簽：

雙標(biāo)簽：<標(biāo)簽名>內(nèi)容</標(biāo)簽名>

單標(biāo)簽：<標(biāo)簽名 />

注釋標(biāo)簽：

各種標(biāo)簽，以html文檔結(jié)構(gòu)來(lái)做：

<!doctype html> <!--文檔類(lèi)型標(biāo)簽-->
<html> --最外層的標(biāo)簽
<head> <!--頭部標(biāo)簽，包含編碼、標(biāo)題等-->
	<title>標(biāo)題</title> <!--標(biāo)題標(biāo)簽-->
	<meta charset="utf-8"/> <!--編碼格式-->
</head>
  <body> <!--主體標(biāo)簽，里面顯示的內(nèi)容-->
  	<h1>哈哈哈哈</h1>
  </body>
</html>

4、標(biāo)題標(biāo)簽

h1~h6,h1最大的，h6最小的

屬性：align,對(duì)齊方式

屬性值：left-左對(duì)齊，center-居中，right-右對(duì)齊

示例：

<h1 align="left">標(biāo)題左對(duì)齊</h1>

5、段落標(biāo)簽：

屬性：

-title:提示信息

-style:行內(nèi)樣式

-dir:文字方向，默認(rèn)從左向右，ltl或者rtl

示例：

<p title="這是提示信息" dir="ltl"></p>

6、換行標(biāo)簽：<br/>

7、水平線(xiàn)標(biāo)簽：<hr/>

屬性：

align:對(duì)齊方式，默認(rèn)center居中對(duì)齊

color:顏色

width:寬度，可以取值百分比或者像素

size:高度，只能取值像素

noshade:取消陰影

示例：

<hr color="red" width="50%" size="10"/>

8、強(qiáng)調(diào)標(biāo)簽：加粗字體

9、圖片標(biāo)簽：<img />

屬性：

src:圖片路徑

alt:圖片加載錯(cuò)誤時(shí)提示信息

title:鼠標(biāo)放在圖片上提示信息

width:寬度

border:邊框

示例：

<img src="1.jpg" alt="圖片加載失敗" title="提示信息"/>

10、超鏈接：<a>文本</a>

屬性：

href：要跳轉(zhuǎn)的地址

示例：

<a href="https://www.baidu.com">百度一下</a>

聯(lián)網(wǎng)目前已經(jīng)在 web2.0 在向 web3.0 在發(fā)展的路上。

那么你知道你所訪問(wèn)的網(wǎng)頁(yè)格式又有些什么區(qū)別嗎？這一次，我們就來(lái)簡(jiǎn)明得盤(pán)一盤(pán)它。

大多數(shù)人應(yīng)該都知道一個(gè)詞：“HTML” 。確實(shí)，Html 基本就是網(wǎng)頁(yè)的代名詞。當(dāng)你把網(wǎng)頁(yè)下載下來(lái)的時(shí)候，就能看到其后綴名就是 ". HTML"。

但如果足免細(xì)心的你還會(huì)發(fā)現(xiàn)，瀏覽器地址欄上有時(shí)還會(huì)出現(xiàn)一些其它的的網(wǎng)頁(yè)后綴名。

一般來(lái)說(shuō)，網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。

前者就等于是一個(gè)超文本，里面的信息都是事先寫(xiě)好然后通過(guò)瀏覽器下載來(lái)顯示。

而后者則是所有的數(shù)據(jù)信息都是通過(guò)服務(wù)器端來(lái)處理，網(wǎng)頁(yè)本身并沒(méi)有事先保存任何信息。

打個(gè)比方，靜態(tài)網(wǎng)頁(yè)就像飲水機(jī)里的常溫水。打開(kāi)開(kāi)關(guān)直接就把原先水桶里存著的水直接放出來(lái)。而動(dòng)態(tài)網(wǎng)頁(yè)則像是飲水機(jī)要放熱水，在水放出來(lái)之前還要先經(jīng)過(guò)一些升溫處理才能得到的“熱水”一樣。

那么靜態(tài)網(wǎng)頁(yè)的格式除了最基本的”.Html"外，還包括：

CSS 是一種網(wǎng)頁(yè)樣式庫(kù)文件。很多好看的特效和框架就可以被HTML頁(yè)面調(diào)用。
JS 是javascript 腳本文件，可以讓網(wǎng)頁(yè)實(shí)現(xiàn)很多交互和功能。就像很多個(gè)小程序一樣被調(diào)用。
Dhtml 具有動(dòng)態(tài)特性的html，一般是 CSS + JS+ html 的組合頁(yè)面
Shtml 這是基于 SSI 技術(shù)，是一種可動(dòng)態(tài)編程的html 技術(shù)。
Xhtml 這其實(shí)就是 XML ，是一種可擴(kuò)展標(biāo)記語(yǔ)言的網(wǎng)頁(yè)。這個(gè)格式現(xiàn)在的網(wǎng)頁(yè)上用得還是挺多的，等于是一個(gè)簡(jiǎn)單的數(shù)據(jù)庫(kù)，比如日歷，通訊錄等。其原始信息都是以XML格式來(lái)保存。這是因?yàn)?XML 相當(dāng)于龐大的數(shù)據(jù)為而言，去除了索引和附件等等信息，只保留最原始的文本格式，并通過(guò)語(yǔ)法來(lái)讓瀏覽器知道在什么地方應(yīng)該顯示什么內(nèi)容。具備解析速度快，容量小的優(yōu)點(diǎn)。

而動(dòng)態(tài)網(wǎng)頁(yè)是包括：

ASP 這是基于 JavaScript 或 VBScript和 C#
JSP 這是基于 JAVA編寫(xiě)。這是 SUN 公司推出的格式。什么都能用 Java 來(lái)實(shí)現(xiàn)，但就是比較耗費(fèi)資源。
ASPX 和 JSPX 都是在原有的基礎(chǔ)上再兼容 XML語(yǔ)法。
PHP 這個(gè)在之前也是非常火的一種格式，是一種開(kāi)源的語(yǔ)言，是“超文本預(yù)處理”的方法來(lái)運(yùn)行。只是近年來(lái)有沒(méi)落的趨勢(shì)。
CGI 這是一個(gè)公共網(wǎng)關(guān)接口。稍微知道一下就行。

其實(shí)說(shuō)了這么多，對(duì)于普通用戶(hù)而言?xún)H僅是大概知道幾種常見(jiàn)的分類(lèi)就行。HTML就是網(wǎng)頁(yè)文件，是一種靜態(tài)網(wǎng)頁(yè)。而動(dòng)態(tài)網(wǎng)頁(yè)則有基于 JavaScript 的ASP 和基于JAVA 的JSP就可以了。因?yàn)檎娴募?xì)究網(wǎng)頁(yè)技術(shù)的水還是很深的。像 Ajax 同步和異步等等。

好了，希望本篇文章能讓你大致了解在瀏覽器地址欄最后一個(gè)小數(shù)點(diǎn)后綴名的網(wǎng)頁(yè)含義。

在線(xiàn)咨詢(xún)

上一篇：html單選按鈕默認(rèn)選中怎么做？input標(biāo)簽的單選按鈕實(shí)例
下一篇：把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商