1. 首頁 > 生活百科 > >

1 HTML元素大全

生活百科HTML元素大全(1)


1 HTML元素大全

文章插圖
01、基礎元素<h1/2/3/4/5/6>標題從大h1到小h6，塊元素，有6級標題 。是一種標題類語義標簽，內置了字體、邊距樣式 。
  • 合理使用h標簽，主要用于標題，不要為了加粗效果而隨意使用 。
  • h1用于最重要的標題內容，會被搜索引擎使用，用得太多影響SEO效果 。
<h1 align="center">標題標簽h1/2/3/4/5/6：一級標題</h1><h2>2級標題</h2><h3>3級標題</h3><h4>4級標題</h4><h5>5級標題</h5><h6>6級標題</h6>屬性描述值align標題的水平對齊方式left、center、right<p>段落元素段落元素<p>內容</p>（**paragraph **/?p?r?ɡrɑ?f/ 段落、分段）塊元素，表示一個內容段落，前后自動換行，段落之間會有間隙（默認margin上、下=1em） ， 比<br>的行間距更大 。
<p align="left">段落文字1</p><p align="center">段落文字2<br/>012</p>普通文字1，用br換行<br>普通文字1
1 HTML元素大全

文章插圖
<br>換行換行元素（Break）：<br>，單標簽，默認行間距 。HTML中不識別輸入的回車換行 ， 需用<br>標簽換行 。
<hr>水平線水平線元素：<hr>，單標簽，有顏色color、長度width、粗細size、對齊align等屬性，CSS中可用border設置樣式 。
<br><hr width="80%" color="green" align="left" size=1 /><hr width="80%" color="green"/><hr width="300px" color="red" size="3" />
1 HTML元素大全

文章插圖
屬性描述值color線顏色顏色width寬度像素、百分比size線粗細整數，像素align水平對齊方式，left、center、right<ul-li/ol-li>列表標簽列表都是塊元素，li中可以放任何東西，常用來組織列表相關內容，如商品列表、樹形結構、導航等 。
  • 無序列表<ul><li></li></ul>：unordered list，li為列表項，屬性type可定義符號樣式，默認disc（實心圓） 。
  • 有序列表<ol><li></li></ol>：ordered list，li為列表項，屬性type可定義排序樣式，默認1（數字） 。
屬性描述值/示例type序號類型無序列表：disc=實心圓、square=方塊、circle=空心圓有序列表：1=數字、a/A=字母、i/I=阿拉伯數字start有序列表：序號開始的值，默認1<ol type="1" start="4">reversed有序列表：倒序排列<ol type="1" reversed ><li>的屬性value有序列表：設置序號值，會影響后面<li type="I" value="https://www.huyubaike.com/biancheng/5"><ul type="disc"><!-- type可定義符號樣式，默認disc=實心圓 ， 可自定義樣式取代--><li type="square">l1<!--square=方塊--><ul><li>l1的嵌套子節點</li></ul></li><li type="circle">l2</li><!--circle=空心圓--><li>l3</li></ul><ol type="1"><!-- type可定義排序樣式，默認1=數字--><li type="a">l1</li><!-- a=小寫字母排序--><li type="A">l2</li><!-- A=大寫字母排序--><li type="i">l3</li><!-- i=小寫阿拉伯字母排序--><li type="I">l4</li><!-- I=大寫阿拉伯字母排序--><li>l5</li></ol>
1 HTML元素大全

文章插圖
  • 無序標簽、有序標簽可以多層（相互）嵌套 。
  • 列表項中的內容可以是文本 ， 也可以是其他標簽，如圖片img、a標簽 。
  • 使用場景：新聞列表，導航按鈕 。
  • list-style-type：在css中設置列表符號樣式，如ul li{list-style-type:disc} ``ol li{}，枚舉值-菜鳥教程 。
    • disc、circle...：實心、空心符號
    • decimal...：數字
??快捷鍵（VSCode）：標簽名*數量>子標簽名*數量，快速輸入多組父子標簽，加大括號則為標簽中內容 。ul>li*3：快速輸入ul標簽+3組子li標簽 。
<dl/dt/dd>語義化描述列表作用同

推薦閱讀