HTML總結

来源:http://www.cnblogs.com/feichangnice/archive/2016/04/17/5401919.html
-Advertisement-
Play Games

幾個知識點： HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML框架結構： <!DOCTYPE html> <html> <head> </head> <body> 此處為標簽內容 </body> </html> HTML屬性： class=“XXX” ...


幾個知識點：　　

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

HTML框架結構：

<!DOCTYPE html>

<html>

  <head> 

  </head>

  <body>

  此處為標簽內容

  </body>

</html>

 

HTML屬性：

class=“XXX”  :元素類名，CSS定位用

id=“XXX”  :元素id，CSS定位用

style=“XXX”:定於元素顏色、是否居中、粗細、邊界等

title=“XXX”：滑鼠懸停時提示信息

Alt=“XXX”:圖片載入錯誤提示信息

HTML常用標簽：

<h1 align=“center”>文字內容</h1>:標題居中顯示

<p style="font-size:10px“>文字內容</p>：段落顯示

<a href=“https://www.baidu.com/” title=“這是鏈接“>百度</a>：鏈接標簽

<img src=“./picture.jpg” alt="圖片載入錯誤"/>:圖片顯示標簽

 

一些獨立標簽：

<br/>:換行

<hr/>:創建水平線

<!– 註釋內容-->：註釋

&nbsp;顯示空格（一種HTML實體符號）

 

<div>此處可嵌套其他標簽</div>：塊級元素，他的內容會另起一行開始。

<span>此處可嵌套其他標簽</span>:內聯元素，不換行

 

無序列表：

<ul>

<li>第一項</li>

<li>第二項</li>

</ul> 

 

有序列表：

<ol>

<li>第一項</li>

<li>第二項</li>

</ol>

 

表格：

  <table border="1">

  <tr>

  <td rowspan="2">跨行</td>

  <td>row 1, cell 1</td>

  <td>row 1, cell 2</td>

  </tr>

  <tr>

  <td>row 2, cell 1</td>

  <td>row 2, cell 2</td>

  </tr>

  </table>

 

運行樣式如下：

 

表格的一些屬性：

 

表單：

表單是一個包含表單元素的區域，表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、覆選框等等）輸入信息的元素

<form>表單元素</form>：表單標簽

<textarea></textarea>:文本域，可輸入文字

<input type=“text” name=“firstname” />:輸入框元素

<input type=“radio” name=“sex”/>:單選按鈕元素

<input type=“checkbox” name=“car” />：覆選按鈕

<select name=“cars”>：下拉列表

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

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

</select>

<button type=“button”>Click Me!</button>：按鈕

<input type=“submit” value=“Submit” />：提交按鈕

 

HTML一些高級特性：

<frameset cols="25%,75%">

   <frame src="./frame_a.htm">

   <frame src="./frame_b.htm">

</frameset>  框架，將屏幕分為兩半，分別填充兩個頁面

<iframe src=“https://www.baidu.com/”></iframe>：內聯框架，將一個頁面內聯

 

<link rel=“stylesheet” type=“text/css” href=“theme.css” />:外部文件引入，放在head標簽內

<title></title>:定義文檔的標題，位於head內

<meta></meta>:定義關鍵字、文檔描述，位於文檔head之內

<base href=“https://www.baidu.com/” />：定義整篇文檔的預設鏈接指向

<script></script>：插入script語句

 

HTML完整例子如下：

<html>
<head>
	<link rel="stylesheet" type="text/css" href="theme.css" />
	<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
	<meta name="keywords" content="HTML, CSS, XML" />
	<base href="https://www.baidu.com/" />
	<base target="_blank" />
</head>
	<body>
	<h1 align="center">標題1</h1>
	<p style="font-size:10px" >黃色段落</p>
	<a href="https://www.baidu.com/" title="這是鏈接">百度</a>
	<img src="./picture.jpg" alt="圖片載入錯誤"/>
	
	 <div class="news">
	  <h2>News headline 1</h2>
	  <p>some text. some text. some text...</p>
	  ...
	 </div>
	<span>提示：</span>
	
	<table border="1">
	<tr>
	<td rowspan="2">跨行</td>
	<td>row 1, cell 1</td>
	<td>row 1, cell 2</td>
	</tr>
	<tr>
	<td>row 2, cell 1</td>
	<td>row 2, cell 2</td>
	</tr>
	</table>
	
	<ul>
	<li>第一項</li>
	<li>第二項</li>
	</ul>
	<ol>
	<li>第一項</li>
	<li>第二項</li>
	</ol>
	
	<form name="input" action="html_form_action.asp" method="get">
		<textarea rows="10" cols="5">文本域</textarea>
		姓名：<input type="text" name="firstname"/>
		<input type="radio" name="sex"/>男性
		<input type="checkbox" name="car" />我有汽車
		<button type="button">Click Me!</button>
		
		<select name="cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="fiat" selected="selected">Fiat</option>
		<option value="audi">Audi</option>
		</select>
		<input type="submit" value="Submit" />

	</form>
	
	<frameset cols="75%,25%">
   <frame src="./frame_a.htm">
   <frame src="./frame_b.htm">
	</frameset>
	
	<iframe src="https://www.baidu.com/"></iframe>
	</body>
</html>

　　


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

-Advertisement-
Play Games
更多相關文章
  • artEditor增加表單提交功能
    摘要： artEditor.js是一款移動端的富文本編輯器，支持圖片上傳，後面會增加表情、小視頻等功能。最近有朋友反饋artEditor是否支持表單提交，當然是支持的，在未開發該功能之前，你可以像下麵這樣來實現表單提交 新功能： 新增formInputId參數，該參數表示form隱藏域的id，會將編 ...
  • 10免費圖標生成器網頁設計師
    在這個展示，我們提供最好的網頁設計師10圖標生成器。這些圖標生成器是免費使用的，有些是與高級功能，將幫助你產生引人註目的和有吸引力的網頁為您的網站。 為了包起來，他們都可以自由下載，所以在。來，看看，選擇你的選擇。我們希望這個列表證明你是最好的。請隨時與你的朋友分享這份名單，也讓我們知道你對這本編輯 ...
  • 模板插件aTpl.js新增功能
    摘要： aTpl.js是一款模板插件，該插件支持ie5+，chrome等瀏覽器以及移動端瀏覽器，支持for和if語法，以及表達式。最近對aTpl.js模板插件增加了新的功能，支持字元串模板，同時增加了模板緩存功能。 項目地址：https://github.com/baixuexiyang/aTpl ...
  • HTML5 本地存儲
    1、sessionStorage 2、localStorage 3、Database Storage 4、globalStorage 5、相容性 參考文獻 本地持久化存儲一直是本地客戶端程式優於 web 程式的一個方面。對於本地應用程式，操作系統會一共一個抽象層，用於存儲和獲取特定於應用程式的數據， ...
  • jQuery學習筆記1
    1. jQuery入門 1.1. 優點 解決瀏覽器的相容性問題。 支持擴展，通過插件方式實現擴展，避免特性蠕變。 使用隱式迭代的技術，使方法的操作面向集合。如“.hide()” 使用方法鏈接編程方式，使多重操作集於一行。 強大的選擇符。 可靠的事件處理機制。 完善的Ajax。 行為層與結構層的分離。 ...
  • 正則表達式速查表
    字元x 字元 x\\ 反斜線字元\0n 帶有八進位值 0 的字元 n (0 <= n <= 7)\0nn 帶有八進位值 0 的字元 nn (0 <= n <= 7)\0mnn 帶有八進位值 0 的字元 mnn（0 <= m <= 3、0 <= n <= 7）\xhh 帶有十六進位值 0x 的字元 h ...
  • 十個實用但IE不支持的CSS屬性
    對IE瀏覽器尤其是IE6的抱怨基本已進入麻痹狀態，偶爾甚至產生非常消極的想法：這個世界只有一個瀏覽器就好了，哪怕這唯一的瀏覽器就是IE6。當然，這樣的想法是非常病態的，馬上打消。本文裡面，介紹了10個很實但IE卻不支持的CSS屬性，列出這些屬性並不是為了數落IE(數落也沒用)，而是你瞭解了哪些CSS ...
  • 數據綁定介紹
    數據綁定是在應用程式 UI 與數據源建立連接的過程。如果綁定正確數據，則當數據更改其值時，綁定到數據的UI屬性值會自動反映更改。DeviceOne支持靈活的數據綁定，使UI展示和數據可以清晰的分離。目前還不支持雙向綁定，只支持數據到展示的傳遞。使用DeviceOne開發App，你可以不使用任何數據b ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類