現在的位置: 首頁 > web前端 > 正文

HTML常用基礎標籤

2020年02月24日 web前端 ⁄ 共 2454字 ⁄ 字型大小 評論關閉

  HTTP基礎語法

  div標籤是塊級結構布局元素,因此結合css盒模型講解。

  HTTP基本結構

  基本結構標籤

  HTTP文件包括頭部信息和網頁內容,body中的內容在網頁中顯示。

  < html>

  < head>

  < title>標題< /title>

  < /head>

  < body>

  網頁主體內容

  < /body>

  < /html>

  標籤、元素、屬性

  標籤分為雙標籤和單標籤。

  < html>...< /html>

  < hr/>

  元素是指從開始到結束標籤的全部內容,例如,html標籤加上內部代碼,即為一個HTML元素。

  屬性用來修飾標籤。

  < 標籤名 屬性1="值1" 屬性2="值2">內容< /標籤名>

  注釋

  注釋格式

  < !-- 注釋 -->

  文檔聲明

  聲明必須放在HTML穩定第一行,但是並不是HTML標籤。

  < !DOCTYPE html>

  網頁編碼

  編碼在head標籤內部設置。

  < meta charset="UTF-8">

  < meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

  文字和段落標籤

  標題標籤h1–h6

  < h1>一級標題< /h1>

  段落標籤p

  align屬性:值有left、right、center、justify。p標籤中空格是不起作用的,需要使用代碼nbsp

  < p>段落< /p>

  < p align="left">段落< /p>

  換行標籤br和水平線標籤hr

  < br/>

  < hr/>

  < hr width="10"/>

  < hr color="blue"/>

  < hr align="center"/>

  < hr noshade=""/>

  預標籤pre很少用。

  修飾標籤和特殊符號

  文字修飾標籤

  i和em:斜體

  b和strong:加粗

  sub:下標

  sup:上標

  ins:下劃線

  del:刪除線

  特殊符號

  空格

  < 小於/左尖括弧   > 大於/右尖括弧

  ® 已註冊R

  © 版權C

  ™ 商標TM

  示例

  < p align="center">關於我們 | 招聘信息 | 聯繫我們 | 意見反饋< /p>

  < hr/>

  < p align="center">Copyright©2016 awecoder.com All Rights Reserved< /p>

  < p>公式:x2+x=0 解:x< sub>1< /sub>=0;x< sub>2< /sub>=-1< /p>

  列表標籤

  無序列表ul

  屬性type可為disc(原點)、square(方塊)、circle(空心圓)。

  < ul type="circle">

  < li>列表項< /li>

  < li>列表項< /li>

  < /ul>

  有序列表ol

  屬性type可為1、a、A、i、I。

  < ol type="A">

  < li>列表項< /li>

  < li>列表項< /li>

  < /ol>

  定義列表

  dt和dd在dl標籤內,dt和dd同級。

  < dl>

  < dt>配送方式< /dt>

  < dd>上門自提< /dd>

  < dd>海外配送< /dd>

  < dt>支付方式< /dt>

  < dd>貨到付款< /dd>

  < dd>在線支付< /dd>

  < /dl>

  圖像標籤img

  src屬性=圖片URL(相對路徑是圖片相對於當前html文件的路徑)

  alt屬性=圖像的代替文字,圖像無法顯示時展示。

  height屬性和width屬性,可用像素數值和百分比表示。

  也適用align對齊屬性。

  < img src="Snipaste.png" alt="截圖" height="50%" width="50%"/>

  < img src="Snipaste.png" alt="截圖" height="50px" width="50px"/>

  超鏈接a和定義錨點

  超鏈接標籤a

  href屬性為鏈接地址,標籤內容可以是文字或圖片等。

  target屬性–鏈接的目標窗口,_self當前窗口打開,_blank新窗口打開,_top/_parent

  title屬性–鏈接提示文字。

  name屬性–鏈接命名。

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

  空連接--點擊沒有反應

  < a href="#" title="百度">百度< /a>

  空的鏈接--點擊刷新頁面

  < a href="">刷新頁面< /a>

  id屬性–書籤標記

  結合name屬性定義錨點

  < a href="#錨點名">同一個頁面< /a>

  < a href="網頁名稱#錨點名">不同頁面< /a>

  < a name="錨點名">內容< /a>

  示例

  < a name="top">目錄< /a>< br/>

  < a href="#fruit">水果< /a>< br/>

  < a href="#vegetable">蔬菜< /a>< br/>

  < a href="#sport">運動< /a>

  < !--設置水果標題-->

  < h3>水果< /h3>

  < a name="fruit">< /a>

  < ul>

  < li>香蕉< /li>

  < li>蘋果< /li>

  < /ul>

  < a href="#top">返回頂部< /a>

  < !--設置蔬菜標題-->

  < h3>蔬菜< /h3>

  < a name="vegetable"/>

  < ul>

  < li>西紅柿< /li>

  < li>黃瓜< /li>

  < /ul>

  < a href="#top">返回頂部< /a>

  鏈接擴展功能

  郵箱

  < a href="mailto:xxx@qq.com" >xxx@qq.com< /a>

  下載文件

  < a href="下載地址">文件下載< /a>

  html基礎標籤介紹如上,對於每個從事網站的人員來說,都應該了解這些標籤,對你了解網站或者策劃網站會有很大幫助的。

抱歉!評論已關閉.