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

TML 是什么？

表示超文本標(biāo)記語言（Hyper Text Markup Language）
描述了網(wǎng)頁的結(jié)構(gòu)
由一些列元素組成
元素告訴瀏覽器如何顯示內(nèi)容，由標(biāo)簽表示
標(biāo)簽標(biāo)記了“標(biāo)題”，“段落”，“表”等內(nèi)容
瀏覽器不顯示HTMl標(biāo)記，而是使用它們來呈現(xiàn)頁面內(nèi)容

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>無標(biāo)題文檔</title>
 </head>
 <body>
 // 頁面源代碼內(nèi)容
 </body>
</html>

<!DOCTYPE html>，文檔聲明，位于文檔最前面位置。
<html>元素是一個HTML頁面的根元素
<head>，元素包含關(guān)于文檔的元信息
<meta>，定義文檔元數(shù)據(jù)，常用來描述當(dāng)前頁面的特性，比如文檔字符集 charset="utf-8"
<title>，元素指定該文檔的標(biāo)題
<body>，元素包含可見頁面的所有內(nèi)容

動手小練習(xí)：

1.試著默寫HTML基本結(jié)構(gòu)

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

一、什么是HTML?

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

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

2、一個簡單的HTML文檔

二、HTML編輯器

我們在可以使用TXT文本文檔或者專業(yè)的HTML編輯器來編輯HTML。

1、記事本

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

②　輸入HTML代碼

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

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

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

2、專業(yè)編輯器

①　Sublime Text

②　HBuilder

③　Adobe Dreamweaver

④　CoffeeCup HTML Editor

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

三、HTML的組成部分

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

1、頭部（head）

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

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

2、身體（body）

body的部分是整個網(wǎng)頁的重要內(nèi)容部分，讓人一眼就瀏覽到這個網(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元素，在上面的案例中就有六個元素。

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

五、HTML的屬性

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

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

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

l style中會有更多的屬性。

六、HTML格式化

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

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

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

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

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

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

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

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

七、HTML超鏈接

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

示例：

結(jié)果：

點(diǎn)擊帶有下劃線的兩個字就可以進(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)頁的大門啦~

于剛剛接觸到超文本的朋友來說，最大的障礙就是用“<”和“>”闊起來的句子，我們稱之為標(biāo)簽。大多數(shù)標(biāo)簽都有自己的屬性，屬性要寫在首標(biāo)簽中，屬性用來進(jìn)一步改變現(xiàn)實(shí)的效果。各屬性之間為先后次序，屬性是可選的。屬性也可以省略而使用默認(rèn)值。格式是這樣的<標(biāo)簽名屬性1=屬性值 1 屬性2=屬性值 2 ......>。注意：標(biāo)簽和屬性不區(qū)分大小寫。

html文檔結(jié)構(gòu)由三個部分組成。

1.頭部

2.標(biāo)題

3.元標(biāo)簽

<1>大家都學(xué)過英語，一定知道頭的英語單詞是“head”。沒錯，在html中，我們也使用head來表示文檔的頭部，即<head>...</head>。頭部位于<html>和</html>之間。

例如：<html>

<head>

</head>

</html>

<2>標(biāo)題用英語怎么說呢？title，其實(shí)網(wǎng)頁與人一樣，網(wǎng)頁的眼睛也在頭上，在<title>標(biāo)簽對內(nèi)部放入你想要看到的文字，這樣我們就能隨意操縱標(biāo)題欄的內(nèi)容了。比如：

<html>

<head>

</head>

</html>

<3>在<head> 標(biāo)簽的內(nèi)部還可以嵌套另一個重要的標(biāo)簽：<meta>這個標(biāo)簽，此標(biāo)簽用于描述html頁面文檔的屬性，如作者、日期和時間、網(wǎng)頁描述、關(guān)鍵字、頁面刷新等。例如：

在線咨詢

上一篇：制作一個相對準(zhǔn)確的網(wǎng)頁加載進(jìn)度條
下一篇：前端 - HTML基礎(chǔ)（2）

您的項(xiàng)目需求

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

整合營銷服務(wù)商

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

TML 是什么？

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

您的項(xiàng)目需求