【前端模块】HTML5标签
文章目錄
- 一、文件標簽
- 二、文本標簽
- 三、圖片標簽
- 四、列表標簽
- 五、連接標簽
- 六、表格標簽
- 七、表單標簽
- 八、簡單案例
一、文件標簽
文件標簽：構成html最基本的標簽
二、文本標簽
和文本有關的標簽
注釋：
h1 to h6：標題標簽
h1 to h6:字體大小遞減
p：段落標簽
br：換行標簽
hr：展示一條水平線
屬性：
- color：顏色
- width：寬度
- size：高度
- align：對齊方式
- center：區中
- left：左對齊
- right：右對齊
b：字體加粗
i：字體斜體
font：字體標簽
屬性
- color：顏色
- size：大小
- face：字體
屬性定義
color
- 英文單詞：red，yellow，blue
- rgb(值1，值2，值3)：指的范圍在0-255，如：rgb(0,0,255)
- #值1值2值3：值的范圍：00-FF之間，如：#0000FF
width
- 數值：width=‘20’，數值的單位，默認是px（像素）
- 數值%：占比相對于父元素的比例
三、圖片標簽
展示一張圖片
四、列表標簽
有序列表
-
ol：
-
li：
<ol><li></li><li></li><li></li> </ol>
無序列表
-
ul：
-
li：
<ul><li></li><li></li><li></li> </ul>
五、連接標簽
a：定義一個超鏈接
屬性
- href：指定訪問資源的URL（統一資源定位）
- target：指定打開資源的方式
- _self：默認值，在當前頁面打開
- _blank：在空白頁面打開
六、表格標簽
- width：寬度
- border：邊框
- cellpadding：定義內容和單元格的距離
- cellspacing：定義單元格之間的距離，若指定為0，則單元格的線會合為一條
- bgcolor：背景色
- align：對齊方式
- bgcolor：背景色
- align：對齊方式
- colspan：合并列
- rowspan：合并行
七、表單標簽
用于采集用戶輸入的數據，用于與服務器進行交互
form：用于定義表單的，可以定義一個范圍，范圍代表采集數據的范圍
屬性
-
action：指定提交數據的URL，跳轉位置
-
method：指定提交方式
? 分類：一共7種，主要使用兩種
- get：
- 請求參數會在地址欄中顯式。會封裝到請求行中
- 請求參數大小是有限制的
- 不太安全
表單中的數據想要被提交，就必須指定其name屬性
<form action="#" method="get">用戶名：<input name="username" type="text"> </form>表單項標簽：
input：可以通過type屬性值，改變元素展示的樣式
type
-
text：文本輸入框，默認值
placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動提空提示信息
-
password：密碼輸入框
-
radio：單選框（在默認值上加上checked）
注意：
- 要想讓多個實現框實現單選效果，則多個單元框的name屬性必須一致
- 一般會給每一個單元框提供value屬性，指定其被選中后的值
- checked屬性，可以指定默認值
-
checkbox：復選框（在默認值上加上checked）
注意：
- 一般會給每一個單選框提供value屬性，指定其被選中后提交的值
- checked屬性們可以指定默認值
-
file：文件選擇框
-
hidden：隱藏域，用于提交一些信息
-
按鈕
-
submit：提交按鈕，可以提交表單
-
button：普通按鈕
-
image：圖片提交按鈕
? src屬性置頂圖片位置
-
date/datetime-local：日期/日期時間
-
email：email的簡單檢驗
-
label：指定輸入項的文字描述信息
? 注意：label的for屬性的一般會和input的ID屬性值對應，若對應，則點擊label區域，會讓讓input輸入框獲取焦點
select：下拉列表
- 子元素：option，指定列表項
textarea：文本域
- cols：指定列數，每一行有多少個字符
- rows：默認多少行
八、簡單案例
<body> <form action="#" method="get"><label for="username">用戶名</label>:<input name="username" type="text" placeholder="請輸入用戶名" id="username"/><br><label for="username">密碼</label>:<input name="password" type="password" placeholder="請輸入密碼"><br>性別：<input name="sex" type="radio" value="male" checked>男<input name="sex" type="radio" value="female">女<br>愛好：<input name="hobby" type="checkbox" value="shopping">購物<input type="checkbox" name="hobby" value="java" checked>Java<input type="checkbox" name="hobby" value="game" checked>游戲<br>圖片：<input type="file" name="pic"><br>生日:<input type="date" name="birthday"><br>郵箱：<input type="email" name="email"><br>省份：<select name="province"><option>---請選擇一個省份--</option><option>浙江</option><option>上海</option><option>江蘇</option></select><br>自我描述： <br><textarea cols="50" rows="5" name="dec" placeholder="請輸入自我描述"></textarea><input type="submit" value="login"><input type="button" value="button"><input type="image" src="../images/collection_icon.jpg"></form> </body>樣式截圖
總結
以上是生活随笔為你收集整理的【前端模块】HTML5标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Spring-Boot】【入门 01】
- 下一篇： 2017年html5行业报告,云适配发布