Day5 HTML 语法简易介绍(二)

常见的 HTML elements

标题 headings

在 VS code 中输入以下程序码

<h1> HTML标题范例 </h1>
<h2> HTML标题范例 </h2>
<h3> HTML标题范例 </h3>
<h4> HTML标题范例 </h4>
<h5> HTML标题范例 </h5>
<h6> HTML标题范例 </h6>

程序执行後会显示出

可以使用的标题有6层，这些标题组合成网页内容大纲，当搜寻引擎找到你的网页时，会依照标题来认识内容，因而判断相关性。

段落标签 paragraphs / 换行标签(tag)

段落标签就如标题所示，主要功用是分段，而换行标签则是用来换行的
在平常记事本或word中想换行直接按Enter就可以达成目标
但写网页是没用的ㄛ!他只会在程序撰写区换行，但实际网页打开却没有换行
这时候就需要用到段落标签和换行标签了

在 VS code 中输入以下程序码

<h1> HTML标题 </h1>
<p> HTML段落范例 </p>
<br>
<p> HTML段落范例2 </p>

程序执行後会显示出

像这样就可以达成我们想看到的效果了!

清单 list

清单分为两种，项目符号的清单或有数字顺序的清单。

• 无顺序的项目符号清单

在 VS code 中输入以下程序码

<h2>清单 Lists</h2>

<p>这是没有顺序的项目符号清单</p>

<ul><!-- unordered list --></ul>
<li>没有顺序的清单范例</li>
<li>以 ul 元来定义清单的范围</li>
<li>用 li 标示各别项目</li>

程序执行後会显示出

• 有顺序的清单

在 VS code 中输入以下程序码

<p>这是有数字顺序的清单</p>

<ol><!-- ordered list --></ol>
<li>有顺序的清单范例</li>
<li>以 ol 元来定义清单的范围</li>
<li>用 li 标示各别项目</li>

程序执行後会显示出

注意li元素必然被放在ul或ol的下一层，这是Mozilla Developer Network(MDN)所制定的标准。
清单的巢状特性，特别适合被改造成网站的导览选单。

强调用法：斜体 (emphasis)/粗体 (strong)

在 HTML 我们一般会用两种方法来强调需要强调的内容

Emphasis (斜体)： 	<i>文字</i>
Strong (粗体)： 	<b>文字</b>

例如我们在 VS code 中输入以下程序码

<h2>斜体/粗体范例</h2>

<i>斜体字范例</i>
<br>
<b>粗体字范例</b>

程序执行後会显示出

水平线 (horizontal rules)

在 VS code 中输入以下程序码

<p>以下是水平线范例</p>
<hr>
<p>以上是水平线范例</p>

程序执行後会显示出

水平线的预设是一条横线，开始使用CSS後，就可以加上更多外观上的改造ㄛ!