Web全栈~01.HTML基础元素
Web基本筆記~01.HTML基礎元素
一 : 標題
???????標題（Heading）是通過 < h1 >- < h6 > 標簽進行定義的。
???????< h1 > 定義最大的標題。 < h6 > 定義最小的標題。
<!DOCTYPE html> <html><head><title></title><meta charset="utf-8" /></head><body><h1>標題A</h1><h2>標題B</h2> <h3>標題C</h3> <h4>標題D</h4> <h5>標題E</h5> <h6>標題F</h6></body> </html>???????標題來呈現文檔結構是很重要的,因為用戶可以通過標題來快速瀏覽您的網頁。
???????將 h1 用作主標題，其后是 h2，再其次是 h3，以此 類推
二 : 段落
???????段落是通過 < p > 標簽定義的。如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 < br > 標簽
<p>這是一個段落 </p><!-- 這是一行注釋 --><br/><p>br標簽可以實現換行</p>三 : 水平線
???????< hr/ > 標簽在 HTML 頁面中創建水平線可用于分隔內容。
<hr color="" width="" size="" align=""/>??????? color：設置水平線的顏色
??????? width：設置水平線的長度
??????? size：設置水平線的高度
??????? align：設置水平線的對齊方式（默認居中），可取值 left | right
四 : 圖片
???????< img > 標簽定義 HTML 頁面中的圖像。
<img src="" alt="" title="" width="" height=""/>???????src：路徑（相對路徑、絕對路徑）
???????Alt：規定圖像的替代文本
???????Width：規定圖像的寬度
???????Height：規定圖像的高度
???????Title：鼠標懸停在圖片上給予提示
五 : 超鏈接
???????HTML 使用標簽 < a >來設置超文本鏈接。在標簽< a > 中使用了 href 屬性來描述鏈接的地址。
<a href="https://www.baidu.com/">跳轉到百度</a>六 : 文本格式化標簽
<body><b>粗體文本</b><em>著重文字</em><i>斜體字</i><small>小號字</small><strong>加重語句</strong><sub>下標字</sub><sup>上標字</sup><ins>插入字</ins><del>刪除字</del></body>七 : 列表
無序列表
???????無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表使用
- 標簽
???????type 擁有的選項
???????disc 默認實心圓
???????circle 空心圓
???????square 小方塊
???????none 不顯示
有序列表
<ol type="a"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol>???????< ol >< li >的屬性 type 擁有的選項
???????1 表示列表項目用數字標號（1,2,3...）
???????a 表示列表項目用小寫字母標號（a,b,c...）
???????A 表示列表項目用大寫字母標號（A,B,C...）
???????i 表示列表項目用小寫羅馬數字標號（i,ii,iii...）
???????I 表示列表項目用大寫羅馬數字標號（I,II,III...）
自定義列表
???????自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 < dl > 標簽開始。每個自定義列表項以 < dt > 開始。每個自定義列表項 的定義以 < dd > 開始。
<body><dl> <dt>animal</dt><dd>- is dog</dd> <dt>foot</dt> <dd>- i love apple</dd> </dl></body>八 : 表格
???????表格在數據展示方面非常簡單，并且表現優秀，通過與 CSS 的結合，可以讓數據變得 更加美觀和整齊。單元格中內容的填充間距通過 cellpadding(默認 1px)屬性來設置，單元格與單元格之間的間距通過 cellspacing(默認 1px)屬性來設置。一般表格的第一行是標題，并且是文本居中、加粗，將 td 換成 th。
<body><table border="1px" align="center" cellpadding="10" cellspacing="0"><tr align="center"><th>姓名</th><th>年齡</th><th>部門</th></tr><tr align="center"><td>菠蘿菠蘿蜜</td><td>21</td><td rowspan="2">行合并</td></tr><tr><td colspan="2">列合并</td></tr></table></body>總結
以上是生活随笔為你收集整理的Web全栈~01.HTML基础元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于RFID技术下的室内人员定位考勤系统
- 下一篇： 有没有前端小伙伴知道Cutterman为