HTML5-01 簡介
標記語言
概述html
標記語言（也稱置標語言），是一種將文本及文本相關的其餘信息結合起來，展示出關於文檔結構和數據處理細節的計算機編碼。與文本相關的其餘信息（包括例如文本的結構和表示信息等）與原來的文本結合在一塊兒，可是使用標記進行表示。標記語言經常使用於網頁和網絡應用程序。當今普遍使用的標記語言是：超文本標記語言（HTML）和 可擴展標記語言（XML）。
- 分類
- 表示性的
- 在編碼過程當中，標記文檔的結構信息。
- 過程性
- 通常都專門於文本的表達，但一般對於文本編輯者可見，而且可以被軟件依其出現順序依次解讀。
- 描述性
- 描述文件的內容或結構，而不是文件的顯示外觀或樣式。
- 表示性的
HTML 概述
HTML（HyperText Markup Language）是一種用於建立網頁的標準標記語言。常與 CSS、JavaScript 一塊兒被用於設計使人賞心悅目的網頁、網頁應用程序以及移動應用程序的界面。 HTML 元素（如：<p>這是一個段落</p>）是構建網站的基石。一個元素一般包含文本信息和兩個 HTML 標籤，即：一個開標籤（如：<p>），一個閉合標籤（如：</p>）。瀏覽器使用 HTML 標籤和腳原本詮釋網頁內容，但不會將它們顯示在頁面上。 HTML 文檔（又稱 web 頁面）由 HTML 元素組成，即由 HTML 標籤及文本信息組成。 HTML 能夠嵌入腳本語言 JavaScript，其會影響 HTML 網頁的行爲；網頁瀏覽器也能夠引用層疊樣式表（CSS）來定義文本和其餘元素的外觀與佈局。
HTML 開發工具
編寫 HTML 的工具備不少，普通的文本編輯器就能夠。若你尚未選擇編輯器，那麼推薦你使用 sublime text，相信你會愛上它。如下是官網連接：
sublime textweb
HTML 基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
如圖：canvas
注意：圖中灰色的部分，是不會顯示在網頁上的，只有白色部分纔會真正顯示到網頁上。該圖是經過 HTML 標記後，顯示在瀏覽器中的效果，下邊貼出 HTML 代碼。瀏覽器代碼ruby
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> </body> <div id="html" style="border: 1px solid black; background-color: rgb(233, 233, 233); width: 500px; height: 400px; margin: 60px; padding: 6px;"><htlm> <div id="head" style="border: 1px solid black; margin: 25px; height: 100px; padding: 6px;"><head> <div id="title" style="border: 1px solid black; margin: 16px; padding: 6px;"><htlm>頁面標題</htlm></div> </head></div> <div id="body" style="border: 1px solid black; background-color: white; margin: 25px; margin-top: 0px; height: 160px; padding: 6px;"><body> <div id="h1" style="border: 1px solid black; margin: 20px; padding: 6px;"><H1>這是一個標題</H1></div> <div id="p" style="border: 1px solid black; margin: 20px; padding: 6px;"><p>這是一個段落</p></div> </body></div> </html></div> </body> </html>注意：對於以上的代碼，你是否是看的想吐？？？對，我寫的也想吐；不過，請不傷心難過。在接下來的日子裏，你會漸漸地學會如何優雅地書寫代碼。網絡
HTML 元素
- 元素
- HTML 元素定義了 HTML 文檔。一個元素能夠沒有內容，可是必定要關閉。
- 元素的組成
- 開標籤，如：<p>
- 元素內容（若沒有內容，則在開標籤中關閉標籤），如：<br/>
- 閉合標籤，如：</p>
- 屬性，並非全部的元素都具備屬性
- 元素的分類
- 塊級元素，一般會以新行來開始（和結束）。如：<div>, <h1>, <p>, <ul>, <table>
- 內聯元素，一般不會以新行開始。如：<span>, <b>, <td>, <a>, <img>
- 元素實例
段落app
<p>這是一個段落</p>
鏈接框架
<a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">這是一個鏈接</a>
換行編輯器
<br/>
HTML 屬性
概述ide
屬性老是以 鍵/值 對的形式出如今開標籤中，爲元素添加附加信息。一些 Boolean 類型的屬性，也能夠只包含屬性名錶示："property": "true"。儘管屬性對大小寫不敏感，可是推薦使用小寫。
經常使用的屬性
屬性 描述 是否爲 HTML5 新增 accesskey 設置訪問元素的鍵盤快捷鍵 class 規定元素的類名 contenteditable 規定元素內容是否可編輯 是 contextmenu 指定一個元素的上下文菜單。當用戶右擊該元素，出現上下文菜單 是 data-* 用於存儲頁面的自定義數據 是 dir 設置元素中內容的文本方向 draggable 指定某個元素是否可拖動 是 dropzone 指定是否將數據複製，移動，或連接，或刪除 是 hidden 對元素進行隱藏 是 id 規定元素的惟一 id lang 設置元素中內容的語言代碼 spellcheck 檢測元素是否拼寫錯誤 是 style 規定元素的行內樣式（inline style） tabindex 設置元素的 Tab 鍵控制次序 title 規定元素的額外信息（可在工具提示中顯示） translate 指定是否一個元素的值在頁面載入時是否須要翻譯 是 - 最經常使用的屬性
- class
- id
- style
- title
關於屬性
在此，再也不詳細敘述每個屬性的用法，在後續的內容中，會逐漸地闡述這些屬性的使用方法及對元素的影響。
HTML 標籤
基礎
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <!DOCTYPE> 定義文檔類型 <html> 定義一個 HTML 文檔 <title> 爲文檔定義一個標題 <body> 定義文檔的主體 <h1> 到 <h6> 定義 HTML 標題 <p> 定義一個段落 <br> 定義簡單的拆行 <hr> 定義水平線 <!--...--> 定義一個註釋 格式
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <pre> 定義預格式文本 <bdo> 定義文本的方向 <center> 定義居中文本 是 <big> 定義大號文本 是 <small> 定義小號文本 <b> 定義粗體文本 <em> 定義強調文本 <strong> 定義語氣更爲強烈的強調文本 <i> 定義斜體文本 <u> 定義下劃線文本 <del> 定義被刪除文本 <s> 定義加刪除線的文本 <strike> 定義加刪除線的文本 是 <ins> 定義被插入文本 <kbd> 定義鍵盤文本 <samp> 定義計算機代碼樣本 <sub> 定義下標文本 <sup> 定義上標文本 <abbr> 定義一個縮寫 <acronym> 定義只取首字母的縮寫 是 <blockquote> 定義塊引用 <cite> 定義引用(citation) <q> 定義短的引用 <address> 定義文檔做者或擁有者的聯繫信息 <bdi> 容許您設置一段文本，使其脫離其父元素的文本方向設置 是 <code> 定義計算機代碼文本 <dfn> 定義項目 <font> 定義文本的字體、尺寸和顏色 <mark> 定義帶有記號的文本 是 <meter> 定義度量衡。僅用於已知最大和最小值的度量 是 <progress> 定義運行中的任務進度（進程） 是 <rp> 定義不支持 ruby 元素的瀏覽器所顯示的內容 是 <rt> 定義字符（中文註音或字符）的解釋或發音 是 <ruby> 定義 ruby 註釋（中文註音或字符 是 <time> 定義一個日期/時間 是 <tt> 定義打字機文本 是 <var> 定義文本的變量部分 <wbr> 規定在文本中的何處適合添加換行符 是 表單
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <form> 定義一個 HTML 表單，用於用戶輸入 <input> 定義一個輸入控件 <label> 定義 input 元素的標註 <output> 定義一個計算的結果 是 <select> 定義選擇列表（下拉列表） <optgroup> 定義選擇列表中相關選項的組合 <option> 定義選擇列表中的選項 <datalist> 規定了 input 元素可能的選項列表 是 <fieldset> 定義圍繞表單中元素的邊框 <legend> 定義 fieldset 元素的標題 <button> 定義按鈕 <textarea> 定義多行的文本輸入控件 <keygen> 規定用於表單的密鑰對生成器字段 是 框架
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <frame> 定義框架集的窗口或框架 是 <frameset> 定義框架集 是 <noframes> 定義針對不支持框架的用戶的替代內容 是 <iframe> 定義內聯框架 圖像
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <img> 定義圖像 <map> 定義圖像映射 <area> 定義圖像地圖內部的區域 <canvas> 經過腳本（一般是 JavaScript）來繪製圖形（好比圖表和其餘圖像） 是 <figcaption> 定義一個 caption for a <figure> element 是 <figure> figure 標籤用於對元素進行組合 是 Audio/Video
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <audio> 定義聲音，好比音樂或其餘音頻流 是 <video> 定義一個音頻或者視頻 是 <source> 定義media元素 (<video> 和 <audio>)的媒體資源。media 是 <track> 爲媒體(<video> 和 <audio>)元素定義外部文本軌道 是 鏈接
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <a> 定義一個連接 <link> 定義文檔與外部資源的關係 <nav> 定義導航連接 是 列表
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <ul> 定義一個無序列表 <ol> 定義一個有序列表 <dl> 定義一個定義列表 <li> 定義一個列表項 <dt> 定義一個定義定義列表中的項目 <dd> 定義定義列表中項目的描述 <menu> 定義菜單列表 <dir> 定義目錄列表 是 <command> 定義用戶可能調用的命令（好比單選按鈕、複選框或按鈕） 表格
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <table> 定義一個表格 <caption> 定義表格標題 <th> 定義表格中的表頭單元格 <tr> 定義表格中的行 <td> 定義表格中的單元 <thead> 定義表格中的表頭內容 <tbody> 定義表格中的主體內容 <tfoot> 定義表格中的表注內容（腳註） <col> 定義表格中一個或多個列的屬性值 <colgroup> 定義表格中供格式化的列組 樣式/節
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <style> 定義文檔的樣式信息 <div> 定義文檔中的節 <span> 定義文檔中的節 <header> 定義一個文檔頭部部分 是 <footer> 定義一個文檔底部 是 <section> 定義了文檔的某個區域 是 <article> 定義一個文章內容 是 <aside> 定義其所處內容以外的內容 是 <details> 定義了用戶可見的或者隱藏的需求的補充細節 是 <dialog> 定義一個對話框或者窗口 是 <summary> 定義一個可見的標題。 當用戶點擊標題時會顯示出詳細信息 是 元信息
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <head> 定義關於文檔的信息 <meta> 定義關於 HTML 文檔的元信息 <base> 定義頁面中全部連接的默認地址或默認目標 <basefont> 定義頁面中文本的默認字體、顏色或尺寸 是 程序
屬性 描述 是否爲 HTML5 新增 HTML5 中已不支持 <script> 定義客戶端腳本 <noscript> 定義針對不支持客戶端腳本的用戶的替代內容 <applet> 定義嵌入的 applet 是 <object> 定義嵌入的對象 <param> 定義對象的參數
相關文章
- 1. unity3d 簡介_Unity 3D簡介
- 2. jdbc簡介_JDBC簡介
- 3. servlet簡介_Servlet簡介
- 4. mysql-front簡介_MySQL-簡介
- 5. tensorflow簡介_TensorFlow簡介
- 6. tensorflow簡介_TensorFlow-簡介
- 7. keras 簡介_Keras-簡介
- 8. webgl簡介_WebGL簡介
- 9. Linux 介紹簡介
- 10. 簡介
- 更多相關文章...
- • Scala 簡介 - Scala教程
- • AJAX 簡介 - PHP教程
- • Github 簡明教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章