HTML小記

時間  2021-01-24
標籤 javascript css html java 編程 canvas 瀏覽器 服務器 框架 編程語言 欄目 HTML 简体版
原文   原文鏈接

Html小記

1. Html簡介

  1. HTML（ Hyper Text Markup Language ）是用來描述網頁的一種標記語言javascript

    • html 不是一種編程語言，而是一種標記語言
    • 標記語言是一套標記標籤；使用標記標籤來描述網頁
    • html 文檔也被稱爲網頁，其包含 html 標籤和純文本

  2. HTML 標籤css

    1. 標記標籤一般被稱爲 html 標籤（ tag ）html

    2. 特色java

      • html標籤一般是成對出現的，另外也包含自閉合的標籤
      • 成對標籤分爲開放標籤和閉合標籤

    3. 標籤元素類型編程

      1. 塊級元素 ( block )canvas

        簡介：在html種 div 、p 、 hn 、ul 、li 標籤元素屬於塊級元素瀏覽器

        特色：服務器

        1. 一個塊級元素獨佔一行
        2. 元素的高度、寬度、行高、頂和底邊距均可設置
        3. 元素寬度在不設置的狀況下，是它自己父容器的100%，即默認和父元素寬度一致

      2. 行內元素 ( inline )框架

        簡介：在html中 a 、span 、 br 、i 、 em 、 strong 、 label 等屬於行內元素編程語言

        特色：

        1. 和其餘元素都在一行上
        2. 元素的高度、寬度、行高、頂和底邊距不可設置
        3. 元素的寬度就是其包含文字或圖片的寬度，不可改變

      3. 行內塊元素 ( inline-block )

        簡介：在html 中 img 、input 屬於行內塊元素

        特色：

        1. 行內塊元素即同時具有行內元素、塊級元素的特色
        2. 行內塊元素在一行上顯示
      • 附：標籤元素之間的互轉 ( display屬性 )
        • display:block ( 標籤按照塊級元素的方式顯示 )
        • display:inline ( 標籤按照行內元素的方式顯示 )

2. Html 結構

html文檔結構分爲 文檔聲明、頭部 、身體 三部分

1. 文檔聲明 ( DOCTYPE )

  1. 簡介：html文檔一般以類型聲明開始，該聲明將幫助瀏覽器肯定其嘗試解析和顯示的 html 文檔類型

    特色：文檔聲明必須是 html 文檔的第一行、且頂格顯示，對大小寫不敏感；此類型不是標籤

    版本：

    1. XHTML 1.0 (2000年)

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
# 嚴格型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
# 過渡型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
# 寬鬆型

    2. HTML 5 (2014年)

      <!DOCTYPE html>

2. 頭部分 ( head )

  1. 相關元素

    標籤 描述
    head 定義關於文檔的信息（必需）
    title 定義文檔標題（必需）
    base 定義該頁面上全部連接默認指向的地址或目標（target）
    link 定義該文檔與外部資源的聯繫
    meta 定義關於html的元數據
    script 定義客戶端腳本
    style 定義該文檔的樣式

  2. title

    • 定義瀏覽器工具欄中的標題
    • 提供頁面被添加到收藏夾時顯示的標題
    • 顯示在搜索引擎結果中的頁面標題

  3. link

    此標籤 最經常使用於鏈接樣式表（CSS）

    <head>
	<link rel="stylesheet" type="text/css" href="mystyle/css" />
</head>

  4. style

    此標籤 是CSS的另外一種引入方式

    <head>
    <style type="text/css">
        body {
            background-color:red
        }
        p {color:blue}
</head>

  5. meta

    此標籤 提供關於html文檔的元數據；元數據不會在頁面上顯示，但對於機器是可讀的

    典型的狀況是，meta元素常被用於規定頁面的描述(如何顯示內容或從新加載頁面)、關鍵詞、文檔的做者、最後的修改時間以及其它元數據

    <head>
	<meta charset="UTF-8">        									<!--定義顯示的字符集-->
    <meta name="description" content="Free Web tutorials on HTML,XML,CSS">		<!--定義頁面描述-->
    <meta name="keyword" content="HTML,CSS,XML">								<!--定義關鍵詞-->
    <meta  name="viewport" content="width=device-width inital-scale=1.0">		<!--禁用溶放，兼容手機-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" >						<!--告訴IE使用最新-->
</head>

  6. script

    此標籤 最經常使用於定義客戶端腳本，好比 Javascript

    script 元素既可包含腳本語句，也可經過 src 屬性指向外部腳本文件；必需的 type 屬性規定腳本的MIME 類型

    Javascript 最經常使用於 圖片操做、表單驗證 以及 動態內容更新

    <head>
    <script type="text/javascript">
    	document.write("Hello World!")
    </script>
    <noscript> Your browser does not support Javascript!</noscript> <!--不支持javascript替代顯示內容-->
</head>

3. 主體 ( body )

此部分 包含全部網頁須要顯示的文本內容

1. 標籤元素（按結構）

  1. 格式

    標籤 描述
    abbr 定義縮寫
    address 定義文檔做者或擁有者的聯繫信息（一般爲斜體）
    bdi 定義文本方向，脫離周圍的文本發方向（左→右;右→左）
    bdo 定義文字方向
    blockqoute 定義塊引用（自動縮進）
    del 定義被刪除的文本
    ins 定義被插入的文本
    mark 定義有記號的文本(字體亮色)
    meter 定義度量給定範圍(gauge)內的數據
    pre 預約義格式化文本(經常使用於源代碼)
    定義任何類型的任務進度(進度條) progress
    q 定義行內引用(「內容」)
    sup 定義上標文本
    sub 定義下標文本
    time 定義時間文本
    wbr 定義可能的換行符

  2. 表單

    表單用於向服務器傳輸數據

    標籤 描述
    form 定義供用戶輸入的HTML表單
    input 定義輸入控件
    textrea 定義多行的文本輸入控件（評論）
    button 定義按鈕
    select 定義選項列表
    optgroup 定義選項組（列表組）
    option 定義選項列表中的選項
    label 爲 input 元素定義標註（標記）
    fieldset 定義圍繞表單中元素的邊框
    legend 定義fieldset元素的標題
    datalist 定義下拉列表（與 input 配合 表示可能出現的值）
    keygen 定義生成密鑰（當提交表單時，私鑰存儲本地，公鑰發送到服務器）
    output 定義不一樣類型的輸出，例如腳本輸出

    1. select

      此標籤 可建立單選或多選菜單

      <select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

    2. datalist

      此標籤 定義選項列表，與input標籤配合使用該元素，來定義input可能的值

      datalist及其選項不會被顯示出來，它僅僅是合法的輸入值列表

      <input id="myCar" list="cars" /> <!--用input元素中的list屬性來綁定datalist-->
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

  3. 框架

    標籤 描述
    frame 定義框架集的窗口或框架（不能與標籤一塊兒使用）
    frameset 定義框架集
    noframes 定義針對不支持框架的替代內容
    iframe 定義內聯框架（行內框架）

    1. frame

      此標籤 定義 frameset中的一個特定的窗口（框架）

      <html>
    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm" />
      <frame src="frame_b.htm" />
      <frame src="frame_c.htm" />
    </frameset>
</html>

    2. iframe

      此標籤 會建立包含另一個文檔的內聯框架（即行內框架）

      <html>
    <body>
        <iframe src="/i/eg_landscape.jpg"></iframe>
        <p>一些老的瀏覽器不支持 iframe。</p>
        <p>若是得不到支持，iframe 是不可見的。</p>
    </body>
</html>

  4. 圖像

    標籤 描述
    img 定義圖像
    map 定義一個客戶端圖像映射；映射（image-map）指帶有可點擊區域的一幅圖像
    area 定義圖像映射中的區域（老是嵌套在中）
    canvas 定義圖形（圖形容器）
    figure 定義獨立的流內容（圖像、圖表、照片、代碼等等）
    figcaption 定義 figure 元素 的標題

    1. canvas

      此標籤 定義圖形 好比圖標和其它圖像

      此標籤 只是一個圖形容器，必須用腳原本繪製圖形

      <canvas id="myCanvas"></canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);
</script>

  5. 音頻/視頻

    標籤 描述
    audio 定義聲音內容
    source 定義媒介資源（audio和video）
    track 定義在媒體播放器中的文本軌道（字幕）
    video 定義視頻

  6. 連接

    標籤 描述
    a 定義錨（超連接）
    link 定義文檔與外部的資源的聯繫
    nav 定義導航連接

  7. 列表

    標籤 描述
    ul 定義無序列表
    ol 定義有序列表
    li 定義列表的項目
    dl 定義定義列表
    dt 定義定義列表中的項目
    dd 定義定義列表中項目的描述
    menu 定義命令的菜單/列表
    1. ul ol dl 分別在什麼狀況使用
      • 無序列表在列表項目對順序沒要求時使用，能夠是任何一系列項目
      • 有序列表在列表項目對順序有要求的時候使用
      • 定義列表在對項目有描述要求時使用

  8. 表格

    標籤 描述
    table 定義表格
    caption 定義表格標題
    th 定義表格中的表頭單元格
    tr 定義表格中的行
    td 定義表格中的列
    thead 定義表格中表頭的內容
    tbody 定義表格中主體的內容
    tfoot 定義表格中表注內容（腳註）
    col 定義表格中一個列或多個列的屬性值
    colgroup 定義表格中供格式化的列組

  9. 樣式/節

    標籤 描述
    style 定義文檔的樣式信息
    div 定義文檔的節（塊級）
    span 定義文檔的節（行內）
    header 定義section或page的頁眉
    footer 定義section或page的頁腳
    section 定義文檔中的節（section、區段）;好比章節、頁眉、頁腳或文檔中的其餘部分
    article 定義文章
    aside 定義頁面內容以外的內容（如：文章側欄）
    details 定義元素細節（如描述文檔、文檔某個部分的細節）
    summary 爲details定義可見的標題

  10. 編程

    標籤 描述
    script 定義客戶端腳本
    noscript 定義客戶端不支持腳本的替代內容
    embed 爲外部內容(非html)定義容器
    object 定義嵌入的對象
    param 定義參數

2. 屬性（全局）

屬性（賦予元素語境和意義） 描述
class 規定元素的一個或多個類名（引用樣式表中的類）
contenteditable 規定元素內容是否可編輯
data- * 用於存儲頁面或應用程序的私有定製數據
dir 規定元素內容的文本方向
draggable 規定元素是否可拖動
hidden 規定元素仍未或再也不相關（布爾屬性）
id 規定元素的惟一id
lang 規定元素內容的語言
spellcheck 規定是否對元素進行拼寫和語法檢查
style 規定元素的行內css樣式
title 規定有關元素的額外信息
translate 規定是否應該翻譯元素內容

  1. contenteditable

    <p contenteditable="true">這是一個可編輯的段落</p>

  2. data-*

    此屬性 賦予在全部HTML元素上嵌入自定義data屬性的能力

    自定義數據可以被頁面的 Javascript 利用，以建立更好的用戶體驗

    <!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一種" + animalType + "。");
}
</script>
</head>
<body>

<h1>物種</h1>

<p>點擊某個物種來查看其類別：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鳥類">喜鵲</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="魚類">金槍魚</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蠅虎</li>  
</ul>

</body>
</html>

3. 經常使用實體

實體字符 ( ASCII Encoding Refence )是用來在代碼以實體代替與HTML語法相同的字符，避免瀏覽器解析錯誤

字符 名稱 實體名稱
「 雙引號 &+quot;
& &符 &+amp;
< 左尖括號（小於號） &+lt;
> 右尖括號（大於號） &+gt;
空格 &+nbsp;
￥ 人民幣 &+yen;
© 版權 &+copy;
® 商標 &+reg;
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程