?

HTML常見標(biāo)簽

1、標(biāo)題標(biāo)簽：

…

• 標(biāo)題標(biāo)簽作用相當(dāng)于word的標(biāo)題 ，總共6課級別，取值1-6,數(shù)字越小，字體大小越小

2、分割線標(biāo)簽：

---

• 分隔線標(biāo)簽實例：

• 屬性：

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

3、字體標(biāo)簽：

• 字體實例：

4、加粗標(biāo)簽：

• Strong： 表示強調(diào)，并且對強調(diào)的內(nèi)容加粗顯示
  b: 只有加粗的效果沒有強調(diào)

5、斜體標(biāo)簽：

• 斜體，將傾斜的內(nèi)容包含在標(biāo)簽內(nèi)

6、段落和換行標(biāo)簽：

?

?

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

  • 效果

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

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

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

8、HTML注釋：

• 對網(wǎng)頁內(nèi)容進行說明

span

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

HTML圖片標(biāo)簽

圖片標(biāo)簽主要作用是通過圖片的形式更直觀的表達需要顯示的內(nèi)容。更好的呈現(xiàn)用戶需要的效果。

img標(biāo)簽的語法格式：

屬性解析：

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

  • …/ : 上一級目錄
  • ./ ： 當(dāng)前目錄
  • 絕對路徑是從項目根路徑開始向下的路徑：如：/項目名/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屬性：設(shè)置圖片的寬度，以像素為單位

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

• title屬性：懸浮文字，當(dāng)鼠標(biāo)懸浮到圖片上時的提示文字

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

HTML超鏈接標(biāo)簽

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

語法結(jié)構(gòu)：熱點文字或圖片

屬性解析：

• href屬性：訪問目標(biāo)的url地址

  • 超鏈接標(biāo)簽實例：

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

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

HTML 列表標(biāo)簽

無序列表 ul>li

• 無序列表

有序列表ol>li

• 有序列表

列表標(biāo)簽的屬性 type:

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

HTML表格標(biāo)簽

table表格標(biāo)簽

• border：表格邊框的寬度

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

• width：表格的寬度

• height：表格的高度

• cellpadding：表格邊緣與內(nèi)容之間的空白

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

• bgcolor：表格的背景顏色

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

tr

• align

  • 設(shè)置該行表格中列里面的數(shù)據(jù)居中顯示

th/td

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

caption

• 設(shè)置表格和標(biāo)題，注意放在table 標(biāo)簽下

HTML表單標(biāo)簽

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

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

實例展示

• 表單實例.png

表單標(biāo)簽：

姓名：
密碼：
年齡：

<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="英雄聯(lián)盟"/>英雄聯(lián)盟<br>

?

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

學(xué)校：<select name="school">

<option value="1">斯坦福大學(xué)</option>

<option value="2" selected="selected">家里蹲大學(xué)</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>按鈕標(biāo)簽</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 標(biāo)簽是表單標(biāo)簽的父標(biāo)簽，本身沒有樣式也不能收集用戶數(shù)據(jù)，但是可以將子標(biāo)簽中的數(shù)據(jù)組織然后提交

• 屬性

  • action： 用于設(shè)置數(shù)據(jù)提交到服務(wù)器的地址，相當(dāng)于a標(biāo)簽中的href的作用

  • method： 指定提交數(shù)據(jù)的方式，常見的有g(shù)et和post.,默認為get

  • enctype: 設(shè)置提交數(shù)據(jù)類型編碼

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

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

• 子標(biāo)簽

  • input

    • 說明： 輸入域，用來收集用戶數(shù)據(jù)

    • 屬性

      • name:設(shè)置數(shù)據(jù)的名字，不能省略。

      • type： 設(shè)置輸入域中數(shù)據(jù)的類型

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

      • value：設(shè)置輸入域的默認值的。

      • 通用屬性 id,class

        • id:標(biāo)簽的唯一標(biāo)識，在一個html文件中不能重復(fù)
        • class: 表示一類標(biāo)簽，值可以重復(fù)

  • select

    • option

      • 下單的菜單的name寫在：select；
        選擇內(nèi)容寫在option標(biāo)簽中。用value設(shè)置選擇標(biāo)簽的值
      • 默認的選中使用selected屬性

  • textarea

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

  • button

    • 注意： 如果將button按鈕作為form表單子標(biāo)簽，則相當(dāng)于submit

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。