【Html学习】HTML基础

前端的三把利器：

HTML：一个人

CSS：这个人的衣服

JS：这个人的行为

HTML（超文本标记语言）

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

后端与前端交互方式

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

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

HTML标签

1 <!DOCTYPE html> <!--标准的html规则，类似于Python的解释器-->
2 <html lang="en"> <!--html标签(只能一个)，指定语言en--> 
3 <head> <!-- html head标签的开始 -->
4 </head> <!-- html head标签的结束 -->
5 <body> <!-- html body标签的开始 -->
6 <a href="http://www.baidu.com">跳转百度</a> <!--类似有很多href这种的叫做标签内部属性-->
7 </body> <!-- html body标签的结束 --> 
8 </html> 
9 注释的写法 <!-- -->

html head

1、自闭和标签

只有开头标签，没有结尾标签，只有一对尖括号

2、主动闭合标签

既有开头标签，又有结尾标签，有两对尖括号

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <!-- 指定编码 -->
 5 <meta charset="UTF-8">
 6 <!-- 每1秒中刷新一次 -->
 7 <meta http-equiv="refresh" content="1">
 8 <!-- 2秒后跳转页面 -->
 9 <meta http-equiv="refresh" content="2;Url=http://www.baidu.com">
10 <!-- 关键字检索 -->
11 <meta name="keywords" content="双鱼座">
12 <!-- 网站描述-->
13 <meta name="description" content="大师兄是名低调的测试工程师">
14 <!-- ie打开时以最高的兼容模式打开 -->
15 <meta http-equiv="X-UA-Compatible" content="IE=edge">
16 <!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title-->
17 <title>白羊座</title>
18 <!-- 前方高能预警，***重要*** -->
19 
20 <!-- title的图标 -->
21 <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">
22 
23 <!-- 引入css -->
24 <link rel="stylesheet" href="s1.css">
25 
26 <!-- css样式-->
27 <style></style>
28 
29 <!-- 引入js和编写js -->
30 <script src="s1.js"></script>
31 
32 </head>
33 
34 <body>
35 
36 </body>
37 
38 </html>

html body

符号：

&nbsp：字符之间增加空格，有几个空格就要几个&nbsp

&lt：左尖角号或小于号展示到页面

&gt：右尖角号或大于号展示到页面

例：<h1>&lth1&gt &lt/h1&gt标题标签</h1>

块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)

行内标签：SPAN标签(白板)

h、p、br、span、div、input、form、label

 1 <!--h123456标签：标题标签，由大到小-->
 2 <h1>标题标签</h1>
 3 <h2>标题标签</h2>
 4 <h3>标题标签</h3>
 5 <h4>标题标签</h4>
 6 <h5>标题标签</h5>
 7 <h6>标题标签</h6>
 8 
 9 <p>年轻,<br>就是拿来折腾的</p>
10     <!--p标签：段落标签-->
11     <!--p标签：块级标签，占满整行-->
12     <!--br标签：换行标签-->
13 
14 <span>年轻,就是拿来折腾的</span>
15     <!--span标签：行内标签-->
16     <!--span标签：白板标签，它没有做任何的修饰，可以通过css修饰变成任意标签-->
17 
18 <div>年轻,就是拿来折腾的</div>
19     <!--div标签，块级标签-->
20     <!--div标签，伪白板标签-->
21 
22 <span>年&nbsp&nbsp&nbsp&nbsp轻</span>
23     <!--&nbsp：字符之间增加空格-->
24 
25 <span>&lt年&nbsp&nbsp轻&gt</span>
26     <!--&lt &gt：将尖角号展示到页面-->
27 
28 <span>&ltp&gt&lt/p&gt</span>
29     <!--将p标签展示到页面-->
30 
31 <!--input标签：文本框标签-->
32 <input type="text" placeholder="请输入用户名" name="username" value="admin">
33     <!--type="text"：普通输入框-->
34     <!--placeholder：输入框提示信息，输入框为空时显示-->
35     <!--name：通过输入框传递给后端的值-->
36     <!--value：输入框默认填入的值-->
37 <input type="password" placeholder="请输入密码" name="password">
38     <!--type="password"：密码输入框-->
39     <!--placeholder：输入框提示信息，输入框为空时显示-->
40     <!--name：通过输入框传递给后端的值-->
41 <span>是否记住登录</span><input type="checkbox" name="xxx" checked="checked">
42     <!--type="checkbox"：勾选框-->
43     <!--name：通过输入框传递给后端的值-->
44     <!--checked="checked"：默认勾选-->
45 <div>性别</div>
46 <span>男</span><input type="radio" checked="checked" name="sex">
47     <!--type="radio"：单选按钮-->
48     <!--checked="checked"：默认勾选-->
49     <!--name="sex"：名字相同则互斥-->
50 <span>女</span><input type="radio" name="sex">
51     <!--type="radio"：单选按钮-->
52     <!--name="sex"：名字相同则互斥-->
53 <input type="file" name="file">
54     <!--type="file"：上传文件-->
55     <!--name：通过输入框传递给后端的值-->
56 <input type="button" value="提交">
57     <!--type="button"：button是需要和js连用，通过js进行提交操作-->
58     <!--value="提交"：按钮名称-->
59 
60 <form action="http://www.baidu.com" method="get">
61     <!--点击登录按钮，跳转到百度页面-->
62     <input type="text" name="username" value="admin">
63     <!--type="text"：普通输入框-->
64     <!--name：通过输入框传递给后端的值-->
65     <!--value：输入框默认填入的值-->
66     <input type="reset">
67         <!--重置form表单到初始化状态-->
68     <input type="submit" value="登录">
69         <!--submit和form连用则直接提交表单-->
70         <!--现在比较少用，点击后会刷新整个页面，所有input框都被清空，一旦有一个地方出错，刷新后其他地方都要重新输入-->
71     <input type="button" value="button按钮">
72         <!--点击button按钮登录，异步提交，前端页面不动，前端通过js向后端偷偷发送请求，拿到请求结果后把请求结果直接绚览到页面上，能保证已经输入的内容不会被清空-->
73 </form>
74 
75 <!--label标签：扩展了可点击范围-->
76 <label for="i1">用户名：</label><input id="i1" type="text" value="admin">
77 <span>密码：</span><input type="password">

textarea、select、option、optgroup、a、ul、li、ol、dl、dt、dd

 1 <!--textarea标签：多行文本标签-->
 2 <textarea name="tex">sssssss</textarea>
 3 
 4 <!--select option标签：下拉框标签-->
 5 <select name="city" size="3" multiple="multiple">
 6     <!--size="3"：下拉框可以展示几个个东西-->
 7     <!--multiple="multiple"：多选属性-->
 8     <option value="1">北京</option>
 9     <option value="2" selected="selected">上海</option>
10         <!--selected="selected"：默认选中上海-->
11     <option value="3">天津</option>
12     <option value="4">重庆</option>
13     <option value="5">深圳</option>
14 </select>
15 
16 <!--select optgroup标签-->
17 <select>
18     <!--optgroup标签：对下拉框进行分组-->
19     <optgroup label="黑龙江">
20         <option>哈尔滨</option>
21         <option>牡丹江</option>
22     </optgroup>
23     <optgroup label="河北">
24         <option>石家庄</option>
25         <option>唐山</option>
26     </optgroup>
27 </select>
28 
29 <!--a标签：超文本链接标签-->
30 <a href="http://www.imdsx.cn">大师兄博客</a>
31     <!--href=""：跳转地址-->
32 
33 <!--a标签的锚点-->
34 <a href="#i1">跳转</a>
35     <!--井号代指id-->
36 <div id="i1">ssssssssssssss</div>
37     <!--id：id选择器-->
38 
39 <!--ul+li：·形式的列表-->
40 <ul>
41     <li>大连</li>
42     <li>秦皇岛</li>
43 </ul>
44 
45 <!--ol+li：数字形式的列表-->
46 <ol>
47     <li>大连</li>
48     <li>秦皇岛</li>
49 </ol>
50 
51 <!--dl+dt+dd：分层列表，dd内层，dt外层-->
52 <dl>
53     <dt>黑龙江</dt>
54     <dd>牡丹江</dd>
55     <dd>哈尔滨</dd>
56 </dl>

table、thead、tr、th、tbody、tr、td

 1 <!--table标签：表格标签-->
 2 <table border="1">
 3     <!--border="1"：边框-->
 4     <!--thead：表头-->
 5     <thead>
 6         <!--tr:行-->
 7         <tr>
 8             <!--th:表头当中的列-->
 9             <th>id</th>
10             <th>请求方式</th>
11             <th>参数</th>
12             <th>接口</th>
13             <th colspan="2">操作</th>
14                 <!--colspan="2"：操作栏占2列-->
15         </tr>
16     </thead>
17     <!--tbody：表体-->
18     <tbody>
19         <!--tr：表体当中的第一行-->
20         <tr>
21             <!--td：表体第一行中的列-->
22             <td>1</td>
23             <td rowspan="3">post</td>
24                 <!--rowspan="3"：post占3行-->
25             <td>{'name':'dsx'}</td>
26             <td rowspan="3">/login</td>
27                 <!--rowspan="3"：/login占3行-->
28             <td><a href="http://www.baidu.com">修改</a></td>
29                 <!--加了a标签和href属性，点击修改则跳转页面-->
30             <td>删除</td>
31         </tr>
32         <!--tr：表体当中的第二行-->
33         <tr>
34             <!--td：表体第二行中的列-->
35             <td>2</td>
36             <td>{'name':'dsx'}</td>
37             <td>修改</td>
38             <td>删除</td>
39         </tr>
40         <!--tr：表体当中的第三行-->
41         <tr>
42             <!--td：表体第三行中的列-->
43             <td>3</td>
44             <td>{'name':'dsx'}</td>
45             <td>修改</td>
46             <td>删除</td>
47         </tr>
48     </tbody>
49 </table>

img

1 <!--img标签：图片标签-->
2 <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示的文字" title="鼠标悬浮时显示的文字">
3     <!--alt：失败时展示的文字-->
4     <!--title：鼠标悬浮时显示的文字-->

posted @ 2020-04-16 21:03 gtea 阅读(156) 评论(0) 编辑收藏举报

刷新页面返回顶部

Gtea

【Html学习】HTML基础

公告