Web前端教程-HTML及標簽的使用

来源:https://www.cnblogs.com/haochen273/archive/2019/04/26/10775937.html
-Advertisement-
Play Games

[TOC] 1. HTML簡介 HTML由標簽和屬性構成的 1.1. HTML文檔基本結構 2. 標簽 學習html語言就是學習標簽的用法 2.1. 標簽語法 長在尖號後面第一個單詞就是標簽（標記，元素） 一組告訴瀏覽器如何處理一些內容的標簽，通過關鍵字來識別， 不同標簽代表不同含義，比如段落標簽、 ...


目錄

1. HTML簡介

HTML由標簽和屬性構成的

1.1. HTML文檔基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
          網頁顯示內容
    </body>
</html>

2. 標簽

學習html語言就是學習標簽的用法

2.1. 標簽語法

長在尖號後面第一個單詞就是標簽（標記，元素）

  • 一組告訴瀏覽器如何處理一些內容的標簽，通過關鍵字來識別， <body>, <title>, <meta>
  • 不同標簽代表不同含義，比如段落標簽、文本標簽、鏈接標簽、圖片標簽等
  • 標簽一般分為兩種：
    • 單標簽: 聲明（meta）或者插入元素(img)，
    • 雙標簽: 設置一段區域的內容： <p></p>

1.2. 標簽的屬性和值

在標簽後面的，並通過空格隔開的

  • 元素內部可以設置屬性和值，這些屬性值用來改變元素某些方面的行為
  • 屬性和屬性值用等號連接，屬性值用雙引號括起來

1.3. 常見的標簽

1. 基礎標簽

標簽 描述
<html> 定義HTML文檔
<title> 文檔標題
<body> 文檔主體
<h1-6> HTML標題
<p> 段落
<br> 折行
<hr> 水平線
<!--...--> 註釋

2. 格式標簽

標簽名稱 說明
a 超鏈接元素-->(2)
br 強制換行
wbr 安全換行(英文狀態下使用)
b 加粗
strong 加粗
i 傾斜
em 傾斜
s 刪除線
del 刪除線
u 下劃線
ins 下劃線
small 小字體
sub 下標
sup 上標
code 代碼
abbr 縮寫(本身無實際作用)
dfn 傾斜
q 加雙引號
cite 傾斜(引用標題)
ruby 包含漢語拼音
bdo 文字方向(dir = “rtl或者lfr”)
mark 突出顯示(黃色背景，黑色的字)
time 顯示日期與實踐
span 一般性文本（一般用於CSS）
hr 空標記，水平線
&nbsp; 空格
&lt 左括弧>
&gt 右括弧<

3. 表單標簽

  • form預設是GET方法提交，直接通過地址信息提交，用於大量文本且不敏感的信息
  • form可以通過method改為post， 輸入的敏感信息就不會再地址中顯示出來，用於少量文本且敏感的信息
標簽名稱 說明
form 定義供用戶輸入的HTML表單
input 輸入控制項
textarea 多行輸入控制項
button 按鈕
select 選擇列表
optgroup 選擇列表中相關選項的組合
option 選擇列表中的選項
label input 元素的標註
fieldset 定義圍繞表單中元素的邊框
legend 定義 fieldset 元素的標題
datalist 定義下拉列表
keygen 定義生成密鑰
output 輸出的一些類型

例子：

<b>1. form元素（用以用戶輸入數據）:</b>  <br>
<!--action：表單提交的頁面， method：用get和post提交，enctype：採用編碼格式，name：表單名稱，target：提交目標，
    autocomplete瀏覽器記住用戶數據，novalidate驗證性,form讓表單為的元素和指定的表單掛鉤提交--->
<form name="form01" autocomplete="on" action="http://www.haosou.com" id="register">
    <!--fieldset對錶單進行分組, name+form+disabled-->
    <fieldset>
        <!--legend為分組添加標簽-->
        <legend>註冊分組</legend>
        <!--label可用於CSS-->
        <label>
        <!--input屬性:autofocus:游標選中，disabled不可輸入，autocomplete記住用戶，type，name用提交數據的，value的預設值--->
        用戶名： <input name="User" value="666"> <br>
        </label>

        <label>
        <!--外部表單控制項可以連接form-->
        電子郵件： <input name="email" form = "register">
        </label>

        <!--button屬性: type：submit提交/reset重置/button按鈕， formaction, formenctype, formmethod, formtarget, formvalidate-->
        <button>提交</button>
    </fieldset>
</form> <br>

<b>2. Input的type屬性：</b> <br>

<form>
    <!--text的屬性: maxlength,size, name, value, readonly, disabled, list提供建議值,required必須輸入才能提交, palceholder輸入字元的提示 -->
    文本：<input type="text" list="abc" required> <br>
    <!--password的屬性：與text基本一致-->
    密碼：<input type="password" placeholder="輸入密碼吧"> <br>
    搜索: <input type="search"> <br>
    <!--max,min,step,-->
    數字: <input type="number"> <br>
    範圍: <input type="range"> <br>
    日期: <input type="date"> <input type="month"> <input type="time"> <input type="week"> <input type="datetime"> <input type="datetime-local"> <br>
    顏色: <input type="color"> <br>
    覆選框: 音樂<input type="checkbox" name="music" value="1">  體育<input type="checkbox" name="sport" value="2"> <br>
    單選框: <input type="radio" name="sex" value="1" checked>男  <input type="radio" name="sex" value="2">女 <br>
    提交: <input type = "submit"> <br>
    重置: <input type="reset"> <br>
    按鈕: <input type="button"><br>
    圖片按鈕: <input type = "img" src="img/dog.jpg"> <br>
    email: <input type="email"> <br>
    telephone: <input type="tel"><br>
    URL: <input type="url"><br>
    隱藏:<input type="hidden" value="1"><br>
    上傳文件:<input type="file" accept="image/gif"><br>

    <button>提交</button>
</form>

<datalist id="abc">
    <option value="1">蘋果</option>
    <option value="2">橘子</option>
</datalist> <br>

<b>3. 下拉列表框：</b> <br>
<form action="http://www.haosou.com">
    <!--auto,disabled,form size（下拉高度）,multiple（多選）,autofocus, required-->
    <select name="fruit">
        <!--選項分組-->
        <optgroup label="水果">
            <option value="1">蘋果</option>
            <option value="2" selected>橙子</option>
            <option value="3">香蕉</option>
        </optgroup>
        <optgroup label="粗糧">
            <option value="4">大米</option>
            <option value="5">稻穀</option>
            <option value="6">玉米</option>
        </optgroup>
    </select>
    <button>提交</button>
</form>  <br>

<b>4.多行文本框：</b> <br>

<form action="http://www.haosou.com">
    <!--name,form,readonly,disabled,maxlength,autpfocus,placeholder,rows,cols,wrap,requried-->
    <textarea name="content" cols="30" rows="10">
        請留下你的建議
    </textarea>
    <button>提交</button>
</form> <br>

4. 框架標簽

標簽名稱 說明
frame 定義框架集的視窗或框架
frameset 定義框架集
noframes 定義針對不支持框架的用戶的替代內容
iframe 定義內聯框架

5.圖形標簽

標簽名稱 說明
img 定義圖像
map 定義圖像映射
area 定義圖像地圖內部的區域
canvas 定義圖形
figcaption 定義 figure 元素的標題
figure 定義媒介內容的分組，以及它們的標題 
在頁面中插入另外一個frame： <br>
<a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a>

<br>

<iframe src="http://www.bilibili.com" frameborder="1" width="800", height="600" name="in"></iframe> <br>

6. 音頻視頻標簽

標簽名稱 說明
audio 聲音內容
source 媒介源
track 定義用在媒體播放器中的文本軌道
video 定義視頻

例子：

<h1>9.音頻和視頻</h1>

<!--autoplay自動播放，loop反覆播放，muted靜音, poster是視頻開頭的圖片，preload載入網路video使用，none什麼都不載入，metadata下第一幀，auto儘快下載-->
<video src="pink.mp4" width="640" height="480" controls poster="img/dog.jpg"></video> <br>  <br>

音頻和視頻幾乎一樣（除了沒有寬高）: <br>

<audio src="xusong.mp3" controls></audio> <br>

7. 鏈接標簽

標簽名稱 說明
<a href="val"> 外部跳轉用url，內部跳轉用錨點#

超鏈接的屬性

屬性 說明
href 指定a所指向的資源URL
hreflong 指向的鏈接資源所用的語言
meida 說明所鏈接資源用於哪種設備
rel 說明文檔與所鏈接資源的關係類型
target 指定用以打開鎖鏈接自願的瀏覽環境
type 說明所鏈接資源的MIME類型

8. 列表標簽

標簽名稱 說明
p 段落
div 通用分組(用途較少)
blockquote 引用大段內容
pre 展示格式化的內容
hr 添加分割水平線
ul-li 無序列表
ol-li 有序列表
dl-dt-dd 生成說明列表,用於圖片註釋
figure-figcaption 圖片及圖片標題

例子如下：

無序列表:<br>
<ul>
    <li><a href="https://www.google.com.hk/">張三</a></li>
    <li>李四</li>
    <li>王五</li>
</ul> <br>

有序列表：<br>

<ol type = 'a' start="2">
        <li>張三</li>
        <li value="8">李四</li>
        <li>王五</li>
</ol> <br>

9. 表格標簽

標簽名稱 說明
table 表格
thead 標題行
tbody 表格主體
tfoot 表腳
tr 一行單元格
th 標題行單元格
td 單元格
col 一列
colgroup 一組列
caption 表格標題

表格的屬性有如下的：

表格屬性 說明
border 表格的邊框
cellpadding 單元格內容和邊框距離
cellspacing 單元格之間的距離
align 水平對齊方式
valign 垂直對齊方式
colspan 單元格水平合併
rowspan 單元格垂直合併

例子如下：

<!--cellpadding: 內容和邊框的距離-->
<!--cellspacingg: 格子之間的距離-->
<table border="1" width="500" height = "300" cellpadding="10" cellspacing = "10">
  <!--表的標題-->
  <caption>這是標題</caption>

  <!--設置某一列為紅色-->
  <colgroup>
      <!--第一列不設置-->
      <col>
      <!--第二列為紅色-->
      <col style = "background: red;" span = "1">
  </colgroup>
  <!--tr表示一行-->
  <tr>
    <!--th表示表頭-->
    <!--valign表示垂直對齊-->
    <th valign="top">序號</th>
    <th>產品名稱</th>
    <th>產品價格</th>
    <th>產品數量</th>
    <th>統計</th>
  </tr>
  <tr>
    <!--colspan表示水平合併-->
    <td colspan="5">水平合併</td>
  </tr>

  <tr>
    <!--td表示一格-->
    <!--align表示水平對齊-->
    <td align="center">1</td>
    <td align="center">蘋果</td>
    <td>￥5.00</td>
    <td>1000</td>
    <!--rowspan表示垂直合併-->
    <td rowspan="3"></td>
  </tr>
  <tr>
    <td>2</td>
    <td>橘子</td>
    <td>￥6.00</td>
    <td>2000</td>
  </tr>
  <tr>
    <td>3</td>
    <td>葡萄</td>
    <td>￥16.00</td>
    <td>2300</td>
  </tr>
</table> <br>

10. 樣式/節 標簽

標簽名稱 說明
style 文檔的樣式信息
div 文檔的節
span 文檔的節
header section或者page的頁眉
footer section或者page的頁腳
section 定義section
article 定義文章
aside 定義頁面內容之外的內容
details 定義元素的細節
dialog 定義對話框或視窗

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

-Advertisement-
Play Games
更多相關文章
  • Hi3516EV300專業型HD IP Camera SoC
    Hi3516EV300晶元特點： 處理器內核 ARM Cortex A7@ 900MHz，32KB I-Cache，32KB D-Cache /128KB L2 cache 支持 Neon 加速，集成 FPU 處理單元 視頻編碼 H.264 BP/MP/HP，支持 I/P 幀 H.265 Main ...
  • FreemarkerJavaDemo【Android將表單數據生成Word文檔的方案之一（基於freemarker2.3.28，只能java生成）】
    版權聲明：本文為HaiyuKing原創文章，轉載請註明出處！ 前言 這個方案只能在java中運行，無法在Android項目中運行。所以此方案是：APP將表單數據發送給後臺，後臺通過freemarker將表單數據根據模板ftl文件生成Word文件，然後返回給APP，由APP進行展現。 前期準備 1、下 ...
  • 為View設置左右切換動畫
    本文同步自http://javaexception.com/archives/64 問題: 近期的需求中，碰到了一個view切換動畫的需求。要實現的是點擊按鈕，從左到右滑動view，左邊的view消失，右邊的view出現。有點像文字跑馬燈的效果，不過這次滾動的是view，具體看截圖效果。 實現思路: ...
  • web路徑問題相對路徑和絕對路徑，電腦相對路徑和絕對路徑
    web路徑問題相對路徑和絕對路徑，電腦相對路徑和絕對路徑。 ...
  • Node.js學習（第一章：Node.js簡介）
    1. Node.js是什麼？ Node.js 誕生於 2009 年，由 Joyent 的員工 Ryan Dahl 開發而成, 目前官網最新版本已經更新到 12.0.0版本，最新穩定的是10.15.3。Node.js 不是一門語言也不是框架，它只是基於 Google V8 引擎的 JavaScript ...
  • Web前端教程2-CSS教程
    [TOC] 1. CSS基本語法 CSS是層疊樣式表 1.1. CSS基本定義 CSS的定義方法時： 選擇器是將樣式和頁面元素關聯起來的名稱 屬性是希望設置的樣式屬性，每個屬性有一個或多個值 CSS引入頁面的方法 1. 在HTML中通過外聯方法 2. 內聯式，通過標簽的style屬性，直接在標簽上寫 ...
  • Vue.js 學習筆記 第4章 v-bind 及 class與style綁定
    DOM元素經常會動態地綁定一些class類名或style樣式，本章將介紹使用v-bind指令來綁定class和style的多種方法。 ...
  • 預告：基於 ReactJS 開發簡單的圖表編輯器 01 編輯器基本結構實現
    這裡是預告 程式中經常有一些業務需要定製化，我定製化這些業務的方式主要是基於工作流、配置等方式。由於個人水平限制並不一定知道最好的方案是什麼。但卻希望有一種更通用的方案來處理。 雖然無代碼化並不是最終的追求，DSL在實用性方面還是具有獨到的優勢的。但是對於簡單的業務定製、甚至說不算是太複雜的業務，可 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類