在瀏覽器的世界，雖然很多元素的視覺效果可能很像，可是針對網站的每個不同內容下好的元素很重要。它會幫助瀏覽器讀取文檔，讓網路體驗更優化。
進到好想工作室traing之前，元素雖然會用，可是並沒有注意到它們的語意。雖然有些元素在瀏覽器上看起來都一樣，而且講到看起來的樣子，CSS指定樣式更可以做到一樣的效果，可是對瀏覽器的讀取來說就會有不同的意思。不能只管元素看起來怎樣，更要去知道元素的意涵，寫出對瀏覽器來說好懂的標籤，會讓它運行得更好。未來若要成為前端工程師，不能不去關心標籤的語意。
接下來的HTML元素筆記，除了元素的用法，也會盡量提到它們的語意，而有些元素並沒有特殊的語意。
那我們就開始囉！
昨天講了版本宣告、<head>裡引入的元數據，接著就在<body>裡輸入今天要練習的內容吧。
再用瀏覽器打開該HTML檔，就可以看到成果。
或是用codepen練習～點擊左上角的pen就會進入練習的頁面。
耶～好方便！
heading元素是用來裝標題用的。
heading元素除了作為文章的標題外(看起來比較大、字體粗、行高較高)，在元素的語意上，它們跟網頁中的關鍵字也有關係，會關乎到SEO(搜尋引擎優化)。heading有整個網頁的首要標題、次要標題、更次要標題的特性，<h1>是整個網頁中最重要的關鍵字，它最容易被搜尋引擎找到。舉例Mac的官方網頁，放入<h1>的就會是"mac"這個詞。
*SEO的影響因素很多，對網頁內容下好的語意標籤只是其中一個。
<h1>我是最大的標題</h1>
<h2>我是第二大的標題</h2>
<h3>我是第三大的標題</h3>
<h4>我是第四大的標題</h4>
<h5>我是第五大的標題</h5>
<h6>我是第六大的標題</h6>
paragraph元素是用來包一篇文章的每個段落。或是當你的網頁內容文字雖然很短不成段落，但又不想放入語意強的heading元素裡，也可以用<p>。
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio laborum enim nostrum ipsam aliquam doloremque, exercitationem asperiores assumenda earum? Sequi quia accusamus aut quam aspernatur dolorem vel ipsam excepturi consectetur.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, recusandae. Saepe natus iusto possimus, at repellendus sit sequi. Iusto esse commodi perspiciatis dolor cumque voluptatibus magnam culpa quisquam dolorum voluptas!
</p>
<em>我被em了</em>
<i>我被i了</i>
所以就元素的語意上，<em>元素更強調所包住的內容。另外眼尖的人也發現了吧？它們兩個都是inline元素，所以都在同一行。
<p>我是<strong>段落</strong>我是<b>段落</b>我是段落我是段落我是段落</p>
*基本上粗體或斜體樣式都可以在CSS指定，不太需要用到<b>或是<i>，除非有要強調某個內容，才用語意更多一層的<strong>和<em>。
<ul>
<li>香蕉</li>
<li>芭樂</li>
<li>蓮霧</li>
</ul>
<ol>
<li>香蕉</li>
<li>芭樂</li>
<li>蓮霧</li>
</ol>
<table>
<tr>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>Max</td>
<td>21</td>
</tr>
<tr>
<td>Lily</td>
<td>28</td>
</tr>
<tr>
<td>Bill</td>
<td>36</td>
</tr>
</table>
為了更清楚看出它是表格，偷偷套一下CSS樣式給大家看
以前的網頁結構很多都是用表格元素來做，像史萊姆的第一個家的網頁結構就是用<talbe>元素堆起來的。為了能夠區分表單內的資料身份，<table>相關元素相對複雜，而延伸出如<thead>、<tbody>、<tfoot>(表單的頭、身體、腳)，讓表單元素內的資料更具語意身份。
更多<table>元素的用法見mdn。
這兩個元素通常都被當容器使用，容器是中性的，沒有進一步的語意，但在切版時就很需要，像是要把<h1>跟<p>包起來給CSS套樣式時，就會需要用到容器元素。
<span>是inline元素。用法舉例：
<p>比起香蕉，我更愛<span>芭樂</span>喲！</p>
<div>是block元素。用法舉例：
<div>包住數個內容，再用CSS做樣式。
取代以往用<table>來切網頁的區塊，<div>做為容器元素在切版上，可以讓畫面的區塊更為靈活。而<div>作為網頁區塊的容器，並沒有特殊的語意，HTML5推出了新的語意化標籤，將會在之後介紹。
今天的筆記告一段落，明天見。
*\有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。
這兩個元素在效果上都是斜體。<em>元素元素原意是emphasis(意思是：重點、強調語氣)。<b>元素的原意是italicize(意思是：斜體的，只是樣式上顯示為斜體)。
所以就元素的語意上，<em>元素更強調所包住的內容。另外眼尖的人也發現了吧？它們兩個都是inline元素，所以都在同一行。
這一段有打錯唷
這段落是討論i，你打成b了唷~
iThome鐵人賽
看影片追技術