(HyperText Markup Language)

HTML 主要架構

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
</body>

</html>

<!DOCTYPE html> 聲明這是一份採用 HTML5 語法標準的文件
<html lang="en" dir="ltr"> </html> 聲明以下是 HTML 語法
<head> </head>: 放置關於該網頁的元資訊 metadata
<body> </body>: 放置顯示在頁面上的內容資訊
<title> </title>: 網頁標題，會顯示在分頁標籤上

<meta charset="utf-8">: 用來備註給電腦讀取的資訊

<meta> 可放置資訊範例
(1) 網站搜尋時的描述: <meta name="description" content="描述">
(2) 易搜尋的關鍵字: <meta name="keywords" content="關鍵字">
(3) 出版者資訊: <meta name="author" content="出版資訊">
(4) 版權歸屬: <meta name="copyright" content="版權歸屬">
(5) 發布地區: <meta name="distribution" content="發佈所在地區">
(6) 解碼語法: <meta charset="utf-8">

HTML - 標籤 tag & 屬性 attribute

雙標籤 < start tag > + content + < end tag >

01. Head 標題

<h1> It's HTML heading tag in h1</h1>
<h2> It's HTML heading tag in h1</h2>
<h3> It's HTML heading tag in h1</h3>
<h4> It's HTML heading tag in h1</h4>
<h5> It's HTML heading tag in h1</h5>
<h6> It's HTML heading tag in h1</h6>

02. Paragraph 段落

<p> Hello! My name is Penny.</p>

03. Ordered List / Unordered List 項目清單

<!-- Ordered List -->
<ol type="a">
    <li> a.first item </li>
    <li> b.second item </li>
</ol>

<ol type="i">
    <li> i.first item </li>
    <li> ii.second item </li>
</ol>

<ol start="7">
    <li> 7.first item </li>
    <li> 8.second item </li>
</ol>


<!-- Unordered List -->
<ul>
    <li> first item </li>
    <ul>
        <li> first item first subitem </li>
        <li> first item second subitem </li>
    </ul>
    <li> second item </li>
</ul>

04. Image Elements 插入圖片

<img src="my_profile.img" alt="keyword for img">

<!-- src=圖片來源source -->
<!-- alt=圖片替代文字alternate text 圖片無法顯示時顯示，也會增加SEO搜尋 -->
<!-- title=圖片標題title  -->
<!-- with=圖片寬度像素width 滑鼠滑過圖片時自動顯示-->
<!-- heigh=圖片高度像素heigh-->

05. HTML Links and Anchor Tags 插入連結

<!-- 文字連結-->
<a href="https://www.youtube.com/">This link connect to YouTube</a>

<!-- 圖片連結-->
<a href="image_info.html" target="_blank">
  <img src="image.img">
</a>


<!-- href=URL連結-->
<!-- target=打開連結的位置 ex._self(預設值，當前視窗)_blank:(新視窗)-->

06. Tables 插入表格

<table cellspacing=10>
    <thead> <!--會自動變成粗體字 -->
        <tr>
            <th> Title of first column </th>
            <th> Title of second column </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> Here is row1 column1 </td>
            <td> Here is row1 column2 </td>
    </tr>
    <tr>
            <td> Here is row2 column1 </td>
            <td> Here is row2 column2 </td>
        </tr>
    </tbody>
</table>

<!-- cellspacing=資料的間距 -->

05. Form 插入表單
all the input elements

<form action="indext.html" method="" enctype="text/plain">
    <label>User Name: </label>
    <input type="text" name="username" value=""><br>
    <label>Password: </label>
    <input type="password" name="password" value="">
    <input type="submit">
</form>


<label for="name">There are many wedget you can use:</label>

<input type="text" value="key some word">
<input type="button" value="button">
<input type="checkbox">
<input type="date">
<input type="email" >
<input type="file">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">

06. 排版工具

置中顯示

<certer> Something you want align center</center>

文字標註

<!-- 斜體字 -->
<em> emphasis 另有強調語意，可加強SEO搜尋 </em>
<i> italic 單純斜體字 </i>

<!-- 粗體字 -->
<strong> strong 另有強調語意，可加強SEO搜尋 </strong>
<b> bold 單純粗體字 </b>

單標籤 < self-closing tag >

換行

<br>

分隔線

<hr size ='1' noshade>

備註

<!-- Something notice yourself -->

HTML 語法架構 & 常用語法

HTML 主要架構

HTML - 標籤 tag & 屬性 attribute

雙標籤 < start tag > + content + < end tag >

單標籤 < self-closing tag >

pei_______

Related Posts

Comments

HTML 主要架構

HTML - 標籤 tag & 屬性 attribute

雙標籤 < start tag > + content + < end tag >

單標籤 < self-closing tag >

pei_______

Related Posts

你今天註冊了嗎？用後端好朋友 express 跟 middleware 們做一個簡單的會員註冊系統

[FE102] 前端必備：JavaScript (下)

[11] 型別 - undefined、undeclared、依存注入

Comments