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