前端三贱客 -- HTML

1. HTML 结构说明

 1 <!--文档声明：指定文档类型为html格式，浏览器会根据html格式去渲染下面的标签.-->
 2 <!DOCTYPE html> 
 3 <!--告诉浏览器以下文件为超文本标记语言-->
 4 <!--lang="en"告诉浏览器 这个网站是一个英文站,zh是中文站-->
 5 <html lang="en">
 6 
 7 <!--head是html文件的头部-->
 8 <head>
 9 
10 <!-- meta 元信息-->
11 <!-- charset="UTF-8" 网站的编码格式,utf-8 国际通用编码格式-->
12 <meta charset="UTF-8">
13 
14 <!--<title>网站的标题</title>-->
15 <title>Title</title>
16 <!--head结束标签-->
17 </head>
18 
19 <!--html主体内容-->
20 <body>
21 <!--只要显示页面的内容都放在body标签里-->
22 <!--所有的代码和符号都是英文状态下的-->
23 </body>
24 </html>

View Code

2. HTML 标签分类

是否闭合：

　　分为自闭和标签

　　主动闭合标签

是否占一行：

　　行内标签（内联标签）

　　块级标签

3. 常见的HTML标签（熟记这些够用)

3.1 <head></head> 常见内容

 1 <head>
 2     <title>网页标题</title>
 3     <meta charset="utf-8"> 
 4     <!--文档字符编码,定义字符编码必须放在最上方-->    
 5     <meta http-equiv="Refresh" content="5">    
 6     <!--每五秒页面刷新一次-->
 7     <meta http-equiv="Refresh" content="1;Url=http://www.baidu.com">
 8     <!--页面跳转-->
 9     <meta name="keywords" content="python,mysql,redis">    
10     <!--设置关键字，用于搜索引擎收录和关键字搜索 -->
11     <meta name="description" content="这是一个IT技术交流网站">
12     <!--meta IE浏览器-->
13     <meta http-equiv="X-UA-Compatible" content="IE=edge">
14     <!--图标-->
15     <link rel="shortcut icon" href="./image/favicon.ico">
16     <!-- 引入通用的css配置 -->
17     <link rel="stylesheet" type="text/css" href="css/commons.css">
18     <style type="text/css"></style>    
19     <!-- 引入css样式 -->
20     <script type="text/javascript"></script>
21     <!-- 引入js程序 -->
22 </head>

View Code

3.2 <p></p>标签

1 <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。</p>
2 <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
3 <p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>

View Code

3.3<h1></h1>h标签

1 <h1>标题一</h1>
2 <h2>标题二</h2>
3 <h3>标题三</h3>
4 <h4>标题四</h4>
5 <h5>标题五</h5>
6 <h6>标题六</h6>

View Code

3.4<div></div>div标签

1 <div style="background-color: red">div test</div>

View Code

3.5<span></span>span标签

1 <span style="background-color: green">span test</span>

View Code

3.6<a></a>a标签

3.6.1 跳转

1 <!-- 跳转，target=_blank 在新的tab页打开 -->
2 <a href="http://www.kugou.com" target="_blank">hello kugou</a>

View Code

3.6.2 锚点

1 <div>
2     <a href="#id1"><h3>第一章</h3></a>
3     <a href="#id2"><h3>第二章</h3></a>
4     <a href="#id3"><h3>第三章</h3></a>
5 </div>
6 <div id="id1" style="background-color: #114488; height: 800px;">第一章内容</div>
7 <div id="id2" style="background-color: #441188;height: 800px;">第二章内容</div>
8 <div id="id3" style="background-color: #881144;height: 800px;">第三章内容</div>

View Code

3.7<br>标签

1 <!--换行-->
2 <br\>

View Code

3.8<form></form>form表单

1 <form action="https://www.sogou.com" method="GET" enctype="multipart/form-data">
2     <p>First name: <input type="text" name="fname" /></p>
3     <p>Last name: <input type="text" name="lname" /></p>
4     <input type="submit" value="Submit" />
5 </form>

View Code

3.9<input></input>input标签(可以将数据提交到后台)

 1 <form action="https://www.sogou.com" method="GET" enctype="multipart/form-data">
 2     <p>用户名<input type="text" name="username"></p>
 3     <p>密&nbsp;&nbsp;&nbsp;码<input type="password" name="passwd"></p>
 4     <p>性别:</p>
 5         <p>
 6             男<input type="radio" name="gender" value="0" checked="checked">
 7             女<input type="radio" name="gender" value="1">
 8         </p>
 9 
10     <p>兴趣爱好:</p>
11         <p>
12             篮球<input type="checkbox" name="favi" value="0">
13             足球<input type="checkbox" name="favi" value="1">
14             排球<input type="checkbox" name="favi" value="2">
15             跑步<input type="checkbox" name="favi" value="3">
16         </p>
17     <p>简历上传:</p> 
18         <!-- input系列file功能依赖form表单的属性enctype="multipart/form-data" -->
19         <input type="file" name="resumeFile">
20     <p>
21         <input type="reset" value="重置">
22         <input type="submit" name="" value="提交">
23         <input type="button" value="点我">
24     </p>
25 </form>

View Code

3.10<textarea></textarea>textarea标签（可以将数据提交到后台）

1 <form action="https://www.sogou.com" method="GET" enctype="multipart/form-data">
2     <p>自我介绍:</p>
3     <textarea name="selfInfo">自我介绍</textarea>
4 </form>

View Code

3.12<select></select>select标签（可以将数据提交到后台）

 1 <form action="https://www.sogou.com" method="GET" enctype="multipart/form-data">
 2     <p>籍贯</p>
 3     <!-- 后端根据name值获取前端变量 name=1表示选中了shanghai--> 
 4     <select name="city">
 5         <option value="0">北京</option>
 6         <option value="1">上海</option>
 7         <option value="2" selected="selected">广州</option>
 8         <option value="3">深圳</option>
 9     </select>
10 
11     <!-- 可选择多个 -->
12     <select name="city1" size="5" multiple="multiple">
13         <option value="0">北京</option>
14         <option value="1">上海</option>
15         <option value="2">广州</option>
16         <option value="3">深圳</option>
17     </select>
18 
19     <select name="city2">
20         <optgroup label="河南省">
21             <option value="0">郑州</option>
22             <option value="1">许昌</option>    
23         </optgroup>
24         <optgroup label="广东省">
25             <option value="0">广州</option>
26             <option value="1">深圳</option>
27         </optgroup>
28     </select>
29 </form>

View Code

3.12<table></table>table标签

 1 <table border="1" width="600">
 2     <thead>
 3         <tr>
 4             <th>1111</th>
 5             <th>2222</th>
 6             <th>3333</th>
 7             <th>4444</th>
 8         </tr>
 9     </thead>
10     <tbody>
11         <tr>
12             <td colspan="2">1111</td>
13             <!-- <td>2222</td> -->
14             <td>3333</td>
15             <td>4444</td>
16         </tr>
17         <tr>
18             <td rowspan="2">1111</td>
19             <td>2222</td>
20             <td colspan="2" rowspan="2">3333</td>
21             <!-- <td>4444</td> -->
22         </tr>
23         <tr>
24         <!--     <td>1111</td> -->
25             <td>2222</td>
26         <!--     <td>3333</td>
27             <td>4444</td> -->
28         </tr>
29     </tbody>
30 </table>
31 <table border="1">
32        <thead>
33            <tr>
34                <th>姓名</th>
35                <th>年龄</th>
36                <th>爱好</th>
37            </tr>
38        </thead>
39        <tbody>
40            <tr>
41                <td>黄何</td>
42                <td>18</td>
43                <td>看书</td>
44            </tr>
45            <tr>
46                <td>伊葭</td>
47                <td>18</td>
48                <td>听音乐</td>
49            </tr>
50        </tbody>
51    </table>

View Code

3.13<img src="">img标签

1 <a href="https://www.kugou.com">
2 <!-- src:图片位置;title:鼠标落在图片的提示内容;alt:如果图片不存在,显示的内容 -->
3 <img src="./image/kugou.jpg"  title="kugou" alt="kugou logo" style="height: 300px;width: 300px;" >
4 </a>

View Code

3.14常用列表

 1 <ul>
 2     <li>周杰伦</li>
 3     <li>林俊杰</li>
 4     <li>王力宏</li>
 5 </ul>
 6 
 7 <ol>
 8     <li>铁锤</li>
 9     <li>钢弹</li>
10     <li>狗蛋</li>
11 </ol>
12 
13 <dl>
14     <dt>河北省</dt>
15     <dd>邯郸</dd>
16     <dd>石家庄</dd>
17     <dt>山西省</dt>
18     <dd>太原</dd>
19     <dd>平遥</dd>
20 </dl>

View Code

3.15<label><label>标签

1 <!--  效果是点击页面“用户名:”就可以输入内容 -->
2 <label for="username">用户名：</label>
3 <input id="username" type="text" name="user">

View Code

3.16<fieldset></fieldset>fieldset标签

1 <fieldset>
2     <legend>登录</legend>
3     <label for="username">用户名:</label>
4     <input id="username" type="text" name="user">
5     <br><br>
6     <label for="userpass">密&nbsp&nbsp&nbsp码:</label>
7     <input id="userpass" type="password" name="passwd">
8 </fieldset>

View Code

posted on 2020-04-02 21:25 伊葭言阅读(144) 评论(0) 收藏举报