文章目錄
- 1.HTML簡介
- 2.HTML最基本標簽及格式
- 3.標簽的屬性
- 4.檔案宣告
- 5.亂碼問題[^2]
- 6.常用標簽
- 7.物體（轉義字符）
- 8.圖片標簽
- 9.圖片的格式
- 10.meta標簽
- 11.XHTML的語法規范
- 12.行內框架
1.HTML簡介
- HTML（Hypertext Markup Language) 超文本標記語言，
- 它負責網頁的三個要素之中的結構，1
- HTML使用標簽的形式來標識網頁中的不同組成成分，
- 所謂的超文本指的是超鏈接，使用超鏈接可以讓我們從一個頁面跳轉到另一個頁面，
2.HTML最基本標簽及格式
<html></html>是根標簽，一個界面中，有且僅含有一個根標簽，網頁中的所有內容有應該寫在html跟標簽中，<head></head>和<body></body>都是<html></html>的子標簽，該該標簽中的內容不會在網頁中直接顯示，<title></title>是<head></head>的子標簽，它是網頁的標題標簽，默認會顯示在網頁的標題欄中，搜索引擎在搜索頁面時，會首先搜索<title></title>標簽中的內容，它是網頁中對于搜索引擎來說最重要的內容中，會影響到網頁搜索引擎中的排名，<!-- -->：注釋標簽，注釋中的內容不會在頁面中顯示，但可以在原始碼中查看，<h1></h1>:標題標簽,一共有六級從h1到h6，- 基本格式：
<!--
html根標簽，一個頁面有且只有一個根標簽，網頁中所有的內容都應該也在html跟標簽中
-->
<html>
<head>
<title>網頁的標題</title>
</head>
<body>
<!--
在這個結構中，可以來撰寫HTML注釋
注釋中的內容，不會在頁面中顯示，但是可以在原始碼中查看
-->
<h1>這是我的第一個網頁</h1>
</body>
</html>
效果：
3.標簽的屬性
- 通過屬性來設定標簽從而處理標簽中的內容，屬性是添加在開始標簽中的，實際上是一個名值對的結構，
- 格式：屬性名=“屬性值”
- 一個標簽中可以同時設定多個屬性，屬性之間需要使用空格隔開，
<font></font>是用來設定字體的大小顏色等屬性，但，這種方法并不建議使用，因為這些屬于網頁的另一要素（表現）是通過CSS來實作的
示例：
<!--
html根標簽，一個頁面有且只有一個根標簽，網頁中所有的內容都應該也在html跟標簽中
-->
<html>
<head>
<title>網頁的標題</title>
</head>
<body>
<!--
在這個結構中，可以來撰寫HTML注釋
注釋中的內容，不會在頁面中顯示，但是可以在原始碼中查看
-->
<h1>這是我的<font color="green" size="7">第一個</font>網頁</h1>
</body>
</html>
效果：
4.檔案宣告
<!doctype html>:h5的檔案宣告，宣告當前的網頁是按照HTML5標準撰寫的，撰寫網頁時，一定要將h5的檔案宣告寫在網頁的最上邊，如不寫檔案宣告，會導致有些瀏覽器決議頁面，頁面無法正常顯示，
5.亂碼問題2
- 為了防止亂碼問題的出現，需要告訴瀏覽器網頁所采用的字符集，可以使用
<meta />來解決這個問題， - 解決方式：
<meta charset="utf-8" />,其中utf-8根據軟體的編碼字符集一樣的，如軟體的編碼字符集為GB2312,則該標簽應寫為<meta charset="GB2312" />，
示例：
3.meta標簽是一個自結束標簽（單標簽），
4.<meta />標簽用來設定網頁的一些元資料，比如：網頁的字符集、關鍵字、簡介，
6.常用標簽
1.標題標簽：如<h1></h1>，在HTML中一共有六級標題標簽，從h1~h6,顯示效果上h1最大<h1></h1>，h6最小<h6></h6>，
2.段落標簽<p></p>:用于表示內容中的一個自然段，<p></p>標簽中的文字默認會獨占一行，并且段與段之間會有一定的間隔，
3.換行標簽<br />:<br />標簽是一個自結束標簽（單標簽），
4.<hr />標簽：也是一個自結束標簽（單標簽），生成一條水平線
示例：
5.<center></center>標簽中的內容，會默認在頁面中居中顯示
<!--html根標簽-->
<html>
<head>
<meta chartset="utf-8" />
<title>網頁的標題</title>
</head>
<body>
<!--標題標簽-->
<h1>標題標簽</h1>
<h2>標題標簽</h2>
<h3>標題標簽</h3>
<h4>標題標簽</h4>
<h5>標題標簽</h5>
<h6>標題標簽</h6>
<p>我是一個p標簽，我用來表示一個段落</p>
<!-- HTML中再多的空格，也會被瀏覽器當成一個空格決議
換行也會當成一個空格決議
-->
<p>我是一個p標簽，
我用來表示一個段落，
</p>
<center>
<p>
鋤禾日當午，<br />
汗滴流下土，<br />
誰知盤中餐，<br />
粒粒皆辛苦，<br />
</p>
</center>
<!--生成水平線的標簽-->
<hr />
</body>
</html>
效果：
7.物體（轉義字符）
1.物體（轉義字符）： 在HTML中一些如< >這種特殊字符是不能直接使用，需要使用一些特殊的符號來表示這些特殊字符，這些特殊符號我們稱為物體（轉義字符），
2.物體的語法： & 物體的名字 ;
如：
< （小于號）：<
> (大于號）：>
空格： ；一個 標簽表示一個空格
著作權符號：©
示例：
<!--html根標簽-->
<html>
<head>
<meta chartset="utf-8" />
<title>物體</title>
</head>
<body>
<!-- 顯示出a<b>c -->
<!--錯誤-->
<p>
a<b>c
</p>
<!--正確-->
<p>
a<b>c
</p>
<!--空格標簽-->
<p>今天天氣 好晴朗</p>
<!--著作權符號-->
<p>©今天天氣好晴朗</p>
</body>
</html>
效果：
8.圖片標簽
<img />標簽：是一個自結束標簽（單標簽）使用<img />標簽來向網頁引入一個外部圖片，- 屬性：
src: 配置的是一個外部圖片的路徑，目前我們所要使用的路徑全部都是相對路徑，3 用../來回傳上一級目錄，
alt: 可以用來設定在圖片不能顯示時，對圖片的描述，搜索引擎可以通過alt屬性來識別不同的圖片，如果不寫alt屬性，則搜索引擎不會對img中的圖片進行搜錄，
width:可以用來修改圖片的寬度，一般使用px作為單位，
height:可以用來修改圖片的寬度，一般使用px作為單位，
示例：
<img src="1.gif" alt="我是一只松鼠" width="100px" height="300px" />
9.圖片的格式
1.JPG:
- JPG圖片支持的顏色比較多，圖片可以壓縮，但是不支持透明，
- 一般使用JPG來保存照片等顏色豐富的圖片
2.GIF:
-GIF支持的顏色較少，只支持簡單的透明，支持動態圖，
-圖片顏色單一或是動態圖時可以使用gif
3.PNG:
-PNG支持的顏色多，并且支持復雜的透明
-可以用來顯示顏色復雜的透明圖片
圖片使用原則：
效果不一致，使用效果好的；效果一致，使用小的，
10.meta標簽
1.<meta />標簽是一個自結束標簽（單標簽），
2.<meta />標簽用來設定網頁的一些元資料，比如：網頁的字符集、關鍵字、簡介，
①用來設定的字符集
<meta chartset="utf-8" />
②用來設定網頁的關鍵字
name的值是對content的值的描述
搜索引擎在檢索頁面時，會同時檢索頁面中的關鍵詞和描述，但是這兩個值不會影響頁面在搜索引擎中的排名，
<meta name="keywords" content="HTML5,JavaScript,前端,java" />
③可以用來指定網頁的描述
name的值是對content的值的描述
<meta name="description" content="發布h5、js等前端相關資訊" />
④使用meta可以用來做請求的重定向
格式：
<meta http-equiv="refresh" content="秒數;url=目標路徑" />
示例：
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
11.XHTML的語法規范
- HTML中不區分大小寫，但是我們一般都是用小寫，
- HTML中的注釋不能嵌套，
- HTML標簽必須結構完整，要么是自結束標簽（單標簽），
- HTML標簽可以嵌套，但是不能交叉嵌套，
- HTML標簽中的屬性必須有值，且值必須加引號（雙引號單引號都可以），
12.行內框架
1.用途： 使用行內框架可以引入一個外部的頁面
2.如何使用：用iframe來創建一個行內框架
屬性：
src:指向一個外部頁面的路徑，可以使用相對路徑，
width、height、name等
3.不建議使用，行內框架中的內容不會被搜索引擎所檢索
示例：
<iframe src="demo1.html"><iframe>
#13.超鏈接
- 使用超鏈接可以讓我們從一個頁面跳轉到另一個頁面，
- 使用
<a></a>標簽來創建一個超鏈接
屬性:
href:指向鏈接跳轉的目標地址，可以寫下一個相對路徑也可以寫一個完整的地址
target屬性：可以用來指定打開鏈接的位置
可選值：
_self,表示在當前視窗中打開（默認值）
_blank,表示在新的視窗中打開
可以設定一個行內框架的name屬性值，連接將會在指定的行內框架中打開，
示例：
<!--默認在當前視窗中打開-->
<a href="http://www.baidu.com">我是一個超鏈接<a>
<br />
<!--在新的框架中打開-->
<a href="demo2.html" target="_blank">我是一個超鏈接<a>
<br />
<!--在行內框架中打開-->
<a href="demo2.html" target="tom">我是一個超鏈接<a>
<iframe src="demo2.html" name="tom"></iframe>
網頁三要素：結構、表現、行為， ??
亂碼問題：
??相對路徑：指相對于當前資源所在目錄的位置， ??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275019.html
標籤：其他
下一篇：TypeError: Cannot read property ‘resetFields‘ of undefined解決方案