整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無(wú)標(biāo)題文檔</title> </head> <body> // 頁(yè)面源代碼內(nèi)容 </body> </html>
動(dòng)手小練習(xí)：
1.試著默寫HTML基本結(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的入門及結(jié)構(gòu)組成。
一、什么是HTML?
1、在我們開(kāi)始學(xué)習(xí)HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標(biāo)記語(yǔ)言，閱覽方式為網(wǎng)頁(yè)瀏覽器，同時(shí)HTML也被稱為網(wǎng)頁(yè)。
2、一個(gè)簡(jiǎn)單的HTML文檔
二、HTML編輯器
我們?cè)诳梢允褂肨XT文本文檔或者專業(yè)的HTML編輯器來(lái)編輯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)單，編輯起來(lái)很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標(biāo)題（title），也就是一個(gè)網(wǎng)頁(yè)的名稱
網(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 屬性總是以名稱/值對(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> | 定義鍵盤碼 |
<samp> | 定義計(jì)算機(jī)代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預(yù)格式文本 |
HTML引文、引用及標(biāo)簽定義
標(biāo)簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長(zhǎng)的引用 |
<q> | 定義短的引用語(yǔ) |
<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>元素來(lái)包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說(shuō)明你已經(jīng)打開(kāi)了制作網(wǎng)頁(yè)的大門啦~
于剛剛接觸到超文本的朋友來(lái)說(shuō)，最大的障礙就是用“<”和“>”闊起來(lái)的句子，我們稱之為標(biāo)簽。大多數(shù)標(biāo)簽都有自己的屬性，屬性要寫在首標(biāo)簽中，屬性用來(lái)進(jìn)一步改變現(xiàn)實(shí)的效果。各屬性之間為先后次序，屬性是可選的。屬性也可以省略而使用默認(rèn)值。格式是這樣的<標(biāo)簽名 屬性1=屬性值 1 屬性2=屬性值 2 ......>。注意：標(biāo)簽和屬性不區(qū)分大小寫。
html文檔結(jié)構(gòu)由三個(gè)部分組成。
1.頭部
2.標(biāo)題
3.元標(biāo)簽
<1>大家都學(xué)過(guò)英語(yǔ)，一定知道頭的英語(yǔ)單詞是“head”。沒(méi)錯(cuò)，在html中，我們也使用head來(lái)表示文檔的頭部，即<head>...</head>。頭部位于<html>和</html>之間。
例如：<html>
<head>
</head>
</html>
<2>標(biāo)題用英語(yǔ)怎么說(shuō)呢？title，其實(shí)網(wǎng)頁(yè)與人一樣，網(wǎng)頁(yè)的眼睛也在頭上，在<title>標(biāo)簽對(duì)內(nèi)部放入你想要看到的文字，這樣我們就能隨意操縱標(biāo)題欄的內(nèi)容了。比如：
<html>
<head>
<title>你好啊</title>
</head>
</html>
<3>在<head> 標(biāo)簽的內(nèi)部還可以嵌套另一個(gè)重要的標(biāo)簽：<meta>這個(gè)標(biāo)簽，此標(biāo)簽用于描述html頁(yè)面文檔的屬性，如作者、日期和時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵字、頁(yè)面刷新等。例如：
<meta http-equiv="Content-Type"content="text/html;charset=gb2312">
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
