[ HTML ] 常用標籤


Posted by tzutzu858 on 2020-07-25

超文本標記語言(HyperText Markup Language)


最最最基本的組成 <!DOCTYPE HTML>

DOCTYPE其實是Document Type的簡寫,也就是文件類型的意思。
這是在跟瀏覽器講說我要用最新最標準的格式,瀏覽器就會知道這份文件內容是 HTML 標記語言撰寫的,所以我必須用我的 HTML 翻譯器來解讀。也是可以不加,但不加可能會有些 bug ,渲染出來的樣子跟你想的可能不太一樣,因為瀏覽器很多種,HTML 格式也很多種。
絕對會出現的標籤 : html、head 與 body,標籤出現都是成雙成對,<html><html/>

好用工具 :


<h1> Heading
<p> paragraph


<div> division 大分組
<span> 小分組
這兩個標籤比較像在 HTML 分組的感覺
span和div功能區別

span和div區別在於,div是一個塊級元素,它包含的元素會自動換行。而span是行內元素,在它的前後不會換行。span沒有結構上的意義,只是單純的應用樣式,其他元素不適合時,就可以使用span元素。span可以作為div的子元素,但div不能是span的子元素,如果出現span中出現div不符合ws3c的頁面標準。


<img> 屬性有

  • url : 用 "" 包起來代表字串
  • title : 滑鼠移上的顯示文字
  • alt : alternative 替代,當圖片沒辦法顯示出來,就用文字替代

顯示清單
<ul> unordered list 沒有排序,前面是出現小黑點
<ol> ordered list 有排序,1,2,3...

<li> list item


<pre> preformatted text
<br> line break


<table> 表格
<tr> table row (橫向)由上往下排
<td> table cell
<th> table header 表格的標題


<a> anchor 錨點 ,連到網頁外面的位置或網頁裡面的位置
屬性:

  • href : hypertext reference 連到網頁外面的位置
  • target=_self : 從自己頁面連到網址
  • target=_blank : 開新分頁連網址

<a href="?#p1"></a> 連到網頁裡面的位置
<h1 id="p1"></h1>


UI 語意化的標籤
Semantic elements 語意化元素
<main>
<nav> navigation 導覽列
<footer>

MDN Semantics:https://developer.mozilla.org/en-US/docs/Glossary/Semantics
New Semantic Elements in HTML5:https://www.w3schools.com/html/html5_semantic_elements.asp


直接用別人網頁 iframe 嵌入網頁
<iframe src="https://www.google.com width="100%" />
但有時會鎖,像是 google 就會鎖,

Refused to display 'https://www.google.com/' in a frame index.html:1
because it set 'X-Frame-Options' to 'sameorigin'.

伺服器可以設定X-Frame-Options,防止別人或不信任的網站用 iframe 存取你的網頁


表單相關標籤
<form>
屬性有:

  • <input> 輸入框
  • text <input type="text"/> <input type="submit" value="送出表單"/>
  • password
  • email
  • date
  • radio
    使用者體驗比較好是要用 <label>
    radio 只能選原點裡面比較麻煩,設計時如果要連文字按的時候也被選到,就把文字用<label>包起來,並在前面的 <input> 標籤裡面加上 id ,並在 <label> 裡面加上 for
生理性別 : <input id="male"/><label for="male">男性</label>
  • checkbox

更多 input 種類:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input


SEO
search engine optimization 搜尋引擎最佳化
幫助搜尋引擎理解你的網頁,那要怎麼幫助呢 ? 可以使用下列這些

  1. <meta> keywords, description

  2. og
    Open Graph Protocol

  3. JSON-ld
    JSON for Linking Data

  4. robots.txt
    給網頁爬蟲看的檔案
    通常放在根目錄底下,就可以打開

  5. Sitemap.xml
    網站爬好有很多連結,要怎麼告訴搜尋引擎它需要爬那些連結

  6. 其他
    <link rel="alternate".....> 告訴搜尋引擎我有不同語言的網址,中文網站,英文網站,避免搜尋引擎分散掉
    <meta property= al:ios:app_store_id".......> 我這個網頁有app

Google Search Console 可以看出曝光度,關鍵字是什麼連到我的網頁


Escape:該怎麼顯示標籤?
Escape 跳脫
& => &amp
< => &lt
> => &gt










Related Posts

HTTP 常用 method

HTTP 常用 method

hit the road (final project) 雜七雜八心得

hit the road (final project) 雜七雜八心得

進階 React Component Patterns 筆記(下)

進階 React Component Patterns 筆記(下)


Comments