HTML（5）基礎

来源:https://www.cnblogs.com/agasha/archive/2018/11/16/9970951.html
-Advertisement-
Play Games

1、html常用標簽 <pre>...</pre>：標識預定義文本 <a>是anchor的縮寫，<a>標簽定義錨點和超鏈接，<a>常與href屬性連用表示超鏈接連接地址並用target來表示打開文檔的方法：_blank表示在新視窗中打開、_parent表示在父視窗中打開、_self表示在當前視窗中打 ...


 1、html常用標簽

  • <pre>...</pre>：標識預定義文本
  • <a>是anchor的縮寫，<a>標簽定義錨點和超鏈接，<a>常與href屬性連用表示超鏈接連接地址並用target來表示打開文檔的方法：_blank表示在新視窗中打開、_parent表示在父視窗中打開、_self表示在當前視窗中打開文檔， _top表示在頂層視窗中打開文檔
  • em表示小強調，以斜體顯示；strong為著重強調，以粗體顯示
  • abbr表示簡稱如dfn表示Definesa Definition Term;samp是Sample；acronym表示首字母縮寫如CSS是Cascading Style Sheets的縮寫

2、字元格式標簽：

  • <b>...</b>：標識強調文本，以加粗效果顯示。
  •  <i>...</i>：標識引用文本，以斜體效果顯示。
  • <blink>...</blink>：標識閃爍文本，以閃爍效果顯示。IE瀏覽器不支持該標簽。
  • <big>...</big>：標識放大文本，以放大效果顯示。
  • <small>...</small>：標識縮小文本，以縮小效果顯示。
  •  <sup>...</sup>：標識上標文本，以上標效果顯示。
  • <sub>...</sub>：標識下標文本，以下標效果顯示。
  • <cite>...</cite>：標識引用文本，以引用效果顯示。

3、xhtml即可擴展標記語言

  •   在文檔開頭必須定義文檔類型
  •   在根元素中應聲明命名空間，如<html xmlns="http://www.w3.org/1999/xhtml">
  •   所有標簽必須閉合
  •   所有元素和屬性必須必須小寫
  •   所有屬性必須使用“”括起來
  •   所有屬性必須被賦值
  •   所有特殊符號必須都要用編碼表示"<"用"&lt;"表示，">"用"&gt;"表示
  •   不要在註釋中使用"--"標記
  •   廢除name屬性統一使用ID屬性

4、meta標記表示網頁的相關信息即網頁元信息

  <meta name="discription" content="標準網頁設計專業技術資訊"/>

  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

  <meta http-equiv="content-language" content="zh-CN"/>

  <meta http-equiv="refresh" content="5;url="http://www.css8.cn/"/>

  <meta http-equiv="pragma" content="no-cache"/>

5、一般一個網頁只有一個一級標題。h1、h2和h3元素比較常用，h4元素偶爾使用，h5和h6元素基本上不被使用

6、 引用blockquote、cite和q

  •   blockquote常用來作大段引用，一般不直接包含內容，引用的內容必須包含在一個元素中，可以與cite聯合使用，此時，cite屬性指定引文的地址
  •   q元素可直接包含引文內容，顯示效果為外加“”
  •   cite也可與q元素通用，但不能與<span>元素同用，顯示效果為斜體
<cite title="轉載地址">http://article.hongxiu.com/a/2007-1-26/1674332.shtml </cite>

7、address表示地址、簽名、作者和文檔摘要

  <address title="作者">張三</address>
  <address title="詳細地址">中國北京</address>
  <address title="文章摘要">HTML元素的語義特征及其表現</address>

8、列表應該是同類、同型或同質信息的排列和組合

9、table屬性summary屬性表示表格摘要，不會顯示，僅是為語音合成，非視覺瀏覽器或機器定義的。

<!--表格分組-->
<colgroup>
    <col span="3" />
    <col span="3" />
    <col span="3" />
    <col span="3" />
</colgroup>   
<thead>
        <tr>
            <td rowspan="2">排名</td>
            <td rowspan="2">校名</td>
            <td rowspan="2">總得分</td>
            <td colspan="3">人才培養</td>
            <td scope="col" colspan="3">科學研究</td>
            <td scope="col" colspan="2" rowspan="2">分省排名</td>
            <td rowspan="2">學校類型</td>
        </tr>
        <tr>
            <td>得分</td>
            <td>研究生培養</td>
            <td>本科生培養</td>
            <td>得分</td>
            <td>自然科學研究</td>
            <td>社會科學研究</td>
        </tr>
    </thead>

10、form元素

  •   enctype是Encase Type（包裝類型）的簡稱
  •   enctype="application/x-www-form-urlencoded"：將表單中的數據編碼為名/值對的形式通過URL字元串的形式發送給伺服器
  •   enctype="multipart/form-data"：將表單中的數據編碼為一條消息，每個表單域對應消息中的一個部分，然後通過http方式發送到伺服器，使用這種方式一般常用來傳遞二進位信息，例如，使用表單進行  文件上傳、提交圖像等。
  •  enctype="text/plain"：將表單中的數據以純文本的形式進行編碼，其中不含任何空間（即表單域的名稱）的格式字元。這種方法一般很少使用，也不建議使用。
  •  get和post傳遞方法：get以ADCII字元通過URL地址欄傳遞，不夠安全，且受地址欄長度的影響，傳輸數據量有限；post方法則沒有字元集和容量大小的限制，且比較安全。

11、input元素

  •   覆選框包括value屬性和checked屬性，value屬性設置覆選框的傳遞值，checked屬性設置預設選中狀態
  •   單選按鈕多個name屬性值必須相同，因為單選按鈕實質上僅是一個開關，只有兩個值，true和false，伺服器僅把單選按鈕的值作為一個邏輯值來處理
  •   type="file"當表單域包含file域時，必須設置method屬性為post且enctype="multipart/form-data"，否則提交操作將失敗
  •   type="image"圖像按鈕，它是普通按鈕的自定義樣式。src指定圖像URL，該按鈕沒有動作，需要通過腳本形式為其定義操作的動作
  •   type="button"普通按鈕，沒有動作，需要通過腳本為其定義動作

12、表單分組：legend元素必須包含在fieldset元素內部，且緊鄰fieldset元素。

<form action="action.asp" name="register" id="login">
    <fieldset>
    <legend>基本信息（必填）</legend>
    <ul>
        <li>用戶名<input id="" maxlength="12" size="30" name="username" />
            <span>註冊用戶名長度限製為3～12位元組</span></li>
        <li>論壇密碼<input type="password" maxlength="16" size="30" value="" name="psw" /></li>
    </ul>
    </fieldset>
    <fieldset>
    <legend>參考資料（選填）</legend>
    <ul>
        <li>個人網址<input maxlength="80" size="44" name="homepage" /></li>
        <li>QQ號碼<input maxlength="20" size="44" name="OICQ" />
            <span>填寫您的QQ號碼，方便與他人的聯繫 </span></li>
    </ul>
    </fieldset>
    <p><input name="" type="submit" value="提交"  /></p>
</form>

13、綁定標簽和定義鍵盤屬性

        <li>
            <label for="username">用戶名</label>
            <input  type="text" id="username" name="username" accesskey="a" tabindex="2"/>
            <span>註冊用戶名長度限製為3～12位元組</span></li>
        <li>

14、select選項分區

<form action="action.asp" name="register" id="login">
    <p>
        <select name="">
            <optgroup label="數字">
            <option value="1">1</option>
            <option value="2">2</option>
            </optgroup>
            <optgroup label="字母">
            <option value="a">a</option>
            <option value="b">b</option>
            </optgroup>
        </select>
        <input name="" type="submit" value="提交"  />
    </p>
</form>

15、元素顯示類型

  •   塊狀顯示
    •   第一：塊狀元素預設寬度都是100%，即塊狀元素會擠滿一行顯示
    •   第二：塊狀元素的頭尾都會隱藏一個換行符，即塊狀元素前面和後面都不能再有其它塊狀元素和行內元素，也就是每個塊狀元素都單獨在新行顯示
  •   行內顯示
    •   第一：行內元素沒有高度和寬度，即使為它定義高度，瀏覽器也不會解析
    •   第二：行內元素的呈現效果與塊狀元素存在很大差異，這不僅僅體現在寬度和高度方面，它們可以併列顯示，隨行移動
  •   行內塊狀顯示
    •   行內塊狀顯示是行內顯示和塊狀顯示的結合，擁有各自優勢，但必須通過CSS樣式申明，即元素不會預設顯示為行內塊狀元素
  •   表格顯示和列表顯示都是一種有其自身特點的塊狀元素

16、塊狀元素

  •   html、body、form、fieldset、legend、div、p、h1~h6、ol、ul、ol、dl、dt、dd、menu、col、colgroup、pre、address、blockquote、hr、title

       行內元素

  •   span、a、area、img、abbr、acronym、b、bdo、big、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、sub、sup、tt、u、var、strong、button、select、textarea、label、object、caption、noscript

       標頭區域隱藏元素

  •   head、base、basefont、link、meta、script、style

       行內塊狀元素

  •   input、optgroup、option

       列表項元素

  •   li

      結構內隱藏元素

  •   map、param、br

      表格系列類型元素

  •   table、th、tr、caption、summary、tbody、thead、tfoot、td

17、結構嵌套規則

  •   元素名稱必須小寫
  •   塊狀元素可以包含行內元素，但是行內元素不能包含塊狀元素，只有ins和des兩個特殊的行內元素可以包含塊狀元素或行內元素
  •   scrpt元素既能包含在head元素中也能包含在body元素中，而style元素只能包含在head元素中
  •   p和h1~h6可以直接包含行內元素和純文本內容而不能直接包含塊狀元素，但可以間接包含塊狀元素
  •   ul和ol只能直接包含li元素，但是li元素可以包含任何其它元素
  •   dl只能直接包含dt和dd元素，但dt元素只能包含行內元素，不能包含任何塊狀元素，而dd元素可以包含任何元素
  •   form只能直接包含塊狀元素，input是行內元素，因此form不能直接包含input元素
  •   caption只能包含行內元素，而th和td能包含任何元素

18、局部結構的設計中儘量避免使用ID

  •   第一：局部結構一般多使用語義性標簽，定義ID意義不打
  •   第二：局部結構可能會出現很多重覆的結構，定義ID容易引發衝突
  •   第三：如果要控制局部結構的樣式，可以使用包含選擇符來精確控制文檔結構

19、HTML5語法是為了保證和之前的html語法達到最大程度的相容而設計的。

  • 文檔類型聲明統一定義為<!doctype html>
  • meta元信息可以簡化為<meta charset="utf-8"/>
  • 可以省略標記的元素
    •   第一：不允許寫結束標記的元素有area、base、br、col、command、embed、hr、img、input、keygen、link、param、source、track、wbr
    •   第二：可以省略結束標記的元素有li、dd、dt、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
    •   第三：可以省略全部標記的元素有html、head、body、colgroup、tbody
  • 具有布爾值的屬性
  • <!--只寫屬性，不寫屬性值，代表屬性為true--> <input type="checkbox" checked> <!--不寫屬性，代表屬性為false--> <input type="checked"> <!--屬性值=屬性名，代表屬性為true--> <input type="checkbox" checked="checked"> <!--屬性值=空字元串，代表屬性值為true--> <input type="checkbox" checked="">
  • 省略引號<input type="text"> <input type=text> <input type="“>

20、html5把元素分為六大類

  •   內嵌：在文檔中添加其它類型的內容，如audio、video、canvas、和iframe等
  •   流：在文檔和引用的body中使用的元素，如form、p和div等
  •   標題：段落標題，如h1、h2和hgroup等
  •   交互：與用戶交互的內容，如音頻和視頻的控制項、button和textarea等
  •   元素據：通常出現在頁面的head中，設置頁面其它部分的表現和行為，如script、style和title等
  •   短語：文本和文本結束標記，如mark、kbd、sub和sup等

  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類