HTML基础之html标签

HTML标签介绍

前端的三把利器

HTML：赤裸的一个人

CSS：华丽的衣服

JS/JavaScript：赋予这个人的行为，也就是动起来

HTML（超文本标记语言）

html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。

后端与前端交互方式

1、后端通过直接返回浏览器能够识别的html代码

2、后端返回数据，前端替换html种的指定数据

HTML标签

一个html文件都包含head和body，其中head放置一些html文件的标题、css样式及js代码，body中放置的是html页面内容

1.自闭合标签：

<br>、<meta charset="utf-8">、<input>等

2.主动闭合标签：

<a href="http://www.baidu.com">百度</a>、<div>块级标签</div>、<span>行内标签</span>等

3.符号：

空格：&nbsp 大于号：&gt 小于号 &lt 记住常用的这三个，其他的用时百度

4.段落标签p：<p></p>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <p>&nbsp&nbsp新中国成立以来，我国持续加强应急管理工作，成功应对一系列重大灾难。党的十八大以来，以习同志为核心的党中央创新发展新时代应急管理理念，坚持提前预防、科学治理，改变灾难推动型治理方式，开启应急管理新篇章。特别是在深化党和国家机构改革过程中，中央政府决定组建应急管理部，建立起自上而下的救灾体系，从体制上有效解决了长期以来重救轻防、重短轻长、各管一段、资源分散等突出问题。这一重大改革举措有着重要里程碑意义</p>
 9     <p>&nbsp&nbsp新中国成立以来，我国持续加强应急管理工作，成功应对一系列重大灾难。党的十八大以来，以习同志为核心的党中央创新发展新时代应急管理理念，坚持提前预防、科学治理，改变灾难推动型治理方式，开启应急管理新篇章。特别是在深化党和国家机构改革过程中，中央政府决定组建应急管理部，建立起自上而下的救灾体系，从体制上有效解决了长期以来重救轻防、重短轻长、各管一段、资源分散等突出问题。这一重大改革举措有着重要里程碑意义</p>
10 
11 </body>
12 </html>

5.标题标签h1~h6：<h1>标题标签</h1>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1>标题标签h1</h1>
 9     <h2>标题标签h2</h2>
10     <h3>标题标签h3</h3>
11     <h4>标题标签h4</h4>
12     <h5>标题标签h5</h5>
13     <h6>标题标签h6</h6>
14 </body>
15 </html>

6.换行标签<br>

7.块级标签div：不管有多大都占满一整行，又叫伪白板标签(有换行样式)；<div>整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签</div>

8.行内标签span:自己有多大则占多大，又叫白板标签；<span>行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签</span>

9.输入控件标签input：包含多个属性；其中type属性的值包含text(输入框)、password(密码输入框)、button(按钮，一般需要跟事件进行绑定)、checkbox(多选框)、radio(单选框)、file(文件选择框)、submit(提交)、reset(重置)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--type="text"表示输入框-->
 9     没有默认值的输入框<input type="text"><br>
10     有默认值的入框，默认值不需要手动清除<input type="text" placeholder="请输入"><br>
11     有默认值的输入框，默认值需要手动清除<input type="text" value="请输入"><br>
12     <br>
13 
14     <!--type="password"表示密码输入框，密码密文显示-->
15     请输入密码:<input type="password" placeholder="输入密码"><br>
16     请输入密码有默认密码<input type="password" value="123456"><br>
17     <br>
18 
19     <!--type="button"表示按钮，一般需要与事件进行绑定-->
20     <input type="button" value="登录" onclick="jump()"><br>
21     <br>
22 
23     <!--type="submit"表示提交按钮-->
24     <input type="submit" value="提交"><br>
25     <br>
26 
27     <!--type="checkbox"表示多选框-->
28     <div>你喜欢的学科:</div>
29     语文<input type="checkbox" value="subject" checked="checked">
30     数学<input type="checkbox" value="subject">
31     英语<input type="checkbox" value="subject"><br>
32     <br>
33 
34     <!--type="radio"表示单选框，需要与name属性进行联用才会互斥-->
35     <div>你的性别：</div>
36     男<input type="radio" value="男" name="sex">
37     女<input type="radio" value="女" name="sex" checked="checked"><br>
38     <br>
39 
40     <!--type="file"表示文件上传选择框-->
41     选择文件:<input type="file"><br>
42     <br>
43 
44     <!--type="reset"表示重置-->
45     <form action="login">
46         用户名:<input type="text" name="userName" value="">
47         密码:<input type="password" name="password">
48         <input type="reset">
49     </form>
50 
51     <script>
52         function jump(){
53             alert("你点击了登录按钮")
54         }
55 
56     </script>
57 </body>
58 </html>

10.label标签为input标签定义标注，例如扩大可点击范围，for：映射到input的id

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div>
 9         <div>
10             <label for="userName">用户名：</label>
11             <input type="text" name="user" id="userName">
12         </div>
13         <div>
14             <label for="passwd">
15                 <span>密码：</span>
16             </label>
17             <input type="password" id="passwd">
18         </div>
19     </div>
20 
21 
22 </body>
23 </html>

11.表单标签form，表单向服务器传入数据，input标签type="submit"属性时需要与form表单标签联用，input中name属性对应接口中的key，value对应接口中的值

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <form action="http://www.baidu.com" method="get">
 9         <div>
10             <div>
11                 <label for="userName">用户名：</label>
12                 <input type="text" name="user" id="userName" value="xiaohei">
13             </div>
14             <div>
15                 <label for="passwd">
16                     <span>密码：</span>
17                 </label>
18                 <input type="password" id="passwd" name="password" value="123456">
19             </div>
20             <div>
21                 <input type="submit" value="提交">
22             </div>
23         </div>
24 
25     </form>
26 </body>
27 </html>

12.多行文本标签textarea:<textarea></textarea>默认值需要放在标签中间

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 项目描述:<br>
 9 <textarea name="data" id="" cols="30" rows="10"></textarea>
10 
11 </body>
12 </html>

13.下拉标签select

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--size属性为了用户看到设置的选择框，使用size属性只能上下滑动鼠标查看，不能通过点击查看-->
 9 <select name="city" id="city" size="3">
10     <option value="北京">北京</option>
11     <option value="深圳">深圳</option>
12     <option value="上海" selected="selected">上海</option>
13 </select>
14 <br>
15 
16 <!--multiple属性表示多选，只能通过ctrl+鼠标点击进行选中-->
17 <select name="shenzhen" id="country" multiple="multiple">
18     <optgroup label="罗湖">
19         <option value="1">莲田街道</option>
20         <option value="2">老街街道</option>
21     </optgroup>
22     <optgroup label="龙岗">
23         <option value="3">坂田街道</option>
24         <option value="4">平湖街道</option>
25     </optgroup>
26     <optgroup label="龙华">
27         <option value="5">清湖街道</option>
28         <option value="6">大浪街道</option>
29     </optgroup>
30 </select>
31 </body>
32 </html>

13.超链接标签a：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--a标签可以做跳转也可以做描点,做跳转时target="_blank"表示在一个新的页面打开-->
 9     <a href="http://www.baidu.com" target="_blank">百度</a>
10     
11     a标签进行描点时，需要通过id进行关联，在html文件中看到#就表示id
12     <div style="height:1000px;width:100%" id="i1">顶部</div>
13     <a href="#i1">回到顶部</a>
14 </body>
15 </html>

14.图片标签img

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <img src="http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg" title="鼠标移动到图片上的文字" alt="图片不存在的文字" height="400px" width="700px">
 9 </body>
10 </html>

15.表格标签table、thead、tr、th、td、tfoot，<table></table>表格标签；<thead></thead>表头标签；</tfoot></tfoot>表示页脚;<tr></tr>表示行；<th></th>表头使用表示列；<td></td>表体中使用表示列

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <table border="1">
 9         <thead>
10             <tr>
11                 <th>id</th>
12                 <th>接口名</th>
13                 <th>请求方式</th>
14                 <!--表头中th的colspan表示占几列-->
15                 <th colspan="2">操作</th>
16             </tr>
17         </thead>
18         <tbody>
19             <tr>
20                 <td>1</td>
21                 <td>/login</td>
22                 <!--表体中td的rowspan表示占几行-->
23                 <td rowspan="3">post</td>
24                 <td>运行</td>
25                 <td>编辑</td>
26             </tr>
27             <tr>
28                 <td>1</td>
29                 <td>/login</td>
30                 <!--<td>post</td>-->
31                 <td>运行</td>
32                 <td>编辑</td>
33             </tr>
34             <tr>
35                 <td>1</td>
36                 <td>/login</td>
37                 <!--<td>post</td>-->
38                 <td>运行</td>
39                 <td>编辑</td>
40             </tr>
41         </tbody>
42     </table>
43 </body>
44 </html>

16.定义列表dl、dt、dd，<dl></dl>定义列表；<dt></dt>定义列表中的项目；<dd></dd>定义项目描述

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <dl>
10         <dt>安徽省</dt>
11         <dd>合肥市</dd>
12         <dd>安庆市</dd>
13     </dl>
14 </body>
15 </html>

17.定义列表标签ul、ol，li；<ul></ul>无序列表；<ol></ol>有序列表；<li></li>列表中的项目

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>狮子座</li>
10         <li>白羊座</li>
11         <li>双子座</li>
12     </ul>
13 
14     <br>
15     <br>
16 
17     <ol>
18         <li>狮子座</li>
19         <li>白羊座</li>
20         <li>双子座</li>
21     </ol>
22 </body>
23 </html>

posted @ 2019-12-02 23:06 少壮不努力123 阅读(154) 评论(0) 收藏举报

刷新页面返回顶部