HTML基本標簽元素
HTML: 超文本標記語言(HyperText Mark-up Language )
1.作用：寫網頁結構
2.HTML不區分大小寫，建議小寫
3.文件後綴 .html 或者 .htm
4.html由瀏覽器解析執行. 由上往下，由左往右
1) HTML標簽 標記 : 用於描述功能的符號稱為"標簽"
<..> 組成HTML
雙標記 封閉類型標記 如:<hn>,<p>
單標記 非封閉類型標記 空標記 <img>,<br/>
2) HTML元素 : 從標簽開始到標簽結束的所有內容
<p> 這是一個段落 </p>
元素的開始 元素的內容 元素的結束
某些HTML具有空內容,大多數HTML可擁有屬性.
3)HTML的屬性
語法：寫在開始標簽裏面
屬性="屬性值"
一個標簽可以有多個屬性，用空格隔開，不區分前後順序
屬性和屬性的值之間用等號鏈接
屬性的值包含在引號當中
屬性總是以名稱/值對的形式出現
4)HTML註釋
語法：
<!-- 註釋的文本內容 --> 快捷鍵: Ctrl+/
註釋不可以套在其他註釋中.
5) 標題標簽
h1-h6 (雙標記)
屬性：align="left|right|center"
6)段落標簽
p (雙標記)
屬性：align="left|right|center"
7)圖片標簽
img (單標記)
屬性：<img src="" title=""/>
src : 路徑
alt :當圖片不能正常顯示，給予提示
title : 鼠標懸停，給予提示給予提示
width;height: 圖片寬高設置一個值就行,另外一個值會跟著等比例縮放.
width="160" heigh="160" (不用加px)
1.相對路徑 (網頁地址)
( 同級,直接寫;
下一級,先找復級"/" ;
上一級,"../" ;
上兩級,"../../";
多級如上)
2.絕對路徑
8)強制換行<br/>標簽:
單標記,沒有任何屬性 eg:<br/>*50:換行50
9)水平線<hr/>標簽: (單標記)
默認整個網頁一樣寬的屬性;
<hr width="500" /> 線的寬度 可取像素px和百分比 %
<hr sixe="200"/> 線的高度
<hr color="red"/> 線的顏色
<hr align="left"/> 水平對齊方式,默認居中
10)超鏈接<a>標簽:
屬性:
- herf : 鏈接URL路徑 相對路徑 eg:<a href="xxx.html">相對路徑</a> (本地路徑)
- target:打開窗口 目標(默認值_self; 新窗口打開_blank,_parent,等)
- title :定義鼠標經過是提示信息
- name:錨點 同一個頁面做跳轉
1.點擊a 跳轉到 a
<a herf="#me">點我<a/>
<a herf=" " name="me">到我<a/>
2.點擊a跳轉到塊級元素
<a href="#me">點擊</a>
<p id="me">到我</p>
包含英文 數字 下劃線
不能以數字開頭
補充: <a herf="#">: 空鏈接 回到網頁頂部
一.DOCTYPE 文檔類型聲明 (DTD文檔模型)
作用:告訴瀏覽器按照當前標準解析代碼
註意:不是HTML標簽
3)<head lang="en">
en:英文,只是個聲明，聲明了它，對搜索引擎和瀏覽器更友好，並不會更改顯示內容
zh-CN:中文
4)title:定義文檔的標題
一個網頁只能有一個標題,head裏面一定要加title,寫與網頁相關的關鍵詞有利於SEO優化.
5)<meta charset="UTF-8">
META標簽用來描述一個HTML網頁文檔的屬性，此處的charset=”utf-8”是說當前使用的是utf-8編碼格式，在開發中我們經常會看到utf-8，或是gbk，這些都是編碼格式。國外一般會用gbk、gb2312，國內通常使用utf-8。
6)<meta>:
元素可提供有關頁面的元信息（meta-information），用來向瀏覽器或搜索引擎描述頁面。比如文檔的描述和關鍵詞。它只可以放在head中。屬於元信息標簽。
常見的meta有
1.Keywords(關鍵字) keywords用來告訴搜索引擎你網頁的關鍵字是什麽。
<meta name="keywords" content="web前端,SulierZ的博客">
2.description(網站內容描述) description用來告訴搜索引擎你的網站主要內容。
<meta name="description" content="SulierZ的博客,web前端學習">
3.author作者 標註網頁的作者
<meta name="author" content="root,[email protected]">
二. 文本格式化標簽 (一般瀏覽器默認字體為16px)
<b></b>
<i></i>
<u></u>
<em><em/> : 強調傾斜顯示
<strong></strong>:強調加粗顯示
<sub></sub>: 定義下標
<sup></sup>: 定義上標
<del></del>: 定義刪除字 同<s></s>
<ins></ins>: 定義插入內容
<pre></pre>: 被包圍在 pre 元素中的文本通常會保留空格和換行符
三.語義化標簽 a address h1-h6
也就是說我們看到a標簽，並不能從直觀意義上知道它是一個超鏈接，但是address，通過翻譯，也能明白這是定義聯系信息，這就是語義化的好處。它以斜體顯示。
四:列表標簽 網頁中排版作用
列表分為三類：一是無序列表<ul>，一是有序列表<ol> ,還有自定義列表<dl> ,.(列表項目標記<li>)
- 無序列表<ul>: ul>li*5 包含嵌套
<ul><li>的屬性type 定義項目符號 UnorderList List 塊級元素
disc 實心圓(默認)
circle 空心圓
square 小方塊
none 不顯示
- 有序列表<ol>:
<ol><li>的屬性type 擁有的選項 OrderList
1 表示列表項目用數字標號（1,2,3...）
a 表示列表項目用小寫字母標號（a,b,c...）
A 表示列表項目用大寫字母標號（A,B,C...）
i 表示列表項目用小寫羅馬數字標號（i,ii,iii...）
I 表示列表項目用大寫羅馬數字標號（I,II,III...）
start: 從第幾個開始 取值number 倒序:reversed
- 自定義列表<dl> :定義列表默認為兩個層次，
第一層為列表項標簽<DT>(主題)，第二層為註釋項標簽<DD>(內容描述)
五:表格table (存儲數據,展示數據)
<tr>: 行
<td>: 列
<th>: 定義表格頁眉單元格(默認水平居中且加粗)
<caption>:定義表格標題
表格 table 屬性:
border:邊框 默認沒有邊框 eg:border="1"
width:寬度
align:表格水平對齊方式 默認left align="center"
cellspacing: 單元格之間間距 cellspacing="0"
cellpadding:內容距單元格距離 cellpadding="20"
表格行 tr 屬性:
height
width:寬度
align:表格水平對齊方式 默認left align="center"
valign: 垂直對齊方式 默認middle,top,bottom
表格列 td 屬性:同tr
colspan: 設置單元格跨列
水平合並,取值number colspan="2" 水平合並3個單元格,
rowspan: 設置單元格跨行
垂直合並 rowspan="2"
六:HTML實體字符 當網頁中一些字符不能正常顯示時使用實體字符
空格:
< :<
> :>
& :&
? :© (拼音打出"版權"即可)
七:內聯框架Iframe（Inner Frame:在body裏面嵌套一個網頁)
屬性:
①width 可設置內聯框架的寬
②height 可設置內聯框架的高
③name 設置框架名稱
④src 設置頁面的路徑
⑤scrolling規定是否在 iframe 中顯示滾動條
（yes，no，默認auto[自動]）
⑥frameborder規定是否顯示框架周圍的邊框（1默認有邊框,0）
HTML基本標簽元素