文章目錄
- HTML基本常識
- 一些基礎标簽
- 練習代碼
本文主要介紹Html的基礎知識，和一些必須知道的Html标簽及它們的用法功能
HTML基本常識
1、浏覽器： 就是一個解釋器，用來解釋Html文檔的。
每個頁面展示的内容，就是server端傳回給客戶的一推字元串代碼，用浏覽器渲染一下就變成了各種頁面上絢麗的效果
2、
CS模式： C->client; S->server
BS模式： B->browser S->server
3、html： 超文本标記語言
超文本: 就是指頁面内可以包含圖檔、連結，甚至音樂、程式等非文字元素
标簽語言： 以<>來包括的語言，如Html文檔、xml文檔
4、标簽特點：
标簽不區分大小寫. 和 . 推薦使用小寫.
标簽分為兩部分: 開始标簽 和 結束标簽. 兩個标簽之間的部分 我們叫做标簽體.
有些标簽功能比較簡單.使用一個标簽即可.這種标簽叫做自閉和标簽.
例如：
标簽可以嵌套.但是不能交叉嵌套.
5、标簽的屬性：
通常是以鍵值對形式出現的. 例如 name=“alex”
屬性隻能出現在開始标簽 或 自閉和标簽中.
屬性名字全部小寫. *屬性值必須使用雙引号或單引号包裹 例如 name=“alex”
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
6、靜态網頁： 靜态的資源，如xxx.html
動态網頁： html代碼是由某種開發語言根據使用者請求動态生成的
7、Html樹：
一些基礎标簽
1、注釋标簽：
2、<!DOCTYPE html>标簽 一種渲染辨別，由于曆史的原因，各個浏覽器在對頁面的渲染上存在差異
兩種渲染模式：
BackCompat：怪異模式，浏覽器使用自己的怪異模式解析渲染頁面。
CSS1Compat：标準模式，浏覽器使用W3C的标準解析渲染頁面。那麼，那麼就等同于開啟了标準模式。
3、head頭标簽和meta标簽
<head>标簽： 在頁面内的看不到的，起解釋标題的作用（keywords搜尋關鍵字，description網站描述資訊）
<meta>标簽： meta标簽共有兩個屬性（http-equiv屬性和name 屬性）
（1）name屬性主要用于描述網頁，與之對應的屬性值為content，content中的内容主要是便于搜尋引擎機器人查找資訊和分類資訊用的。
（2） http-equiv顧名思義，相當于http的檔案頭作用，它可以向浏覽器傳回一些有用的資訊，以幫助正确和精确地顯示網頁内容，與之對應的屬性值為content， content中的内容其實就是各個參數的變量值。
（3）<meta http-equiv=“Refresh” content=“2;URL=https://www.baidu.com”>
頁面隔兩秒就調到百度首頁
（4）<meta charset=“UTF-8”>
預設UTF-8編碼的請求頭
（5）<meta http-equiv = “X-UA-Compatible” content = “IE=EmulateIE7” />
必須加的相容性标簽
（6）<link rel=“icon” href=“http://www.jd.com/favicon.ico”>
圖示标簽，給網頁添加圖示
4、body标簽
<body></body>标簽：
顯示給使用者看的内容，<h1>最大，<h2>、<\h3>…依次減小
</br>标簽：換行标簽，加在内容的後面
<p></p>标簽：段落标簽，加間隙換行
<b></b>加粗标簽
<strong></strong>加粗标簽
<strike></strike>删除線标簽
<em></em>斜體标簽
上标下标：
3<sub>2</sub>表示2作為下标，32
3<sup>2</sup>表示2作為上标，32
<hr> 表示一條橫線
5、div标簽：
<div></div>标簽：
自由的子產品化标簽，可以對局部進行設定（與<h1></h1>标簽最大的差別）
6、塊級标簽與内聯标簽
（1）塊級标簽：<p><h1><table><ol><ul><form><div>
（2）内聯标簽：<a><input><img><sub><sup><textarea><span>
（3）block（塊）元素特點：
總是在新行上開始；
寬度預設是它的容器的100%，除非設定一個寬度。
它可以容納内聯元素和其他塊元素
（4）inline元素的特點：
和其他元素都在一行上；
寬度就是它的文字或圖檔的寬度，不可改變
内聯元素隻能容納文本或者其他内聯元素
7、特殊字元：
 （空格）;
<（小于号）;
>（大于号）；
"（一個雙引号）；
©（C公司辨別）;
®（R辨別）;
練習代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zahuw</title>
<!-- <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> -->
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
<link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
<h1 style="color: red">Zahuw</h1>
<h2>hello</h2>
<b>are you kidding?</b></br>
<strong>Are you kidding</strong></br>
<strike>delete line</strike></br>
<em>tip font</em></br>
3<sub>2</sub></br>
3<sup>2</sup></br>
<hr>
<div style="color: green; background-color:aquamarine; height:100px; width:50%; font-size: 40px">I have
color!</div>
<h3>I   have   space</h3></br>
99<100</br>
100>99</br>
11"22</br>
©
®
</body>
</html>