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

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

一、什么是HTML?

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

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

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

二、HTML編輯器

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

1、記事本

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

②　輸入HTML代碼

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

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

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

2、專業(yè)編輯器

①　Sublime Text

②　HBuilder

③　Adobe Dreamweaver

④　CoffeeCup HTML Editor

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

三、HTML的組成部分

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

1、頭部（head）

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

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

2、身體（body）

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

四、HTML元素

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

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

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

五、HTML的屬性

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

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

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

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

六、HTML格式化

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

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

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

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

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

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

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

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

七、HTML超鏈接

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

示例：

結(jié)果：

點(diǎ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>元素來包含CSS

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

html文檔

css文檔

如果你看到了這里，就說明你已經(jīng)打開了制作網(wǎng)頁的大門啦~

、www：

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

wwwf組成：

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

2、網(wǎng)頁的后綴名：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)來做：

<!doctype html> <!--文檔類型標(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、水平線標(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ǎng)頁格式又有些什么區(qū)別嗎？這一次，我們就來簡(jiǎn)明得盤一盤它。

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

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

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

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

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

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

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

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

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

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

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

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

在線咨詢

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

您的項(xiàng)目需求

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

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