?

HTML常見標簽

1、標題標簽：

…

• 標題標簽作用相當于word的標題 ，總共6課級別，取值1-6,數字越小，字體大小越小

2、分割線標簽：

---

• 分隔線標簽實例：

• 屬性：

  • color: 設置顏色，顏色可以是顏色名或者是16進制的色號，格式#xxxxxx； 其中x表示16進制的色號值
  • size:分隔線大小取值1-7，數字越大越粗
  • width: 寬度，默認居中

3、字體標簽：

• 字體實例：

4、加粗標簽：

• Strong： 表示強調，并且對強調的內容加粗顯示
  b: 只有加粗的效果沒有強調

5、斜體標簽：

• 斜體，將傾斜的內容包含在標簽內

6、段落和換行標簽：

?

?

• P: 表示段落標簽，用于組織一大段文本，段落于段落之間默認會有一個空行。

  • 效果

• br： 換行標簽，對于html會忽略空格和換行，因此需要使用換行標簽來進行換行
  說明： 如果需要多個換行，就加多個換行標簽

7、實體字符：? < > " ?

• &nbsp； 空格 &lt: 小于 ；&gt； 大于
  " 雙引號

8、HTML注釋：

• 對網頁內容進行說明

span

• 主要用于包含文本，沒有語義。

HTML圖片標簽

圖片標簽主要作用是通過圖片的形式更直觀的表達需要顯示的內容。更好的呈現用戶需要的效果。

img標簽的語法格式：

屬性解析：

• src屬性：設置圖片的引用路徑，可以是相對路徑或絕對路徑，推薦使用相對路徑

  • …/ : 上一級目錄
  • ./ ： 當前目錄
  • 絕對路徑是從項目根路徑開始向下的路徑：如：/項目名/img/aa.jpg
  • URL路徑：https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596444021094&di=c34a88135b38ac6a74403552dacec6fa&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg

• width屬性：設置圖片的寬度，以像素為單位

• height屬性：設置圖片的高度，以像素為單位

• title屬性：懸浮文字，當鼠標懸浮到圖片上時的提示文字

• alt屬性：替代文本，由于某種原因圖片無法顯示時會使用替代文本替代圖片內容

HTML超鏈接標簽

超鏈接也成為a： 主要用于從當前頁面發送請求連接到指定的地址，并響應。

語法結構：熱點文字或圖片

屬性解析：

• href屬性：訪問目標的url地址

  • 超鏈接標簽實例：

• target：定義打開頁面的方式 ,常用的兩種方式取值為：

  • _blank 在新的選項卡中打開；
  • _self 在本頁面打開（默認）；

HTML 列表標簽

無序列表 ul>li

• 無序列表

有序列表ol>li

• 有序列表

列表標簽的屬性 type:

特別說明：
ul和ol標簽都有type屬性，可以用來設置列表項前面的項目符號類型。其中ul無序列表的type取值為：disc、circle、square，默認值為disc。ol有序列表的type取值為：1、a、A、i、I，默認值為1。

HTML表格標簽

table表格標簽

• border：表格邊框的寬度

  • 注意： 邊框的的值是數字，且不需要像素的單位，數字越大越粗。

• width：表格的寬度

• height：表格的高度

• cellpadding：表格邊緣與內容之間的空白

• cellspacing: 單元格之間的空白(邊框和邊框之間的距離)

• bgcolor：表格的背景顏色

• align：表格的對其方式如居中：center

tr

• align

  • 設置該行表格中列里面的數據居中顯示

th/td

• align： 表格內容的對其方式
• colspan： 表格的列合并
• rowspan：表格中的行合并
• th的特點： 自動居中，字體默認加粗，其他和td一致

caption

• 設置表格和標題，注意放在table 標簽下

HTML表單標簽

HTML 表單的主要作用是接收用戶的輸入，當用戶提交表單時，瀏覽器將用戶在表單中輸入的數據打包，并發送給服務器，從而實現用戶與Web服務器的交互。
表單是控件的容器，一個表單由form元素、表單控件組成。

作用： 表單標簽是html中用于手機用戶數據，然后將收集到的數據臨時保存在瀏覽器，發送請求提交給服務器的標簽

實例展示

• 表單實例.png

表單標簽：

姓名：
密碼：
年齡：

<span style="color:#000000"><code> 郵箱：<input type="email" name="email"/><br>

頭像：<input type="file" name="photo"/><br>

<input type="hidden" value="隱藏作用域" name="test"/><br>

性別：<input type="radio" name="sex" value="男" checked="checked"/>男

<input type="radio" name="sex" value="女" />女<br>

愛好：<input type="checkbox" name="hobby" value="時間管理"/>時間管理

<input type="checkbox" name="hobby" value="rap" checked="checked"/>rap

<input type="checkbox" name="hobby" value="游泳"/>游泳

<input type="checkbox" name="hobby" value="王者毒藥"/>王者毒藥

<input type="checkbox" name="hobby" value="英雄聯盟"/>英雄聯盟<br>

?

出生日期：<input type="date" name="birthday"/><br>

學校：<select name="school">

<option value="1">斯坦福大學</option>

<option value="2" selected="selected">家里蹲大學</option>

<option value="3">哈弗</option>

<option value="4">中公教育</option>

</select><br>

?

<textarea name="text" cols="50" rows="30"></textarea>

?

<input type="submit" value="提交"/><br>

<input type="reset" value="重置" />

<input type="button" value="點我" />

?

<button>按鈕標簽</button>

?

</form>

</body>

</code></span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

• 概述：form 標簽是表單標簽的父標簽，本身沒有樣式也不能收集用戶數據，但是可以將子標簽中的數據組織然后提交

• 屬性

  • action： 用于設置數據提交到服務器的地址，相當于a標簽中的href的作用

  • method： 指定提交數據的方式，常見的有get和post.,默認為get

  • enctype: 設置提交數據類型編碼

    • application/x-www-form-urlencoded:在發送前編碼所有字符（默認）
    • multipart/form-data:不對字符編碼。

在使用包含文件上傳控件的表單時，必須使用該值。

• 子標簽

  • input

    • 說明： 輸入域，用來收集用戶數據

    • 屬性

      • name:設置數據的名字，不能省略。

      • type： 設置輸入域中數據的類型

        • text: 文本： 文本可見
        • password:，密碼，輸入的數據不可見
        • number: 表示的是數字，如：1、2、3
        • email: 郵件地址只能是郵件地址
        • file: 表示一個文件，在文件上傳時，類型必須是file
        • hidden: 表示隱藏作用域，可以設置收集提交的數據，但是不能再瀏覽器顯示，值是固定的
        • date:表示一個日期格式
        • radio: 單選按鈕：只能選擇一個
        • checkbox： 復選框,可以選擇多個
        • submit： 將表單中的數據提交到服務器
        • reset: 重置表單中的數據
        • button: 表示一個按鈕，沒有特殊語義

      • value：設置輸入域的默認值的。

      • 通用屬性 id,class

        • id:標簽的唯一標識，在一個html文件中不能重復
        • class: 表示一類標簽，值可以重復

  • select

    • option

      • 下單的菜單的name寫在：select；
        選擇內容寫在option標簽中。用value設置選擇標簽的值
      • 默認的選中使用selected屬性

  • textarea

    • 用于組織存放大量文本
    • cols: 表示文本框所占的寬度
    • rows: 表示文本框所占的高度

  • button

    • 注意： 如果將button按鈕作為form表單子標簽，則相當于submit

總結

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

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