html簡介和常用標籤
目錄
html
html(Hyper Text Markup Language)是網頁描述語言,使用html可以製作出簡單的網頁(可以用css,jacvascript修飾成美觀的網頁)
html是一種標記語言, 是超文字標記語言的縮寫 (Hyper Text Markup Language),而非程式語言,它使用標記標籤來描述網頁
頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素
關於html的一些特點:
1html以.html或者.htm字尾結尾,記事本就可以編輯,瀏覽器開啟可以看到html檔案的效果
2html不需要太嚴格,要注意巢狀位置,瀏覽器從上到下解析html標籤
3html標籤不區分大小寫,一般使用小寫,且成對出現
格式
<!DOCTYPE html> 宣告,必須要出現在最上方的第一個位置,告訴瀏覽器使用了哪種html版本,這裡html5 <html> <head> <title>標題</title> 標題顯示在瀏覽器的標籤頁,且有屬性可以設定 設定頁面的編碼格式 引入外部檔案的標籤 </head> <body> 資訊,同樣可以設定屬性 </body> </html>
說明,上述只是基本的html頁面形式,包含了基本內容
- <!DOCTYPE> 為頁面的宣告,非標籤,放置在第一行,告知瀏覽器使用的html版本,如不寫,可能會導致相容問題,
- html標籤：定義 HTML 文件，HTML文件的根標籤。
- head標籤：定義關於文件的基本資訊。 <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>可以在head標籤插入
- title標籤：定義文件的標題。執行網頁時，頁面頂端即瀏覽的標籤頁顯示的內容.
- body標籤：定義文件的主體，執行HTML文件時顯示的內容。
- font標籤：定義文字的字型、尺寸和顏色。需要兩個font標籤包裹住需要編輯的部分
檔案標籤: 沒有屬性
- <html></html>:根標籤
- <head></head>:頭標籤
- <title></title>:頁面的標題 顯示在瀏覽器上
內容標籤:
<body></body>：內容
- text:文字的顏色
- bgcolor:背景色 (支援顏色名稱/rgb三原色值/十六進位制)
- background:背景圖片 ,支援絕對路徑和相對路徑,會覆蓋背景色
<!DOCTYPE html>
<html>
<head>
<title > welcome</title>
</head>
<body text="red" bgcolor="orange" >
welcome <font color="red" size="12">for</font> your tour!
</body>
</html><font></font> body裡面的內容,如果需要對文字設定,使用font標籤把要設定的文字包裹起來
屬性 :color:顏色
size:文字大小
排版標籤:
<br/>換行標籤,單個即可,也可寫成<br>,不建議
<!--註釋內容-->註釋標籤,單個即可,註釋內容寫到兩個--之間
<hr/>橫線標籤 寫單個標籤即可 ,橫線會將段落標籤截斷
- :color:顏色
- align:對齊方式
- width:在網頁中佔的寬度,即橫向長度,兩種設定尺寸的方式 :1畫素表示,如500px(單位可不加,預設會加單位)
- 2佔瀏覽器的百分比, 如50%,隨瀏覽器大小動態改變 ,不管瀏覽器縮小還是全屏,都佔瀏覽器的50%
- size:粗細,單位px,畫素
<p></p>段落標籤,兩個標籤包裹著這個段落的文字,段與段之間有個空行,
- align:對齊方式,left center right
說明,設定屬性的時候是以鍵值對的形式設定的,即屬性="屬性值",屬性值要以雙引號引出,
成對出現的標籤的樣子是<p> </p> 設定標籤屬性的時候,要在第一個標籤的字母后面設定
對單個出現的標籤如<hr/> 設定屬性時,要在字母后面,斜槓前面設定屬性,且斜槓可省略
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p align="center">
<!---this is english song-->
That Girl - Oily Murs
<br/>
</p>
<hr width=50% color="black" align="center" size="5" />
<p align="center">
There's a girl but I let her get away
<br/>
It's all my fault cause pride got in the way<br/>
And I'd be lying if I said I was OK
<br/>
About that girl the one I let get away
<br/>
</p>
</body>
</html>
塊標籤
在body裡的用於將內容分塊顯示的標籤
<div></div>行塊標籤,意思是這一對div標籤裡的內容是一行,第一個標籤先另起一行,第二個標籤之後換行
<span></span>行內塊標籤,意思是在一行中可以使用多對span標籤,每對錶示一個語句塊
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塊標籤</title>
</head>
<body>
<div> hello <div>
<div> hello </div>
<span> world</span>
<span> worl<font size="5" color="blue">d</span>
</body>
</html>
可以看到,每對div標籤中第一個的意識是另起一行,第二個的意思是寫完後換行
文字標籤
<font></font>設定文字樣式
- size:設定文字大小,預設為3
- color:設定文字顏色
- face:設定字型樣式,可設定成宋體,楷體,黑體等
<h1> </h1> 設定標題樣式,從h1-h6 依次減小,字型是加粗的,預設佔一行
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塊標籤</title>
</head>
<body>
<div> hello <div>
<div> hello </div>
<span> world</span>
<!-- 設定字型格式 -->
<div><font face="楷體" color="black" size="7">你好嗎</div>
<div> <font face="宋體" color="black" size="7">你好嗎</div>
<div> <!-- 在一對div標籤裡插入三個span語句塊 -->
<span> 我很好</span>
<span> 我很好</span>
<span> 我很好</span>
</div>
<hr/> <!-- 插入橫線,下面是標題,從h1-h6依次減小 -->
<h1 > 我很好</h1>
<h2 > 我很好</h2>
<h3 > 我很好</h3>
<h4 > 我很好</h4>
<h5 > 我很好</h5>
<h6 > 我很好</h6>
</body>
</html>
清單標籤
清單標籤包裹著列表,主要有兩個,無序列表和有序列表,列表標籤可以用來實現選單欄和導航欄等
<ur></ur>無序清單標籤,意思是不顯示標號,而以前面有個小圓點或圈來表示一個條目,無序列表的小圓點不能去掉,要在css中設定
- type 三個值分別為disc小黑點(預設)、circle小圓圈和 square小方塊
<li></li> 列表項,包裹著每個條目
<ol></ol> 有序清單標籤,意思是條目前會有1,2,3等希臘數字或者羅馬數字或者英文字母來標識
- type 值為1希臘數字(預設),i小寫羅馬數字,I大寫羅馬數字,a小寫字母字母,A大寫英文字母
- start 值為數字,表示首項開始的位置
<li></li>列表項,包裹著每個條目
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul type="square">
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
</ul>
<ol type="A" start="3">
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
</ol>
</body>
</html>
圖形標籤
<img/>圖形標籤,單個標籤,設定圖片的顯示等資訊
- alt:圖片的說明資訊,(圖片沒加載出來時顯示的會顯示這個資訊),或者滑鼠放到上面也會顯示,還可以給搜尋引擎的蜘蛛用
- src:圖片的路徑,可以是相對路徑和絕對路徑
- width 圖片的寬度,可以設定畫素值或者百分比
- height圖片的高度,可以設定畫素值或者百分比
- border:圖片的邊框
- align:在程式碼中圖片標籤上面和下面的文字顯示在圖片哪個位置,值為left,right時上下的文字都會顯示到圖片右邊,值為top,middle,bottom時,上下的文字分別顯示到圖片兩邊的上中下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
helloworld
<div></div>
helloworld
<img alt="貓" src="C:\Users\fuyu\Desktop\jietu1.png" width=30%
height=30% border=5 align="middle">
看下這個貓長啥樣子
</body>
</html>
連結標籤
<a></a> 用來設定連結的
- href:要跳轉到的頁面的地址,如果要連線的網頁非本網站的網頁,需要加http://
- target:設定跳轉的方式,值為_self從當前頁面開啟要跳轉的頁面,_blank瀏覽器開啟新的標籤頁來開啟要跳轉的頁面
- name 設定錨點名稱
錨點的意思是比如說網頁上的快速回到頂部,通過<a>標籤在頂部設定一個錨點,然後在底部 設定一個<a>標籤連結到在頂部的錨點,可快速回到頂部,訪問錨點的格式為href="#name"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank" name="百度" > 開啟百度</a>
<a name="頂部"> </a>
<div> </div>
<img alt="貓" src="C:\Users\fuyu\Desktop\jietu1.png" width=30% height=10%><div> </div>
<img alt="貓" src="C:\Users\fuyu\Desktop\jietu1.png" width=30% height=10%><div> </div>
<img alt="貓" src="C:\Users\fuyu\Desktop\jietu1.png" width=30% height=10%><div> </div>
<div></div>
<a href="#頂部"> 回到頂部</a>
</body>
</html>
表格標籤
<table></table>表格標籤,實現簡單的表格樣式,對頁面佈局
- width:表格的寬度
- border:表格的框線
- bgcolor:表格的背景
- align:表格的對齊方式
<caption></caption>表格的題目,表頭
<tr></tr>代表表格的一行,如果一個表格有多列,每列在這行的單元格都包裹在這一行中
- align:單元格里的內容對齊
<td></td>代表單元格,裡面的內容是一個單元格里的內容
- colspan合併列,將同一列的n個單元格合成一個,把被合併了的單元格刪去,否則格式錯亂
- rowspan合併行,將同一行的n個單元格合成一個,把被合併了的單元格要刪去,否則格式錯亂
<th> </th>作用和<td></td>一樣,但是內建了樣式樣式加粗居中,適合用來作為表的第一行的條目說明
<thead></thead>、<tbody></tbody>、<tfoot></tfoot>分塊載入,使用者體驗好
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table> <!-- 最初的表格 -->
<caption> 四季表</caption>
<tr align="center">
<th> 春天</th> <th> 夏天</th> <th> 秋天</th> <th>冬天</th>
<tr>
<tr >
<td> 暖</td> <td> 熱</td><td> 涼</td><td> 冷</td>
</tr>
<tr> <td>毛衣 </td><td>T恤 </td><td>秋衣 </td><td>羽絨服 </td></tr>
</table>
<!-- 對錶格進行修飾 -->
<table border="1" align="center" bgcolor="yellow" width=50%>
<caption > 四季表</caption>
<tr align="center">
<th> 春天</th> <th> 夏天</th> <th> 秋天</th> <th>冬天</th>
<tr>
<tr align="justify">
<td> 暖</td> <td> 熱</td><td> 涼</td><td> 冷</td>
</tr>
<tr align="right"> <td>毛衣 </td><td>T恤 </td><td>秋衣 </td><td>羽絨服 </td></tr>
</table>
<!-- 合併單元格操作 -->
<table border="center" align="center" bgcolor="blue" width=60%>
<caption> 對四季表進行合併單元格操作</caption>
<tr> <th> 春天</th> <th> 夏天</th> <th> 秋天</th> <th>冬天</th> </tr>
<tr>
<td rowspan="2">暖 </td>
<td colspan="3">熱 </td>
</tr>
<tr>
<td> T恤</td><td> 毛衣</td><td>羽絨服 </td>
</tr>
</table>
</body>
</html>