body標簽中的相關標簽1
body內標簽級別
body標簽內內有三種標簽元素級:
- 塊級元素：獨占一行，可設置寬高，如果不設置寬度，則為瀏覽器寬度
- 行內元素：在一行內展示，不能設置寬高，它的寬高根據內容去填充
- 行內塊元素：在一行內展示，可以設置寬高
html內所有標簽可以分為兩種：
- 文本級標簽：p span a b i u em 文本標簽內只能放文字，圖片，表單元素
- 容器級標簽：div h系列 li dt dd 容器級標簽裏可以放任何東西
標簽元素級
** 常見的塊級元素： **
- 標題 h1~h6
- 盒子標簽 div
- 段落 p
- 有序標簽 ol
- 無序標簽 ul
- li
- 表格標簽 table
- 表單標簽 form
** 常見的行內元素：**
- span
- 按鈕標簽 button
- 超鏈接標簽 a
- 換行 br
- 加粗 b 或 strong
- 上標 sup
- 下標 sub
- 下拉列表 select
- 多行文本 textarea
- 下劃線 u
- 刪除線 del
常見的行內塊元素：
- 圖片標簽 img
- 文本框 input
字體標簽
標題 h1~h6 沒有h7標題
標題使用 < h1 > 至 < h6 >。 < h1 >定義最大的標題，< h6 >定義最小的標題。具有 align 屬性，屬性值可以是： left、center、right
<body> <h1>路飛學誠</h1> <h2>路飛學誠</h2> <h3>路飛學誠</h3> <h4>路飛學誠</h4> <h5>路飛學誠</h5> <h6>路飛學誠</h6> </body>
效果：
粗體標簽< b > 或 < strong >
<body>
luffy
<b>luffy</b>
<strong>luffy</strong>
</body>效果：
下劃線標記 < u > 中劃線標記< s >
<body>
<u>luffy</u>
<s>luffy</s>
</body>效果：
上標< sup > 下標< sub >
<body>
5<sup>2</sup>
8<sub>2</sub>
</body>效果：
特殊符號
空格
< 小於號
> 大於號
& 符號&
" 雙引號
' 單引號
© 版權
™ 商標其他特殊字符參考表：HTML特殊字符參考表
排版標簽
段落標簽 < p >
段落屬性：
- align="屬性值": 對齊方式。屬性值包括：left、center、right
<body>
<p>這是一個段落</p>
<p align="center">這是另一個段落</p>
</body>效果：
註意：p標簽是一個文本級標簽，p裏面只能放文字，圖片，表單元素，其他一律不能放
塊級標簽 div 和 span
div和span是非常重要的標簽，div的語義是division"分割"；span的語義就是span"範圍，跨度"，這兩個是非常重要的盒子
div：把標簽中的內容作為一個塊來對待，必須獨占一行
div標簽的屬性：
- align="屬性值": 設置塊的位置。屬性值可選擇：left center right
span標簽和div標簽唯一的區別在於：span是不換行的，div是換行的
<body>
<div>導航欄</div>
<div>中心</div>
<span>路飛</span>
<span>學誠</span>
</body>效果：
內容居中標簽< center >
此時center代表一個標簽，而不是一個屬性值了，只要在這個標簽裏面的內容，都會居中瀏覽器中間
<body>
<center>
<p>luffy</p>
</center>
</body>效果：
超鏈接
超鏈接有三種形式：、
1、外部鏈接：鏈接到外部文件
<a href="new.html">點擊進入到新網頁</a>2、錨鏈接：鏈接到外部文件
給超鏈接起一個名字，作用是在本頁面或者其他頁面的不同位置進行跳轉，如：在頁面底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用錨鏈接
3、郵件鏈接
<a href="mailto:[email protected]">聯系我們</a>效果：點擊之後，會彈出outlook，作用不大
特殊幾個超鏈接
返回頁面頂部的位置
<a href="#">跳轉到頂部</a>超鏈接的屬性
- href：目標URL
- title：懸停文本
- name：主要用於設置一個錨點的名稱
target：告訴瀏覽器用什麽方式來打開目標頁面
target屬性有以下幾個值：
- _self：在同一個頁面來顯示(默認值)
- _blank：在新的窗口打開
- _parent：在父窗口顯示
- _top：在頂部窗口顯示
圖片標簽 < img / >
img：代表的就是一個圖片。是單邊標記
img是自封閉標簽，也稱為單標簽
<img src=" " />能插入的圖片類型
- 能夠插入的圖片類型：jpg(jpeg)、gif、png、bmp
- 不能往網頁中插入的圖片格式是：psd、ai
html頁面不是直接插入圖片的，而是插入圖片的引入地址，所以也要把圖片上傳到服務器上
src 屬性：圖片的相對路徑和絕對路徑
- src 屬性：指圖片的路徑
在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑
1、相對路徑
相對當前頁面所在的路徑。兩個標記.和..分別代表當前目錄和父路徑
<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src=".\2.jpg">
<!-- 上一級目錄中的圖片 -->
<img src="..\2.jpg">img 是image“圖片”的簡寫，src 是英語source“資源”的縮寫。
<img src="images/1.jpg">上方代碼的意思是說，當前頁面有一個並列的文件夾images，在文件夾images中存放了一張圖片1.jpg
2、絕對路徑
1、以盤符開始的絕對路徑
<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">2、網絡路徑
<img src="http://www.baidu.com/2016040102.jpg">相對路徑和絕對路徑的總結
我們現在無論是在a標簽、img標簽，如果要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。
相對路徑，就是../ image/ 這種路徑。從自己出發，找到別人；
絕對路徑，就是http://開頭的路徑。
絕對不允許使用 file://開頭的東西，這個是完全錯誤的！
img標簽的其他屬性
- width：寬度
- height：高度
- title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。
- align：指圖片的水平對齊方式，屬性值可以是：left、center、right
- alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate “替代”的意思。（有的瀏覽器不支持）
註意事項：
- 如果要想保證圖片等比例縮放，只設置width和height中其中一個
- 如果要實現圖文混排的效果，使用align屬性，取值為left或right
body標簽中的相關標簽1