html標簽簡介(常用)

来源:https://www.cnblogs.com/cjaaron/archive/2018/09/01/9570958.html
-Advertisement-
Play Games

html常識 什麼是HTML htyper text markup language 即超文本標記語言 超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。 標記語言: 標記(標簽)構成的語言. 網頁==HTML文檔,由瀏覽器解析,用來展示的 靜態網頁:靜態的資源,如xxx.htm ...


html常識

什麼是HTML

  • htyper text markup language  即超文本標記語言
  • 超文本: 就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。
  • 標記語言: 標記(標簽)構成的語言.
  • 網頁==HTML文檔,由瀏覽器解析,用來展示的
  • 靜態網頁:靜態的資源,如xxx.html
  • 動態網頁:html代碼是由某種開發語言根據用戶請求動態生成的

什麼是標簽

  • 是由一對尖括弧包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭.
  • 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
  • 標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
  • 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img />
  • 標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

標簽屬性

  • 通常是以鍵值對形式出現的. 例如 name="aaron"
  • 屬性只能出現在 開始標簽自閉和標簽中.
  • 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="aaron"
  • 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

標簽分類

  標簽一般分為兩種:

  1. 塊級標簽

    霸占一整行的標簽。比如:<h>,<p>,<div>,<form>等

  2. 行內標簽

    可以多個標簽共同占用一行的標簽。比如:<span>,<a>,<input>,<img>,<label>等

  3. 塊級標簽特點

  • 總是在新行上開始
  • 寬度預設是它的容器的100%,除非設定一個寬度
  • 它可以容納內聯元素和其他塊元素

  4. 行內標簽特點

  • 和其他元素都在一行上
  • 寬度就是它的文字或圖片的寬度,不可改變
  • 內聯元素只能容納文本或者其他內聯元素

特殊字元

      &lt; &gt;&quot;&copy;&reg;

html文件結構

標簽使用範圍說明

  由上圖可以看出,html文件主要由<head>標簽<body>標簽組成。在這兩個標簽的標簽體中能夠嵌套如下標簽:

  • <head>標簽:<!DOCTYPE html>  <meta>  <title>  <link>  <style>  <script>  
  • 其餘標簽都在<body>標簽中嵌套

<!DOCTYPE html>標簽

      由於歷史的原因,各個瀏覽器在對頁面的渲染上存在差異,甚至同一瀏覽器在不同版本中,對頁面的渲染也不同。在W3C標準出台以前,瀏覽器在對頁面的渲染上沒有統一規範,產生了差異(Quirks mode或者稱為Compatibility Mode);

      由於W3C標準的推出,瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standarsmode),這就是二者最簡單的區別。

      W3C標準推出以後,瀏覽器都開始採納新標準,但存在一個問題就是如何保證舊的網頁還能繼續瀏覽,在標準出來以前,很多頁面都是根據舊的渲染方法編寫的,如果用的標準來渲染,將導致頁面顯示異常。為保持瀏覽器渲染的相容性,使以前的頁面能夠正常瀏覽,瀏覽器都保留了舊的渲染方法(如:微軟的IE)。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode,兩種渲染方法共存在一個瀏覽器上。

window.top.document.compatMode:
//BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。 
//CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。

      這個屬性會被瀏覽器識別並使用,但是如果你的頁面沒有DOCTYPE的聲明,那麼compatMode預設就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面,那麼,在不同的瀏覽器就會顯示不同的樣式。

      如果你的頁面添加了<!DOCTYPE html>那麼,那麼就等同於開啟了標準模式,那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

      這就是<!DOCTYPE html>的作用。

<meta>標簽

  有兩個屬性:http-equiv屬性 和  name屬性,不同屬性有不同的參數,這些不同的參數使得名,meta標簽有不同的功能。

http-equiv屬性

  http-equiv顧名思義,相當於http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變數值。 

  • 頁面編碼
<meta http-equiv="content-Type" charset=UTF8">
  • 頁面刷新和跳轉
<meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次網頁
<meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 過5秒跳轉到某網頁。(關於跳轉,可以在應急的時候用,一般可以用js實現)
  • 解決IE瀏覽器相容性問題
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 

name屬性

   name屬性主要用於描述網頁,與之對應的屬性值為content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

  • 供搜索引擎使用(關鍵詞)
<meta name="keywords" content="星際2,飛船,UFO,皮卡">  關鍵字
  •  網站信息描述
<meta name="description" content="為您提供最新的信息">  網站描述

<title>標簽

  title標簽寫網站頭部信息,即網頁標簽的名稱

<link>標簽

  link標簽有兩個作用:

1.設置標簽頁圖標:

<link rel="shortcut icon" href="image/favicon.ico">  # rel指的是類型,href是文件路徑,(image是存放圖片的文件夾)

2.外聯CSS文件:

<link rel="stylesheet" type="text/css" href="css/common.css">    # rel指的是類型,href是存放css文件的文件夾

 <style>標簽

  在html文件中編寫css樣式

<script>標簽

1.引進文件

<script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>

2.寫js代碼

<script type="text/javascript">...</script>

基本標簽

<hn>:n的取值範圍是1~6; 從大到小. 用來表示標題.
<p>:段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>:加粗標簽.
<strike>:為文字加上一條中線.
<em>:文字變成斜體.
<sup>和<sub>:上角標 和 下角表.
<br>:換行.
<hr>:水平線
<div>:白板,本身沒有特性,塊級標簽。
<span>:白板,本身沒有特性,行內標簽。

 <sup>和<sub>的使用

<p>這個文本包含 <sub>下標</sub>文本。</p>
<p>這個文本包含 <sup>上標</sup> 文本。</p>

  顯示結果:

  這個文本包含 下標文本。

  這個文本包含 上標 文本。

<input>標簽

type屬性

  可以有如下取值:

text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框  
submit 提交按鈕         
button 按鈕(需要配合js使用.) button和submit的區別?
file 提交文件:form表單需要加上屬性enctype="multipart/form-data"   

name屬性

  • 表單提交項的鍵。
  • 註意和id屬性的區別:name屬性是和伺服器通信時使用的名稱;而id屬性是瀏覽器端使用的名稱,該屬性主要是為了方便客戶端編程,而在css和javascript中使用的。

value屬性

  表單提交項的值。

checked屬性

   radio 和 checkbox 預設被選中

readonly屬性

  只讀,text 和 password 標簽中使用

disabled屬性

  使得input標簽無法編輯,對所用的input標簽都有效

 <textarea>標簽

文本域標簽,有如下三個屬性:

name:  表單提交項的鍵.
cols:  文本域預設有多少列
rows:  文本域預設有多少行

 <label>標簽

<label for="xxx">姓名</label>
<input id="xxx" type="text">

   當label標簽通過for屬性與其他標簽的id屬性關聯時,點擊label標簽的標簽體時,會自動響應label標簽所關聯的標簽

<select>標簽

  選擇框,有如下屬性:

name: 表單提交項的鍵。
value:表單提交項的值。 size:選項個數 multiple:multiple
selectted:預設選擇項

   如果屬性設置multiple="multiple" size="3",表示選擇框只能同時顯示三項。<option>內的 value 為後臺識別,innerText為文本內容。

<p>選擇你的地址</p>
        <select name="city">
            <option value="1" selected="selected">北京</option> <!-- selected 預設選項 -->
            <option value="2">深圳</option>
            <option value="3">上海</option>
            <option value="4">杭州</option>
            <option value="5">成都</option>
        </select>
<p>請選擇籍貫</p>
        <select name="jiguan">
            <optgroup label="河北省">
                <option value="1">石家莊</option>
                <option value="2">保定</option>
                <option value="3">邯鄲</option>
            </optgroup>
            <optgroup label="湖南">
                <option>長沙</option>
                <option>株洲</option>
                <option>湘潭</option>
            </optgroup>
            <optgroup label="廣東">
                <option>廣州</option>
                <option>深圳</option>
                <option>佛山</option>
                <option>珠海</option>
                <option>中山</option>
            </optgroup>
        </select>

 <form>標簽

  • 表單用於向伺服器傳輸數據。
  • 表單能夠包含 input 元素,比如文本欄位、覆選框、單選框、提交按鈕等等。
  • 表單還可以包含textarea、select、fieldset和 label 標簽

 action屬性

  表單提交到哪. 一般指向伺服器端一個程式,程式接收到表單提交過來的數據(即表單元素值)作相應處理,比如https://www.sogou.com/web

method屬性

  表單的提交方式 post/get 。 預設取值就是 get。

get:   1. 提交的鍵值對.放在地址欄中url後面. 
       2. 安全性相對較差. 
       3.對提交內容的長度有限制.

post:    1. 提交的鍵值對 不在地址欄. 
         2. 安全性相對較高. 
         3. 對提交內容的長度理論上無限制.

get/post是常見的兩種請求方式.     

 enctype屬性

當上傳文件時,form標簽必須添加該屬性,而且還必須已post方式發送請求

enctype="multipart/form-data"

 <a>標簽

  有兩個作用:

  • 作超鏈接:跳轉到指定url
<a href="http://www.baidu.com"  target="_blank"  title="點一下看看啊">你好</a>
  • 作錨點:條轉到指定id
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<a href="#i5">第五章</a>
 
<div id="i1" style="height:600px;">第一章的內容 <p>緒論</p></div>
<div id="i2" style="height:600px;">第二章的內容 <p>公元500年</p></div>
<div id="i3" style="height:600px;">第三章的內容 <p>公園1000年</p></div>
<div id="i4" style="height:600px;">第四章的內容 <p>公元1900年</p></div>
<div id="i5" style="height:600px;">第五章的內容 <p>公元2010年</p></div>

 註意:<a>標簽預設的顯示樣式會有下劃線,如果看著不爽想要去掉,在a標簽樣式中設置:text-decoration:none;

<img>標簽

  圖片顯示標簽

屬性如下:

src: 要顯示圖片的路徑.
alt: 圖片沒有載入成功時的提示.
title: 滑鼠懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放

 註意:也可以把img標簽嵌套在a標簽中,來實現點擊圖片跳轉的功能。

列表標簽

<ul>: 無序列表
<ol>: 有序列表
         <li>:列表中的每一項.
<dl>  定義列表
         <dt> 列表標題
         <dd> 列表項

 <ul> 標簽

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul> 

  瀏覽器顯示如下:

  • Coffee
  • Milk

<ol>標簽

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol> 

  瀏覽器中顯示如下:

    1.Coffee

    2.Milk

<dl>標簽

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> 

  瀏覽器顯示如下:

   Coffee
  - black hot drink
   Milk
  - white cold drink

<table>標簽

  構建表格。

屬性如下:

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距
width: 像素 百分比.(最好通過css來設置長寬)
<tr>: table row
         <th>: table head cell
         <td>: table data cell
rowspan:  單元格豎跨多少行
colspan:  單元格橫跨多少列(即合併單元格)
<th>: table header <tbody>(不常用): 為表格進行分區.

合併單元格

<h4>單元格跨兩格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

 

<h4>單元格跨兩列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 最近很多人問小編現在學習大數據這麼多,他們都是如何學習的呢。很多初學者在萌生向大數據方向發展的想法之後,不免產生一些疑問,應該怎樣入門?應該學習哪些技術?學習路線又是什麼?今天小編特意為大家整理了一份大數據從入門到精通的學習路線。並且附帶學習資料和視頻。希望能夠幫助到大家。大數據學習資料分享群:11 ...
  • # # cmd命令行連接MySql cd C:\Program Files\MySQL\MySQL Server 5.5\bin # 啟動mysql伺服器net start mysql # 關閉mysql伺服器net stop mysql # 進入mysql命令行 mysql -h localhos ...
  • WIN10 本機安裝ORACLE資料庫和ORACLE客戶端後,使用PL/SQL 登陸提示錯誤ORA-12154 和ORACLE-12560, 在檢查了本機的註冊表、環境PATH路徑、tnsnames.ora文件無誤後,再經過對比PL/SQL正常可以使用的電腦(沒有安裝ORACLE資料庫,只安裝客戶 ...
  • 前言 最近APP不斷地更新版本,卻發現一些未知的錯誤導致崩潰,我把能測出來的錯誤,全部修複了,因為項目里集成了騰訊Bugly,看了下後臺的崩潰,依舊千篇一律啊,然後就糾結了,很多SEGV_ACCERR的錯誤問題,看了下機型統計,98%的崩潰來自於iOS9系統;還有一些適配時iPad出現的錯誤,當然i ...
  • 作為前端最火的構建工具,是前端自動化工具鏈 最重要的部分 ,使用門檻較高。本系列是筆者自己的學習記錄,比較基礎,希望通過 問題 + 解決方式 的模式,以前端構建中遇到的具體需求為出發點,學習 工具中相應的處理辦法。(本篇中的參數配置及使用方式均基於 ) 一. plugin概述 1.1 Plugin的 ...
  • 1. 調試JavaScript 利用Chrome瀏覽器的開發者工具調試JavaScript。 在Chrome瀏覽器中,選擇菜單項“更多工具”——“開發者工具”,打開開發者工具欄,快捷鍵“F12”或“Ctrl+Shift+i”, 在開發者工具欄中選擇Console,Console視窗是控制台輸出視窗, ...
  • 區別: 1:vue使用模板語法,和HTML很相似,因此初學者易上手。 2:react使用JSX,它要求開發者藉助JSX在JavaScript中創建DOM。 3:vue更快,這是因為,react渲染是將所有子組件都渲染一遍,如果想要避免不必要的渲染,則需要使用pureComponent或者手動實現sh ...
  • 項目中需要利用百度語音介面在Web端實現語音識別功能,採用了這樣的技術方案,但實現時遇到了很多問題,發現網上大部分文章都只是在詳解官方提供的example示例,對實際開發沒有提供什麼有價值的建議,而 是無法直接適配百度AI的語音介面的,故本篇將開發中各個細節點記錄與此,歡迎指點交流。 一. 技術棧選 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...