前端基礎知識-html

時間 2019-11-18

標籤前端基礎知識 html 欄目 HTML 简体版

原文原文鏈接

前端的三把利器：HTML、CSS、JScss

HTML:

一、head 中的信息不會在頁面中呈現

1.一、head中的title是瀏覽器tab的標籤名

二、標籤

2.一、自閉和標籤：單個出現

2.二、主動閉合標籤：成對出現

2.三、標籤中的屬性：有標籤自帶屬性和自定義屬性

head部分：

 1 <head>
 2 <!--字符集編碼-->
 3 <meta charset="UTF-8">
 4 <!--每隔多少秒刷新請求-->
 5 <meta http-equiv="refresh" content="2">
 6 <!--打開頁面2秒鐘以後，跳轉到百度-->
 7 <meta http-equiv="refresh" content="2;http://www.baidu.com">
 8 <title>Title</title>
 9 <!--title的圖標-->
10 <link rel="shortcut icon" href="tubiao.ico">
11 <!--引入css-->
12 <link rel="stylesheet" href="tmp.css">
13 <!--css樣式-->
14 <style></style>
15 <!--引入js和編寫js-->
16 <script src="tmp.js"></script>
17 </head>

body部分：

<p>：段落標籤

<br>：換行標籤

<h1~9>：標題標籤，數字1的字體最大

<div>：塊級標籤，不論本身有多大，都佔滿一整行

<span>：行內標籤或叫內聯標籤，行內標籤本身有多大，就佔多大

白板標籤：沒有附着任何css樣式

僞白板標籤：附着其餘的css樣式

<input>：文本框，默認是text 文本框

 1 <!--文本框-->
 2 <input type="text" placeholder="提示文案">
 3 <input type="text" name="username" value="默認值">
 4 <!--密文文本框-->
 5 <input type="password" name="passwd" placeholder="請輸入密碼">
 6 <!--radio 單選，當name的值相同時，每一個元素直接互斥-->
 7 <span>男</span><input type="radio" name="sex">
 8 <span>女</span><input type="radio" name="sex">
 9 <!--checkbox 多選框，checked="checked"默認勾選-->
10 <span>華爲</span><input type="checkbox" checked="checked">
11 <span>iphone</span><input type="checkbox">
12 <!--上傳文件-->
13 <input type="file">
14 <!--按鈕-->
15 <input type="button" value="登陸">
16 <!--submit按鈕若是和form表單連用，則會直接觸發請求-->
17 <input type="submit" value="註冊">
18 <!--reset 和 form 表單連用時，會觸發表單重置-->
19 <input type="reset">

<form>：表單前端

<label>：擴展input的可點擊範圍，for屬性的值爲input所對應的id瀏覽器

1 <!--擴展input的可點擊範圍，for屬性的值爲input所對應的id-->
2 <label for="i1">用戶名：</label><input id="i1" type="text" placeholder="請輸入用戶名">

<textarea>:覆文本標籤iphone

<textarea>覆文本標籤</textarea>

<select>：下拉框標籤post

1 <!--下拉框標籤-->
2 <select name="s1">
3     <option selected="selected" value="0">請選擇</option>
4     <option value="1">中秋</option>
5     <option value="2">國慶</option>
6     <option value="3">都不上</option>
7 </select>

<select><optgroup>：分組下拉框字體

 1 <select name="s2">
 2     <optgroup label="黑龍江">
 3         <option>哈爾濱</option>
 4         <option>松花江</option>
 5     </optgroup>
 6     <optgroup label="河北">
 7         <option>石家莊</option>
 8         <option>秦皇島</option>
 9     </optgroup>
10 </select>

<a>：超連接標籤ui

1 <a href="http://www.baidu.com">跳轉到百度</a>

<img>：圖片標籤編碼

1 <img src="圖片地址" alt="圖片加載失敗提示" title="鼠標懸浮提示">

<ul>：點的列表spa

<ol>：數字的列表code

 1 <!--列表 點的列表-->
 2 <ul>
 3     <li>列表1</li>
 4     <li>列表2</li>
 5 </ul>
 6 <!--列表 數字的列表-->
 7 <ol>
 8     <li>列表3</li>
 9     <li>列表4</li>
10 </ol>

表格操做：

 1 <table border="1">
 2     <thead>
 3         <tr>
 4             <td>序號</td>
 5             <td>方法</td>
 6             <td>內容</td>
 7             <!--colspan 合併列-->
 8             <td colspan="2">操做</td>
 9         </tr>
10     </thead>
11     <tbody>
12         <tr>
13             <td>1</td>
14             <!--rowspan 合併行-->
15             <td rowspan="3">post</td>
16             <td>{}</td>
17             <td>修改</td>
18             <td>執行</td>
19         </tr>
20         <tr>
21             <td>2</td>
22             <td>{}</td>
23             <td>修改</td>
24             <td>執行</td>
25         </tr>
26         <tr>
27             <td>3</td>
28             <td>{}</td>
29             <td>修改</td>
30             <td>執行</td>
31         </tr>
32     </tbody>
33 </table>