當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML基本整理2

發(fā)布時間：2025/3/15 HTML 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML基本整理2 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML基本整理<2>
- HTML類
- HTML布局
  - 使用<div> 元素的 HTML 布局
- HTML腳本
- HTML meta元素
- HTML 字符實體
- HTML表單
  - <textarea> 元素定義多行輸入字段（文本域）
  - <button> 元素定義可點(diǎn)擊的按鈕
- HTML 輸入類型
- HTML Input 屬性

HTML基本整理<2>

@[基本實例|html]

HTML類

對 HTML 進(jìn)行分類（設(shè)置類），使我們能夠為元素的類定義 CSS 樣式。
為相同的類設(shè)置相同的樣式，或者為不同的類設(shè)置不同的樣式

<!DOCTYPE html> <html> <head> <style> .cities {background-color:black;color:white;margin:20px;padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> </div> </body> </html>

HTML布局

使用<div> 元素的 HTML 布局

<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進(jìn)行定位。

<body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright W3School.com.cn </div> </body> <style> #header {background-color:black;color:white;text-align:center;padding:5px; } #nav {line-height:30px;background-color:#eeeeee;height:300px;width:100px;float:left;padding:5px; } #section {width:350px;float:left;padding:10px; } #footer {background-color:black;color:white;clear:both;text-align:center;padding:5px; } </style>

HTML腳本

HTML meta元素

元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。
<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。
典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時間以及其他元數(shù)據(jù)。
<meta> 標(biāo)簽始終位于 head 元素中。
元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。

HTML 字符實體

在 HTML 中，某些字符是預(yù)留的。
在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認(rèn)為它們是標(biāo)簽。
如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）

顯示結(jié)果描述實體名稱實體編號

	空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
"	引號	"	"
'	撇號	' (IE不支持)	'
￠	分（cent）	¢	¢
￡	鎊（pound）	£	£
￥	元（yen）	¥	¥
€	歐元（euro）	€	€
§	小節(jié)	§	§
?	版權(quán)（copyright）	©	©
?	注冊商標(biāo)	®	®
?	商標(biāo)	™	™
×	乘號	×	×
÷	除號	÷	÷

HTML表單

HTML 表單用于搜集不同類型的用戶輸入
表單有變單元素： input 元素、復(fù)選框、單選按鈕、提交按鈕等等

<form> 元素定義 HTML 表單
<input> 元素是最重要的表單元素。
<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性
<input type="text"> 定義用于文本輸入的單行輸入字段
<input type="radio"> 定義單選按鈕
<input type="submit">定義用于向表單處理程序（form-handler）提交表單的按鈕
action 屬性定義在提交表單時執(zhí)行的動作
method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）
如果要正確地被提交，每個輸入字段必須設(shè)置一個name屬性

HTML表單元素

<select> 元素（下拉列表）

<select name="cars"> <option value="volvo">Volvo</option> <option value="saab" selected>Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

<option> 元素定義待選擇的選項
selected 屬性來定義預(yù)定義選項

<textarea> 元素定義多行輸入字段（文本域）

<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>

<button> 元素定義可點(diǎn)擊的按鈕

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 輸入類型

<input type="text">定義供文本輸入的單行輸入字段

<form>First name:<br> <input type="text" name="firstname"> <br>Last name:<br> <input type="text" name="lastname"> </form>

<input type="password">定義密碼字段

<form>User name:<br> <input type="text" name="username"> <br>User password:<br> <input type="password" name="psw"> </form>

<input type="submit">定義提交表單數(shù)據(jù)至表單處理程序的按鈕

<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>

<input type="radio"> 定義單選按鈕

<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>

<input type="checkbox"> 定義復(fù)選框

<input type="button> 定義按鈕

HTML5 增加了多個新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

HTML Input 屬性

value 屬性規(guī)定輸入字段的初始值
readonly 屬性規(guī)定輸入字段為只讀（不能修改）
disabled 屬性規(guī)定輸入字段是禁用的
size 屬性規(guī)定輸入字段的尺寸（以字符計)
maxlength 屬性規(guī)定輸入字段允許的最大長度
HTML5 為 <input> 增加了如下屬性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step

轉(zhuǎn)載于:https://www.cnblogs.com/ustc-rjgc2017/p/8232473.html

總結(jié)

以上是生活随笔為你收集整理的HTML基本整理2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

html

上一篇： IIS------如何安装IIS
下一篇： IOS内置safari浏览器日期字符串转