html基礎知識（總結自www.runoob.com）

来源:https://www.cnblogs.com/re200/archive/2019/08/03/11295459.html
-Advertisement-
Play Games

HTML屬性 屬性 描述 class 為html元素定義一個或多個類名（classname）(類名從樣式文件引入) id 定義元素的唯一id style 規定元素的行內樣式（inline style） title 描述了元素的額外信息 (作為工具條使用) HTML <head> 元素 <head> ...


HTML屬性

屬性

描述

class

為html元素定義一個或多個類名（classname）(類名從樣式文件引入)

id

定義元素的唯一id

style

規定元素的行內樣式（inline style）

title

描述了元素的額外信息 (作為工具條使用)

 

HTML <head> 元素

 

<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

 

可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

 

 HTML <title> 元素

 

<title> 標簽定義了不同文檔的標題。

 

<title> 在 HTML/XHTML 文檔中是必須的。

 

<title> 元素:

 

    定義了瀏覽器工具欄的標題

    當網頁添加到收藏夾時，顯示在收藏夾中的標題

    顯示在搜索引擎結果頁面的標題

HTML <base> 元素

 

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的預設鏈接:

 eg:

<head>

<base href="http://www.runoob.com/images/" target="_blank">

</head>

 

 HTML <link> 元素

 

<link> 標簽定義了文檔與外部資源之間的關係。

 

<link> 標簽通常用於鏈接到樣式表:

 eg:

<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> 標簽- 使用實例

 

為搜索引擎定義關鍵詞:

 

<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 head 元素

標簽 描述

<head> 定義了文檔的信息

<title> 定義了文檔的標題

<base> 定義了頁面鏈接標簽的預設鏈接地址

<link> 定義了一個文檔和外部資源之間的關係

<meta> 定義了HTML文檔中的元數據

<script> 定義了客戶端的腳本文件

<style> 定義了HTML文檔的樣式文件

html圖像-圖像標簽<img>

<img> 是空標簽，意思是說，它只包含屬性，並且沒有閉合標簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

 

定義圖像的語法是：

<img src="url" alt="some_text">

 

HTML 圖像- Alt屬性

 

alt 屬性用來為圖像定義一串預備的可替換的文本。

 

替換文本屬性的值是用戶定義的。

<img src="boat.gif" alt="Big Boat">

 

在瀏覽器無法載入圖像時，替換文本屬性告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。

 

 HTML 圖像- 設置圖像的高度與寬度

 

height（高度） 與 width（寬度）屬性用於設置圖像的高度與寬度。

 

屬性值預設單位為像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

 

提示: 指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面載入時就會保留指定的尺寸。如果沒有指定圖片的大小，載入頁面時有可能會破壞HTML頁面的整體佈局。

HTML 圖像標簽

標簽 描述

<img> 定義圖像

<map> 定義圖像地圖

<area> 定義圖像地圖中的可點擊區域

1、矩形：(左上角頂點坐標為(x1,y1)，右下角頂點坐標為(x2,y2))

 

<area shape="rect" coords="x1,y1,x2,y2" href=url>

 

2、圓形：(圓心坐標為(X1,y1)，半徑為r)

 

<area shape="circle" coords="x1,y1,r" href=url>

 

3、多邊形：(各頂點坐標依次為(x1,y1)、(x2,y2)、(x3,y3) ......)

 

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

 

 

HTML 表格

 

表格由 <table> 標簽來定義。每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

eg:

（水平標題）

<tr>

  <th>Name</th>

  <th>Telephone</th>

  <th>Telephone</th>

</tr>

<tr>

  <td>Bill Gates</td>

  <td>555 77 854</td>

  <td>555 77 855</td>

</tr>

（垂直標題）

<tr>

  <th>First Name:</th>

  <td>Bill Gates</td>

</tr>

<tr>

  <th>Telephone:</th>

  <td>555 77 854</td>

</tr>

<tr>

  <th>Telephone:</th>

  <td>555 77 855</td>

</tr>

帶標題

<caption>Monthly savings</caption><!--標題內容-->

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

單元格跨兩格（標題）

<th colspan="2">Telephone</th>

定義邊框的寬度

<table border="1">

定義單元格邊距

<table border="1" cellpadding="10">

定義單元格間距

<table border="1" cellspacing="0">

HTML 表格標簽

標簽 描述

<table> 定義表格

<th> 定義表格的表頭

<tr> 定義表格的行

<td> 定義表格單元

<caption> 定義表格標題

<colgroup> 定義表格列的組

<col> 定義用於表格列的屬性

<thead> 定義表格的頁眉

<tbody> 定義表格的主體

<tfoot> 定義表格的頁腳

 

HTML無序列表

 

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

 

無序列表使用 <ul> 標簽

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

HTML 有序列表

 

同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。

 

列表項使用數字來標記。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

<ol start="50"><!--start用於定義列表開始數字-->

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

 

 

HTML 自定義列表

 

自定義列表不僅僅是一列項目，而是項目及其註釋的組合。

 

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

 

 

<h4>大寫字母列表：</h4>

<ol type="A">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol>  

大寫字母列表：

 

  A.  Apples

  B. Bananas

  C.Lemons

  D. Oranges

 

 

 

<h4>羅馬數字列表：</h4>

<ol type="I">

羅馬數字列表：

 

    I.Apples

   II.Bananas

  III.Lemons

  IV.Oranges

HTML 佈局 - 使用<div> 元素

 

div 元素是用於分組 HTML 元素的塊級元素。

 

 

 

HTML 表單

 

表單是一個包含表單元素的區域。

 

表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、覆選框(checkboxes)等等。

 

表單使用表單標簽 <form> 來設置:

<form>

.

input 元素

.

</form>

 

例子：

<form action="">

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

 

HTML 表單 - 輸入元素

 

多數情況下被用到的表單標簽是輸入標簽（<input>）。

 

輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

 

文本域（Text Fields）

 

文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

 

密碼欄位

 

密碼欄位通過標簽<input type="password"> 來定義:

<form>

Password: <input type="password" name="pwd">

</form>

 

單選按鈕（Radio Buttons）

 

<input type="radio"> 標簽定義了表單單選框選項

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

 

覆選框（Checkboxes）

 

<input type="checkbox"> 定義了覆選框. 用戶需要從若幹給定的選擇中選取一個或若幹選項。

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

 

提交按鈕(Submit Button)

 

<input type="submit"> 定義了提交按鈕.

 

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

 

簡單的下拉列表。

 

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

 

帶預選的下拉列表

<option value="fiat" selected>Fiat</option>

 

按鈕

 

<form action="">

<input type="button" value="Hello world!">

</form>

 

文本框

<textarea rows="5" cols="30">

我是一個文本框。

</textarea>

 

提交

 

<form action="demo-form.php">

First name: <input type="text" name="FirstName" value="Mickey"><br>

Last name: <input type="text" name="LastName" value="Mouse"><br>

<input type="submit" value="提交">

</form>

 

<p>點擊"提交"按鈕，表單數據將被髮送到伺服器上的“demo-form.php”。</p>

 

HTML 框架

 

通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。

iframe語法:

<iframe src="URL"></iframe>

 

該URL指向不同的網頁。

Iframe - 設置高度與寬度

 

height 和 width 屬性用來定義iframe標簽的高度與寬度。

 

屬性預設以像素為單位, 但是你可以指定其按比例顯示 (如："80%")。

實例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

 

 

Iframe - 移除邊框

 

frameborder 屬性用於定義iframe表示是否顯示邊框。

 

設置屬性值為 "0" 移除iframe的邊框:

實例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

 

HTML 腳本

 

JavaScript 使 HTML 頁面具有更強的動態和交互性。

<script>

document.write("Hello World!")

</script>

不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內容（文本）來替代。

 

 

 

HTML 字元實體

 

HTML 中的預留字元必須被替換為字元實體。

 

一些在鍵盤上找不到的字元也可以使用字元實體來替換。

HTML 實體

 

在 HTML 中，某些字元是預留的。

 

在 HTML 中不能使用小於號（<）和大於號（>），這是因為瀏覽器會誤認為它們是標簽。

 

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

實體名稱對大小寫敏感！

顯示結果 描述 實體名稱 實體編號

   空格    

< 小於號 < <

> 大於號 > >

& 和號 & &

" 引號 " "

' 撇號   ' (IE不支持) '

 

 

HTML 統一資源定位器(Uniform Resource Locators)

 

URL 是一個網頁地址。

 

URL可以由字母組成，如"runoob.com"，或互聯網協議（IP）地址： 192.68.20.50。大多數人進入網站使用網站功能變數名稱來訪問，因為 名字比數字更容易記住。

 

 

語法規則:

scheme://host.domain:port/path/filename

 

說明:

 

        scheme - 定義網際網路服務的類型。最常見的類型是 http

        host - 定義域主機（http 的預設主機是 www）

        domain - 定義網際網路功能變數名稱，比如 runoob.com

        :port - 定義主機上的埠號（http 的預設埠號是 80）

        path - 定義伺服器上的路徑（如果省略，則文檔必須位於網站的根目錄中）。

        filename - 定義文檔/資源的名稱

 

 

URL 字元編碼

 

URL 只能使用 ASCII 字元集.

 

來通過網際網路進行發送。由於 URL 常常會包含 ASCII 集合之外的字元，URL 必須轉換為有效的 ASCII 格式。

 

URL 編碼使用 "%" 其後跟隨兩位的十六進位數來替換非 ASCII 字元。

 

URL 不能包含空格。URL 編碼通常使用 + 來替換空格。

 

 訪問https://www.runoob.com/html/html-tutorial.html查看詳細教程

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 視圖學習筆記
    1、視圖的概念 視圖是關係資料庫系統提供給用戶以多角度觀察資料庫中數據的重要機制。它不僅滿足了各用戶的個性需要，還提供了一種屏蔽未授權數據或無關數據的保護機制，將用戶的處理或查詢操作限定在他有權處理或查詢的數據上。 視圖是從一個或多個基本表和視圖導出的虛表，它只有定義，沒有對應的物理數據。視圖中的內 ...
  • Win7 Eclipse 搭建spark java1.8環境：WordCount helloworld例子
    Win7 Eclipse 搭建spark java1.8環境：WordCount helloworld例子 ...
  • 給最近正在找工作(iOS)的朋友一些建議/經驗
    眾所周知, iOS開發找工作越來越難, 企業要求越來越高,一方面是資本寒冬期+七八月是企業招人淡季, 另外一方面也是iOS市場飽和。最近有出去看新機會, 所以下麵記錄一下麵試XimalayaFM的大概過程。 面試一共分為4輪，全程手寫代碼和演算法。 一面：自我介紹， 然後問一下手頭開發App日活和崩潰 ...
  • 一起學Android之Xml與Json解析
    在網路中，數據交互通常是以XML和Json的格式進行，所以對這兩種格式的數據進行解析，是Android開發中的必備功能，本文以一個簡單的小例子，簡述Android開發中Xml和Json解析的常用方式，僅供學習分享使用。 ...
  • 安卓應用加固之各代加殼保護技術詳解
    #0x00 前言 安卓應用加固技術是伴隨安卓應用破解技術一同發展起來的。加固技術分為加殼保護和反反彙編保護技術。市面上成熟的加固廠商一般會使用加殼保護技術配合反反彙編技術對安卓應用進行加固。 安卓反反彙編技術的總結在我另一篇博客中將進行詳細探討，鏈接： http://................ ...
  • vue封裝一個簡單的div框選時間的組件
    記錄一下我前段時間封裝的一個vue組件吧。技術需要積累，有時間我把我之前寫的還不錯的組件都開源出來。並嘗試vue和react 兩種方式的組件封裝。今天簡單寫下滑鼠框選div選中效果的封裝吧。 div框選實現 div框選效果，其實沒有什麼好的方法，就是獲取滑鼠事件，根據滑鼠的位置，動態創建一個跟隨滑鼠 ...
  • 總結下移動端調試的一些方法
    說起網站調試，pc頁面和h5頁面，假如電腦上能夠重現的，都不在話下，調試起來都蠻簡單。僅僅需要fiddler一個抓包工具，把線上壓縮代碼替換成本地無壓縮代碼就可以了。具體步驟我後面可以詳細介紹。但是，僅僅是某款手機重現，其他手機沒有問題的情況下如何調試？hybrid頁面如何調試呢？這篇文章簡單總結下 ...
  • ES6基本常見語法
    特色：寫法更加優雅，更加像面像對象的編程，其思想和 ES5 是一致的。 箭頭函數、this ES6中可以使用 => 作為函數表達形式，極簡風格，參數＋ => ＋函數體。 var foo = function(){return 1;}; //等價於 let foo = () => 1; let num ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類