先來大概了解一下創(chuàng)造自己的炫酷的網(wǎng)頁都需要掌握哪幾項(xiàng)基礎(chǔ)技能吧~
學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML趾疚、CSS缭嫡、JavaScript語言痛侍。
- HTML是網(wǎng)頁內(nèi)容的載體钥弯，就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息糊饱，包含文字垂寥、圖片、視頻等另锋。
- CSS樣式是表現(xiàn)滞项。就是對網(wǎng)頁的裝修。比如夭坪，標(biāo)題字體文判、顏色變化，或?yàn)闃?biāo)題加入背景圖片室梅、邊框等戏仓。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
- JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果亡鼠。如：鼠標(biāo)滑過彈出下拉菜單赏殃。或鼠標(biāo)滑過表格的背景顏色改變间涵。還有圖片的輪換仁热。簡單說，就是有動畫的勾哩，有交互的一般都是用JavaScript來實(shí)現(xiàn)的抗蠢。
雖然本篇只是簡單介紹HTML的使用根盒。但是良好的開端是成功的一半。積土成山物蝙，積水成淵~你一定會寫出屬于自己的網(wǎng)頁的炎滞。
什么是 HTML？
- HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)诬乞。
- HTML 不是一種編程語言册赛，而是一種標(biāo)記語言。
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽震嫉，HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁森瘪。
- “超文本”就是指頁面內(nèi)可以包含圖片、鏈接票堵，甚至音樂扼睬、程序等非文字元素。
網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言悴势，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言窗宇、公共網(wǎng)關(guān)接口、組件等）特纤，可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁军俊。
HTML文檔 = 網(wǎng)頁
- HTML 文檔描述網(wǎng)頁, HTML 文檔也被稱為網(wǎng)頁
- HTML 文檔包含 HTML 標(biāo)簽和純文本
- Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們捧存。
- 瀏覽器不會顯示 HTML 標(biāo)簽粪躬，而是使用標(biāo)簽來解釋頁面的內(nèi)容
HTML語言整體結(jié)構(gòu)
- 一個網(wǎng)頁對應(yīng)多個HTML文件，超文本標(biāo)記語言文件以.htm（磁盤操作系統(tǒng)DOS限制的外語縮寫）為擴(kuò)展名或.html（外語縮寫）為擴(kuò)展名昔穴×伲可以使用任何能夠生成TXT類型源文件的文本編輯器來產(chǎn)生超文本標(biāo)記語言文件，只用修改文件后綴即可吗货。
- 標(biāo)準(zhǔn)的超文本標(biāo)記語言文件都具有一個基本的整體結(jié)構(gòu)泳唠，標(biāo)記一般都是成對出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語言文件的開頭與結(jié)尾標(biāo)志和超文本標(biāo)記語言的頭部與實(shí)體兩大部分卿操。有三個雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)警检。
- 標(biāo)記符<html>,說明該文件是用超文本標(biāo)記語言（本標(biāo)簽的中文全稱）來描述的,它是文件的開頭;而</html>,則表示該文件的結(jié)尾孙援，它們是超文本標(biāo)記語言文件的開始標(biāo)記和結(jié)尾標(biāo)記害淤。
HTML的文檔結(jié)構(gòu)
<!DOCTYPE html> <!--聲明一個html文件-->
<html> <!--HTML文件的開始 -->
<head> <!--頭部開始 -->
<meta charset="UTF-8">
<title> </title> <!--文件的標(biāo)題 -->
</head> <!--頭部結(jié)束 -->
<body> <!--主體的開始 -->
</body> <!--主體的結(jié)束 -->
HTML 元素語法
- HTML 元素以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止
- 元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
- 某些 HTML 元素具有空內(nèi)容（empty content）
- 空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
- 大多數(shù) HTML 元素可擁有屬性
- HTML標(biāo)記格式：<開始標(biāo)記 屬性名=“屬性值”>內(nèi)容<結(jié)束標(biāo)記>
頭部內(nèi)容
- <head></head>這2個標(biāo)記符分別表示頭部信息的開始和結(jié)尾拓售。頭部中包含的標(biāo)記是頁面的標(biāo)題窥摄、序言、說明等內(nèi)容础淤，它本身不作為內(nèi)容來顯示崭放，但影響網(wǎng)頁顯示的效果哨苛。頭部中最常用的標(biāo)記符是標(biāo)題標(biāo)記符和meta標(biāo)記符，其中標(biāo)題標(biāo)記符用于定義網(wǎng)頁的標(biāo)題币砂，它的內(nèi)容顯示在網(wǎng)頁窗口的標(biāo)題欄中建峭，網(wǎng)頁標(biāo)題可被瀏覽器用作書簽和收藏清單。
- 以下表格列出了 HTML head 元素：
| 標(biāo)簽 | 描述 |
|---|---|
| <head> | 定義了文檔的信息 |
| <title> | 定義了文檔的標(biāo)題 |
| <base> | 定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址 |
| <link> | 定義了一個文檔和外部資源之間的關(guān)系 |
| <meta> | 定義了HTML文檔中的元數(shù)據(jù) |
| <script> | 定義了客戶端的腳本文件 |
| <style> | 定義了HTML文檔的樣式文件 |
主體內(nèi)容
<body></body>,網(wǎng)頁中顯示的實(shí)際內(nèi)容均包含在這2個正文標(biāo)記符之間决摧。正文標(biāo)記符又稱為實(shí)體標(biāo)記亿蒸。
字符集
在網(wǎng)頁中除了可顯示常見的美國信息交換標(biāo)準(zhǔn)代碼（外語縮寫：ASCII）字符和漢字外，HTML還有許多特殊字符掌桩，它們一起構(gòu)成了HTML字符集边锁。有2種情況需要使用特殊字符，一是網(wǎng)頁中有其特殊意義的字符波岛，二是鍵盤上沒有的字符茅坛。HTML字符可以用一些代碼來表示，代碼可以有2種表示方式则拷。即字符（命名實(shí)體）和數(shù)字代碼（編號實(shí)體）贡蓖。字符代碼以“&”符開始，以分號";"結(jié)束煌茬，其間是字符名摩梧，如?。數(shù)字代碼也以“&#”符開始宣旱，以分號";"結(jié)束仅父，其間是編號，如?浑吟。
下表為HTML的字符集
書寫要求
- 文本標(biāo)記語言源程序的文件擴(kuò)展名默認(rèn)使用htm（磁盤操作系統(tǒng)DOS限制的外語縮寫為擴(kuò)展名）或html（外語縮寫為擴(kuò)展名）笙纤，以便于操作系統(tǒng)或程序辨認(rèn)，除自定義的漢字?jǐn)U展名组力。在使用文本編輯器時省容，注意修改擴(kuò)展名。
- 超文本標(biāo)記語言源程序?yàn)槲谋疚募亲郑淞袑捒刹皇芟拗菩冉罚炊鄠€標(biāo)記可寫成一行，甚至整個文件可寫成一行候衍；若寫成多行笼蛛，瀏覽器一般忽略文件中的回車符（標(biāo)記指定除外）；對文件中的空格通常也不按源程序中的效果顯示蛉鹿。
- 大多數(shù)標(biāo)記符必須成對使用滨砍，以表示作用的起始和結(jié)束；標(biāo)記元素忽略大小寫，即其作用相同惋戏，但完整的空格可使用特殊符號“ （注意此字母必須小寫领追，方可空格）”；許多標(biāo)記元素具有屬性說明响逢，可用參數(shù)對元素作進(jìn)一步的限定绒窑，多個參數(shù)或?qū)傩皂?xiàng)說明次序不限，其間用空格分隔即可舔亭；一個標(biāo)記元素的內(nèi)容可以寫成多行回论。
- 標(biāo)記符號，包括尖括號分歇、標(biāo)記元素傀蓉、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符职抡。
- HTML注釋由"< !--"號開始葬燎，由符號”-->“結(jié)束結(jié)束，例如缚甩。注釋內(nèi)容可插入文本中任何位置谱净。任何標(biāo)記若在其最前插入驚嘆號，即被標(biāo)識為注釋擅威，不予顯示壕探。
說了這么多來看一個實(shí)例吧~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML使用教程</title>
</head>
<body>
<h1>怎樣才能學(xué)好html呢？郊丛。</h1>
<h2>這里是一個標(biāo)題李请。</h2>
<p> 這里是一個段落。</p>
</body>
</html>
在網(wǎng)頁中顯示的就是下面的樣子（有沒有感覺這些標(biāo)簽很神奇呢）~
實(shí)例解析：
<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標(biāo)題
<p> 元素定義一個段落
這里寫代碼片
在學(xué)習(xí)HTML之前厉熟，先學(xué)習(xí)一下怎么來創(chuàng)建自己的第一個網(wǎng)頁吧~
-
先在編譯器(或記事本)中輸入自己的代碼导盅。
- 保存，保存路徑自己選擇揍瑟，文件名任意白翻，注意文件類型。
-
保存成功之后绢片，桌面上就已經(jīng)出現(xiàn)了你的網(wǎng)頁圖標(biāo)滤馍，雙擊打開。
-
打開后顯示的就是我們自己寫的網(wǎng)頁啦底循，可以在網(wǎng)頁中單擊鼠標(biāo)右鍵選擇查看網(wǎng)頁源代碼哦~
現(xiàn)在開始學(xué)習(xí)標(biāo)簽巢株，開始動手創(chuàng)造一個屬于自己的網(wǎng)頁吧~
推薦大家?guī)讉€講解的非常詳細(xì)的還可以邊學(xué)習(xí)邊練習(xí)標(biāo)簽的網(wǎng)站吧~
W3school
慕課網(wǎng)
菜鳥教程
筆者在這里就不對怎么使用標(biāo)簽贅述了~
大家在這些網(wǎng)站上可以多練練，其實(shí)最重要的還是練習(xí)和積累此叠，所以加油哦~
標(biāo)簽大概就是醬
<h1>This is a heading</h1> <!-- 標(biāo)題標(biāo)簽 -->
<p>This is a paragraph</p> <!-- 段落標(biāo)簽 -->
<h2 style="background-color:red">This is a heading</h2>
<!-- HTML樣式實(shí)例纯续，為元素定義了背景顏色-->
<a href="url">Link text</a>
<!-- 調(diào)用鏈接語法 -->
 <!-- 顯示圖片語法 -->
HTML學(xué)習(xí)思維導(dǎo)圖
現(xiàn)在，你已學(xué)完HTML灭袁，接下來該學(xué)習(xí)什么呢猬错？
- 學(xué)習(xí) CSS
CSS被用來同時控制多重網(wǎng)頁的樣式和布局。
通過使用 CSS茸歧，所有的格式化均可從 HTML 中剝離出來倦炒，并存儲于一個獨(dú)立的文件中。 - 學(xué)習(xí) JavaScript
JavaScript 可以讓你的網(wǎng)頁更加生動软瞎。
如果你只想展示內(nèi)容逢唤，靜態(tài)網(wǎng)站是很好的展示形象，如果你想與用戶進(jìn)行交換或者讓網(wǎng)頁更加生動那就需要使用到Javascript涤浇。
JavaScript是互聯(lián)網(wǎng)上最流行的腳本語言鳖藕，目前所有主流瀏覽器都支持Javascript。
