前端HTML標簽
一. HTML是什麽
HTML是超文本暴擊語言( Hypertext Markup Language )是一種創建網頁的標記語言,而不是一種編程語言
本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的網頁.對也不同的瀏覽器,對同一個標簽可能會有不同的解釋
網頁文件擴展名 : .html 或 .htm
二. HTML標簽格式
HTML標簽由尖括號包圍的關鍵字 : < >
HTML標簽通常是成對出現的 : <div></div> 第一個標簽是開始,第二個標簽是結束
標簽內可以有若幹屬性,也可以不帶屬性
標簽語法 :
<標簽名 屬性1=‘屬性值1‘ 屬性2=‘屬性值2‘.....>顯示內容</標簽名>
<標簽名 屬性1=‘屬性值1‘ 屬性2=‘屬性值2‘..../>
部分重要的屬性 :
id : 定義標簽的唯一ID,HTML文檔內唯一
class : 為html元素定義一個或多個類名
style : 規定元素的內部樣式
HTML註釋 :
<!--註釋內容-->
三. 最基本的HTML格式
<!DOCTYPE html> #聲明為HTML5文檔 <html lang="zh-CN">#文檔開始標記,聲明網頁編碼 <head>#定義了HTML文檔的開頭,head內的內容不會在用戶面前顯示 <meta charset="UTF-8"> <title>css樣式優先級</title>#網頁標題 </head> <body> <!--網頁內部用戶看得見的東西--> </body> </html>#文檔結束標識
四. head內常用的標簽
| <title></title> | 定義網頁的標題 |
| <style></style> | 定義內部樣式 |
| <script></script> | 即可以包含腳本文件,也可以引入(指向)外部腳本文件 |
| <link/> | 鏈接外部樣式表 |
| <meta/> | 提供有關頁面的元信息(針對搜索引擎和更新頻率的描述和關鍵詞等) |
<meta>屬性 :
| 屬性 |
可選參數 |
作用 |
| http-equiv |
content-type expires refresh set-cookie |
相當於http的頭文件,它可以給瀏覽器傳回一些能幫助網頁正確顯示的信息 |
| content | some_text | 定義與http或name相關的屬性,其實就是http或name各個參數的變量值 |
| name |
author description keywords generator revised others |
主要用於描述網頁,content中的內容主要是便於搜索引擎分類和查找 |
五. body內常用標簽
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s> ( 在文本內容上畫刪除線 )
<p>段落(大量文本)</p>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<br> 換行
<hr> 分割線
空格
> >
< <
& &
¥ ￥
© 版權
® 註冊
<div>用來定義一個塊級元素,並無實際意義.主要通過css樣式為其賦予不同的表現</div>
<span>用來定義內聯/行內元素,並無實際意義.主要通過css樣式為其賦予不同表現</span>
所謂塊級元素就是另起一行開始渲染的元素,行內元素則不需要另起一行.如果單獨在網頁內插入這兩個元素,不會對頁面產生任何影響.
<img src=‘圖片的路徑‘ alt=‘圖片加載失敗是提示語‘ title=‘鼠標懸浮時提示信息‘ width=‘圖片寬度‘ height=‘圖片高度‘>( 寬高兩個屬性若只寫一個會自動等比例縮放 )
超鏈接標簽 :
<a href="http://www.baidu.com" target="_blank"/target="_self">網頁顯示點擊內容</a>
target = "_blank" 表示在新標簽頁打開目標網頁
target = "_self" 表示在當前標簽頁中打開目標網頁
列表標簽 :
<p> <ol type="I"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol> </p> <p> <ul> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul> </p> <p> <dl> <dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dd>內容2</dd> <dt>標題3</dt> <dd>內容3</dd> <dt>標題4</dt> </dl> </p>
1.無序號標識列表
<ul type="disc"><li>列表內容</li></ul>
type屬性 :
disc : 實心圓點(默認值)
circle : 空心圓圈
square : 實心方塊
none : 無樣式
2.有序號標識列表
<ol type="1" start="2"><li>列表內容</li></ol>
type屬性 :
1 : 數字列表.默認值
A : 大寫字母
a : 小寫字母
I : 大寫羅馬數字
i : 小寫羅馬數字
3.標題列表
<dl>
<dt>標題</dt>
<dd>內容</dd>
</dl>
表格標簽
<table border=""> <thead> <tr> <!--定義表格行--> <th>姓名</th> <!--定義表頭,表頭默認加粗--> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>王一</td> <!--定義表格單元--> <td>18</td> <td>女</td> </tr> <tr> <td>王二</td> <td>16</td> <td>男</td> </tr> </tbody> </table>
| 屬性 | 屬性可選參數 | 含義 |
| align |
left center right |
可以使用css樣式代替 規定表格相對周圍元素的對齊方法 |
| bgcolor |
rgb colorname |
可以使用css樣式代替 規定表格的背景顏色 |
| border | pixels | 規定表格邊框的寬度 |
| cellpadding |
pixels % |
規定單元邊沿與其內容之間的空白 |
| cellspacing |
pixels % |
規定單元格之間的空白 |
| frame |
void above below hsides ihs rhs vsides box border |
規定外側邊框的那個部分是可見的 |
| rules |
none groups rows cols all |
規定內側邊框的那個部分是可見的 |
| summary |
text |
規定表格的摘要 |
| width |
% pixels |
規定表格的寬度 |
| rowspan |
行數 |
單元格豎跨多少行 |
| colspan | 列數 | 單元格橫跨多少列 |
form表單
表單用於向服務器傳輸數據,從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽,比如 : 文本框,復選框等
表單還包含textarea,sekect,fieldset和label標簽
form元素都是塊級元素,其前後會產生折行
| 屬性 | 屬性的參數 | 含義 |
| accept | MIME_type | HTML 5不支持 |
| accept_charset | charset_list |
規定服務器可以處理的表單數據字符集 |
| action | URL |
規定當提交表單時向何處發送表單數據 |
| autocomplete |
on off |
規定是否啟用表單的自動完成功能(默認開啟) |
| enctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
規定在發送表單數據之前如何讀其進行編碼 默認url-encoded |
| method |
get post |
規定用於發送form-data的http方法 默認GET |
| name | form_name | 規定表單的名稱 |
| novalidate | novalidate | 該屬性可以換使表單被提交時不被驗證 |
| target |
_blank _self _top _parent framename |
規定在何處打開 action URL 默認:_self |
表單元素 :
基本概念 :
HTML表單時HTML元素中較為復雜的部分,表單一般和腳本,動態頁面,數據處理功能相結合,所有表單時制作動態網站的重要元素
表單一般用於收集用戶的輸入信息
表單的工作原理 :
訪問者在訪問含有表單的網頁時,對必要的信息填寫後,通過某個按鈕提交.這麽信息通過internet傳送到服務器上,服務器有專門的程序讀這些數據進行處理,如果有錯誤會返回錯誤信息,並要求糾正錯誤,當數據完成無誤後,服務器反饋一個輸入完成的信息.
input標簽
<input>元素會根據不同的type屬性,變化為多種形態
| type屬性值 | 變現形式 | 對應代碼 |
| text | 單行輸入文本 | <input type="text"/> |
| password | 密碼輸入框(密文) | <input type="password"/> |
| date | 日期輸入框 | <input type="date"/> |
| checkbox | 復選框 | <input type="checkbox" checked="checked"/> |
| radio | 單選框 | <input type="radio"/> |
| submit | 提交按鈕 | <input type="submit" value="提交"/> |
| reset | 重置按鈕 | <input type="reset" value="重置"/> |
| button | 普通按鈕 | <input type="button" value="普通按鈕"/> |
| nidden | 隱藏輸入框 | <input type="nidden"/> |
| file | 文本選擇框 | <input type="file"/> |
屬性說明 :
name : 表單提交時的"鍵" , 和id有區別
value : 表單提交時對應項的值
type="button","reset","submit"時,為按鈕上顯示的文本內容
type="text","password","hidden"時,為輸入框的初始值
type="checkbox","radio","file"時,為輸入相關聯的值
checked : radio和checkbox默認被選中的項
readonly : text和password設置只讀
disabled : 所有input均適用;input加載時禁用此元素
select標簽(下拉框標簽)
<form action=""> <select name="city" id=""> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> </select> </form>
| 屬性 | 屬性的參數 | 含義 |
| autofocus | autofocus | 規定在頁面加載後文本區域自動獲得焦點 |
| disabled | disabled | 規定禁用該下拉列表 |
| form | form_id | 規定文本區域所屬的一個或多個表單 |
| multiple | multiple | 規定可選擇多個選項(默認單選,設置後多選) |
| name | name | 規定下拉列表的名字 |
| required | required | 規定文本區域是必填的 |
| size | number | 規定下拉列表中可見選項的數目 |
屬性說明 :
selected : 默認選中該項
value : 定義提交時的選項值
label標簽
<form action=""> <label for="1">用戶名</label> <input type="text" id="1"> <!--label簡寫--> <label>用戶名 <input type="text"> </label> </form>
<label>標簽為input元素定義標記
<label>元素不會向用戶呈現任何效果
<label>標簽的for屬性值應當與相關元素的id屬性值相同
| 屬性 | 屬性對應參數 | 含義 |
| for | id | 規定label綁定到那個表單的id |
| form | formid | 規定label字段所屬的一個或多個表單 |
textarea多行文本
文本區域內可容納無線數量的文本,其中的文本默認字體是等寬字體
可以通過cols和rows屬性規定textarea的尺寸,不過更好的辦法是使用css的height和width屬性.
| 屬性 | 屬性的參數 | 含義 |
| autofocus | autofocus | 規定在頁面加載後文本區域自動獲得焦點 |
| cols | number | 規定文本區域的可見寬度 |
| disabled | disabled | 規定禁用該文本區 |
| form | form_id | 規定文本區域所屬的一個或多個表單 |
| maxlength | number | 規定文本區域的最大字符數 |
| name | name_of_textarea | 規定文本區域的名稱 |
| placeholder | text | 規定描述文本區域預期值的簡短提示 |
| readonly | readonly | 規定文本為只讀 |
| required | required | 規定區域是必填的 |
| rows | number | 規定文本區內的可見行數 |
| wrap |
hard soft |
規定在表單中提交時,文本區域的文本如何換行. |
前端HTML標簽