2. 程式人生 > >菜鳥初學h5的html標籤總結（上）

菜鳥初學h5的html標籤總結（上）

阿新 • • 發佈：2019-01-13

一、 h5基礎介紹

 1. html5的基本結構

     <!DOCTYPE html>命名文件型別

     <html></html>說明我們寫的是標記語言

     <head></head>檔案頭部

     <title></title>檔案標題（顯示在狀態列上的內容）

     <meta charset="utf-8" />編碼格式

     <body></body>檔案主體(所有要寫的內容)

2.html的基本語法

  • <標記 屬性="屬性值"></標記>
  • <標記 屬性="屬性值"/>

注意：

  • 寫在<>中的第一個單詞叫做標記，標籤，元素。
  • 標記和屬性用空格隔開，屬性和屬性值用等號連線，屬性值必須放在“”號內。
  • 一個標記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先後順序。
  • 空標記沒有結束標籤，用“/”代替。

二 、html常用的標籤

1.文字標題標籤

<h1>一級標題</h1>

<h2>二級標題</h2>

<h3>二級標題</h3>

<h4>二級標題</h4>

<h5>二級標題</h5>

<h6>二級標題</h6>

2.

強制換行 : <br/>       水平線：<hr/>

3.段落標籤：

<p>段落文字內容</p>

4.空格：

&nbsp   

擴充套件：左尖括號：&lt       右尖括號：&gt     乘號：&times

5.加粗：

<b>加粗內容</b>  、<strong>加粗內容</strong>

6.傾斜：

<i>傾斜內容</i>  、<em>傾斜內容</em>

7.列表   html 中有三種列表：

  • 無序列表：<ul>

                         <li></li>

                        <li></li >

                         ..............

                     </ul>

  • 有序列表：<ol>

                    <li></li >

                     <li></li >

                     ...............

                  </ol>

  • 自定義列表:<dl>

                   <dt>名詞</dt>

                    <dd>解釋</dd>

                   </dl>

8.插入圖片

  • <img src="目標檔案路徑及全稱" alt="圖片替換文字" title="圖片的標題"/>         
  • title的作用: 在你滑鼠懸停在該圖片上時顯示一個小提示，滑鼠離開就沒有了，HTML的絕大多數標籤都支援title屬性，title屬性就是專門做提示資訊的
  • alt的作用:alt屬性是在你的圖片因為某種原因不能載入時在頁面顯示的提示資訊，它會直接輸出在原本載入圖片的地方。

*相對路徑的寫法：

  • 噹噹前檔案與目標檔案在同一目錄下，直接書寫目標檔案檔名+副檔名；
  • 噹噹前檔案與目標檔案所處的資料夾在同一目錄下，寫法如下：資料夾名/目標檔案全稱+副檔名； 
  • 噹噹前檔案所處的資料夾和目標檔案所處的資料夾在同一目錄下，寫法如下：../目標檔案所處資料夾名/目標檔案檔名+副檔名；

9.超連結

  • 語法：<a href="目標檔案路徑及全稱/連線地址"titlle="提示文字">連結的文字/圖片</a>

  • a href="#"></a>空連結,返回頁面頂端。

  • 屬性：target:頁面開啟方式        屬性值：_blank 新視窗開啟

  • <a href="#" target="_blank">新頁面開啟</a>

10.作用：顯示資料

  • <table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">

  • <tr>  

  •      <td></td>

  •     <td></td>

  •    ................

  • </tr>

  • </table>

注：一個tr表示一行;一個td表示一個單元格

*資料表格的相關屬性

1）width="表格的寬度"

2）height="表格的高度"

3）border="表格的邊框"

4）bgcolor="表格的背景色"

5）cellspacing="單元格與單元格之間的間距"

6）cellpadding="單元格與內容之間的空隙"

7）對齊方式：align="left/center/right";

8)合併單元格屬性：

colspan=“所要合併的單元格的列數"合併列;

一行

一行

一行

rowspan=“所要合併單元格的行數”合併行;

一行

一行

一行

11.表單的應用

表單的作用：用來收集使用者的資訊的;

1、表單框

<form name="表單名稱" method="post/get"  action=""></form>

1）文字框

<input type="text" value="預設值"/> 

maxlenght  最大字元數

hidden 隱藏標籤 在瀏覽器裡面是不可見的

2)密碼框
<input type="password" placeholder="密碼" />

3)提交按鈕

<input type="submit" value="按鈕內容" /> 

4)重置按鈕

<input type="reset" value="按鈕內容" />

5）單選框/單選按鈕

<input type="radio" name="ral" />

<input type="radio" name="ral" />

<input type="radio" name="ral" checked="checked" />(預設選中；)

6）複選框

<input type="checkbox" name="like" />

<input type="checkbox" name="like" disabled="disabled" checked="checked"  />

(disabled="disabled" :禁用 )

7)下拉選單     

<select    name=""   size=””>    能看見的列表個數

         <option value=””>選單內容</option>    預設選中：selected

</select>

8）多行文字框（文字域）

<textarea name="textareal" cols="字元寬度" rows="行數"></textarea>

9)按鈕

  • <input   name="'"   type="button" value=“按鈕內容” /> 
  • （button和submit的區別是 ，submit是提交按鈕 起到提交資訊的作用，button只起到跳轉的作用，不進行提交。）

擴充套件：表單提交中get和post方式的區別有5點

  • get是從伺服器上獲取資料，post是向伺服器傳送資料。
  • get是把引數資料佇列加到提交表單的ACTION屬性所指的URL中，值和表單內各個欄位一一對應，在URL中可以看到。post是通過HTTPpost機制，將表單內各個欄位與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。
  • 對於get方式，伺服器端用Request.QueryString獲取變數的值，對於post方式，伺服器端用Request.Form獲取提交的資料。
  • get傳送的資料量較小，不能大於2KB。post傳送的資料量較大，一般被預設為不受限制。但理論上，IIS4中最大量為80KB，IIS5中為100KB。
  • get安全性非常低，post安全性較高。

12.div 的用法

  • <div id="id名"/class="class名"></div>

  • 文件區域，文件佈局物件

13.span的用法

  • <span></span>文字結點（某一小段文字，或是某一個字）

相關推薦

菜鳥初學h5的html標籤總結（上）

一、 h5基礎介紹  1. html5的基本結構      <!DOCTYPE html>命名文件型別      <html></html>說明我們寫的是標記語言      <head></head>檔案頭部

[學習筆記]菜鳥教程Swift知識點總結（一）

目錄基本語法資料型別變數、常量可選型別字面量運算子 基本語法 Swift 的多行註釋可以巢狀在其他多行註釋內部。寫法是在一個多行註釋塊內插入另一個多行註釋。第二個註釋塊封閉時，後面仍然接著第一個註釋塊

Java程式設計師從笨鳥到菜鳥之（十四）Html基礎總結（上）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

菜鳥教程之工具使用（五）——JRebel與Windows服務的Tomcat集成

-m end 個人 再見 proc key pre 安裝 target 之前寫過一篇Tomcat借助JRebel支持熱部署的文章——《借助JRebel使Tomcat支持熱部署 》。介紹的是在開發、測試環境中的配置。可是正式的部署環境。我們不會通過命令行來啟動Tomcat，

Python學習第一周總結（上）

country 增強 括號 需要 src 多核cpu 優勢 統一 5.0 Python基礎知識總結 一、前期了解 1.1解釋型語言和編譯型語言 編譯型語言在程序執行之前，有一個單獨的編譯過程，將程序翻譯成機器語言，以後執行這個程序的時候，就不用再進行翻譯了。 解釋型語言，是

菜鳥學Python第一天（簡介）

pythonPython簡單介紹　　Python 是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。python 的設計具有很強的可讀性，相比其他語言經常使用英文關鍵字，其他語言的一些標點符號，它具有比其他語言更有特色語法結構。 　Python 是一種解釋型語言： 這意味著開發過程中沒有了編譯這

2017上海QCon之旅總結（上）

發送 避免 queue 不必要 進展 jvm es2017 功能 簡單的 本來這個公眾號的交流消息中間件相關的技術的。這周去上海參加了QCon，第一次參加這樣的技術會議，感受挺多的，所以整理一下自己的一些想法接公眾號和大家交流一下。 下面進入正題，從自己參加了的一些分享中

TPC協議學習總結（上）

組成 三次 -s 序列號 可謂 然而 image 計數器 結構 在計算機領域，數據的本質無非0和1，創造0和1的固然偉大，但真正百花齊放的還是基於0和1之上的各種層次之間的組合（數據結構）所帶給我們人類各種各樣的可能性。例如TCP協議，我們的生活無不無時無刻的站在TCP協議

Python菜鳥快樂遊戲程式設計_pygame（4）

Python菜鳥快樂遊戲程式設計_pygame（博主錄製，2K解析度，超高清） https://study.163.com/course/courseMain.htm?courseId=1006188025&share=2&shareId=400000000398149 為了熟悉鍵盤，

Python菜鳥快樂遊戲程式設計_pygame（5）

Python菜鳥快樂遊戲程式設計_pygame（博主錄製，2K解析度，超高清） https://study.163.com/course/courseMain.htm?courseId=1006188025&share=2&shareId=400000000398149  

Python菜鳥快樂遊戲程式設計_pygame（2）

Python菜鳥快樂遊戲程式設計_pygame（博主錄製，2K解析度，超高清） https://study.163.com/course/courseMain.htm?courseId=1006188025&share=2&shareId=400000000398149  

Python菜鳥快樂遊戲程式設計_pygame（3）

Python菜鳥快樂遊戲程式設計_pygame（博主錄製，2K解析度，超高清） https://study.163.com/course/courseMain.htm?courseId=1006188025&share=2&shareId=400000000398149  

用Vue開發仿旅遊站webapp專案總結 （上）

寫著寫著發現會寫不少內容... 全部寫在一篇文章裡感覺太多了不方便看，所以分為上下篇吧... 溫馨提示 此文章，僅是做完專案後的個人覺得可以總結下來的操作/思路，接觸vue不久的朋友應該會有收穫。此專案也才是萌新做的第二個Vue專案，使用了腳手架工具（ vue-cli 2.x 非 3 ），前輩老

珍藏 | 基於深度學習的目標檢測全面梳理總結（上）

關於作者：@李家丞 同濟大學數學系本科在讀，現為格靈深瞳演算法部實習生。 作者個人主頁：李家丞|個人主頁|關於我 導言：目標檢測的任務表述   如何從影象中解析出可供計算機理解的資訊，是機器視覺的中心問題。深度學習模型由於其強大的表示能力，加之資料量的積累和計算力的

菜鳥的C++ 知識盲區（跌倒）到知識黑洞（放棄）---------2.1變數和基本型別

前言 說來話長，本人是一個不合格的程式設計師，最起碼我覺得我水平很菜。本科就讀於北方一個沒落的211，學的是機械設計製造及其自動化，基本上本科沒有接觸過什麼“高深”的關於程式設計的專案，不過稀裡糊塗計算機二級考過了，但是C語言並沒有學的很好，什麼指標啦只是大概知道。本科

TCP協議學習總結（上）

在計算機領域，資料的本質無非0和1，創造0和1的固然偉大，但真正百花齊放的還是基於0和1之上的各種層次之間的組合（資料結構）所帶給我們人類各種各樣的可能性。例如TCP協議，我們的生活無不無時無刻的站在TCP協議這個“巨人”的肩膀上，最簡單的一個開啟手機的動作。所以對TCP的認識和理解，可謂越來越常識化。

typeScript總結（上）

我是從去年開始使用typeScript的，剛開始用的時候也是因為專案使用的ts,所以也是糊里糊塗的用著，一直沒系統整理學習過，所以正好藉此機會，整理一下，加深理解。 一、概念 首先呢，它是跟javaScript一樣屬於一種指令碼語言； 其次，它始於javaScript

常見html標籤總結（二）

1丶列表標籤 無序列表： <ul> <li></li> </ul>  <li></li>中書寫列表內容，一個li標籤代表一行資料 特點：預設資料前面有一個黑圓圈符號 有序列表： <ol

常見html標籤總結（三）

1、form標籤 作用：收集並提交使用者資料給指定的伺服器 注意：form會收集齊標籤內部的資料 action：收集資料提交地址（？之前的就是action的提交地址） method：收集資料的提交方式 1、get：適用少量資料，表單資料以？隔開拼接在url後面，

年後跳槽全過程總結（上）——從面試準備到拿到offer

背景 2016年2月，按照計劃進行跳槽。 跳槽的原因： （1）工資較低，ps 在技術水平正常的前提下，第一份工作的工資在很大程度上決定了你以後工資的高度，因為人事通常會根據你上一份工作的工資來壓你的工資，工資的正常增長浮動範圍是前工資的50%。自己剛畢業時技術