文章目錄
- HTML概述
- 明確什么是HTML？
- HTML可以做什么？
- HTML的基本語法
- HTML的基本框架
- 標簽分類
- 標簽屬性
- 基本常用標簽
HTML概述
明確什么是HTML？
? html即是一種超文本標記語言（Hyper Text Makeup Language），是一種標識性語言，
? html主要是包含一系列的標簽，通過標簽將網路上的檔案格式統一，將分散的internet資源連接成一個邏輯整體，
所謂超文本就是一種資訊的組織方式，就是通過超鏈接將文本的中的文字、圖表與其他資訊媒體相關聯，這種組織資訊的方式就是將分布在不同位置的資訊資源用隨機方式進行連接，為人們查找、檢索資訊提供方便，
舉個例子：A召喚師在地球，被他標記的B、D、E…等召喚獸分布在太陽系各處，當A召喚師與某個敵人對戰時，不可能跑到星系各處去先帶著召喚獸前往決斗，所以A召喚師就會使用召喚法陣（超鏈接）將召喚獸從各地召喚而來，這時C召喚獸確無法進行戰斗，因為C召喚獸之前生活的環境與A召喚師所戰斗的環境有很大差異，為此，A召喚師創造了一種環境適應法術（標簽），可以幫助召喚獸變成在召喚師所在環境下可以正常生存的狀態，
HTML可以做什么？
? HTML作為網頁基礎，它的首要功能就是制作網頁，當然它的主要作用還是制作靜態網頁，而更多更酷炫的功能就需要CSS和JavaScript來實作了，
HTML的基本語法
HTML的基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
宣告當前 html 的語言版本為 html 5，
? 2.
<html> </html>
html 標簽，所有代碼都要在這個標簽內寫入，
? 3.
<head></head>
head 標簽，頭部標簽，內容一般不在瀏覽器主界面顯示，可以通過CSS和Javascript來制作瀏覽器主界面的樣式，
? 4.
<meta >
meta 標簽，用來設定字符集，告訴瀏覽器，這個網頁中的漢字是用什么編碼決議的，
? （1）utf-8 多國語言編碼，每個國家語言都能正常顯示，
? （2）GB2312 簡體中文編碼，一共對6763個漢字進行編碼，
? （3）GBK 簡體中文編碼，一共對2.3萬個漢字進行編碼，
? （4）JIS 日文編碼，
? （5）BIG5 簡體中文編碼，
? 5.
<title>***</title>
title標簽，網頁的標題，
? 6.
<body>***</body>
body標簽，網頁的正文內容，一般會在瀏覽器的主界面顯示，
? 7.
<!-- 注釋 -->
注釋，一般為ctrl + /，
標簽分類
? 1.閉合標簽（雙標簽）：開始 標簽內容 結束 例：
<b> 標簽內容 </b> --->加粗字體
? 2.自閉和標簽（單標簽）：標簽名 內部結束 完成某個特定功能
<link href="icon地址" rel="icon" /> --->引入一個小圖示
標簽屬性
? 1.定義：通過標簽對內容樣式做進一步修改，
? 2.語法：<標簽 屬性=“屬性值”>xxx</標簽> 例：
<p align="center">內容</p> --->內容文本居中
基本常用標簽
? 1.標題標簽：由大到小依次為< h1 >內容< /h1 >…< h6>內容< /h6> 例：
<h1>文本</h1> --->文本內容字體為1號
? 2.段落標簽：< p>內容< /p> 將文本內容分段， 例：
<p>啊，大海呀！全是水，</p>
<p>蛤蟆呀，四抬腿！</p>
? 3.換行標簽：可以對一長段文字進行換行，< br />
<p>我愛你<br />中國</p>
? 換行標簽針對一段話需要分兩行以上描述時使用，這將會是你在學習HTML中最常使用的標簽，
4.串列標簽：串列標簽分為有序標簽< ol>< li> < /li>< /ol>和無序標簽< ul>< li> < /li>< /ul>,需注意這個標簽中的有序和無序指的是序號，
<!-- 有序標簽 -->
<ol>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ol>
<!-- 無序標簽 -->
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ul>
5.超鏈接：< a>< /a>通過超鏈接中的href屬性引入需要跳轉鏈接的地址，例
<a href="www.baidu.com" target="_blank">點擊打開百度</a>
? 可以看到在上面例子中的標簽內除了href屬性之外還有一個target屬性，這個屬性是決定你打開超鏈接時在哪里視窗打開，
target="_self":這個屬性值表示在自己本身的視窗通過超鏈接打開新的界面；
target="_blank":這個屬性值表示打開一個新視窗，在新視窗中通過超鏈接打開一個新的界面，
這里我們只介紹target屬性的兩種屬性值，剩下的三種我們會在HTML行內框架中進行講解，
6.圖片標簽：< img > 通過src屬性引入圖片地址，達到顯示圖片的功能，例：
<img src="圖片.png" />
7.通過超鏈接制作錨點：這時一個關于超鏈接的小技巧，我們知道超鏈接可以引入地址讓我們直接打開一個新視窗，那么當我們在同一個界面給超鏈接一個類似地址的準確定位時，我們是不是就可以準確到達當前網頁的一個位置中了呢，
<a href="#內容1">內容1</a>
<a name1="內容1">內容一</a>
可以看到我們在超鏈接標簽屬性href中引入的是第二個超鏈接的name屬性，這樣做的目的就是當我們點擊上面"內容1"時，會觸發超鏈接直接跳轉到"內容一"，學會制作錨點，就可以讓我們在制作一個很長的頁面時制作目錄，使用者就可以通過相應的的目錄指示直接跳轉到相應的位置，給用戶更好的使用體驗，
后面我們會持續更新，敬請期待！！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/155112.html
標籤：其他