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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類