html基礎入門 1. 什麼是html Hypertext Markup Language 超文本標記語言 2. 基本結構 <!DOCTYPE html> <!-- 註釋:此為html5的聲明方式 --> <html> <head></head> <body></body> </html> 順序 聲 ...
html基礎入門
1. 什麼是html
Hypertext Markup Language
超文本標記語言
2. 基本結構
<!DOCTYPE html> <!-- 註釋:此為html5的聲明方式 -->
<html>
<head></head>
<body></body>
</html>
順序
聲明(必須放在第一行)
html標簽
頭部
主體
3. 註釋
<!— 註釋內容寫這裡,網頁中不會顯示 —>
4. 網頁顯示出現亂碼解決方案
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” />
<meta charset="utf-8" />
<meta/>
放在<head>
里
編碼格式普遍常用:utf-8
中國常用:utf-8、GB2312、gbk等
5. 文字和段落標簽
(1) 標題標簽
<h1></h1> ~ <h6></h6>
共6個標題等級
(2) 段落標簽
<p></p>
align水平對齊屬性
left
- 左對齊
center
- 居中對齊
right
- 右對齊
justify
- 兩端對齊(伸縮對齊)
(3) 換行標簽
<br />
(4) 水平線標簽
<hr />
可用屬性
width
- 水平線寬度
color
- 水平線顏色
align
- 水平線對齊方式
noshade
- 水平線無陰影
(5) 文字斜體
<i></i>
<em></em>
(6) 文字加粗
<b></b>
<strong></strong>
(7) 下標
<sub></sub>
(8) 上標
<sup></sup>
(9) 插入內容
<ins></ins>
下劃線
(10) 刪除內容
<del></del>
刪除線
(11) 特殊符號
<
<
>
>
®
®️ 已註冊
©
©️ 版權
™
™️ 商標
space 不斷行的空格
6. 列表標簽
(1) 無序列表
結構
<ul>
<li></li>
<li></li>
</ul>
<ul>
的type屬性
disc
實心圓點
square
實心正方形
circle
空心圓
(2) 有序列表
結構
<ol>
<li></li>
<li></li>
</ol>
<ol>
的type屬性
1
1,2,3
a
a,b,c
A
A,B,C
i
i,ii,iii
I
I,II,III
(3) 定義列表
結構
<dl>
<dt>定義列表項</dt>
<dd>列表項描述</dd>
<dd>列表項描述</dd>
</dl>
7. 圖像標簽
<img src="" alt="" />
屬性
(1) src
圖片url
(2) alt
替代文本
(3) height
圖像高度
(4) width
圖像寬度
8. 超鏈接標簽
<a href="">內容</a>
(1) 屬性
① href
鏈接地址
② target
鏈接跳轉的視窗打開方式
- _blank
- 新視窗打開
- _self
- 預設,當前視窗打開
- _top
- 在當前視窗之上新視窗打開
- _parent
- 在父視窗打開
③ title
鏈接提示文字
④ name
鏈接命名
(2) 錨鏈接定義
同一頁面
<a href="#鏈接到的錨名">通常是導航文本</a>
<a name="定義錨的名稱">擺放位置即為錨點位置</a>
不同頁面
<a href="頁面鏈接#連接到的錨名">通常是導航文本</a>
<a name="定義錨名">擺放位置即為錨點位置</a>
(3) 基礎的電子郵件鏈接
<a href="mailto:對方郵件地址"></a>