HTML基礎知識學習筆記

時間 2019-11-09

標籤 html 基礎知識學習筆記欄目 HTML 简体版

原文原文鏈接

摘要

$\quad$ 每次寫文檔的時候，老是有一些文章的佈局想法想去實現，可是礙於本身知之甚少，因此基本上要麼是效果打折，或者是用重複囉嗦的簡單語句去實現。在學完HTML基礎知識以後，感受最大的收穫仍是在於學到了更多設計頁面的技巧與方法，同時，也瞭解了網頁後面的一些標籤知識。javascript

1. 基本概念

1.1 HTML有兩個含義

最新版的HTML語言，包含舊標籤和32個新標籤
HTML以及CSS3

1.2 HTML5技術合集

新標籤、新屬性
新的通訊技術：WebSockets、WebRTC等
離線存儲技術：LocalStorage、斷網檢測
多媒體技術：視頻、音頻
圖像技術：Canvas，SVG，WebGL
Web加強技術：History API、全屏
設備相關技術：攝像頭、觸摸屏
新的樣式技術：CSS3新的Flex，Grid的佈局方式

1.3 HTML起手式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>
複製代碼

!DOCTYPE html-文檔類型，常見的有HTML1.0~2.0、HTML三、HTML四、HTML4.0.一、XHTML1.0 HTML5
html lang="en"-頁面的語言類型 en-English / zh-CN中文
<head>-配置基本信息，裏面寫看不見的內容
<meta charset="UTF-8" /> 字符集採用UTF-8(支持所有的語言)
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 防止頁面縮放
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> -若是當前頁面在IE瀏覽器中生成，請使用最新版本的IE瀏覽器
<title>Document</title>網頁的標題

2. HTML標籤

2.1 章節標籤-表示文章的層級：

<h1~h6> -標題
<header>-頁面頂部的內容
<footer>-頁面底部的內容
<section>-章節
<p> -段落
<main> -主幹
<aside> -旁支
<div>-劃分

2.2 全局屬性-全部標籤都有的屬性：

class -給代碼塊用class=xxx作一個標記
.XXX -選中全部的類名爲XXX的代碼塊，或者使用[class=XXX]，後者的不便之處在於類名必須與XXX徹底一致，用.XXX能夠匹配關鍵字中被空格分隔的一部分。
contenteditable-帶這個標籤的元素能夠被用戶編輯。
hidden -隱藏標籤
id-與class相似，可是原則上id是惟一的，class是不惟一的。可是因爲id重複也不會報錯，因此儘可能不用id。另外，在JS中能夠直接使用id名稱修改元素h.style.border = "10px solid green";可是，id的名稱不能是關鍵字(在console中windows.中出現的名稱都不能用)
style -html的屬性，優先級高於<head>標籤，可是JS又高於style。
例如：
1.#h{ border:10px solid red; }-在head中
2.<header id="h" style="border:10px solid green;" >-在body的header中
3.h.style.border="10px solid black";-在JS中
最終效果是黑色。
tabindex -控制使用tab響應的順序，注意0是最後一個，-1是沒法選擇到此處。
title-對於超出頁面部分須要用省略號的狀況：

能夠如今h標籤的屬性中設置：

#h{
       white-space: nowrap;//不換行
       text-overflow: ellipsis;//溢出部分用省略號表示
       overflow: hidden;//溢出就省略
     }
複製代碼

接着在標籤中聲明title： <header id="h" tabindex=1 title="這是省略部分的所有內容">頂部連接頂部連接頂部連接頂部連接頂部連接頂部連接頂部連接頂部連接頂部連接頂部連接頂部連接</header>便可實現效果。html

2.3 默認樣式

$\quad$ 因爲HTML剛出現的時候尚未CSS，因此在HTML中提供了默認樣式用於區分頁面元素。頁面中鼠標右鍵便可看到： java

$\quad$ 可是因爲這種默認樣式通常不符合頁面美觀的需求，因此須要使用CSS Reset覆蓋瀏覽器的默認樣式。
$\quad$ 推薦默認格式：

*{margin: 0;padding:0;box-sizing:boder-box;}-清除內外邊距，並變成盒模型
    *::after,*::before{box-sizing:boder-box;}
    h1,h2,h3,h4,h5,h6{font-weight:normal}-h1~h6標題不加粗
    h1{font-size:48px;}
    h2{font-size:36px}
    a{color:inherit;text-decoration:none;boder-bottom:1px solid;}-a標籤的顏色繼承當前文字的顏色，去除下劃線,用文字邊框代替
    ul,ol{list-style:none}-去除默認樣式
     table{-表格的各個元素之間沒有空隙
      border-collapse:collapse;
      border-spacing:0
    }
複製代碼

2.4 內容標籤

ol+li -有順序的列表
ul+li -沒有順序的列表
dl+dt+dd-描述性的列表 dt-元素 dd-描述元素的語句
pre-保留空格，回車，Tab。因爲在HTML中，多個連續的空白會縮成一個空格，而在pre標籤中，這些空白都會保留。
code-代碼片斷
hr-分割線
br-回車
a-連接 target="_black"-在新窗口中打開，好比：
<a href="http://www.iciba.com/" target="_black">金山詞霸</a>
href-hyper reference超連接
em-表示強調
strong-加粗
quote-引用
blockquote-換行引用

2.5 打開HTML頁面

不要使用雙擊.html文件打開頁面，不然會致使根目錄路徑會錯誤。
使用npm install npm -g命令安裝npm，-g表示安裝成全局的，能夠在任意目錄使用。使用 npm -v命令，查看是否安裝成功。
使用npm i -g node-w3c-validator命令安裝代碼檢查工具。
使用npm install http-server -g命令安裝http服務器，而且在所需啓動的html頁面的同路徑中使用hs . -c-1 選擇一個地址，在網頁地址中輸入文件名http://192.168.56.1:8080/index.html便可打開當前路徑中名爲index.html頁面。
使用命令npm install -g yarn安裝yarn(npm包管理工具)
注意：若是安裝過程當中已經打開了VS Code，那麼須要重啓才能看到npm -v命令...
或者使用npm i -g parcel-bundler命令安裝parcel(web應用打包工具) 在yarn中加入yarn global add parcel，接着使用命令parcel index.html得到地址後，便可實現與前面相同的效果。

2.6 <a>標籤href的取值

網址:
1. http://...
2. https://...
3. //...
路徑:
1. /a/b/c以及a/b/c
2. index.html以及.index.html
僞協議
1. javascript:代碼;
2. mailto:郵箱
3. tel:手機號
4. tel:class的名字

2.7<target> 標籤的取值

target="_black"-空白頁面
target= "self"-默認值
target="_top"-最頂層的頁面(頁面中存在兩個窗口的狀況)
target="_parent"-父親窗口中打開

2.8<table> 標籤的取值

只有<thead>,<tbody>以及<tfoot>(順序不惟一)
<tr> - table row table中的一行
<th> - table head cell表頭單元格
<td> - table data cell表格單元數據
table layout -表的樣式
1. auto-自動計算間距
2. fixed-根據設定的值，固定寬度
3. 其餘的不作了解
設置表格邊框

簡單狀況下：node

<table>
        <thead>
          <tr>
            <th>拼寫</th>
            <th>翻譯</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>tr</td>
            <td>table row - 表中的一列</td>
          </tr>
        </tbody>
        <tfoot>
        </tfoot>
</table>
複製代碼

樣式：git

添加更多屬性：

table {
        width: 800px;//設置寬度
        table-layout: fixed;//固定寬度
        border-collapse: collapse;//合併單元格之間的空隙
        border-spacing: 0;//設置空隙爲0
      }
      td,
      th {
        border: 1px solid rgb(0, 17, 255);
      }
複製代碼

效果： github

2.9 img標籤

做用：發出http get請求,顯示一張圖片
屬性：
1. alt -當href標籤後的請求加載不到時，顯示alt中的內容。
2. height,width-設置高度，寬度，不用寫單位默認是以px爲單位
監聽事件：onload,onerror

<div>
      <img id="xxx" src="/badgetway.png" alt="圖片加載失敗" />
      <script>
        xxx.onload = function() {
          console.log("圖片加載成功");
        };
        xxx.onerr = function() {
          console.log("圖片加載失敗");
          xxx.src = "/404.png";
        };
      </script>
    </div>
複製代碼

讓圖片適應手機頁面：

<style>
      * {
        margin: 0;
        padding: 0;//內外邊距設置爲0
        box-sizing: border-box;
      }
      img {
        max-width: 100%;//最大寬度爲100%
      }
</style>
複製代碼

2.10 form標籤-表單標籤

做用-發起http get或者post請求,而後刷新頁面。
屬性-
1. action-控制請求哪一個頁面
2. autocomplete-自動補全
3. method-GET/POST
4. target-應該提交到那個頁面，與a標籤中相同

<div>
      <form action="https://xxx.xxx.com" method="GET">
        <input type="text" />
        <input type="submit" value="提交" />
      </form>
 </div>
複製代碼

效果以下： web

autocomplete-自動填充 示例：

<div>
      <form action="/xxx" method="GET" autocomplete="on">
        <input name="username" type="text" />
        <input type="submit" value="提交"/>
        //使用<button type="submit">提交</button>可實現一樣的效果
      </form>
 </div>
複製代碼

效果： npm

那麼問題來了：
<input type="submit" value="提交"/>效果上同等於 <button type="submit">提交</button>那麼兩者區別在何處？
區別之處:

<button type="submit"> <img width="20" src="/badgetway.png" alt="圖片加載失敗" /> <strong>提交</strong> </button>

button中能夠添加其餘標籤。

2.11 常見input標籤

<input type="color" />-顏色選擇器
<input type="password" />-輸入密碼
radio-單選

選擇性別(兩者取相同的名字，這樣能夠確保不能被同時選擇)windows

<input name="gender" type="radio" />男
<input name="gender" type="radio" />女
複製代碼

checkbox-多選 須要以name分組

<input name="habbit" type="checkbox" />唱
        <input name="habbit" type="checkbox" />跳
        <input name="habbit" type="checkbox" />Rap
        <input name="habbit" type="checkbox" />籃球
        <hr />
        <input name="yuqian" type="checkbox" />抽菸
        <input name="yuqian" type="checkbox" />喝酒
        <input name="yuqian" type="checkbox" />燙頭
複製代碼

file-上傳文件
<input type="file" />-選擇單個文件
<input type="file" multiple />-選擇多個文件
hidden-用於隱藏某些內容

2.12 其餘

textarea-多行文本
狀況1：<textarea></textarea>

用戶能夠自由拖放文本框大小。
狀況2：使用<textarea style="resize:none;width:80%;height:80px;"> 你們好，我是練習時長兩年半的我的練習生...</textarea>能夠固定大小。
select-從範圍中選擇

<select>
          <option value=" ">-請選擇-</option>
          <option value="1">星期一</option>
          <option value="2">星期二</option>
          <option value="3">星期三</option>
          <option value="4">星期四</option>
        </select>
複製代碼

效果以下：瀏覽器

require-不能爲空的選項
<input name="username" type="text" required />

注意事項：

通常不監聽input的click事件
form中的input要有name
form裏面要放一個type=submit才能出發submit事件

3.HTML快捷鍵

Ctrl+Shift+L 格式化
Tab 自動補全

4.相關軟件的安裝

4.1 npm安裝

$\quad$ npm是Node.js的包管理工具，安裝Node.js就會自帶npm。官網下載

一路肯定就是，最好不要隨便改安裝路徑，否則頗有肯找不到。使用 node-v確認安裝成功。這時候雖然自帶安裝了npm，可是不是全局的(隨便找個地方都能使用)，使用 npm install npm -g設置npm爲全局。

4.2 Yarn安裝

$\quad$ Yarn與npm同樣，是一個包管理器，優勢在於比npm速度更快。使用命令npm install -g yarn安裝Yarn。

4.3 node-w3c-validator代碼檢查工具安裝

$\quad$ node-w3c-validator是HTML的一款代碼檢查工具，由於有時候VC Code的報錯不是那麼明顯，因此須要使用一些其餘工具檢查代碼錯誤。使用命令npm i -g node-w3c-validator安裝該插件，或者使用yarn global add node-w3c-validator安裝，使用node-w3c-validator --version查看是否安裝成功。
$\quad$ 最後使用node-w3c-validator -i [文件名]，檢查代碼中的錯誤：