html 筆記

本文轉載自查看原文 2021-08-22 14:45 101 html5/ 前端/ html

html (hyper text markup language)知識點

html文檔結構

<!-- 文檔注釋 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html> html5固定語法。
 文檔注釋
html root標簽，通常指定屬性 lang="en"
head body
title 在head內的標簽，指定瀏覽器標題
meta 描述性標簽，通常有至少有一個指定字符集UTF-8

標簽類型

標簽的右尖括號前可以有空格

標簽也稱為元素，有標簽值，標簽值可以是別的標簽元素，可以有屬性，多個屬性用空格隔開，每個屬性都有屬性值

自閉合
- 如 <hr/> 斜杠和右括號中間不可有空格，斜杠前可有空格。
雙標簽
- 如 <h2>標題</h2> 右邊的閉合標簽斜杠兩邊都不能有空格。
- 結構： <標簽名稱標簽屬性=屬性值標簽屬性=屬性值>標簽值</標簽名稱>
塊元素
- 該元素獨占一行如h, p標簽
行內元素
- 如無換行標簽，元素將排在一行，源碼中換行不影響元素排列，如一些小的標簽 a, strang, em ...

常用標簽

h 標題通常有h1到h6 六級標題
p （part) 段落標簽
a (anchor) 錨標簽，用於跳轉，超鏈接
br （break carriage return）換行
hr （horizontal) 水平分割線換行，不能放入p標簽內

常見屬性

title head中的標題作為瀏覽器標題，其他元素的標題為鼠標懸停時顯示的文本內容
alt （alternatively）圖片等資源未加載完成時用指定文本代替顯示
name 標記元素的名稱，表單提交時作為key提交，單選框用以分組，等等
id 標記元素的ID，作為文檔里引用如<label for="eleId"> ，等等
width 寬度
height 高度
border 邊界寬度，通常不使用，通過css實現
src （source）來源
href （hypertext reference）
target 指定鏈接打開的位置

常用特殊符號

由於html文檔中一些字符為標記符號，這些字符作為普通字符時，需要其他表示方法

使用 &; 兩個符號包裹英文單詞

idea 編輯器中鍵入and符號后ctrl+回車可進行各種符號預覽
  空格
> 大於 (greater-than)
< 小於 (less-than)
&eg; 大於 (equal or greater-than)
&el; 小於 (equal or less-than)

常規網頁布局

網頁布局使得文檔結構清晰，可讀性強，便於維護和擴展。

語意元素

header：標題頭部區域的內容
footer：標題腳部區域的內容，常見各大網站拉到最下方的區域
section：web頁中一塊獨立區域
article：獨立文章內容
code：獨立代碼內容
aside：相關內容或應用，常見於側邊欄
nav（navigation）：導航類輔助內容

`img` 圖像標簽

<img src="../resources/image/1.jpg" alt="高清大圖" title="提示">

通常的屬性有：src, title, alt

次要的屬性有：width, height

常見的類型： jpg, gif, jepg, png, bmp(位圖)

a (anchor) 標簽，錨標簽，鏈接標簽

<a href="http://www....." target="_blank" >
  實體內容
</a>

實體內容點擊即可跳轉，實體內容可以是普通文本text，也可以是圖片img元素

通常的屬性有：href, target, title

次要的屬性有：

常見的類型：
標記，使用井字符# ，跳轉到標記語法為：鏈接#元素名稱，href#name
根據href可以跳轉到別的頁面
如果跳轉本頁面的元素井號前面的鏈接地址可不填

可使用a標簽標記一個位置 <a name="top">這里標記為頂部</a>

點擊跳轉為 <a href="#top">點我跳轉到頂部</a>

功能性鏈接

如郵箱：<a href="mailto:ttaolu.163.com">發送郵件給我</a>

qq推廣：

<a href="http://wpa.qq.com/msgrd?v=3&uin=469495751&site=qq&menu=yes" target="_blank">
  <img border="1" src="http://wpa.qq.com/pa?p=2:469495751:53" alt="點擊這里給我發消息" title="點擊這里給我發消息"/>
</a>

list 列表標簽 order,unordered,definition

有序列表 ol (order-list)

<ol>有序列表
    <li>內容1</li>
    <li>內容2</li>
    <li>內容3</li>
    <li>內容4</li>
</ol>

無序列表 ul (unordered-list)

<ul>無序列表
    <li>內容1</li>
    <li>內容2</li>
    <li>內容3</li>
    <li>內容4</li>
</ul>

自定義列表dl (definition-list)

dt （definition-list-title）
dd （definition-list-data）

<dl>自定義列表
    <dt>列表頭dt</dt>
    <dd>內容dd1</dd>
    <dd>內容dd2</dd>
    <dd>內容dd3</dd>
    <dd>內容dd4</dd>
    <dt>列表頭dt333</dt>
    <dd>內容dd3331</dd>
    <dd>內容dd3332</dd>
    <dd>內容dd3333</dd>
</dl>

table 表格

行 tr ： table row

列 td ： table data, （數據）每一行存放的數據

table 的屬性有

title
td 的屬性有:

rowspan: 該數據跨幾行，如果跨兩行，則下一行的數據從第二列開始排列（第一列位置被占用）
colspan: 數據跨幾行，如果跨兩列，則該行剩下的數據全部往后一格

<table border="1px" title="學生成績表格">
  <tr >
    <td colspan="3">學生成績</td>
  </tr>
  <tr>
    <td rowspan="2">大喬</td>
    <td>語文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>數學</td>
    <td>99</td>
  </tr>
  <tr>
    <td rowspan="2">周瑜</td>
    <td>語文</td>
    <td>89</td>
  </tr>
  <tr>
    <td>數學</td>
    <td>102</td>
  </tr>

</table>

學生成績表
大喬	語文	100
大喬	數學	99
周瑜	語文	89
周瑜	數學	102

audio 音頻

常見屬性：

src : 資源路徑

title：懸停提示

controls ：控制台

autoplay ：自動播放

loop：循環播放

muted：靜音

<audio src="../resources/media/audio/G.E.M.鄧紫棋-來自天堂的魔鬼.mp3" controls autoplay loop title="鄧紫棋-來自天堂的魔鬼"></audio>

video 視頻

常見屬性：參考音頻

<p>
    <video width="500" height="300" title="花朵視頻" controls autoplay>
        <source src="../resources/media/video/flower.mp4" type="video/mp4">
        <source src="../resources/media/video/flower.mp4" type="video/ogg">
        <source src="../resources/media/video/flower.mp4" type="video/webm">
        <!-- 以下兩個不行 -->
        <!--    <source src="../resources/media/video/flower.mp4" type="video/avi">-->
        <!--    <source src="../resources/media/video/flower.mp4" type="video/application/octet-stream">-->
    </video>
    <br>
</p>
<p>
    <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵視頻2" autoplay loop></video>
    <br>
</p>
<p>
    <video src="../resources/media/video/flower.mp4" width="500" height="300" title="花朵視頻3" autoplay loop></video>
    <br>
</p>

無法播放問題：
- windows系統設置問題-windows功能未啟用或MIME類型未配置
  
  control-程序-卸載程序-側邊欄的啟動或關閉windown功能
  
  專業版打開Windows功能：運行-OptionalFeatures
  
  勾選兩項：
  
  Internet Information Services/Web 管理工具/IIS 管理控制台 (勾選)
  Internet Information Services/萬維網服務 (勾選)，該選項不用進行展開了
  
  按下win鍵-輸入IIS打開控制台
  
  專業版打開IIS控制台：運行-inetmgr
  
  雙擊MIME類型-檢查.mp4是否有配置，如無，右側操作欄點擊添加-輸入擴展名.mp4和mime類型video/mp4
  
  其他參考命令：
  
  本機的IIS服務重啟，停止，啟動: iisreset, net stop iisadmin /y, net start iisadmin
  
  重啟或者停止w3服務: net start w3svc, net stop w3svc
- 視頻本身問題-由視頻本身無法被瀏覽器解析的情況
  
  通過各種轉碼軟件重寫視頻源件
  
  放棄該視頻，更換其他視頻

iframe 內聯框架

<p>
    <iframe src="//player.bilibili.com/player.html?aid=804847829&bvid=BV1ay4y1V7XG&cid=387543623&page=1"
            scrolling="no" border="0" frameborder="no" framespacing="0" width="900" height="600"
            title="B站小視頻" allowfullscreen="true"></iframe>
</p>
<p>
    <iframe name="iframe2" src="https://www.bilibili.com/" width="300" height="200" frameborder="0"
            title="B站首頁"></iframe>
</p>
<p>
    <!-- 內聯框架跳轉 src屬性可以省略也可以為空src=""，src為其他時，點擊跳轉就會覆蓋原iframe的內容 -->
    <iframe name="iframe3" width="300" height="200" frameborder="1" title="什么都沒有"></iframe>
    <a href="https://www.cnblogs.com/ttaolu/" target="iframe3" title="博客">跳轉至我的博客</a>
</p>

form 表單

屬性

name: 表單名稱
method: 表單提交時，表單中的元素內容以鍵值對置入url（get ），元素的鍵值對內容以data方式發送(post)
action: 表單提交位置，提交時表單中的元素內容信息發往地址，可以是網站、請求處理地址

表單元素（標簽）

label 元素
- for 屬性：指定其他元素id
select 元素
- 屬性：name，id，
- 包含元素：option
  - option 屬性有： value，selected 並可指定option 標簽的值，用於提示用戶該選項文本描述信息
datalist 元素，選項列表
- option
textarea 元素
- 屬性：name，id，value，placeholder，cols，rows
input 元素
- type 屬性
  - text 文本框
  - password 文本框
  - number 文本框
  - search 文本框
  - url 文本框
  - email 文本框
  - checkbox 復選框
  - radio 單選框，單選框多個元素分為一組，指定元素的name屬性為相同即可，即相同name的radio元素為一組
  - submit 按鈕
  - reset 按鈕
  - button 按鈕
  - image 按鈕
  - file 文件選擇按鈕，
  - hidden
  - range 滑塊
- name 屬性，表單元素key
- id 屬性，表單元素id，用於識別
- value 屬性，表單元素的值，很多元素有默認值，一個元素只有一個值，但是可以多個元素有相同的name，以達到一個key多個value
  
  如是k1=v1&k1=v2&k1=v2，這里三個元素name都為k1，有三個值分別未v1,v2,v2
- title 屬性，懸停提示，鼠標懸停到該組件時顯示的文本，常用於文本框
- placeholder 屬性，用戶提示，常用於文本框，內容為空時，文本框內顯示文本提示用戶輸入什么信息
- maxlength 屬性，文本框限制用戶輸入的字符個數
- accpet 屬性，可接受value的類型，
  
  可指定后綴".png",
  
  可指定類型"image/*",
  
  可指定多個，用逗號分隔"image/gif,image/jpg", ".csv,.jmx"
  
  可同時指定類型和后綴，用逗號分隔"image/*,.md"
- required 屬性，非空驗證，提交時，如果該元素未被選中或為空未輸入，無法進行提交，注意單選框只需指定一個元素即可，指定多個效果相同，
  
  表示該單選框組內必須有一個元素被選中
- patten 屬性，正則驗證，提交時，用正則表達式驗證輸入框合法性，無法進行提交
- readonly 屬性，使該元素只讀，不可修改
- disabled 屬性，使該元素不可互動，如無法輸入，點擊等
- hidden 屬性，用於隱藏該元素
- selected 屬性，用於單選或復選框被選中，默認未選中，下拉列表框選項，默認第一項，如果指定多個都被選中，那么取最后一個
- checked 屬性，單選、復選框默認為未選中，該屬性指定選中
- multiple 屬性，啟用復選功能，常用組件類型為為 file
- size 屬性，初始寬度，根據類型type的不同，單位有字符char(如文本框)，像素px(如各種按鈕大小)
- rows 屬性用於多行文本框（文本域），指定文本框行數
- cols 屬性，用於文本框，

<h1>用戶注冊</h1>
<form action="1.learn.html" method="get">
    <label>名字：<input type="text" name="userName" title="請輸入用戶名" placeholder="你好啊，朋友"/></label>
    <br>
    <label>密碼：<input type="password" name="passWord"/></label>
    <p>
        <input type="submit" name="signIn" value="注冊B站賬戶">
        <input type="reset" name="reset">
    </p>
</form>
<hr>
<!--登錄界面2-->
<h1>用戶登錄</h1>
<form action="2.list.html" >
    <label>名字：<input type="text" name="userName"/></label>
    <br>
    <label>密碼：<input type="password" name="passWord"/></label>
    <p>
        <input type="submit" value="登錄到w3c" name="login">
        <input type="reset" name="reset">
    </p>
</form>
<hr>
<h2>單選框</h2>
<form name="單選框表單" method="get" action="1.learn.html">
    <!--  如果都是checked， 那么最后的將覆蓋之前的，也就是只有最后一個生效。-->
    <p>單選框：
        <input type="radio" name="sex" value="male" required>男
        <input type="radio" name="sex" value="female" required>女
    </p>
    <p>單選框：
        <label><input type="radio" name="sex1" value="male" required >男</label>
        <label><input type="radio" name="sex1" value="female" required>女</label>
    </p>
    <input type="submit">
    <br/>
</form>
<hr>

<form action="1.learn.html">
    <p id="gg">多選框表單:
        <!--    <label for="gg">game over:</label> required 屬性 必須選中 -->
        <label><input type="checkbox" name="hobby" value="sleep">吃飯</label>
        <label><input type="checkbox" name="hobby" value="code">睡覺</label>
        <label><input type="checkbox" name="hobby" value="game">敲代碼</label>
        <label><input type="checkbox" name="hobby" value="chat">打游戲</label>
        <label><input type="checkbox" name="hobby" value="chat">打游戲</label>
    </p>
    <input type="submit">
</form>
<hr>

<form action="1.learn.html">
    <p>
        <label for="stat">選擇國家:</label>
        <select name="location" id="stat">
            <option value="china">中國</option>
            <option value="us" selected>美國</option>
            <option value="wai">外國</option>
            <option value="wai">外國</option>
        </select>
    </p>
    <p>
        <label for="textarea">說明：</label>
        <br>
        <textarea name="say" id="textarea" cols="30" rows="10" placeholder="請輸入你的意見！"></textarea>
    </p>
    <p>
        <label for="idFile">選擇你的頭像</label>
        <input type="file" name="sFile" id="idFile" multiple accept=".png">
        <input type="button" name="upload" id="idUpload" value="開始上傳">
        <label for="idUpload">上傳</label>
    </p>

    <p><input type="submit"></p>

</form>

瀏覽器快捷鍵

Ctrl + U 查看網頁源代碼（*****）
F12 顯示/隱藏開發者工具（*****）
Ctrl + Shift + I 審查元素(opean drawer) 同上
Shift + F5 去緩存刷新（*****）
Esc 停止加載（*****）
Shift + Esc 任務管理器
F6 選中地址欄
F5 刷新（重新載入）
Ctrl + H 顯示歷史記錄
Ctrl + Shift + Del 清理上網痕跡
Ctrl + Click 新標簽打開不跳轉
Ctrl+Shift + Click 新標簽打開並跳轉
Alt + Click 圖片快速保持圖片

Idea 編輯 html 技巧
tab自動完成標簽，如輸入h1后按一下tab

html 名詞

元素`HTML 文檔由 HTML 元素定義`

- 元素name 推薦使用小寫
- 開始標簽/起始標簽（opening tag）
- 結束標簽/閉合標簽（closing tag）
- 元素內容（content）是開始標簽與結束標簽之間的內容,某些 HTML 元素具有空內容（empty content）
- 空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
- 大多數 HTML 元素可擁有屬性
- 大多數 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）

常用元素（標簽）

標題（Heading）通過<h1> - <h6> 標簽
瀏覽器會自動地在標題的前后添加空行
head標簽：
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>
段落通過標簽 <p> 來定義塊級元素
瀏覽器會自動地在段落的前后添加空行
鏈接通過標簽 <a> 來定義
圖像通過標簽 <img> 來定義
base 定義頁面中所有鏈接默認的鏈接目標地址
meta 提供了HTML文檔的meta標記
來描述HTML文檔的描述，關鍵詞，作者，字符集等

定義關鍵詞:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
定義描述內容: <meta name="description" content="免費 Web & 編程教程">
定義網頁作者: <meta name="author" content="Runoob">
每30秒鍾刷新當前頁面: <meta http-equiv="refresh" content="30">

常用標簽二

b: bold 加粗 <strong> 替換加粗標簽 <b>
i: italic 斜體 <em> 替換 <i>標簽

<b> 與<i> 定義粗體或斜體文本
<strong> 或者 <em>意味着你要呈現的文本是重要的，所以要突出顯示。

small/big
br/hr
sub/sup
pre: 預格式文本
abbr/acronym: 縮寫簡寫/首字母縮寫，通常指定titil
bdo: 文字方向
q/blockquote: 引用語，短/長，相當於引號
del/ins：刪除插入，中划線，下划線

表格關鍵字

table,caption,th,tr,td,colspan,rowspan,colgroup,col,thead,tfoot,tbody

列表關鍵字

ul,li,ol,type,dl,dt,dd,start,

表單

form,fieldset,legend,optgroup,datalist,keygen,output

HTML 屬性

屬性是 HTML 元素提供的附加信息

屬性一般描述於開始標簽
屬性總是以名稱/值對的形式出現，比如：name="value"
屬性值應該始終被包括在引號內,雙引號是最常用的，不過使用單引號也沒有問題
在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號
例如：name='John "ShotGun" Nelson'
屬性和屬性值對大小寫不敏感,推薦小寫的屬性/屬性值

常用屬性

class :為html元素定義一個或多個類名（classname）(類名從樣式文件引入)
id: 定義元素的唯一id
style: 規定元素的行內樣式（inline style）
title: 描述了元素的額外信息 (作為工具條使用)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML學習筆記 HTML5學習筆記 HTML學習筆記 HTML學習筆記 HTML學習筆記 HTML學習筆記 HTML 自學筆記（HTML表格相關標記） AngularJs學習筆記--html compiler HTML+CSS學習筆記 HTML5學習筆記----html5與傳統html區別