Web前端H5之HTML標籤總結（一）

阿新 • • 發佈：2019-01-16

1、Web標準介紹
    * web應用領域：
        PC端
        移動端
    * 網頁介紹
        ** 組成：文字、圖片、按鈕、視訊、音訊。。。。這些元素組成
        ** web標準：製作網頁的規範
            結構標準（HTML）
            表現標準（CSS:美化網頁）
            行為標準(JavaScript：非常強大的語言)
2、基本工具介紹
    subline:
        Ctrl+N,Ctrl+S
        HTML檔案：按住！+tab可以自動生成模板
        快速複製：Ctrl+Shift+D或者p*10+tab
        快速輸入標籤：div.(標籤.)+tab
        快速選中一行：Ctrl+N
        查詢替換：Ctrl+H

3、HTML標籤
    * 單標籤：
        註釋：<!--註釋資訊--> 
 快捷鍵：Ctrl+/
        換行標籤：<br>
        橫線標籤：<hr>
    * 雙標籤：
        標題標籤：<h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6>(從大到小)
            注意：一個網頁中1號標題標籤最好出現一次
        段落標籤：<p></p>
        強調標籤：
            文字標籤:<font 
 color="顏色屬性" size="大小">改變屬性</font>   
            加粗標籤:<strong>加粗</strong>或者<b>加粗</b>
            文字斜體:<em>斜體</em>或者<i>斜體</i>
            下劃線:<ins>下劃線</ins>或者<u>下劃線</u>
            刪除線:<del>刪除線</del>或者<s>刪除線</s 
>
        沒有語義的雙標籤：
                <div>實現網頁佈局</div> <!-- 自己獨佔一行（塊元素），可以包含任何標籤-->
                <span>在網頁佈局過程中使用</span> <!-- 不會發生換行（行元素） -->

    * 多媒體標籤
        圖片標籤:<img src="設定一個圖片的路徑" title="顯示滑鼠懸停文字提示" alt="圖片顯示不出來時，顯示對圖片的描述資訊，並不是給使用者看的，給搜尋引擎提供搜尋服務" width="寬度(有一個寬高比，防止圖片失真，改變一個屬性就可以)" height="高度">
    * 路徑問題
        絕對路徑：
            ** 帶有磁碟目錄的路徑
            ** 帶有具體網址

        相對路徑：
            ** 如果資原始檔(img)和當前檔案(html)檔案在同一個資料夾中，只要寫檔案的名稱即可
            ** 如果資原始檔(img)在當前檔案的下一級目錄:src='image/1.bmp'
            ** 如果資原始檔(img)在當前檔案的上一級目錄:src='../../image/1.bmp'
    * 超連結
        <a href="涉及到相對路徑和絕對路徑問題" title="顯示文字提示">不跳轉到任何頁面寫"#"</a>
        <a href="#" target="預設值'_self':在當前頁面中顯示跳轉頁面，'_blank':跳轉到新的視窗中開啟頁面">不跳轉到任何頁面</a>
        超連結跳轉頁面的其他寫法：在<head><base target="_blank"></head>，跳轉到新的視窗中（對當前頁面的任何超連結都有效）

    * 錨鏈接(超連結的另外一種用法，實現的是本頁面的內部的跳轉)
        <a href="#">跳轉到頂部</a>
        <a href="#ID值">跳轉到固定部分</a>
    * 特殊符號
        "空格字元": &nbsp:
        "<": &lt;
        ">": &gt;
        "&":&amp;
        "￥":&yen;
        "版權":&copy;
        "註冊商標":&reg;
        "攝氏度":&deg;
        "正負號":&plusmn;
        "乘號":&times;
        "除號":&divide;
        "平方2":&sup2;
        "平方3":&sup3;
    * HTML5裡面的標籤(補充):
        *  版本介紹;
            html:4s+tab或者4t+tab或者xt=tab：產生不同的HTML版本，過渡版本和嚴格版本
            過渡版本Transitional：可以包含所有的html元素(標籤)和屬性
            嚴格版本strict：可以包含所有的html元素(標籤)和屬性，但是不包含已經廢棄掉的標籤，例如font、i和屬性（align屬性）

        * 新標籤：
            <nav>導航標籤</nav>
            <section>區域</section>
            <footer>底部</footer>
            <aside>側邊欄</aside>
            <article>文章</article>
            <!-- 注意:以上的標籤和div的用法一樣，如果在IE瀏覽器中無法顯示上面的標籤，只需要CSS樣式中動態的寫一個相同名字的標籤即可 -->
            <!-- 視訊標籤 -->
            <video src="movie.mp4" controls="顯示控制面板" autoplay="自動播放" loop="迴圈播放"></video>
            <video src="movie.mp4" controls autoplay loop width="500"></video>
            <!-- 寬度高度只設置一個即可 -->
            <!-- 多種視訊格式 -->
            <video controls >
                <source src="movie.mp4" type="">
                <source src="movie.mp3" type="">
                <source src="movie.rmvb" type="">

            </video>

            <!-- 音訊標籤 -->
            <audio src="See You Again.mp3" controls autoplay loop></audio>
            <audio src="See You Again.mp3"></audio>

Web前端H5之HTML標籤總結（一）

1、Web標準介紹 * web應用領域： PC端移動端 * 網頁介紹 ** 組成：文字、圖片、按鈕、視訊、音訊。。。。這些元素組成

菜鳥初學h5的html標籤總結（上）

一、 h5基礎介紹 1. html5的基本結構 <!DOCTYPE html>命名文件型別 <html></html>說明我們寫的是標記語言 <head></head>檔案頭部

重修課程day47（前端二之html二和css一）

100% 標簽用戶免費註冊 127.0.0.1 表單標簽 ges 愛好 order 一列表標簽　ul標簽：無序列表　ol標簽：有序列表　li標簽：寫在ul和ol標簽裏面的　dl標簽：定義列表　　dt標簽和dd標簽：都寫在dl裏面的 <!DOCTYP

常見html標籤總結（二）

1丶列表標籤無序列表： <ul> <li></li> </ul> <li></li>中書寫列表內容，一個li標籤代表一行資料特點：預設資料前面有一個黑圓圈符號有序列表： <ol

常見html標籤總結（三）

1、form標籤作用：收集並提交使用者資料給指定的伺服器注意：form會收集齊標籤內部的資料 action：收集資料提交地址（？之前的就是action的提交地址） method：收集資料的提交方式 1、get：適用少量資料，表單資料以？隔開拼接在url後面，

全棧開發之HTML快速入門（一）

ack enter 提示其他 red tle 顯示圖片 val password 一、HTML 是什麽？ HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup lan

HTML標籤參考（一）

hi，小哥哥小姐姐們，我們今天要說的是前端的入門，卻也是十分重要的意識的培養哦！ • html中的標籤數量是很多的，據人統計大概有300個左右，並且每年都會以20-30個的速度增加著，但是這麼多的標籤我們不必都去記住，因為很多標籤都是不常用的或者可以用基礎的標籤搭配組合，實際上我們需要掌握的大概在30個左右

Web 前端開發入門級學習筆記（一）

Web前端入門級學習筆記 1.基本概念 css-cascading style sheet 2.網頁設計中HTML,CSS,JavaScript地位 HTML：內容 CSS：呈現（樣式） JavaScript：互動（頁面的動態效果）

Android之Activity系列總結（一）--Activity概述

本文內容建立 Activity實現使用者介面在清單檔案中宣告 Activity啟動 Activity啟動 Activity 以獲得結果結束 Activity管理 Activity 生命週期實現生命週期回撥儲存 Activity 狀態處理配置變更協調 Activity 是一個應用元件，使用者可與其提供的螢幕進行

Linux之MariaDB基礎總結（一）

一、MariaDB簡介 MariaDB資料庫管理系統是MySQL的一個分支，主要由開源社群在維護，被視為開源資料庫MySQL的替代品。MariaDB名稱來自Michael Widenius的女兒Maria的名字。 MariaDB 是一個採用 Maria

Jmeter 使用筆記之 html 報告擴充套件（一）

題記：在用 loadrunner 的時候可以生成一個 HTML 的報告，並且裡面包含各種圖表，各種詳細的資料。而在使用 Jmeter 測試完後並不能直接生成 Html 的報告（無論是用 GUI 還是命令列啟動）。經過查詢資料發現 Jmeter 的 extra

WEB快取系統之varnish基礎入門（一）

　　前文我們聊了下http協議裡的快取控制機制以及varnish架構元件介紹，回顧請參考https://www.cnblogs.com/qiuhom-1874/p/12620538.html；今天我們來聊一下怎樣配置使用varnish；　　前邊我們說到過varnish有兩個配置檔案，一個是/etc/varn

我的IT夢——web前端開發之HTML,CSS（一）

jpg 標記語言方便 add body 前端 input cti 列表 HTML HTML全稱HyperText Markup Language（超文本標記語言）標簽成對出現 <!DOCTYPE html> 文檔類型定義 < > 標

Web前端之HTML+CSS基礎（二）

CSS Cascading Style Sheets 疊層樣式表隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。 CSS不僅可以靜態地修飾網頁

web前端面試之HTML基礎（碼動未來）

HTML簡介、語義化標籤 1.1.1、Doctype作用？標準模式與相容模式各有什麼區別? 1）<!DOCTYPE>宣告位於位於HTML文件中的第一行，處於標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。 2）標

Web前端開發之HTML+CSS基礎入門(框架)

AR 網頁 html 表單提交 pos 部分加載 selected area pin HTML框架詳解與框架布局? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 1)什麽是框架框架將瀏覽器劃分成不同的部分，每一部分加載不同的網頁，實現在同一

Web前端開發之HTML+CSS基礎入門(使用CSS樣式的方式)

AD 層疊樣 b前端開發 col In 基於允許 ML 語言 1) HTML<!DOCTYPE> 聲明標簽 a.定義和用法 <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。 <!DOCTYP

Web前端-Html部分筆記（一）

以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。由於是筆記

Java程式設計師從笨鳥到菜鳥之（十四）Html基礎總結（上）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

前端開發框架總結之Angular實用技巧（一）

前端開發框架總結之Angular實用技巧（一）前言：前一段時間接觸了Angul

Web前端H5之HTML標籤總結（一）

相關推薦