回上頁 - 網頁HTML+CSS語法

002、HTML網頁語法 - 常用文字標籤

你會學到 <p>、<br>、<hr>、<b>、<i>、<u>、<span>、<h1>...<h6>

1、HTML常用文字標籤

開啟新檔案：002.html來練習

記得網頁語法內容要寫在<body>標籤裡面，內容是由上而下解讀出來的


<body>

這是網頁語法課程

</body>

<p>標籤，是段落標籤，也就是一段文字範圍，上下會有間距


<body>

<p>這是網頁語法課程，我能學到很多做出網頁的標籤語法。</p>
<p style="color:green;">這是網頁語法課程，我能學到很多做出網頁的標籤語法。</p>

</body>



<body>

<p>這是網頁<br>語法課程，<br>我能學到<br>很多做出網頁<br>的標籤語法。</p>

</body>



<b>主題名稱</b>
<hr>
<p>內文：我們可以學到網頁畫面製作和設計，其中有學到HTML語法、CSS語法和JQuery程式語言</p>



<b>主題名稱</b>
<hr>
<p>內文：我們可以學到<b><u>網頁畫面</u>製作和設計</b>，其中有學到<i>HTML語法、CSS語法和JQuery</i>程式語言</p>

2、設定文字的字型、大小和顏色，要使用CSS語法

要設定文字大小和顏色，就要使用到CSS語法

在你要設定的標籤中，個別設定它的style屬性值

在標籤中寫上屬性：寫法 style="屬性 :值；"

在標籤中設定文字顏色為藍色：style=" color: blue; "

1、文字顏色：color: blue;

2、文字大小：font-size: 60px;

3、文字字型：font-family: '微軟正黑體';

寫法：我們在<p>標籤中加上幾個CSS屬性，並設定它的值

寫法：style="" 


範例：設定文字顏色為藍色，屬性名稱為color，屬性值為blue，使用冒號隔開，使用分號結尾

<p style="color:blue;">我們可以學到網頁畫面製作和設計，其中有學到HTML語法、CSS語法和JQuery程式語言</p>



範例：設定文字大小 font-size 為60像素大小，也可以用1rem，這個單位代表一個文字大小預設值，1.5rem、2rem、3rem...

<p style="color:blue; font-size:60px;">
我們可以學到網頁畫面製作和設計，其中有學到HTML語法、CSS語法和JQuery程式語言
</p>



範例：設定文字字體 font-family 為微軟正黑體

<p style="color:blue; font-size:60px; font-family:'微軟正黑體';">
我們可以學到網頁畫面製作和設計，其中有學到HTML語法、CSS語法和JQuery程式語言
</p>



範例：設定段落<p> 背景顏色 background-color 為黃色 yellow

<p style="color:blue; font-size:60px; font-family:'微軟正黑體'; background-color:yellow;">
我們可以學到網頁畫面製作和設計，其中有學到HTML語法、CSS語法和JQuery程式語言
</p>

3、標題字：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>


範例：設定文字顏色為藍色，屬性名稱為color，屬性值為blue，使用冒號隔開，使用分號結尾

<p style="color:blue;">我們可以學到網頁畫面製作和設計，其中有學到HTML語法、CSS語法和JQuery程式語言</p>

4、設定部份文字：用<span> 標籤


<p>我們可以學到網頁畫面製作和設計，其中有學到
    <span style="color:blue; font-size:30px; background-color:yellow;">HTML語法</span>
    、CSS語法和JQuery程式語言
</p>

5、註解：自己用來寫解釋或筆記用，HTML會略過不解讀


<!-- 我們可以學到網頁畫面製作和設計，其中有學到HTML語法、CSS語法和JQuery程式語言 -->

<!-- 
    我們可以學到網頁畫面製作和設計，
    其中有學到HTML語法、
    CSS語法和JQuery程式語言
-->
shape
shape