02. html知識總結
阿新 • • 發佈：2021-08-09
html知識總結
1. html文件結構
註釋 <!--註釋-->
<html>
<head></head>：都不是給使用者看的 主要是給瀏覽器看的一些配置資訊
<body></body>：body書寫的所有的內容 都是給使用者看的
</html>
1.1 head內常用標籤
title 定義網頁標題資訊
style 內部支援直接書寫css程式碼
link 引入外部css檔案
script 內部可以書寫js程式碼並且也可以引入外部js檔案
meta 定義網頁源資訊
1.2 body內常用標籤
1.2.1 標題標籤
<h1>這是一個標題。</h1>
<h2>這是一個標題。</h2>
<h3>這是一個標題。</h3>
1.2.2 水平分割線
<p>這是一個段落。</p>
<hr>
<p>這是一個段落。</p>
1.2.3 段落標籤
注意： 如果在不產生一個新段落的情況下進行換行（新行），請使用
標籤
<p>這個<br>段落<br>演示了分行的效果</p>
1.2.4 超連結標籤
<a href='' target=''></a> href 1.可以放一個url點選自動跳轉 2.還可以放其他標籤的id值 錨點功能 target 控制是否在當前頁跳轉 _self _blank
1.2.5 圖片標籤
<img src='' alt='' title='' height='' width=''/>
src
1.可以放圖片的路徑 本地或者線上
2.還可以放一個url 會自動朝該url提交get請求獲取圖片資料展示
alt
圖片載入不出來的時候 展示的提示資訊
title
滑鼠懸浮在圖片上之後展示的提醒資訊
height、width
單獨調整某一個 另外一個會自動等比例縮放
如果兩個都調整了 可能會出現圖片的失真
1.2.6 表格標籤
注意：table定義表格， tr表示行， td表示一個數據單元格，資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等
<!--第一種-->
<table border="2">
<tr>
<td>row 1, cell 1</td> <!-- 第一行，第一列（第一格）-->
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<!--第二種-->
<table>
<thead>
<tr> 一個tr就表示一行
<th>username</th> 加粗文字
<td>username</td> 正常文字
</tr>
</thead> 表頭(欄位資訊)
<tbody>
<tr>
<td>wesley</td>
<td>123456</td>
<td>playgame</td>
</tr>
</tbody> 表單(資料資訊)
</table>
1.2.7 列表標籤
<!--無序列表-->
<ul>
<li>cat</li>
<li>dog</li>
</ul>
<!--有序列表-->
<ol>
<li>cat</li>
<li>dog</li>
</ol>
1.2.8 表單標籤
- 因內容較為重要且比較多，寫去另一部落格點這裡
1.3 標籤分類
"""
分類1:
雙標籤
<h1></h1>
單標籤
<img/>
分類2:
塊兒級標籤:獨佔一行 可以設定長寬
div p
注意：塊兒級標籤內部可以巢狀任意的行內標籤和塊兒級標籤
但是p標籤只能巢狀行內標籤
行內標籤:自身文字多大就佔多大 不能設定長寬
span a img
PS：上述的規定只是HTML書寫規範 如果你不遵循 不會報錯,瀏覽器會自動幫你解除巢狀關係
"""
1.4 特殊字元
空格
大於 >
小於 <
&
®
©
¥