HTML 基礎學習筆記

来源:http://www.cnblogs.com/gdwkong/archive/2017/07/22/7222583.html
-Advertisement-
Play Games

關鍵詞：屬性、標題、段落、、文本格式化、樣式、鏈接、表格、列表、塊、佈局、表單、框架、背景、實體 ...


       HTML 指超文本標記語言（Hyper Text Markup Language）,一種標記語言，用來描述網頁的一種語言。

一、HTML 基本結構示意圖

1、 HTML 標簽 (HTML tag)，由尖括弧包圍的關鍵詞(如 <html>)，通常是成對出現的，比如 <b>（開始標簽） 和 </b>（結束標簽）。

2、HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的。

3、HTML 段落是通過標簽 <p> 來定義的。

4、HTML 鏈接是通過標簽 <a> 來定義的。如：

<a href="http://www.runoob.com">這是一個鏈接</a>

    提示:在 href 屬性中指定鏈接的地址。

5、HTML 圖像是通過標簽 <img> 來定義的。如：

  • <img src="/images/logo.png" width="258" height="39" />

    註意： 圖像的名稱和尺寸是以屬性的形式提供的。

6、提示：使用小寫標簽。

二、基礎內容

1、HTML 空元素：沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。<br/> 就是沒有關閉標簽的空元素（<br/> 標簽定義換行）。

2、HTML屬性：

  • HTML 元素可以設置屬性
  • 屬性可以在元素中添加附加信息
  • 屬性一般描述於開始標簽
  • 屬性總是以名稱/值對的形式出現，比如：name="value"。
  • 屬性值應該始終被包括在引號內。雙引號是最常用的，單引號一般用於屬性值本身就含有雙引號，例如：name='John "ShotGun" Nelson'。
  • 使用小寫屬性

 　①常用的標簽屬性：

  • <h1>:align對齊方式
  • <body>:bgcolor背景顏色
  • <a>:target規定在何處打開鏈接(新視窗、原視窗等)

　②通用屬性：

  • class：規定元素的類名
  • id:  規定元素的唯一ID
  • style：規定元素樣式
  • title：規定元素的額外信息

3、HTML標題：

      ①標題（Heading）通過 <h1> - <h6> 標簽進行定義的，<h1> 定義最大的標題。 <h6> 定義最小的標題。（瀏覽器會自動地在標題的前後添加空行。）

      ②HTML水平線：<hr> 標簽在 HTML 頁面中創建水平線。hr 元素可用於分隔內容。

      ③HTML註釋格式示例：<!-- 這是一個註釋 -->；瀏覽器會忽略註釋，也不會顯示它們。

4、HTML段落

     ①段落是通過 <p> 標簽定義的。如:

<p>這是一個段落 </p>

        註意：瀏覽器會自動地在段落的前後添加空行。（</p> 是塊級元素）

    ②HTML 折線

        在不產生一個新段落的情況下進行換行（新行），使用 <br/> 標簽。

<p>這個<br>段落<br>演示了分行的效果</p>

    ③、HTML輸出—使用提醒：當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要註意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。

5、HTML<head> 　　①HTML<head>元素包含了所有的頭部標簽元素。       在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。       可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. 　　②HTML <title> 元素
  • <title> 標簽定義了不同文檔的標題。
  • <title> 在 HTML/XHTML 文檔中是必須的。
  • <title> 元素:
    • 定義了瀏覽器工具欄的標題
    • 當網頁添加到收藏夾時，顯示在收藏夾中的標題
    • 顯示在搜索引擎結果頁面的標題
③HTML <base> 元素 <base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的預設鏈接。 ④HTML <link> 元素 <link> 標簽定義了文檔與外部資源之間的關係。 <link> 標簽通常用於鏈接到樣式表: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ⑤HTML <style> 元素
  • <style> 標簽定義了HTML文檔的樣式文件引用地址.
  • 在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
  • <head> <style type="text/css"> body {/style> </head>
　　⑥HTML <meta> 元素
  • meta標簽描述了一些基本的元數據。
  • <meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
  • META 元素通常用於指定網頁的描述，關鍵詞，文件的最後修改時間，作者，和其他元數據。
  • 元數據可以使用於瀏覽器（如何顯示內容或重新載入頁面），搜索引擎（關鍵詞），或其他Web服務。
  • <meta> 一般放置於 <head> 區域
  • 為搜索引擎定義關鍵詞:
  • <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">
⑦HTML <script> 元素 <script>標簽用於載入腳本文件，如： JavaScript。

6、HTML 文本格式化

標簽描述
<b>
 定義粗體文本
<em> 定義著重文字
<i> 定義斜體字
<small>
 定義小號字
<strong>
 定義加重語氣
<sub> 定義下標字
<sup>
 定義上標字
<ins>
 定義插入字
<del>
 定義刪除字

  

7、HTML樣式

    ①標簽：

  • <style> : 樣式定義
  • <link> : 資源引用

    ②屬性：

  • rel="stylesheet":外部樣式表
  • type="text/css" :引入文檔類型
  • margin-left: 邊距

    ③三種樣式表插入方法：

  • 外部樣式表：<link rel="stylesheet" type="text/css" href="mystyle.css">
  • 內部樣式表：

<style type= "text/css">

body {" style="margin-left: 60px;">p{margin-left: 20px }

</style>

  • 內聯樣式表：<p style= "color:red">

8、HTML鏈接

　　①鏈接數據：

  •       文本鏈接
  •       圖片鏈接

②屬性：

  • href屬性：指向另一個文檔的鏈接
  • name屬性：創建文檔內的鏈接

　　③img標簽屬性：

  • alt : 替換文本屬性
  • width：寬
  • hight： 高
  • 示例：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>鏈接</title>
 6 </head>
 7 <body>
 8     <a href="http://www.jikexueyuan.com/">點擊我</a>
 9     <hr>
10     <a href="http://www.jikexueyuan.com/">
11         <img src="海葡萄.jpeg" width="200px" height="100px" alt="海葡萄">
12     </a>
13     <br/>
14     <a name="tips">hello</a>
15     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
16     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
17     <a href="#tips">跳轉到hello</a>
18 </body>
19 </html>

9、HTML表格

標簽描述
<table> 定義表格
<th> 定義表格的表頭
<tr> 定義表格的行
<td> 定義表格單元
<caption> 定義表格標題
<colgroup> 定義表格列的組
<col> 定義用於表格列的屬性
<thead> 定義表格的頁眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳

   

 

10、HTML列表

標簽描述
<ol> 定義有序列表
<ul> 定義無序列表
<li> 定義列表項
<dl> 定義列表
<dt> 自定義列表項目
<dd> 定義自定列表項的描述

 

①無序列表

使用標簽：<ul>、<li>

屬性：disc、circle、square

②有序列表

使用標簽：<ol>、<li>

屬性：A、a、I、i、start

③嵌套列表

使用標簽：<ul>、<ol>、<li>

④自定義列表

使用標簽：<dl>、<dt>、<dd>

11、HTML塊

①HTML塊元素

塊元素在顯示時，通常會以新行開始

如：<h1>、<p>、<ul>

②HTML內聯元素

內聯元素通常不會以新行開始

如：<b>、<a>、<img>

③HTML<div>元素

<div>元素也被稱為塊元素，其主要是組合HTML元素的容器

④HTML<span>

<span>元素是內聯元素，可作為文本的容器

⑤示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>塊元素</title>
 6     <link rel="stylesheet" type="text/css" href="my.css">
 7     <style type="text/css">
 8         span{
 9             color: red;
10         }
11     </style>
12 </head>
13 <body>
14     <!-- 塊-->
15     <p>大家好!</p>
16     <h1>大家好</h1>
17     <b>這是一個加重標簽</b>
18     <a>這是一個超鏈接</a>
19     <div id="divid">
20         <p>Hello</p>
21         <a>點擊我</a>
22     </div>
23     <div id="divspan">
24         <p><span>這是一個測試</span>效果</p>
25     </div>
26 </body>
27 </html>

12、HTML佈局

 ①div佈局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>div佈局</title>
 6     <style type="text/css">
 7         body{
 8             margin: 0px;
 9         }
10         #container{
11             width: 100%;
12             height: 640px;
13             background-color: darkgray;
14         }
15         #heading{
16             width: 100%;
17             height: 10%;
18             background-color: aqua;
19         }
20         #conten_menu{
21             width: 30%;
22             height: 80%;
23             background-color: aquamarine;
24             float: left;
25         }
26         #conten_body{
27             width: 70%;
28             height: 80%;
29             background-color: blueviolet;
30             float: left;
31         }
32         #footing{
33             width: 100%;
34             height: 10%;
35             background-color: black;
36             clear: both;
37         }
38     </style>
39 </head>
40 <body>
41 <div id="container">
42     <div id="heading">頭部</div>
43     <div id="conten_menu">內容菜單</div>
44     <div id="conten_body">內容主體</div>
45     <div id="footing">底部</div>
46 </div>
47 </body>
48 </html>

顯示效果：

②table佈局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>table佈局</title>
 6 </head>
 7 <body marginheight="0px" marginwidth="0px">
 8 <table width="100%" height="950px" style="" style="color: rgb(0, 0, 255);">>
 9     <tr>
10         <td colspan="3" width="100%" height="10%" style="" style="color: rgb(0, 0, 255);">>這是頭部</td>
11     </tr>
12     <tr>
13         <td width="20%" height="80%" style="" style="color: rgb(0, 0, 255);">>左菜單
14             <ul>
15                 <li>ios</li>
16                 <li>android</li>
17                 <li>html5</li>
18             </ul>
19         </td>
20         <td width="60%" height="80%" style=""></td>
21         <td width="20%" height="80%" style=""></td>
22     </tr>
23     <tr>
24         <td colspan="3" width="100%" height="10%" style="" style="color: rgb(0, 0, 255);">>這是底部</td>
25     </tr>
26 </table>
27 </body>
28 </html>

顯示效果：

13、 HTML表單

①表單用於獲取不同類型的用戶輸入

②常用的表單標簽：

標簽描述
<form> 定義供用戶輸入的表單
<input> 定義輸入域
<textarea> 定義文本域 (一個多行的輸入控制項)
<label> 定義了 <input> 元素的標簽，一般為輸入標題
<fieldset> 定義了一組相關的表單元素，並使用外框包含起來
<legend> 定義了 <fieldset> 元素的標題
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
<button> 定義一個點擊按鈕
<datalist>
 指定一個預先定義的輸入控制項選項列表
<keygen>
 定義了表單的密鑰對生成器欄位
<output>
 定義一個計算結果

 

③代碼示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表單</title>
 6 </head>
 7 <body>
 8       <form>
 9           用戶名：
10           <input type="text">
11           密碼：
12           <input type="password">
13           <br/>
14           喜歡的水果有？
15           <br/>
16           蘋果<input type="checkbox">
17           香梨<input type="checkbox">
18           香蕉<input type="checkbox">
19           <br/>
20           請選擇性別：
21           男<input type="radio" name="sex">
22           女<input type="radio" name="sex">
23           <br/>
24           請選擇您常用的網站:
25           <select>
26               <option>jikexueyuan.com</option>
27               <option>www.google.com</option>
28               <option>www.iwen.org</option>
29           </select>
30           <input type="button" value="按鈕">
31           <input type="submit" value="提交">
32       </form>
33       <textarea cols="30" rows="30">請在此填寫個人信息</textarea>
34 </body>
35 </html>

 14、HTML框架

①框架標簽（frame）：框架對於頁面的設計有著很大的作用。

②框架標簽（<frameset>）（已被替代）:

框架及標簽定義如何將視窗分割為框架

每一個frameset定義一系列行或列

rows/colsde 值規定了每行或每列占據屏幕的面積

③常用標簽：

    • noresize： 固定框架大小
    • cols：列
    • rows：行

④內聯框架(較為有用)

    iframe

15、HTML背景

①背景標簽：Background

②背景顏色：Bgcolor

③顏色：

顏色是由一個十六進位符號來定義，這個符號由紅色、綠色、藍色的值組成（RGB）

顏色值最小值：0(#00)

顏色值最大值：255（#FF）

紅色：#FF0000

綠色：#00FF00

藍色：#0000FF

16、HTML實體

      在 HTML 中，某些字元是預留的，必須被替換為字元實體。在 HTML 中不能使用小於號（<）和大於號（>），這是因為瀏覽器會誤認為它們是標簽。

      如果希望正確地顯示預留字元，我們必須在 HTML 源代碼中使用字元實體（character entities）。 字元實體類似這樣：

&entity_name;或&#entity_number;

       如需顯示小於號，我們必須這樣寫：&lt; 或 &#60; 或 &#060;


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

-Advertisement-
Play Games
更多相關文章
  • pug模板引擎(原jade)
    [1]安裝 [2]命令行 [3]標簽 [4]內容 [5]屬性 [6]註釋 [7]代碼 [8]條件 [9]迴圈 [10]混入 [11]包含 [12]繼承 [13]簡易模板 ...
  • ajax總結
    在平時的開發項目中，難免接觸前端的知識，需要寫介面，有時候用到js中的ajax跨越請求，總結了ajax的寫法。 開始之前，需要準備兩個文件，ajax.php ;ajax.html 1.ajax的基本步驟(ajax.php) ajax,有同步非同步的區別？非同步：把小弟派出去了，什麼時候回來，什麼時候處理 ...
  • React 實踐項目 （四）
    React在Github上已經有接近70000的 star 數了，是目前最熱門的前端框架。而我學習React也有一段時間了，現在就開始用 React+Redux 進行實戰！ 上回說到使用Redux-saga 管理 Redux 應用非同步操作,應用還是只有一個首頁.現在開始構建一個新的投稿頁面並使用 R ...
  • 讀Zepto源碼之Callbacks模塊
    Callbacks 模塊並不是必備的模塊，其作用是管理回調函數，為 Defferred 模塊提供支持，Defferred 模塊又為 Ajax 模塊的 風格提供支持，接下來很快就會分析到 Ajax模塊，在此之前，先看 Callbacks 模塊和 Defferred 模塊的實現。 源碼版本 本文閱讀的源 ...
  • 現在,以編程方式在 Electron 中上傳文件,是非常簡單的!
    具體到以編碼方式上傳文件這個問題上.這個問題的完整描述應該是類似於這樣: 網站有自己的登錄認證機制,在不需要在對網站登錄機製做任何修改的前提下,如何自動上傳用戶相關的文件,比如用戶頭像? 我們就以自動上傳用戶頭像為例.我們可以假定已經通過某種方式,得到了用戶頭像的本地路徑.--這個大前提,在基於 ... ...
  • css命名規範
    css命名規範 頁面結構命名 導航命名 功能命名 CSS樣式命名 CSS樣式表命名 ...
  • 關於JS中涉及的常用類型轉換及運算符表達式
    JS中的常用類型轉換(一般用強制轉換)：1.強制轉為整數：parseInt；寫法：x = parseInt(x); 2.強制轉換位小為：parseFloat；寫法：x = parseFloat(x); 3.檢測類型：x = parseInt(x); alert(typeof(true)); JS中常 ...
  • HTML5 — Wed SQL 本地資料庫示例
    HTML5 SQL本地資料庫簡單示例 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類