學會 HTML & CSS (關於 HTML 的部份)


Posted by Nicolakacha on 2020-09-06

會花兩邊文章來介紹 HTML 和 CSS 基礎,內容比較細,初學者可以參考,但不要看著筆記死記,靠實作切版才能夠真的記住和活用~

HTML 結構

<html>
    <head>
        <meta charset="utf-8"/>
        <title>
    </head> I am title </title>
    <body>
    </body>
</html>
<--!這是註解-->

HTML 標籤基礎

<div></div> // 占據一整行的容器
<span></span> // 用在文字裡面的
<h1><h1> // 標題,有 h1 ~ h6
<p> // 段落

<img> // 圖片
<img title="hihi" src="img/logo.png" alt="Lazybonez" />
title 是滑鼠移上去的時候顯示
src 是圖片位置
alt 是圖片替代文字
圖片的標籤包法:

<figure>
    <img src="abc.png">
    <figcaption>圖書
    </figcaption
</figure>

pre // preformatte text 原封不動地包含空格顯示出來
<br/> // 空行


表格

<table>
    <tr>
        <th>姓名</th>
        <th>國文分數</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>國文分數</td>
    </tr>
<table>

連結
<a href="[http://www.google.com](http://www.google.com/)" target="_blank">content</a>
target="_self" 直接開起來
target="_blank" 新開分頁
aria-role="button" 無障礙設計

列表
<ul> 無序列表 <ol> 有序列表 <li> 列表項目

<ul>
  <li>Food</li>
  <li>Haha</li>
</ul>

FORM 相關 tag

<form action="送去哪裡" method="API方法">
    //文字輸入框
    姓名:<input type="text" placeholder="提示文字"/>
    密碼:<input type="password""  min="5"> 

    // Email輸入框
    Email: <input type="email" required/> 設成必填

    //日期輸入框
    日期: <input type="date"/>

    //單選輸入框
    性別: 
    <input name="gender" type="radio" id="male"/><label for="male">男<lable/>
    <input name="gender" type="radio"/>女;
    // 用 name 來分組
    // checked 可以預先選好

    //核取
    <input name="interest" type="checkbox" id="baseball"/><label for="baseball">棒球<lable/>

    //選單
    <select>
        <option value="volvo">Volvo</option>
        <option value="honda">Honda</option>
    </select>

    //送出表單
    <input type="submit" value="送出表單"/>

    //重設
    <input type="reset"/>
</form>

下拉式選單 select

<div class="container">
  <select name="year" id="">
    <option value="1901">A</option>
    <option value="1902">AA</option>
    <option value="1903">SS</option>
    <option value="1904">DD</option>
    <option value="1905">EE</option>
    <option value="1906" selected>T_T</option>
  </select>
</div>

textarea
<textarea name="" id="" cols="30" rows="10"></textarea>

button

<div class="container">
  <form action="register.php">
    <input type="text">
    <button type="submit">submit</button>
    <button type="reset">reset</button>
    <button type="button">no action</button>
  </form>
</div>

搭配 label 的 for 功能

<div class="container">
  <label for="email">Email</label>
  <input type="text" id="email"><br>
  <label for="password">Password</label>
  <input type="password" id="password">
</div>

用 name 和 value 可以跟後端互動

語意化的 UI 標籤

<main> 把網頁最主要的內容給包起來
<nav> 導覽列
<footer>

HTML Smantic Elements

引入別人的網站

<iframe src="http://www.google.com.tw>

SEO 與相關標籤

<meta>

  • keywords 關鍵字
  • description 描述
  • open graph protocol (通常是給 FB 看的)
  • JSON id
    <script> JSON ld (JSON for Linking Data

robot.txt 給網頁爬蟲看的檔案

  • Sitemap.xml 網站的地圖
  • Disallow 不要來爬我這些網頁
  • Allow 可爬我這些網頁
  • 告訴搜尋引擎我的網頁還有其他語言
  • 我的網頁還有 app

    Google Search Console: 是一套觀看 SEO 效果的工具

在網頁內顯示標籤

Escape 跳脫字元

  • & ⇒ &amp
  • < ⇒ &lt
  • ⇒ &gt

命名 & 架構

id 做為架構的命名,不能用第二次
class 屬性,一個標籤可以有很多 class,也可以重複出現在不同的標籤
樹狀結構:每個標籤都是一個節點 node


#html







Related Posts

CSS保健室|border、outline

CSS保健室|border、outline

七天打造自己的 Google Map 應用入門 - Day05

七天打造自己的 Google Map 應用入門 - Day05

{ 鼠年全馬鐵人挑戰 ;} Week 02 - 做一個影片背景的網頁吧

{ 鼠年全馬鐵人挑戰 ;} Week 02 - 做一個影片背景的網頁吧


Comments