HTML5學(xué)習(xí)（三）：認(rèn)識HTML

1 什么是HTML

HTML其實(shí)是Hypertext Markup Language的縮寫形庭，即超文本標(biāo)記語言煞聪。
HTML的后綴名：.html

html文件

那么什么是超文本標(biāo)記語言横漏？

2 HTML的作用

給純文本添加語義穴吹。其實(shí)就是告訴瀏覽器氢惋，我要表示的是什么桶良。

第一步：我們可以新建一個(gè)文本铛楣，復(fù)制一段名人的介紹

新建txt文本

第二步：修該文本的后綴名，以瀏覽器方式打開

修改它的后綴名打開后艺普，發(fā)現(xiàn)沒有任何版式可言

第三步：再使用文本打開簸州，在開頭與結(jié)尾添加如下標(biāo)簽

<h1>內(nèi)容</h1>，<p>內(nèi)容</p>

使用HTML的語法修改一下

第四步：保存修改后的文本歧譬，使用瀏覽器打開岸浑，發(fā)現(xiàn)樣式好看了很多。

在瀏覽器中發(fā)現(xiàn)相當(dāng)漂亮

結(jié)論：<p>內(nèi)容</p>用來描述其他文本語義的文本瑰步，我們稱為標(biāo)簽矢洲。這些用來描述文本語義的標(biāo)簽是不會在瀏覽器中顯示的。我們稱這些文本為超文本缩焦，這些文本又叫做標(biāo)簽读虏，所以就稱HTML為超文本標(biāo)記語言责静。
注意點(diǎn)：

剛才使用<h1>內(nèi)容</h1>只是用來給文本添加語義，告訴瀏覽器這是標(biāo)題文本盖桥，而不是修改了文本的樣式灾螃，加粗等。所以學(xué)習(xí)的童鞋要注意揩徊。腰鬼。。

3 HTML發(fā)展史

在1993年6月作為[互聯(lián)網(wǎng)]工程工作小組IETF工作草案發(fā)布并非標(biāo)準(zhǔn)
HTML 2.0——1995年11月作為RFC 1866發(fā)布塑荒，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)
HTML 3.2——1997年1月14日熄赡，W3C推薦標(biāo)準(zhǔn)
HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML 4.01（微小改進(jìn)）——1999年12月24日齿税，W3C推薦標(biāo)準(zhǔn)
HTML 5——2014年10月28日彼硫，W3C推薦標(biāo)準(zhǔn)ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日發(fā)布，基于嚴(yán)格的HTML 4.01語法凌箕，是國際標(biāo)準(zhǔn)化組織和國際電工委員會的標(biāo)準(zhǔn)拧篮。

HTML發(fā)展史

4 第一個(gè)HTML程序

第一個(gè)HTML5程序

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

<html>  
        <head> 
            <title></title> 
        </head>
        <body>
        </body>
</html>

切記要修改它的后綴名.html

5 HTML標(biāo)簽詳解

<html>   // HTML開始標(biāo)簽
        <head> // 頭部開始標(biāo)簽
            <title></title> 
        </head> // 頭部結(jié)束標(biāo)簽
        <body>  // 內(nèi)容開始標(biāo)簽
        </body> // 內(nèi)容結(jié)束標(biāo)簽
</html> // 結(jié)束標(biāo)簽

html標(biāo)簽
作用：
告訴瀏覽器這是一個(gè)網(wǎng)頁，即是一個(gè)HTML文檔
head標(biāo)簽
作用：
用于給網(wǎng)站添加一些配置信息陌知，這部分內(nèi)容都不會給用戶看
例如：
- 百度網(wǎng)址的標(biāo)題/小Logo等
- 還有攜帶一些文件（css/js）
- 警告他托，添加一些瀏覽器安全組件等
  
  沒有回車之前

回車之后

最終顯示

title標(biāo)簽
- 作用：
  - 專門用于網(wǎng)站的標(biāo)題
- 例如：
  我們保存網(wǎng)站的時(shí)候掖肋，會出現(xiàn)一個(gè)標(biāo)題仆葡，這個(gè)標(biāo)題就是title的內(nèi)容

效果

具體寫法

body標(biāo)簽
作用：
就是展示給用戶看的內(nèi)容（文字/圖片/音/視頻），在學(xué)習(xí)這個(gè)標(biāo)簽后志笼，要將內(nèi)容寫入這個(gè)body中沿盅，而且在<html>標(biāo)簽中，只能有一個(gè)body標(biāo)簽

6 HTML字符集問題

其實(shí)很多情況下纫溃，我們會遇到亂碼問題腰涧。這個(gè)就是字符集問題，即編碼問題

image.png

這是什么意思紊浩？表示編碼格式

看完應(yīng)該明白了

meta標(biāo)簽的作用就是制定網(wǎng)頁的字符集
要解決亂碼問題窖铡，就需要在head標(biāo)簽中添加<meta charset="GBK"/>
常見的字符集GBK/UTF-8
- GBK(GB2312)里面的漢子比較少，還存儲了一部分常用外文
- UTF-8里面存儲的世界上所有的文字坊谁，所以以后直接使用它就可以了

例如百度網(wǎng)址的head

關(guān)于UTF-8的一些問題

如果使用UTF-8編碼格式费彼，那么必須在保存的時(shí)候選擇UTF-8格式，否則即便制定了字體口芍，也無法正常顯示箍铲。

image.png

兩者一樣即可

7 標(biāo)簽認(rèn)識

單標(biāo)簽
- 有開始標(biāo)簽沒有結(jié)束標(biāo)簽，也就是由一個(gè)<>組成的

<meta charset="utf-8"/>

雙標(biāo)簽
有開始和結(jié)束標(biāo)簽鬓椭，也就是由一個(gè)<>和</>組成

<html>
</html>

標(biāo)簽關(guān)系
并列關(guān)系

 <head>
</head>
<body>
</body>

嵌套關(guān)系

<head>
  <title>
  </title>
</head>

8 DOCTYPE文檔聲明

因?yàn)镠TML有很多個(gè)版本颠猴，一般在HTML文件的第一行告訴瀏覽器我們用的是什么版本
不同的HTML版本都有不同的DTD文檔聲明

 <!DOCTYPE html> // 這是HTML5版本的文檔聲明关划，可以使用小寫，向下兼容翘瓮，所以以后就寫著一句就可以了
<html>  
        <head> 
            <title></title> 
        </head>
        <body>
        </body>
</html>

關(guān)于DOCTYPE聲明

參考資料：W3C

9 CSS了解

如果在一些版本中不支持下面的寫法贮折，就需要使用CSS寫法

設(shè)置字體為7號，顏色為紅色

image.png

<!DOCTYPE html>
<html>  
     <head> 
     <meta charset="utf-8"/>
         <title>雷潮博客-886</title> 
     </head>
     <body>
      <font size=7 color= red>雷潮</font>
     </body>
</html>

CSS寫法,修改字體樣式