HTML 基礎知識

来源:https://www.cnblogs.com/yinxiaofei/archive/2019/07/16/11193935.html
-Advertisement-
Play Games

"HTML基本結構" "HTML頭部標簽" meta 標簽 link 標簽 base 標簽 "HTML標簽" "HTML 標簽分類" "HTML 標簽屬性" "排版標簽" "文本格式化標簽" "圖片標簽 img" "鏈接標簽 a" "列表標簽" "表格標簽 table" "表單標簽 form" in ...


HTML基本結構

HTML頭部標簽

  • meta 標簽

  • base 標簽

HTML標簽

HTML（Hyper Text Mark-up Language，超文本標記語言），一種使用標記標簽 (tag) 描述網頁的語言，其中的“超文本“是指頁面內除文本之外還可以包含圖片、鏈接、程式、音頻、視頻等非文字元素。

HTML 常用於編寫頁面主體結構，CSS 常用於對頁面進行靜態修飾，JavaScript 常用於對網頁增加動態功能。

一、 HTML 基本結構

<!-- HTML註釋格式 -->

<!-- 標準HTML文檔格式 -->

<!DOCTYPE html>  <!-- H5文檔類型=html -->
<html lang="en">  <!-- language=English -->
<head>
    <meta charset="UTF-8"> <!-- 字元集 -->
    <!-- 屏幕自適應大小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文檔標題</title>
</head>
<body>
    文檔主體內容
</body>
</html>

二、HTML 頭部標簽

1. meta 標簽 - 元信息

  • meta標簽：頁面元信息，位於<head></head>中

  • meta標簽屬性：鍵值對

1 定義編碼格式：<meta charset="UTF-8">
2 為搜索引擎定義關鍵詞：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3 為網頁定義描述內容：<meta name="description" content="HTML基礎">
4 定義網頁作者：<meta name="author" content="Mr mo">5 每30秒中刷新當前頁面：<meta http-equiv="refresh" content="30">
6 常用的針對移動網頁優化過 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

2. link標簽 - 鏈接外部資源

<!--鏈接外部css文件-->
<link rel="stylesheet" type="text/css" href="文件url" />  
<!--鏈接icon文件-->
<link rel="icon" href="favicon.ico" />

3. base標簽 - 基準鏈接

  • 為頁面所有鏈接規定預設 url 或預設 target
<base href="" target="" />
<base/>屬性 值 描述
herf url 規定頁面所有鏈接的預設url
target _self
_blank		 規定頁面所有鏈接的預設打開方式

三、HTML 標簽

1. HTML標簽分類

按標簽類型分類：

標簽類型 標簽
單標簽 <br/>，<img/>，<input/>...
雙標簽 <p></p>，<div></div>...

按標簽顯示模式分類：

標簽顯示模式 標簽
塊級元素 <div></div>，<ul></ul>...
行級元素 <span></span>，<a></a>...
行內塊元素 <img/>、<td></td>...

2. HTML標簽屬性

HTML標簽屬性格式：name="value";

例如：

屬性 值 描述
id id 規定元素的唯一 id
class classname 為 html 元素定義一個或多個類名(classname)
style style_definition 規定元素的行內樣式（inline style 內聯樣式）
title text 描述了元素的額外信息 (作為工具條使用)

詳細參考 《HTML標準屬性參考手冊》

3. 排版標簽

排版標簽 HTML標簽
標題標簽 <h1>一級標題</h1> ~ <h6>六級標題</h6>
段落標簽 <p>這是一個段落</p>
換行標簽 <br/>
水平線標簽 <hr/>
塊標簽 <div></div>
行標簽 <span></span>

4. 文本格式化標簽

文本格式 HTML4 HTML5
加粗 <b></b> <strong></strong>
斜體 <i></i> <em></em>
下劃線 <u></u>不推薦使用 <ins></ins>
刪除線 <s></s>不推薦使用 <del></del>

5. 圖片標簽 - img

<img src="url" alt="替代文本" />
<img/>屬性 值 描述
src url 本地圖片路徑 / 網路圖片url
alt text 圖片非正常顯示的替代文本
width&height px，% 設置圖像寬&高
title text 滑鼠懸停時的顯示文本
border px 圖像邊框寬度

避免圖片失真：推薦width&height只設置一個值；

6. 鏈接標簽 - a

<a herf="url" target="_blank"></a>
<a>屬性 值 描述
href url 超鏈接url / #id
target _self
_blank		 本標簽頁打開（預設）
新標簽頁打開
name text 錨點名稱
title " " 滑鼠移到上面顯示的文本描述

(1) 錨點定位：<a href="#id/name"></a>

  • 給每個錨點添加ID，點擊鏈接直接跳轉到對應ID的位置
<a href="index.html#box1">錨點1</a>
<a href="http://www.baidu.com/#box2">錨點2</a>
....
<div id="box1">
<div id="box2">

(2) 路徑

  • 內部頁面用相對路徑，外部鏈接用URL
<a href="images/drinks.gif"></a>// images文件夾下的drinks.gif文件
<a href="../../book/index.html"></a> // .. 代表上行到父文件夾

7. 列表標簽

(1) 無序列表 - ul

<ul>
    <li>表項1</li>
    <li>表項2</li>
</ul>

(2) 有序列表 - ol

<ol>
    <li>表項1</li>
    <li>表項2</li>
</ol>

(3) 自定義列表 - dl

<dl>
    <dt>上級表項1</dt>
        <dd>下級表項11</dd>
        <dd>下級表項12</dd>
    <dt>上級表項2</dt>
        <dd>下級表項21</dd>
        <dd>下級表項22</dd>
</dl>

列表項計數問題：從1開始計數，dl從dt開始計數

8. 表格標簽 - table

<table border="1px">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行第1格</td>
            <td>第1行第2格</td>
        </tr>
        <tr>
            <td>第2行第1格</td>
            <td>第2行第2格</td>
        </tr>
    </tbody>
</table>

空單元格邊框未顯示問題：在空單元格中添加一個空格占位符&nbsp;

<table>屬性：

  • border-spacing：單元格之間邊框間距

    • border-spacing:10px 30px; 10px的水平間距，30px的垂直間距（IE6不相容）

  • Border-collapse ：摺疊兩個邊框為一個

    • 給 table 加 border-collapse:collapse;

  • cellspaceing：單元格間距；

  • cellpadding：單元格邊距；

<td>屬性：

  • 合併單元格：rowspan=""跨行， colspan=""跨列；

    • <td colspan="2"></td> ：兩列合併為一個

  • 水平對齊方式：align="left/center/right"；

9. 表單標簽 - form

  • 特性：inline-block
<form action="" method="GET">
    表單域：表單元素；
</form>
<form>屬性 值 描述
action url 規定提交表單的目的地址url
method GET
POST		 規定提交表單使用的 HTTP 方法
target _self
_blank		 規定action的打開方式

HTTP 方法：

  • GET：表單數據在地址欄可見，明文；（預設）

  • POST：表單數據在地址欄不可見，密文；

(1) input 標簽

  • <input type="" name="" value="" />

  • name是後端使用的，但是習慣是要寫個空的值

<input/>屬性 值 描述
type text
password
radio
checkbox
button
submit
reset
image
file		 單行文本輸入框
密碼輸入框
單選框
覆選框
普通按鈕
提交按鈕
重置按鈕
圖片
文件
name 用戶自定義 input控制項名稱
value 用戶自定義 input控制項初始文本值
checked checked 定義選框預選項
disabled disabled 禁用表單元素
size number 欄位顯示寬度
maxlength number 欄位最大長度

  • <input type="checkbox" name="" checked/>運動 （checked就是預設選中，disabled 禁用）

  • H5新增input屬性：

<input/>屬性（H5） 值 描述
placeholder text 輸入欄位的提示
autofocus autofocus 規定在頁面載入時是否獲得焦點（不適用於 type="hidden"）
multiple multiple 多文件上傳
autocomplete on
off		 是否使用欄位的自動完成功能
required required 必填項，不能為空

  • H5新增input type值：

input type值（H5） 描述
email 郵箱格式
tel 手機號碼
url url格式
number 數字格式
search 搜索框
range 自由拖動滑塊
time 時分
date 年月日
datetime 時間
month 月年
week 星期 年

(2) label 標簽

  • 為 input 元素定義標註
<input type="checkbox" name="" id="a"/>
<label for="a">……</label> //只有這樣才能相容IE6
<label>屬性 值 描述
for id 規定 label 綁定到哪個表單元素。
form form_id 規定 label 欄位所屬的一個或多個表單。

(3) select 標簽-下拉列表

<select name="" id="">
    <option value="">下拉項1</option>
    <option value="">下拉項2</option>
</select>
值 描述
selected selected 定義下拉列表預設項
disabled disabled 禁用表單元素
value text 定義送往伺服器的選項值
  • 對高度的支持不相容,所以一般只給寬，高度不會控制

(4) textarea 標簽-文本域

<textarea name="" id="" cols="30" rows="10">
    文本域：多行文本
</textarea>
  • rows&cols：定義文本的可見行&列

(5) fieldset 標簽-元素分組

<fieldset>
    <legend>元素組標題</legend>
    表單元素1: <input type="text" />
    表單元素2: <input type="text" />
</fieldset>

(6) datalist 標簽 - input 可能值（H5）

  • datalist 標簽：定義選項列表。與 input 連用，定義 input 可能的值。
<input list="datalist-id" />
<datalist id="datalist-id">
    <option value="input可能值_01">
    <option value="input可能值_02">
    <option value="input可能值_03">
</datalist>

10. 多媒體標簽

(1) embed 標簽 - 嵌入內容

  • <embed src="" type=""/>
<embed/>屬性 值 描述
src url 嵌入內容的url
type type 嵌入內容的類型
width&height px 嵌入內容的寬&高

(2) audio 標簽 - 音頻

  • <audio src=""></audio>
<audio>屬性 值 描述
src url 音頻的url
autoplay autoplay 自動播放
control control 顯示音頻控制項
loop loop 迴圈播放

(3) video 標簽 - 視頻

  • <video src=""></video>
<video>屬性 值 描述
src url 音頻的url
autoplay autoplay 自動播放
control control 顯示視頻控制項
loop loop 迴圈播放
width&height px 視頻的寬&高

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

-Advertisement-
Play Games
更多相關文章
  • 大專生自學web前端到找到工作的經驗
    先做個自我介紹，我13年考上一所很爛專科民辦的學校，學的是生物專業，具體的學校名稱我就不說出來獻醜了。13年我就輟學了，我在那樣的學校，一年學費要1萬多，但是根本沒有人學習，我實在看不到希望，我就退學了。退學後我也迷茫，大專都沒有畢業，我真的不知道我能幹什麼，我在糾結著我能做什麼。所以輟學後我一段時 ...
  • koa2使用es7 的裝飾器decorator
    本文主要講述我在做項目中使用裝飾器（decorator）來動態載入koa-router的路由的一個基礎架構。 目前JavaScript 對decorator 是不支持，但是可以用babel 來編譯 既然是koa2結合decorator 使用，首先是要起一個koa2 項目。 環境要求： node >7 ...
  • ElementUI 源碼簡析——Basic篇
    Layout 佈局 row 佈局組件中的父組件，用於控制子組件。很簡單的一個佈局標簽，主要通過 justify 和 align 控制子元素的對齊方式，使用 render 函數通過傳入的 tag 屬性控制生成的標簽。 在這裡推薦學習下 render 函數和 JSX 的寫法，因為之後比較複雜的組件都是通 ...
  • 零基礎轉行web前端，如何高效的去學習web前端
    web前端開發要學的知識內容涉及的會很寬泛，雖然說主要是HTML、CSS和JavaScript這些基礎知識點，但學前端開發除了要學這些基礎知識外，學員還要在這之上進行延伸和深入的去學，而且互聯網時代不斷發展，掌握了這些新技術、新技能，在職場的競爭力必然會翻倍提升。 前端開發 一。零基礎學web前端開 ...
  • 關於JS、JQ首行首列固定展示
    當時遇見這個問題 是醫院手麻系統大批量數據展示，由於是舊項目系統沒有使用到前端的架構 只能使用JQ,JS, css完成 也謝謝給予我支持的同行們 固定首行數據： 採用函數的方式進行 JQ /** * 功能：固定表頭 * 參數 viewid 表格的id * scrollid 滾動條所在容器的id * ...
  • angular版聊天室|仿微信界面IM聊天|NG2+Node聊天實例
    一、項目介紹 運用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技術實現開發的仿微信angular版聊天室angular-chatroom實例項目，實現了下拉刷新、聊天消息右鍵菜單、發送消息、表情(動圖)， ...
  • javascript中用&&跟||來簡化if{}else{}的寫法
    javascript中用&&跟||來簡化if{}else{}的寫法 [toc] 1. if else的寫法 表示如果傳入數組為非空，則賦值傳入的經緯度數據；如果表示如果傳入數組為空，則賦值固定的經緯度數據。 2. javascript中 && ||的用法 a() && b();如果執行a()後返回t ...
  • Web前端——JavaScript擴展補充
    JS補充 document也是windows的一個子對象 a標簽點擊事件 要想設置點擊a標簽，執行某種方法，推薦在a標簽的herf屬性使用JavaScript偽協議，實現點擊之後執行的js方法，而不是設置click 例如： windows對象對話框 windows自帶的幾個彈出對話框方法 可輸入內容 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類