HTML(五):總結

来源:http://www.cnblogs.com/nervdy/archive/2016/08/04/5738635.html
-Advertisement-
Play Games

1.HTML基本結構 <!DOCTYPE html> <!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。 <html> 定義整個HTML文件的內容;所有HTML標簽都應該放到這裡面。 <head> 定義H ...


1.HTML基本結構

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
  • <!DOCTYPE html>
    • <!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。

  • <html>
    • 定義整個HTML文件的內容;所有HTML標簽都應該放到這裡面。

  • <head>
    • 定義HTML文件的頭部,它是所有頭部元素的容器。在head標簽中的元素可以引用腳本、指示瀏覽器在哪裡找到樣式表、提供元信息等等。文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關係等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

  • <title>
    • title元素僅可在head元素內使用。位於title開閉標簽之內的文本都會在瀏覽器的標題欄和 Microsoft Windows 的任務欄上顯示。對於 Web 頁,“Internet Explorer”會被自動追加到標題後。而在 HTML 應用程式(HTA)中,僅會顯示指定的標題。
  • <body>
    • body 元素是定義文檔的主體。body 元素包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等)。

2.標題

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

標題(Heading)是通過 <h1> - <h6> 標簽進行定義的.

<h1> 定義最大的標題。 <h6> 定義最小的標題。

3.文本格式化

<b>定義粗體文本</b>
<i> 定義斜體文本 </i>
<del>定義刪除文本</del>
<sup>定義上標字</sup>
<sub>定義下標字</sub>

文本格式化用於定義具有特殊格式的文本,讓文本具有不同的表現形式和語義。

4.圖像

<img src="URL" width="100" height="100" alt="替代文字" />

<img>標簽用於定義圖像,通過src屬性設置圖片的地址,width和height分別設置圖像的寬和高,當只設置寬或高時,圖像將被等比例縮放,alt屬性設置替代文字,當圖像無法載入出來時,替代文字將出現在圖像原來的位置上以做說明。

5.圖像熱區

<img src="URL" usemap="#mapname" /> 
<map name="mapname"> 
    <area shape="形狀" coords="坐標值" href="URL" /> 
</map>

當頁面中引入了一張圖片時,可通過設置圖像熱區定義圖像的區域鏈接。設置圖像熱區需要將img標簽的usemap屬性值和map標簽的name屬性值設置為相同的值,即可關聯兩個標簽,關聯之後在map標簽裡面設置area標簽定義圖像的熱區區域,area標簽可設置多個,其中shape屬性可設置熱區形狀,coords可設置熱區的各個坐標值,href可設置熱區鏈接。

6.無序列表

<ul type="disc">
  <li>實心圓</li>
</ul>
<ul type="circle">
  <li>空心圓</li>
</ul>
<ul type="square">
  <li>方形</li>
</ul>

<ul> 元素代表多項的無序列表,即無數值排序項的集合,且它們在列表中的順序是沒有意義的。通常情況下,無序列表項的頭部可以是幾種形式,如一個點,一個圓形或方形。通過設置<ul>元素的type屬性來改變無序列表頭部的形式。

7.有序列表

<ol start="5">
    <li>預設形式,設置start為5</li>
    <li>預設形式,設置start為5</li>
</ol>
<ol type="a">
    <li>設置type為小寫英文字母</li>
    <li>設置type為小寫英文字母</li>
</ol>
<ol type="A">
    <li>設置type為大寫英文字母</li>
    <li>設置type為大寫英文字母</li>
</ol>
<ol type="I">
    <li>設置type為羅馬數字</li>
    <li>設置type為羅馬數字</li>
</ol>

<ol> 元素表示多個有序列表項。通常情況下,有序列表中顯示在項前面的編號(a preceding numbering),可以是任何形式的,如數字,字母或羅馬數字甚至簡單的點。<ol>同樣可以通過設置type屬性來改變頭部序號標記的形式。同時可以設置start屬性來指定排序的起點數值。

8.定義列表

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

<dl> 元素是一個包含術語定義以及描述的列表,通常用於展示辭彙表或者元數據 (鍵-值對列表)。也可以是用戶自定義的數據列表。

9.表格

<table border="1" cellpadding="5" cellspacing="5">
    <tbody>
        <tr>
            <td rowspan="2">單元格1</td>
            <td colspan="2">單元格2</td>
        </tr>
        <tr>
            <td>單元格3</td>
            <td>單元格4</td>
        </tr>
    </tbody>
</table>

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

<table>標簽可設置的各個屬性:

10.內嵌框架

<body>
    <iframe src="http://www.baidu.com/" width="1000" height="400" scrolling="auto"></iframe>
</body>

HTML中的<iframe>標簽(又稱內聯框架元素)表示了一個嵌套的瀏覽上下文(browsing context),實際上是用來在當前頁面中內嵌另一個HTML頁面。可通過屬性設置框架的寬、高、是否顯示滾動條和邊框。對應的屬性名分別為:width、height、scrolling、frameborder。其中scrolling可設置的值有三個:yes(始終顯示滾動條)、no(從不顯示滾動條)、auto(預設值,在需要的情況下出現滾動條)。

11.表單

<form name="form" action="URL" method="get">
    用戶名:<input type="text" name="name" />
    密 碼:<input type="password" name="password" />
</form>

<form> 標簽用於為用戶輸入創建 HTML 表單。表單能夠包含 input 元素,比如文本欄位、覆選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向伺服器傳輸數據。form標簽的action屬性規定當提交表單時向何處發送表單數據,method規定用於發送 form-data 的 HTTP 方法。

12.input

<form>
    <input type="text">
    <input type="password">
    <input type="button">
    <input type="hidden">
    <input type="file">
    <input type="image">
    <input type="submit">
</form>

<input> 標簽規定了用戶可以在其中輸入數據的輸入欄位。<input> 元素在 <form> 元素中使用,用來聲明允許用戶輸入數據的 input 控制項。輸入欄位可通過多種方式改變,取決於 type 屬性。

參考: HTML <input> 標簽   input - HTML(超文本標記語言) | MDN


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

-Advertisement-
Play Games
更多相關文章
  • 在JavaScript的學習當中,this關鍵字的出現頻率可不低,所以想想有必要對this關鍵字做一個總結。在總結過程中,參考的資料來源於書本及網上。 一、定義 1、this是函數內部的一個特殊對象(或this引用)--它引用的是函數據以執行的環境對象。(來源於JavaScript高級程式設計) 2 ...
  • 正則需要傳參時,必須使用new RegExp(); var re = new RegExp('\\b'+sClass+'\\b'); 量詞,轉義字元: \s : 空格\S : 非空格 \d : 數字\D : 非數字 \w : 字元(字母,數字,下劃線)\W : 非字元 \. :真正的點 \b:獨立的 ...
  • 給select元素增加:padding-left:20px;但是未生效,如下圖所示: 在select上如何使設置padding生效? 方法一: 設置屬性appearance: 給select增加屬性: appearance: none; -webkit-appearance: none; 效果如下: ...
  • 內聯樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet) 例外:但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表; 1,內聯樣式表權值為1000; 2,ID選擇器的權值為100; 3,Cla ...
  • 在進入主題前,先插個網站https://www.processon.com/ ProcessOn是一個線上協作繪圖平臺,為用戶提供最強大、易用的作圖工具! 它可以很方便的線上簡單繪製一些東西,讓自己去具體理解。 正則表達式 今日的正則只是學習正則的簡單使用。在HTML5的標簽屬性的強大面前,我們 已 ...
  • 一、引言 前面我們討論了函數的一些基本概念,因為函數在任何一門語言之中都是很重要所以還是要好好學。昨天打開博客的時候看到有人私信我的JavaScript寫錯了,我定睛一看果然寫錯了。對此我表示很抱歉,希望大家能夠看得時候多噴我兩句就忘了這件事吧。 二、導入 今天我們要討論一下有關於對象的內容,我們首 ...
  • w3school:http://www.w3school.com.cn/ runoob:http://www.runoob.com/ html標簽參考手冊:http://www.runoob.com/tags/html-reference.html html顏色名:http://www.runoob ...
  • 在講解如何選取文檔元素之前,先普及一下什麼是文檔節點: HTML文檔的每個節點都表示一個Node對象,節點樹形結構的根部是Document節點,代表整個文檔,代表HTML元素的節點是Element節點,代表文本的節點是Text節點;Document、Element、Text類都是Node類的子類;( ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...