Day3:網頁開發學習之路-標題、段落與項目列表

14th鐵人賽

claireyang

2022-09-03 10:50:10

1207 瀏覽

分享至

標題、段落

在 HTML 裡有六種標題元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 每個元素分別代表著在文件中的不同層級; <h1> 代表主標題, <h2> 代表副標題, <h3> 代表更次級的副標題, 依此類推。

標題元素中可以包含段落<p>，將要分段的文字放在<p>我是文字</p>裡面
如底下紅框就是段落的呈現

當網頁中有很多文字內容的時候就需要用到標題和段落，讓看的人可以更方便地閱讀
否則所有的文字都擠成一團時，誰想要去看一堆密密麻麻沒有重點的文字敘述
這樣的網站也會帶給人不好的體驗，所以要有好的排版，讓你的網頁看起來是有架構的

建立類似的文字結構時，有以下幾點可以留意

一個頁面最好只用一個 <h1> 元素：這是頂層標題，所有其他標題都位於層次結構的下方。
在使用標題元素的時候，要注意層級的順序。不要在<h2>前使用<h3>來標示副標題。
每次使用標題元素時，雖有六個層級可使用，但應該以使用少於三個層級為目標
過多層級的文件很難導航文件架構。有必要用到三個以上，可以考慮把文件內容劃分到多個頁面

項目列表

HTML 有三類型的列表清單：

無序的列表 (unordered lists) <ul>
有序的列表 (ordered lists) <ol>
定義的列表 (definition lists) <dl>

★無序列表 (unordered lists) <ul>, <li>
<ul> 標籤是用來表示一個沒有順序性的列表清單，<ul>作為列表的容器 (container)
而用來描述個別的項目內容。

    <ul>
      <li>html</li>
      <li>head</li>
      <li>body</li>
    </ul>

無序列表

★有序列表 (ordered lists)<ol>, <li>
<ol> 標籤是用來表示一個有順序性的列表清單，<ol> 作為列表的容器
而用 <li> 來描述個別的項目內容。

   <ol>
      <li>ul</li>
      <li>ol</li>
      <li>dl</li>
    </ol>

有序列表

★定義列表 (definition lists) <dl>, <dt>, <dd>
<dl>標籤是用來表示一系列的特殊名詞定義，<dl>作為列表的容器
而用 <dt> 和 <dd> 來描述個別的項目內容，其中 <dt> 用來表示被定義的名詞 (Definition Term)，<dd> 用來表示該名詞的說明解釋 (Description Detail)。

   <dl>
      <dt>html</dt>
      <dd>- HyperText Markup Language</dd>
      <dt>CSS</dt>
      <dd>- Cascading Style Sheets</dd>
    </dl>

定義列表

列表前的符號可以透過style來變更符號的樣式，舉例<ul>預設為disc，改為circle方式如下

<ul style="list-style-type: circle">

變更符號

其他樣式可以參考下表

list-style-type	樣式
none	沒有符號
decimal	1.蘋果 2.草莓
disc	• 黑點
circle	◦ 空心圓圈
square	▪ 實心方塊
upper-alpha	A.國文 B.英文
lower-alpha	a.國文 b.英文
upper-roman	I.大寫羅馬字 II. 大寫羅馬字
ower-roman	i. 小寫羅馬字 ii. 小寫羅馬字

以上的符號如果沒有喜歡的，也可以透過css style 加上自己喜歡的符號
先在<li>標籤中增加class

<li class="list">ul</li>

在標籤為class=list 的前面加上內容★

<style type="text/css">
    .list::before {content: "★";}
</style>

但因為原先有預設的符號，因此需要先將原本預設的符號改成沒有符號

<ol style="list-style-type:none">

完整的內容如下：

<head>
    <title ">網頁開發設計</title>
    <style type="text/css">
    .list::before {content: "★";}
    </style>
    
  </head>
  <body>
    <h1 style="color: blue" >自己設計喜歡的符號</h1>
    <ol style="list-style-type:none;padding: 1rem">
      <li class="list">ul</li>
      <li class="list">ol</li>
      <li class="list">dl</li>
    </ol>
  </body>
</html>

自訂符號