【前端】:HTML

来源:http://www.cnblogs.com/0zcl/archive/2017/02/10/6385853.html
-Advertisement-
Play Games

前言: 最近開始學前端了，這篇博客主要介紹html的一些主要標簽，寫完這篇博客，我會用剛學的html做一個簡單的登陸界面~~ 一、HTML介紹 HTML(Hyper Text Mark-up Language)超文本標記語言，是一種製作萬維網頁面標準語言。相當於定義一套規則，大家都來遵守它。這樣就可 ...


前言: 最近開始學前端了，這篇博客主要介紹html的一些主要標簽，寫完這篇博客，我會用剛學的html做一個簡單的登陸界面~~

 

一、HTML介紹

HTML(Hyper Text Mark-up Language)超文本標記語言，是一種製作萬維網頁面標準語言。相當於定義一套規則，大家都來遵守它。這樣就可以讓瀏覽器根據標記語言的規則去解釋它。

瀏覽器(客戶端)向服務端發出請求，服務端會返回字元串，瀏覽器會根據自己規定的規則，將字元串渲染成相應的界面。

 

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔.

 

 

二、<head>頭部

meta

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞

頁面編碼:

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元聲明為 UTF-8: 

1 <meta charset="UTF-8">

每2秒刷新:

1 <meta http-equiv="refresh" content="2"/>

跳轉:

打開html文件，5秒後會自動跳轉到www.etiantian.org:

1 <meta http-equiv="refresh" content="5; url=http://www.etiantian.org">

title:

標簽頁顯示為hello: <title>hello</title>

如果要在hello前加小圖片，可到別人的網站，copy圖片到電腦，然後在head頭部加上下麵的代碼:

1 <link rel="icon" href="favicon_1c83d380.ico">

效果圖:

 

註意的點:

  • 規範: html需小寫; 每一個級別都要縮進
  • 註釋: 可多行註釋也可單行註釋,eg: <!--<meta http-equiv="refresh" content="5"/>-->
  • Ctrl + ? :可將選中的一次性加註釋

 

三、<body>

標簽一般分為兩種: 塊級標簽和內聯標簽.

塊級標簽(會占一整行)　　eg:<h1></h1>
內聯標簽(只占字體所占的空間大小)　　 eg:<a></a>

1、p標簽

p表示段落，預設段落之間是有間隔的。

 

2、br標簽
br是換行<br/>

 

3、a標簽

點擊百度，當前界面則跳轉到www.baidu.com:  

1 <a href="http://www.baidu.com">百度</a>　

點擊百度，打開新界面www.baidu.com:  

1 <a href="http://www.baidu.com" target="_blank">百度</a>

點擊S2,跳轉到本機文件s2.html:  

1 <a href="s2.html" target="_blank">S2</a>

在html中，每一個標簽都可以有一個id,該id必須是唯一的。點擊"看第二章"，當前界面會跳到第二章的界面:

1 <ahref="#tt">看第二章</a>
2 <divstyle="height:1000px;background-color:red;">第一章</div>
3 <divid="tt"style="height:1000px;background-color:yellow;">第二章</div>

 

4、div標簽
用於佈局

 

5、img 圖片標簽

和a標簽結合點擊圖片直接跳轉，title指定滑鼠放到圖片後顯示的內容，style定義寬高，alt指定圖片不存在時的顯示信息

1 <a href="https://www.baidu.com">
2 　　<img src="i.png" title="大帥鍋" style="height: 300px;width: 220px;" alt="索隆">
3 </a>

 

6、H標簽(標題)

1 <h1>h1</h1>
2 <h2>h2</h2>
3 <h3>h3</h3>
4 <h4>h4</h4>
5 <h5>h5</h5>
6 <h6>h6</h6>

 

7、select標簽

 1 　   <select>
 2             <option>北京</option>
 3             <option>上海</option>
 4             <option>廣州</option>
 5             <option>惠來</option>
 6         </select>
 7 
 8         <select size="2">
 9             <option>北京</option>
10             <option>上海</option>
11             <option>廣州</option>
12             <option>惠來</option>
13         </select>
14 
15         <select size="3" multiple="multiple">
16             <option>北京</option>
17             <option>上海</option>
18             <option>廣州</option>
19             <option>惠來</option>
20         </select>
21 
22         <select>
23             <optgroup label="廣東省">
24                 <option>惠來</option>
25                 <option>廣州</option>
26             </optgroup>
27             <optgroup label="山西省">
28                 <option>太原</option>
29                 <option>平遙</option>
30             </optgroup>
31         </select>

運行界面:

以第一個覆選框為例，在未選時預設是北京，如果想預設為惠來，可加上一個屬性selected，PS:提交數據時，是提交value

1 <option value="4" selected="selected">惠來</option>

 

8、input系列標簽

覆選框(eg: 興趣): <input type="checkbox"/>

單選框(eg: 男女): <input type="radio"/>　　  
上面兩種框預設都是未選中的狀態，加上checked屬性則預設為選中狀態

1 <input type="radio" checked="checked"/>

radio的name相同，則表示選中的時候是互斥

1 <p>男:<input name="gender" type="radio"/></p>
2 <p>女:<input name="gender" type="radio"/></p>

 文本框/密碼框/button按鈕/submit按鈕/上傳文件

1  <input type="text"/>
2  <input type="password"/>
3 
4  <input type="button" value="btn"/>
5  <input type="submit" value="sub"/>
6  <hr />
7  <input type="file"/>

運行界面:

 

9、form標簽

form相當於一個表單，配合input標簽submit可以把表單的內容提交到指定位置，提交內容以字典的形式提交{‘user’:xx,'email':xx,'pwd':xx},key值為name屬性值

button只是一個簡單的按鈕; submit是提交表單的按鈕(往後臺提交數據)

 1 <h2>Form</h2>
 2 <form action="http://www.baidu.com">
 3     <div>
 4         主機名:<input name="host" type="text"/>
 5     </div>
 6     <div>
 7         埠:<input name="port" type="text"/>
 8     </div>
 9     <div>
10         用戶名:<input name="username" type="text"/>
11     </div>
12 
13     <input type="button" value="提交"/>
14     <input type="submit" value="提交"/>
15 </form>

運行界面:

如果想要提交文件，需要在其所在的form標簽中添加特殊的一個屬性: enctype="multipart/form-data" method="POST".

action＝“A”:　A表示數據提交的地方

1 <form action="A" enctype="multipart/form-data" method="POST">
2     <input type="text"/>
3     <input type="file"/>
4 </form>

 

10、textarea標簽

可輸入多行的文本框

1 <textarea>zcl</textarea>
2 <input type="text" value="zcl"/>

運行界面:

 

11、label標簽

label標簽中的for屬性與input標簽中的id相同，效果是只要點擊文字就選中了對應的checkbox

1 <label for="cb1">婚否</label>
2 <input id="cb1" type="checkbox"/>

 

12、列表標簽ul,ol,dl

 1 <ul>
 2     <li>111</li>
 3     <li>222</li>
 4 </ul>
 5 <ol>
 6     <li>aaaa</li>
 7     <li>bbbb</li>
 8 </ol>
 9 <dl>
10     <dt>標題</dt>
11     <dd>內容1</dd>
12     <dd>內容2</dd>
13 </dl>

運行界面:

 

13、<hr />標簽

<hr/>  水平分割線

 

14、table標簽

border="1": 設置邊框　　colspan: 合併列　　rowspan: 合併行

 1 <table border="1">
 2     <thead>
 3         <tr>
 4         <th>第一列</th>
 5         <th>第二列</th>
 6         <th>第三列</th>
 7         </tr>
 8     </thead>
 9     <tbody>
10         <tr>
11             <td colspan="2">h1 h2</td>
12             <td>h3</td>
13         </tr>
14         <tr>
15             <td rowspan="2">hh1 hhh1</td>
16             <td>hh2</td>
17             <td>hh3</td>
18         </tr>
19         <tr>
20             <td>hhh2</td>
21             <td>hhh3</td>
22         </tr>
23     </tbody>
24 </table>

運行界面:

 

15、span標簽

對文本中的一部分進行著色

1 <p>我的母親有 <span style="color:blue">藍色</span> 的眼睛。</p>

 

總結:

  • id,style,name所有標簽都可以定義的屬性
  • target, href是a標簽特有的屬性
  • src是img標簽特有的屬性

 


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

-Advertisement-
Play Games
更多相關文章
  • Java IO學習筆記（四）列印流
    1、只有輸出流才有列印流：PrintWriter和PrintStream分別針對字元和位元組，提供了重載的print，Println方法用於多種數據類型的輸出。PrintWriter和PrintStream操作不會拋出異常，數據沒列印出來也不會拋異常。 2、System.out.print(Objec ...
  • 扣減庫存策略採用訂單是否鎖定庫存方案
    扣減庫存策略採用訂單是否鎖定庫存方案 在訂單系統中用戶下訂單流程中，有一個重要環節是“扣減庫存”；而此“扣減庫存”採用的策略是直接在一個商品庫存欄位中的庫存數據減去訂單商品數量;如： update productStock set quantity = quantity -1 where produ ...
  • jQuery Tocify 定位導航
    Tocify是一個jQuery插件，能夠動態的生成文章目錄，Tocify可以隨意的設置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可選動畫和jQuery的顯示/隱藏效果，Tocify還支持平滑滾動，向前和向後按鈕支持，可以監聽瀏覽器的滾動顯示當前的目錄結構 ...
  • 十大經典排序演算法的 JavaScript 實現
    電腦領域的都多少掌握一點演算法知識，其中排序演算法是《數據結構與演算法》中最基本的演算法之一。排序演算法可以分為內部排序和外部排序，內部排序是數據記錄在記憶體中進行排序，而外部排序是因排序的數據很大，一次不能容納全部的排序記錄，在排序過程中需要訪問外存。常見的內部排序演算法有：插入排序、希爾排序、選擇排序、冒泡... ...
  • sass 基礎——回顧
    1.webstorm 自動編譯SASS 下載安裝包 http://rubyinstaller.org/downloads/ 然後點擊安裝，路徑為預設路徑就行， 勾選以下兩項 add Ruby executables to your PATH Associate .rb and rbw files w ...
  • H5 顏色屬性
    07-顏色屬性 我是段落 ...
  • vuejs自定義過濾器根據搜索框輸入的值，篩選複雜的列表數據
    如題所示，自定義過濾器根據搜索框輸入的值，篩選複雜的列表數據。如圖所示： html代碼： js自定義過濾器代碼： 比如在輸入框中輸入'mm'，得到篩選的結果如圖所示： ...
  • DOM遍歷
    [1]定義 [2]NodeIterator [3]TreeWalker ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類