HTML 基礎

#week6

Posted by ericcch24 on 2020-10-16 

<!DOCTYPE HTML> <!--告訴電腦我要用最新的 HTML 格式來 render-->
<html>
  <head>
    <meta charset="utf-8" /> <!--網頁編碼，<>沒有內容的話，只要一個括號空一格加斜線代表自成一組-->
    <title>I am 網頁標籤的標題文字</title>
  </head>
  <body>
    <h1>我是標題</h1>
    <div> <!--division 幫標籤分組用，且包起來的內容會自成一行-->
      <h2>我是副標題</h2>
      <p>我是段落內容</p>
      <img alt = "this is Kenny" title = "Kenny" src = "圖片網址" /> 
      <!--
        <img />: 圖片標簽，因為沒內容所以自成一組
        src: sorce,貼來源網址
        title: 滑鼠移上圖片的時候會顯示的文字
        alt: 圖片跑不出來時顯示的替代文字
      -->
      <ul>
        <li>hello</li>
        <li>yo</li>
        <li>man</li>
        <li>yeast</li>
      </ul>
      <!--
        <ul>: unordered list 沒有排序的清單，用點點開頭
        <ol>: ordered list 有排序的清單，數字開頭
        <li>: list item 清單內容
      -->
    </div>

    <h2>也是副標題</h2>
    <p>
      Lorem ipsum dolor sit amet, <span>consectetur</span><!--一樣是分組但不會換行，常用於包起來的地方要做其他事情的時候--> adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br> <!--line break 換行用--> 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </p>
    <pre><!--preformatted text 會依照我想要的格式（例如換行或空格）來顯示內容，常用於顯示程式碼-->
      function yoyo() {
        console.log('duke')
      }
    </pre>
    <table><!--包起來的是表格-->
      <tr><!--table row, 一列一列的內容-->
        <th>姓名</th><!--table header 字會變粗體的表格標題，常用在第一列 -->
        <th>電話</th>
      </tr>
      <tr> 
        <td>肯尼</td><!--table cell 格子裡的內容-->
        <td>1234</td>
      </tr>
    </table>
    <!-- 
      這是註解yoyoyo 
    -->
    <iframe src="https://google.com" width="100%" height="500px" /> 
    <!--可以直接嵌入別人網頁，但因為大多數網站會阻擋，所以不常用-->
  </body> 
</html>

<a> 錨點

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" /> <!--網頁編碼，<>沒有內容的話，只要一個括號空一格加斜線代表自成一組-->
    <title>I am 網頁標籤的標題文字</title>
  </head>
  <body>
    <a href="#p2">take me to p2</a><!--可以連到同一網頁內的指定標籤位置，在網頁內容很多時可以當索引使用-->
    <h1 id="p1">網頁前端1</h1><!--id 可以當作超連結的位置標示-->
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h1 id="p2">網頁前端2</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <a href="https://google.com" target="_blank">take me to google</a><br>
    <!--
      <a>: anchor 錨點，可以連到網頁外與內的其他位置
      href: hypertext reference 超連結
      target = '_self': 直接從原本的網頁連到超連結
      target = '_blank': 開一個新的網頁標籤連到超連結
    -->
    <a href="#p1">take me to p1</a>
  </body>
</html>

語意化元素 semantic elements

用來幫助辨識包起來的內容的有語意標籤，就不用辛苦的從內容判斷。不使用雖然不影響，就很難辨識。

  • <main>: 主要內容
  • <nav>: navigation 導覽列
  • <footer> 網頁尾端的東西

表單相關標籤：form、input、textarea

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" /> 
    <title>I am 網頁標籤的標題文字</title>
  </head>
  <body>
    <form>
      <div>
        姓名：<input type="text" placeholder="輸入文字" /> 
        <!--
        input: 輸入框, text: 一般純文字
        placeholder，可搭配 text 使用，裡面可以出現預設字詞提示網友，網友一旦輸入內容，提示字詞即不見。
        -->
      </div>
      <div>
        密碼：<input type="password" /> <!--password: 輸入的值以密碼方式顯示-->
      </div>
      <div>
        E-mail：<input type="email" /> <!--email: 瀏覽器會驗證有沒有符合電子郵件格式-->
      </div>
      <div>
        日期：<input type="date" /> <!--date: 日期框框-->
      </div>
      <div>
        性別：<input type="radio" name='gender' id="male" /> <label for="male">男性</label> 
        <!--radio: 單選框框-->
        <input type="radio" name='gender' id="female" /> <label for="female">女性</label> 
        <!--用一樣的 name 來分組就可以單選-->
        <input type="radio" name='gender' id="others" /> <label for="others">其他</label> 
        <!--
        label: 點選包起來的字也能選到選項，但要先給一個 id 讓他取得
        也可以直接用 label 把整個 input 標籤包住，也有一樣效果。
        -->
      </div>
      <div>
        興趣：<input type="checkbox" id="sports"> <label for="sports">運動</label> <!--checkbox: 復選框框，一樣可以 label-->
        <input type="checkbox" id="playvid"> <label for="playvid">打電動</label>
      </div>
      <div>
        <input type='submit' value="送出表單"/> <!--submit: 提交鈕, value: 按鈕上的字-->
      </div>
    </form>
  </body>
</html>

修改 input 標籤裡的 css 樣式

 input[type="type_name"] {
   css style 
 }

 /* placeholder 特別狀況，不同瀏覽器的選擇器不同 */
 ::-webkit-input-placeholder {
  font-size: 16px;
  color: #afafaf;
}

參考資料：更多 input 種類
參考資料：用css修改input placeholder的文字樣式

table 表格

<table>
    <thead>
        <tr> <!--表格分列-->
            <th>The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

搜尋引擎優化 Search Engine Opitimization

==意思是幫助搜尋引擎理解我的網頁==，設定什麼內容給搜尋引擎抓取（爬蟲），搜尋引擎就會依照設定來顯示關於我的網頁內容，例如什麼關鍵字會比較好搜尋，要讓搜尋者看到什麼網頁資訊等等。

  • <meta> 'keywords', 'description': 知道網頁的基本內容是什麼。
  • Oprn Graph Protocol: 通常給 facebook 用，也是知道一些網頁的結構。
  • JSON-ld: 給 google 看得 JSON 格式對於網頁的描述內容。
  • robots.txt: 給網頁爬蟲看的檔案，通常在"網址/robots.txt"，會告訴網頁爬蟲什麼東西可以爬什麼不能爬。
  • Sitemap.xml: 把網頁中的每個網址都讓搜尋引擎找。

Escape 跳脫：顯示標籤

  • & => &amp
  • < => &lt;
  • > => &gt;
    // 跳脫格式，防止使用者輸入符合 html 格式的內容，列出的東西會變形成 html 內容。
function escapeHtml(unsafe) {
return unsafe
  .replace(/&/g, "&amp;")
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;")
  .replace(/"/g, "&quot;")
  .replace(/'/g, "&#039;");
}

版面測試用文字 Lorem ipsum

tags: Week6

#week6

ericcch24
前端超新手




Related Posts

TCP/IP 是什麼？

TCP/IP 是什麼？

 YongChenSu
CSS 的模組化(OOCSS、SMACSS、BEM)

CSS 的模組化(OOCSS、SMACSS、BEM)

 hoyi-23
[Power BI] 讀書會 #1 Power BI Desktop & Power BI Service

[Power BI] 讀書會 #1 Power BI Desktop & Power BI Service

 RedPanda56

Comments