日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

HTML基本整理2

發(fā)布時間：2025/3/15 HTML 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 HTML基本整理2 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄

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

HTML基本整理<2>

@[基本實例|html]

HTML類

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

<!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 對其進行定位。

<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腳本

<script> 標簽用于定義客戶端腳本，比如 JavaScript。
script 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。
必需的 type 屬性規(guī)定腳本的 MIME 類型。
JavaScript 最常用于圖片操作、表單驗證以及內容動態(tài)更新。

<script type="text/javascript"> document.write("Hello World!") </script>

HTML meta元素

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

HTML 字符實體

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

顯示結果描述 實體名稱實體編號
空格&nbsp;&#160;
<小于號&lt;&#60;
>大于號&gt;&#62;
&和號&amp;&#38;
"引號&quot;&#34;
'撇號&apos; (IE不支持)&#39;
￠分（cent）&cent;&#162;
￡鎊（pound）&pound;&#163;
￥元（yen）&yen;&#165;
€歐元（euro）&euro;&#8364;
§小節(jié)&sect;&#167;
?版權（copyright）&copy;&#169;
?注冊商標&reg;&#174;
?商標&trade;&#8482;
×乘號&times;&#215;
÷除號&divide;&#247;

HTML表單

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

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

  • 如果要正確地被提交，每個輸入字段必須設置一個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 屬性來定義預定義選項

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

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

<button> 元素定義可點擊的按鈕

<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">定義提交表單數據至表單處理程序的按鈕

<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"> 定義復選框

<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>

<input type="button> 定義按鈕

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

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

轉載于:https://www.cnblogs.com/ustc-rjgc2017/p/8232473.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。