溫故而知新——html學習筆記

時間 2019-11-13

標籤溫故而知新 html 學習筆記欄目 HTML 简体版

原文原文鏈接

一、主體標籤：

<html>html

　　<head><title>網頁標題</title></head>編輯器

　　<body>網頁內容</body>字體

</html>spa

二、文本標籤：

加粗：htm

b（<b>內容</b>）僅加粗
strong（<strong>內容</strong>）加粗且表示語氣強烈

傾斜：圖片

i（<i>內容</i>）僅傾斜
em（<em>內容</em>）傾斜且表示語氣強烈

刪除線：ci

del（<del>內容</del>）
s（<s>內容</s>）

下劃線：it

u（<u>內容</u>）
ins（<ins>內容</ins>）

變大：io

big（<big>內容</big>）變大範圍115%

變小：table

small（<small>內容</small>）變大範圍85%

上標：

sup（<sup>內容</sup>）一元二次方程式ax²+bx+c=0

下標：

sub（<sub>內容</sub>）水分子H₂O

字體：

font（<font>內容</font>）
- 屬性：
  - 字體顏色 color="red"、color="#C330C5"
  - 字體大小 size="2"、取值（1~7）
  - 字體樣式 face="宋體"

三、HTML註釋：

語法：

四、標籤嵌套：

語法：必須有層次的嵌套，不能夠交叉嵌套

五、排版標籤：

默認排版方式：從上往下，從左往右，排不下會換行

【注】編輯器裏面敲的回車沒用，是沒法換行的

換行：

br（<br>或者<br />）單標籤

橫線：

hr（<hr>或者<hr />）單標籤
- 屬性：
  - 線條寬度 width="300"、單位px
  - 線條粗細 size="6"
  - 線條顏色 color="red"
  - 線條對齊 align="left"、默認center
  - 線條陰影 noshade

段落：

p（<p>內容</p>）p標籤、獨佔1行
- 屬性：
  - 對齊 align="left"、取值（left / center / right）、默認left

【注】塊元素能夠設置寬高、行內元素不能設置寬高

div和span：

div（<div>內容</div>）塊標籤、獨佔1行
span（<span>內容</span>）行內標籤、寬度是內容的寬

標題：

h1（<h1>內容</h1>）最大號
h2（<h2>內容</h2>）
h3（<h3>內容</h3>）
h4（<h4>內容</h4>）
h5（<h5>內容</h5>）
h6（<h6>內容</h6>）最小號
- 屬性：
  - 標題對齊 align="left"

六、列表標籤：

【注】有序、無序最好不要相互嵌套

有序列表：

ol、li（<ol><li>內容1</li><li>內容2</li></ol>）內容只能放在li中
- 屬性：
  - 序號樣式 type="a"、取值（1 / a / A / i / I / none）、默認是「1」
  - 起始位置 start="3"、從3開始排列

無序列表：

ul、li（<ul><li>內容1</li><li>內容2</li></ul>）
- 屬性：
  - 序號樣式 type="disc"、取值（disc / circle / square）、默認「disc」

【注】定義列表通常不會用於嵌套

定義列表：

dl>dt,dd（<dl><dt>標題</dt><dd>標題的說明</dd></dl>）
- dl 定義列表標籤
- dt 定義標題
- dd 定義說明

七、圖片標籤：

圖片：

img（<img src="picture.jpg" />）
- 屬性：
  - 地址路徑：src="絕對路徑 / 相對路徑"、必有屬性
  - 圖片寬度：width="100"
  - 圖片高度：height="100"

八、連接標籤：

連接：

a（<a href="URL">內容</a>）
- 屬性：
  - 地址路徑：src="絕對路徑 / 相對路徑"

九、表格標籤：

【注】table，tr，td是嚴格的嵌套關係，只能按照此層次出現

表格：

table>tr>th,td
- table 表示表格總體，有多個經常使用屬性
- tr 表示行，基本沒有什麼屬性
- td 表示列（單元格），有多個經常使用屬性
table標籤經常使用屬性

屬性名	含義	經常使用屬性值
border	設置表格的邊框寬度	像素值（默認爲0）
cellspacing	設置單元格與單元格邊框之間的空白間距寬度	像素值（默認爲2px）
cellpadding	設置單元格內容與邊框線之間的空白間距寬度	像素值（默認爲1px）
width	設置表格的寬度	像素值
height	設置表格的高度	像素值
align	設置表格在網頁中的水平對齊方式	left / center / right
bgcolor	設置表格的總體背景顏色
background	設置表格的總體背景圖	背景圖優先於背景色
bordercolor	設置表格的邊框線顏色

tr標籤經常使用屬性：

屬性名	含義	經常使用屬性值
bgcolor	設置行的總體背景顏色
background	設置行的總體背景圖
height	設置行的高度
align	設置單元格內容在行中的水平對齊方式	left / center / right
valign	設置單元格內容在行中的垂直對齊方式	top / middle / bottom

td標籤經常使用屬性：

屬性名	含義	經常使用屬性值
width	設置單元格的寬度	像素值
height	設置單元格的高度	像素值
align	設置單元格中內容的水平對齊方式	left / center / right
valign	設置單元格中內容的垂直對齊方式	top / middle / bottom
rowspan	設置要跨行（縱向）合併的單元格數	要合併的數量，合併誰就把誰刪掉
colspan	設置要跨列（橫向）合併的單元格數	要合併的數量，合併誰就把誰刪掉
bgcolor	設置單元格的背景顏色
background	設置單元格的背景圖

【注】

thead，tbody，tfoot用於對錶格的tr（行）進行分組，此時thead組在表格頭部，tfoot組在表格底部。

這3個標籤出現的推薦順序是：thead，tfoot，tbody，在它們內部再寫tr。

thead，tfoot應該只出現1次，tbody能夠出現屢次。

全部沒有明確歸屬到上述3個標籤的tr（行），都默認歸屬到tbody。

表格高級：

caption（<caption>表格標題</caption>）
- 用於表示一個表格的「標題文字」（看起來在表格的外面），其實卸載table標籤中
thead
- 用於表示一個表格的「頭部區域」，其中能夠包含着若干個tr（行），tr中天然應該有td（或th）
- 寫在table標籤中，tr外，即這樣的層次：table>thead>tr
tbody
- 用於表示一個表格的「主體區域」，其中能夠包含着若干個tr（行），tr中天然應該有td（或th）
- 寫在table標籤中，tr外，即這樣的層次：table>tbody>tr
tfoot
- 用於表示一個表格的「底部區域」，其中能夠包含着若干個tr（行），tr中天然應該有td（或th）
- 寫在table標籤中，tr外，即這樣的層次：table>tfoot>tr