10-2 body標籤中相關的標籤（字體標籤，排版標籤（div,span），超連接，圖片標籤）

時間 2019-11-29

標籤 body 標籤相關字體排版 div span 連接圖片欄目 CSS 简体版

原文原文鏈接

一排版標籤（div,span）javascript

1塊級標籤html

java

瀏覽器

字體

spa

code

例子：htm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>塊級標籤</title>
 6 </head>
 7 <body>
 8 <div>
 9     北京
10 </div>
11 <div>
12     上海
13 </div>
14 <span>
15     北京
16 </span>
17 <span>上海</span>
18 </body>
19 </html>

2 段落標籤<p>blog

屬性：token

align='屬性值'：對齊方式。屬性值包括：left、center、right

例子：

<p>這是一個段落</p>
<p align="center">這是另外一個段落</p>

p標籤是一個文本級標籤，p裏面只能放文字、圖片、表單元素。其餘的一概不能放。

例子：

1 <p>秦嶺大山裏的墓葬羣，西北戈壁中的無人區，浩瀚深海下的失落遺蹟，雪域高原上的死亡禁區……
2 或許有一天，當你由於貪婪而拿了不應拿的東西時，你就會發現睡覺時有東西站你旁邊，告訴你，天黑了，一塊兒來玩玩吧<br>
3     <!--a標籤是超連接-->
4    <a href="http://www.baidu.com">百度一下</a>
5 
6 </p>

二字體標籤 h1~h六、<sup>、<sub>和特殊字符

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--字體標籤包含：h1~h六、<sup>、<sub>-->
 5     <meta charset="UTF-8">
 6     <title>字體標籤</title>
 7 </head>
 8 <body>
 9 <h1>北京</h1>
10 <h2>北京</h2>
11 <h3>北京</h3>
12 <h4>北京</h4>
13 <h5>北京</h5>
14 <h6>北京</h6>
15 <!--上標-->
16 2<sup>8</sup>
17 <!--下標-->
18 2<sub>8</sub>
19 <!--空格-->
20 &nbsp<br>
21 <!--小於號-->
22 &lt<br>
23 <!--大於號-->
24 &gt<br>
25 <!--符合&-->
26 &amp<br>
27 <!--雙引號-->
28 &quot<br>
29 <!--單引號-->
30 &apos;<br>
31 <!--版權-->
32 &copy<br>
33 <!--商標-->
34 &trade;
35 </body>
36 </html>

三超連接<a>

例子：

<a href="#">跳轉到頂部</a>

<a href="http://www.baidu.com">百度一下</a>

特殊的幾個連接

<a href="javascript:alert(1)">內容</a>
  <a href="javascript:;">內容</a>

javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應例如：<a href="javascrip:;">內容</2
javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。例如：<ahref="javascript:alert()">內容</a>

四圖片標籤<img>

1，img屬性：

width：寬度
height：高度
title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。
align：指圖片的水平對齊方式，屬性值能夠是：left、center、right
alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）

例子

<img src="./timg.jpg" alt="紫霞仙子" title="美女" width="400">

注意事項：
（1）若是要想保證圖片等比例縮放，請只設置width和height中其中一個。
（2）若是想實現圖文混排的效果，請使用align屬性，取值爲left或right

若是點擊圖片想跳轉到一個連接，應該是：

<a href="http://www.baidu.com">
<img src="./test.jpg" alt="紫霞仙子" title="美女" width="400">
</a>

五標籤總結

1 文本級標籤和排版標籤

文本級的標籤：p、a、span、i、em 只能放文本、圖片、表單元素
排版標籤：div、ul、ol、li、

2 行內標籤和塊級便籤

行內標籤：文本級標籤中除了p，其它標籤都是行內標籤（行內塊）
塊級標籤：全部的排版標籤都是塊級標籤，再加上p

3 行內標籤和塊級標籤的特色

行內標籤：display：inline; （1）在一行內顯示（2）不能設置寬高（3）它的寬和高是內容的寬高塊級標籤：display:block; （1）獨佔一行（2）能夠設置寬高（3）它的寬是父盒子的寬度100%；行內塊標籤：img input display:inline-block; （1）在一行內顯示（2）能夠設置寬高經過display屬性對標籤進行轉化 none|inline-block|block

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。