[ 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
<li> list item


<pre> preformatted twxt
<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
  • 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

程式心情雜記 10 月 15 日

程式心情雜記 10 月 15 日

Android 時間格式轉換筆記

Android 時間格式轉換筆記

我的第一堂 - JavaScript 02 變數, 判斷式

我的第一堂 - JavaScript 02 變數, 判斷式


Comments