1.一些小知識
1.1一些詞語
border 邊框
align對齊
strike刪除線
EQ 就是 EQUAL等於
NQ 就是 NOT EQUAL不等於
GT 就是 GREATER THAN大於
LT 就是 LESS THAN小於
GE 就是 GREATER THAN OR EQUAL 大於等於
LE 就是 LESS THAN OR EQUAL 小於等於
1.2 topmargin屬性和margin-top屬性的區別
topmargin屬性和margin-top屬性都表示上邊距。
topmargin 屬性是頁面主體標記的一個屬性，表示元素與瀏覽器頂部的距離，寫在標記內;
而margin-top屬性是Css屬性，表示當前元素距離相鄰元素或者與其父元素的頂部的距離。
2.標題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.文本文字</title>
</head>
<body>
<!-- 1.標題 -->
<!-- 1.1標題：標記、對齊方式、 -->
<h1 align="center">我是最大的標題</h1>
<h6 align="right">行吧，我是最小的字號</h6>
<h3>接下來我插入張照片</h3>
<!-- 1.2插入張圖片 -->
<h6 align="center"><img src="D:\A_MJ\Photo\鎖屏\123.jpg " style="width: 800px;height:400px "></h6>
</body>
</html>
結果展示：
3.文字
<!-- 2.1文字的斜體、下劃線、刪除線 -->
<h3>
<em>我是斜體</em>
</h3>
<u>我是下劃線</u>
<strike>我帶刪除線</strike>
<!-- 2.2上標、下標 -->
<br>
<sup>我是上標</sup>
<sub>我是下標</sub>
<p>br換行,在舉個例子</p>
<p align="center">X<sup>3</sup>+Y<sub>1</sub>=100</p>
<!-- 2.3特殊符號：&字符名稱； -->
"=“ <=< >=> ×=*
©=©（版權符號） =空格
<!-- 2.4段落 -->
<p>我是個段落標記</p>
<!-- 2.5換行 -->
<br>
<!-- 2.6原格式標記 -->
<pre>
00000000
0000000000000
000000000000000
000000000000000
</pre>
<!-- 2.7水平線 -->
<hr>
<!-- 調整水平線屬性,默認居中 -->
<hr width="100" align="right">
結果展示
4.圖像與超鏈接
<!-- 3.1添加圖像 -->
<!-- 本地：絕對地址和相對地址，一般使用相對地址 -->
<img src="D:\a_mj\Photo\鎖屏\1.jpg" width="100">
<!-- 網上覆製圖片地址 -->
<img src="http://inews.gtimg.com/newsapp_match/0/4042010428/0">
<!-- 3.2設置圖像屬性 -->
<!-- 長、寬、邊框(單位像素) -->
<hr>
<img src="http://img.idol001.com/origin/2017/11/15/26bec13d84ca7a8349923f51ff403a2a1510741170.jpg"
width="600" height="400" border="1">
<!-- 圖像間距(圖像與文字之間的距離) -->
<!-- hspace:水平間距,vspace:垂直間距 -->
<hr>
<p>君不見妾其舞翩翩</p>
<img src="http://img.idol001.com/origin/2017/11/15/26bec13d84ca7a8349923f51ff403a2a1510741170.jpg"
width="100" height="100" hspace="100" vspace="100">
<!-- align:相對文字的對齊方式 -->
<!-- 此處插align表，見表3.1 -->
<!-- 提示文字title：文字在鼠標懸停在圖像上時顯示 -->
<hr>
<img src="http://inews.gtimg.com/newsapp_match/0/4042010428/0"
title="這是唐嫣">
<!-- 替換文本alt：圖像無法正常顯示時顯示 -->
<hr>
<img src="http://inews.gtimg.com/newsapp_match/0/4042010428/01"
alt="這其實是楊冪">
<!-- 3.3鏈接標記 -->
<hr>
<!-- herf:鏈接地址，可爲相對鏈接和絕對鏈接，全稱 Hypertext Reference -->
<!-- target:打開新窗口方式，四個屬性值：_blank:新建窗口打開，_parent:上一級窗口打開，_self:同一窗口打開且爲默認情況，_top:在瀏覽器整個窗口打開 -->
<a href="http://www.baidu.com" target="_blank">百度一下！你就知道</a>
<!-- 書籤鏈接(點擊文字，網頁內部跳轉) -->
<br>
<a href="#top">返回首頁</a>
<!-- 3.4圖像的超鏈接 -->
<br>
<a href="https://baike.baidu.com/item/%E6%9D%A8%E5%B9%82" target="_blank"><img src="http://inews.gtimg.com/newsapp_match/0/4042010428/0"></a>
<!-- 圖像熱區鏈接(映射圖像) -->
<img src="圖像地址" usemap="映射圖像名稱">
<map name="映射圖像名稱">
<area shape="熱區形狀" coords="熱區座標" href="鏈接地址">
</map>
部分結果展示：
表3.1
