本文非新手向教程，不講解具體标簽，隻記錄部分重點内容……
文章目錄
- 一、HTML示例代碼
- 二、如何書寫一個标準的HTML5.0 網頁
- 三、HTML:HyperText Markup Language 超文本标記語言
- 四、Head頭部
- 五、标簽
-
- 5.1 标簽類型
- 5.2 布局标簽
- 六、文本類型标簽 （h1重要文字）
- 七、 圖像标簽
-
- 7.1 标簽屬性:
- 7.2 圖像類型
- 7.3 圖像路徑
一、HTML示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一個網頁</title>
</head>
<body>
<p>Hello，World！</p>
</body>
</html>
二、如何書寫一個标準的HTML5.0 網頁
1:建立檔案,檔案字尾一定是 .html #.htm舊版本網頁
2.檔案第一行加一句聲明
<!DOCTYPE html>
，文檔類型聲明，此标簽可告知浏覽器文檔使用哪種 HTML 或 XHTML 規範。
3.中間基本結構
<html> #根标簽,在檔案中最外标簽
<head></head> #網頁頭部标簽:全局定義 編碼
<body></body> #網頁主體 :使用者可見區域
</html>
4.書寫完成，用浏覽器運作網頁
三、HTML:HyperText Markup Language 超文本标記語言
1.作用:建立網頁并且添加網頁内容
2.HTML标準與曆史
1995 HTML廣泛使用 HTML1.0 2.0 3.0 4.0 XHTML1.0 HTML5.0
#HTM5與以前版本差別:嚴格
示例:
HTML4.0
<br> <BR> <Br> <br />
松散
HTML5.0
<br>
四、Head頭部
頭部标簽:定義全局标簽功能
-
<title></title>
标題:中間文字顯示在浏覽器标簽左上角
#通常:儲存網站名稱
-
<meta charset="utf-8">
指定網頁顯示編碼
#唯一 utf-8
-
<meta name="description" content="">
description="學子商城是WEB前端教學性網站,功能完備...."
-
<meta name="keywords" content="">
keywords="筆記本,PAD,手機"
-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
#了解即可:隻針對于IE浏覽器識别使用
#指定IE浏覽器-請使用最新核心來渲染網頁
#IE6;IE7(IE6;IE7);IE8[6;7;8];IE11[6,7,8,9,10,11]
五、标簽
HTML 文檔和 HTML 元素是通過 HTML 标簽進行标記的
HTML 标簽由開始标簽和結束标簽組成，某些 HTML 元素沒有結束标簽，比如
(1)單标記 <關鍵字>
示例:
<br>
<input type="text">
(2)雙标記 ：必須成對出現 <關鍵字></關鍵字>
<form></form>
<div></div>
5.1 标簽類型
| 塊級标簽 | 行内标簽 | 行内塊标簽 |
|---|---|---|
| | |
| 單獨成行,排列從上向下 | 與其它的行内标簽，共用一行，一行放不下換行 | 與其它的行内标簽共用一行，一行放不下換行 |
| / | 指定:寬度高度無效 | 可以指定寬度高度 |
5.2 布局标簽
(1)
<div></div>
塊級元素:區域 作用：設計網頁布局
(2)
<span></span>
文本标簽(一行)，内聯元素，可用作文本的容器， 一行
(3)
<p></p>
段落，多行文本。單獨成行,上下方向有垂直間距
<p>
特點
- 文本在一個段落中根據浏覽器寬度自動換行
- 段落與段落之間有空隙
- 如果希望在文本中強制換行使用
六、文本類型标簽 （h1重要文字）
#此類标簽中間的内容是文本字元串
`<h1>标題..</h1><h2>标題..</h2>..<h6></h6> `
功能:
- 字型大小變化 ：h1最大 h6最小 ，文本加粗
- 單獨成行 ，上下有垂直間距
-
h1儲存目前網頁中最重要的文字 “網站名稱”
要求:一個網頁隻能使用一次 h1 #百度搜尋引擎建議
七、 圖像标簽
在網頁中
<img>
标簽來定義網頁中圖像
7.1 标簽屬性:
| 屬性 | 說明 |
|---|---|
| src | 必須添加屬性,用于指定圖像檔案的路徑和檔案名 |
| width | 圖像寬度 |
| height | 圖像高度 |
| title | 提示文本,當滑鼠移動到圖像上顯示文本内容 |
| alt | 替換文本,當圖像不能正确顯示時出現文本 |
為防止圖檔變形，隻設定width改變大小即可
常見錯誤
原因1:圖像名稱拼寫錯誤，但是圖像存在
原因2:圖象名稱正确，但圖像不存在
7.2 圖像類型
- jpg/jpeg 色彩豐富/不支援動畫， 透明 照片
- png 色彩比較豐富/透明 圖示，按鈕
- gif 色彩差/支援動畫 小動态圖
- webp 谷歌2015，有以上優點，小50% 相容性差
7.3 圖像路徑
（1）相對路徑
- 兄弟路徑 #直接圖檔名稱 src = “1.jpg”
HTML基礎概念——head頭部，及标簽（文本、圖像類型）一、HTML示例代碼二、如何書寫一個标準的HTML5.0 網頁三、HTML:HyperText Markup Language 超文本标記語言四、Head頭部五、标簽六、文本類型标簽 （h1重要文字）七、 圖像标簽 - 子目錄路徑 #檔案夾/圖檔名稱 src = “img/1.jpg”
HTML基礎概念——head頭部，及标簽（文本、圖像類型）一、HTML示例代碼二、如何書寫一個标準的HTML5.0 網頁三、HTML:HyperText Markup Language 超文本标記語言四、Head頭部五、标簽六、文本類型标簽 （h1重要文字）七、 圖像标簽 - 父目錄路徑 #先傳回上一級目錄“./” src = “./1.jpg”
HTML基礎概念——head頭部，及标簽（文本、圖像類型）一、HTML示例代碼二、如何書寫一個标準的HTML5.0 網頁三、HTML:HyperText Markup Language 超文本标記語言四、Head頭部五、标簽六、文本類型标簽 （h1重要文字）七、 圖像标簽
（2）絕對路徑
-
網絡：以http https開頭
src = “https://www.baidu.com/img/PC_bdfdce6f6e5f722db0aabdf32d01a03a.gif”