search

enter3017sky / mentor-program-2nd-blog

MTR02 學習紀錄
1 stars 2 forks source link

[筆記][FE101]HTML #18

Open enter3017sky opened 6 years ago

enter3017sky commented 6 years ago

FE101

HTML => 瀏覽器(渲染) => 畫面

<!DOCUMENT html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--  
        <meta> 裡面沒有內容 所以是一個自閉合標籤(self-closing)
        屬性: charset  
        值(value): utf-8 
        -->
        <title>網頁的標題</title>
    </head>
    <body>
    </body>
</html>

別忘了 HTML 最早存在的意義：h1~h6、p

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p></p>

很常見的標籤：div 與 span

顯示圖片就靠它：img

顯示清單：ul、ol 與 li

保留完整格式：pre

表格必備標籤：table、th、tr 與 td

<table>: 表格 <tr>: table row <td>: table cell <th>: table header 看起來會是粗體

<table>
    <tr>
        <th>姓名</th>
        <th>國文分數</th>
        <th>英文分數</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>70</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小花</td>
        <td>89</td>
        <td>65</td>
    </tr>
</table>

帶我走，到遙遠的以後：a


點擊<a>跳到 p3 地方
<a href="#p3">Take me to p3</a>
<h1 id="p1">test</h1>
...
...
...
<h1 id="p3">test</h1>

語意化的 UI 標籤：main、nav、footer 等等

Semantic elements: 語義化元素

W3c HTML5 Semantic Elements 語義 - MDN Web Docs術語表：Web相關術語的定義| MDN

直接用別人的網頁：iframe

表單相關標籤：form、input、textarea

<form>
    <div>
    姓名：<input type="text" />
    </div>
    <div>
    密碼：<input type="password" />
    </div>
    <div>
        <input type="submit" value="送出表單" />
    </div>
</form>
<div>
    生理性別：<input type="radio" name="gender" id="male" /><label for="male">男性</label> 
    <input type="radio" name="gender" id="female" /><label for="female">女性</label>
    <input type="radio" name="gender" id="other" /><label for="other">其他</label>
</div>
<div>
    興趣：<input type="checkbox" id="sports" /><label for="sports">運動</label>
    <input type="checkbox" id="readind" /><label for="readind">閱讀</label>
    <input type="checkbox" id="print" /><label for="print">畫畫</label>
</div>

\: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

SEO 與相關標籤：meta tag

Search Engine Optimization: 搜尋引擎優化 告訴搜尋引擎你的網也是是什麼 幫助搜尋引擎理解你的網頁

<meta property="og:title">
<meta property="og:image" content="https://image....jpg" />
<meta property="og:description" content="客觀公正美食評論，在....">
<meta name="keyword" content="食物, 用餐, 評論" />
<meta name="description" content="客觀公正美食評論，在...">
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "FoodEstablishment"
    ...
    ...
}

Escape：該怎麼顯示標籤？

Escape: 跳脫字元

& => &amp;
< => &lt;
> => &gt;