HTML 基礎


Posted by cwc329 on 2020-07-11

<!DOCTYPE HTML>

告訴瀏覽器,用最新的 HTML 語法渲染。

註解形式

<!--
content
-->

哪裡都可以用

標籤三本柱

<html></html> 宣告網頁
<head></head> 放一些基本資訊
<body></body> 內容本體
大概長這樣

<html>
  <head>
    head 內容
  </head>
  <body>
    body 內容
  </body>
</html>

<head></head> 的內容

<meta <attribute>=<value> />
meta 是自己成對的標籤,只要一個就可以,裡面的斜線可加可不加。

<title> title </title>
網頁的標題

SEO

Search Engine Optimization
搜尋引擎優化。
網頁主動告訴搜尋引擎網頁資訊。

<meta>
告訴搜尋引擎這個網頁的資訊。

<meta name="keywords" content="">
<meta property="OG:title" content="">

屬性:

  1. name:

    • keywords: 關鍵字。
    • deccription: 網頁敘述。
  2. property:

    • OG: open graph protocol。一種格式化的資料。FB 會抓這個。
    • OG:title
    • OG:image
    • etc
    • al: 給不同裝置或者不同 app 的使用者特殊訊息,例如在網頁版跳出訊息說有手機版 app 可以下載。

JSON-ld
格式化的 JSON 資料。

Robots.txt
給爬蟲看的文件。

  • allow: 可以看的。
  • disallow: 不可以看的。
  • sitemap: 網頁地圖。

<link> 別的連結

<link rel="alternate" hreflang="zh-tw" href="url" />

告訴搜尋引擎標籤裡的連結是這個網頁另一種語言的版本。


<body></body> 的內容

<h1></h1><h6></h6>
內文的的標題。

<p></p>
內文的段落。

<div></div>
基本上不會有視覺變動,可以把東西包起來,把裡面的東西都變成一組。
使用後會換行,通常包住標籤。

<div>
  <h1></h1>
  <p id="p1"></p>
</div>

<span></span>
也是把包起來的東西分組,通常用在內文中,把特定字包起來。

<p>I am a <span>pencil</span></p>

<img />
自成一對的標籤,放圖片用的標籤,通常這樣用:

<img alt="message" title= "title" src="url" />

屬性:

  • alt: 顯示失敗的訊息。
  • title: 圖片的標題。
  • src: 圖片的來源(網址)。

<pre></pre> preformated
html 有預設的顯示格式,用

會直接輸出預設格式,如果要顯示自己打的格式,就用這個標籤包起內容,內容在 html 文件中如何顯示,在網站上就如何顯示。

<br /> or <br> 換行
加在預設格式內文中,可以直接換行。"/" 可加可不加。

escape 跳脫
把標籤的符號替代掉,讓內文顯示標籤文字。不然瀏覽器會將其視作標籤渲染。

symbol replacement
& \&
< \<
> \>

<a></a> anchor 錨點
可以帶使用者到指定位置。

<a herf="" target="">

屬性:

  • herf: 要去的地方。
    • "url": 外部連結,連到外面。
    • "#id": 網頁內部標籤,跳到該標籤。
  • target: 要開在原本頁面("_self")還是新分頁("blank")。
    • "_self": 在本頁面開啟。
    • "blank": 在新分頁開啟。

<iframe></ifram> 嵌入別的網頁

<iframe src="" width="" height="">

屬性:

  • src: 網頁來源。

通常大網站都會黨這個標籤,實用性不大。

清單、列表

<ul></ul><ol></ol> and <li></li>

  • ul: unordered list
  • ol: ordered list
  • li: list item

ex:
code

<ol>  
    <li>item1</li>  
    <li>item2</li>   
</ol>

display

  1. item1
  2. item2

表格

<table></table>
<th></th> table header
<tr></tr> table row
<td></td> table cell
ex:
code

<table>
<tr>
    <th> name </th>
    <th> math grade </th>
    <th> physic grade </th>
</tr>
<tr>
    <td> Philip </td>
    <td> B- </td>
    <td> C+ </td>
</tr>
</table>

display

name math grade physic grade
Philip B- C+


語意化標籤

有數個,可以從標籤名看出這些標籤的主要功能。課程列出三個。

<main></main>
用來包住重要的元素。

<nav></nav>
navigation bar 導覽列

<footer></footer>
網頁最下面,通常是一些版權與版本資訊。


<form></form> 表單

<form>
  <div>
    姓名<input type="text" />
  </div>
  <div>
    密碼<input type="password" />
  </div>    <div>
    e-mail<input type="email" />
  </div>  <div>
    生日<input type="date" />
  </div>
  <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="food"><label for="food">美食</label>
  </div>
  <div>
    送出表單<input type="submit">
  </div>
</form>
姓名
密碼
e-mail
生日
性別男性 女性 其他
興趣運動 美食
送出表單

<input />通常用<div></div>包起來可以達到分行的效果。

屬性:

  • type:
    • text: 一般文字。
    • password: 輸入內容變為不可視。
    • email: 電子郵件,有些瀏覽器支援檢查格式。
    • date: 日期。
    • radio: 單選。
    • checkbox: 多選。
    • submit: 送出表單。


#html #基礎 #Basic







Related Posts

Command Line

Command Line

Day 71

Day 71

每日心得筆記 2020-07-02(四)

每日心得筆記 2020-07-02(四)


Comments