HTML常見標簽學習與筆記總結

来源:http://www.cnblogs.com/sky230/archive/2016/04/09/5372226.html
-Advertisement-
Play Games

HTML其實就是把頁面的數據封裝並加上標簽 表頭<head> <title> 瀏覽器標題欄顯示的內容 <base> 有href和target屬性,href指定網頁中所有超鏈接的基本目錄,target指定打開超鏈接的方式,如_blank為在新視窗中打開 <me ...


HTML其實就是把頁面的數據封裝並加上標簽


表頭<head>

<title> 瀏覽器標題欄顯示的內容

<base> 有href和target屬性,href指定網頁中所有超鏈接的基本目錄,target指定打開超鏈接的方式,如_blank為在新視窗中打開

<meta> name網頁的描述信息,可以設置網頁搜索的關鍵字keywords。http-equiv可以設置自動刷新

如:<meta http-equiv=”refresh” content=”3”;url=http://sina.com.cn” /> 設置3秒自動刷新

<link> rel屬性:描述目標文檔與當前文檔的關係,type:文檔類型,media:目標文檔在哪種設備上起作用,如顯示器或印表機


表單<form>

用來與服務端進行交互,意味著只要不和服務端交互就不需要form標簽

<input>的type屬性

  1. text:文本框

  2. password:密碼框

  3. radio:單選框,需要指定同一組(即name值相同)

  4. checkbox:覆選框

  5. file:文件選擇

  6. hidden:隱藏組件。不會在頁面上顯示,但其定義的name和value可以提交給伺服器

  7. botton:按鈕組件。預設沒有效果,可以通過註冊事件並加入自定義效果

  8. submie:提交按鈕

  9. reset:重置按鈕

  10. image:圖像組件。可以通過image的src屬性連接一個按鈕圖片代替submit

下垃菜單<select>

每一個下拉菜單項都由option進行封裝

<select>
  <option></option>
  <option></option>
</select>

文本區域<textarea>


表格<table>

<table>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

超鏈接<a>

<a href="http://www.sina.com.cn" target="_blank"&gt; 新浪網站<a>

http:為解析程式,即使用http協議解析鏈接。設置target屬性,在新視窗打開鏈接

<a href="mailto:[email protected]?subject=haha&[email protected]" > 聯繫我們 </a> 

當點擊超鏈接時,就會出現郵件相關聯的解析程式,本機預設的是outlook.

鏈接訊雷的解析程式可以自己百度,這裡就不說了。


form標簽常見屬性

action

method(get和post)

get和post區別:

get會將提交的數據顯示在瀏覽器的地址欄上,post則不會

get提交的數據的體積受地址欄的限制(即不能超過地址欄的長度),post沒有這種限制

get對於敏感信息不安全(如用戶名和密碼),post安全

get會將提交的信息封裝在請求行,即http消息頭之前,post會將提交信息封裝在數據何體中,即http消息頭之後的空行後

對於伺服器來說:

表單form提交數據儘量用post,因為涉及到編碼問題。tomcat服務端預設的解碼是ISO8859-1

對於post提交的中文,在服務端可以直接使用setCharacterEncoding("gbk")就可以解決。而對於get提交的中文,在服務端只能通過ISO8859-1將數據編碼一次,再通過指定的碼表(如GBK)解碼。


其他

  1. <label>標簽:當點擊用戶名這欄時(不是點擊文本框)或按Ctrl+u快捷鍵,焦點也會到了文本框內

    <label acdessky=”u” for=”userid”>
    <tr>
    <td> 用戶名(U):</td>
    <td> <input type=”text” name=”user” id=”userid” /></td>
    </tr>
    </label>

  2. 書寫鏈接地址時,必須避免重定向,例如:href="http://sina.com/",即須在URL地址後面加上"/"
  3. 在頁面中儘量避免使用style屬性,即style="..."
  4. 必須為含有描述性的表單元素(input,textarea)添加label。

    <p>
    <label for=”name”>姓名:</label>
    <input type=”text” id=”name” />
    </p>

  5. 能以背景形式呈現的圖片,儘量寫入CSS樣式中
  6. 重要圖片必須加上alt屬性
  7. class和id的使用:id是唯一的並是父級的,class是可以重覆的並是子級的,所以id僅使用在大的模塊上,class可用在重覆使用率高及子級中。id原則上都是由分發框架文件時命名的,為javaScript預留鉤子的除外。
  8. 為javaScript預留鉤子的命名,請以js_起始,比如: js _show、js _hide。

over!



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

-Advertisement-
Play Games
更多相關文章
  • 第十一章 1、 box-sizing:border-box(讓寬度和高度包含內邊距和邊框) 2、 clear讓後面的元素顯示在浮動元素的後面 3、 z-index只對只對絕對、固定、相對定位的元素有效 4、 vertical-aligh只用於行內元素 baseline/middle/sub/supe ...
  • 一門語言好不好用,很大程度上取決於它的api是否完善,方便使用。很遺憾jqm的api不那麼好用(對比extjs,jqm依賴jquery,也許我不太熟悉jquery也會導致我覺得jqm的api不好用),所以有必要專門寫這段來記錄想api的每個模塊如何使用。模塊截圖如下 CSS Framework: j ...
  • 參考資料:Inline elements and padding 今天寫一個導航欄時遇到了一個問題:行內元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是無效的? 接下來就這個問題將具體分析: 1.行內元素擁有盒子模型麽 答案是是 ...
  • (非原創) 目錄 1. Nodejs的介紹 Node.js的是建立在Chrome的JavaScript的運行時,可方便地構建快速,可擴展的網路應用程式的平臺。Node.js使用事件驅動,非阻塞I/O模型,輕量、高效,可以完美地處理時時數據,運行在不同的設備上。 1.1. 誰在用Nodejs? 從No ...
  • 1.width & height 2.background : a.background-color b.background-image:url() c.background-repeat : no-repeat , repeat-x , repeat-y ; d.background-posit ...
  • http://www.cocoachina.com/webapp/20150126/11020.html ...
  • Notepad++、Editplus 是常用的開發編輯器。這些在Window系統下,比較容易找到,但是在MAC系統下,有的是收費的,有的是不支持。我開發的時候,用的是TextWrangler,如圖: 1、下載安裝完成,打開之後: 2、開始編輯: 3、編輯完成之後、快捷鍵command+s,輸入名字和 ...
  • (1)獲得URL參數 function GetQueryString("url參數名") { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).m ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...