一些熟悉常用的html標籤

一、概念:

  • Hyper Text Markup Language 超文本標記語營 是最基礎的網頁開發語
  • 超文本:用超鏈接的方法,將各種不同空間的文字信息組織在一起的網狀文本。
  • 標記語言:由標籤構成的語言。 <標籤名稱>如html, xml標記語營不是編程語言。

二、快速入門:
語法

  1. html文檔後綴名 .html 或者 . htm
  2. 標籤分爲圍堵標籤和自閉和標籤
    【圍堵標籤】
    有開始標籤和結束標籤。如
    【自閉和標籤】
    開始標籤和結束標籤在一起。如
  3. 標籤可以嵌套:
    需要正確嵌套,不能你中有我,我中有你
錯誤: <a><b></a></b>
正確: <a><b></b></a>
  1. 在開始標籤中可以定義屬性。屬性是由鍵值對構成,值需要用引號(單雙都可)引起來I
  2. html 的標籤不區分大小寫,但是建議使用小寫。

在這裏插入圖片描述
三、標籤學習:

  1. 文件標籤: 構成html最基本的標籤

html:html文檔的根標籤
head:頭標籤。用於指定html文檔的一些屬性。引入外部的資源
title :標題標籤。
body :體標籤

  <!DOCTYPE html> : html5中定義該文檔是html文檔
  1. 文本標籤:和文本有關的標籤
 *註釋: <!--註釋內容-->
 
* <h1> to <h6> :標題標籤
  
* h1~h6: 字體大小逐漸遞減

* <p> :段落標籤 

*<br> :換行標籤
 
* <hr> :展示一條水平線

*空格: &nbsp

屬性:
       color :顏色
       width:寬度
       size :高度
       align :對其方式
       center :居中
       left :左對齊
       right :右對齊

在這裏插入圖片描述

  1. 圖片標籤:
    img:展示圖片–src :指定圖片的位置
    舉例:
    在這裏插入圖片描述

注意:在這裏插入圖片描述

  1. 列表標語義化籤:
    htmls中爲了提高程序的可讀性,提供了-些標籤。
<header>
<footer >|

5. 表格標籤:
table: 定義表格
tr:定義行
td:定義單元格
th:定義表頭單元格
在這裏插入圖片描述
在這裏插入圖片描述

6. 列表標籤:
①有序列表:.
ol:
li:
②無序列表:
ul:
li:
在這裏插入圖片描述
在這裏插入圖片描述

  1. 鏈接標籤:
    a:定義一個超鏈接
    ●屬性:
    href :指定訪問資源的URL(統一資源定位符)
    target :指定打開資源的方式
    _self:默認值, 在當前頁面打開
    _blank :在空白頁面打開
    在這裏插入圖片描述

表單標籤

表單:用於採集用戶輸入的數據的。用於和服務器進行交互。

【form】
用於定義表單的。可以定義一個範圍,範圍代表採集用戶數據的範圍
【屬性】
action :指定提交數據的URL
method:指定提交方式,一共7種,2種比較常用
在這裏插入圖片描述

【get 和 post 區別】

  • get:
    1.請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議後講解)。
    2.請求參數大小是有限制的。
    3.不太安全。
  • post :
    1.請求參數不會再地址欄中顯示。會封裝在請求體中
    2.請求參數的大小沒有限制。
    3.較爲安全。

表單項中的數據要想被提交:必須指定其name屬性

【input標籤】
可以通過type屬性值,改變元素展示的樣式

type屬性:

  • text :文本輸入框,默認值,
  • placeholder :指定輸入框的提示信息,當輸入框的內容發生變化,會自動清空提示信息
  • password :密碼輸入框
  • radio:單選框
  • file :文件選擇框
  • hidden :隱藏域,用於提交一些信息。
  • submit :提交按鈕。可以提交表單;button :普通按鈕
  • image :圖片提交按鈕,src屬性指定圖片的路徑

【注意】

1.要想讓多個單選框實現單選的效果,則多個單選框的name屬性值必須一樣。

2.一般會給每一個單選框提供value屬性,指定其被選中後提交的值

3.checked屬性,可以指定默認值
checkbox :複選框

注意:

  1. 一般會給每一個單選框提供value屬性,指定其被選中後提交的值
  2. checked屬性,可以指定默認值
  • label :指定輸入項的文字描述信息

label的for屬性一般會和input 的id屬性值對應。如果對應了,則點擊labe區域,會讓input輸 入框獲取焦點。

select: 下拉列表

子元素: option指定列表項
selected:默認選擇
在這裏插入圖片描述
textarea :文本域
cols :指定列數,每一行有多少個字符
rows :默認多少行。
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章