前端基础之HTML
今天开始我们将要用python来写前端,那么,前端是什么?
前端可以理解为各种应用软件的界面,也可以理解为一个网页的界面,我们最常用来表示的也就是一个网页,或者说一个web端.那么用python来实现前端的设计,我们还需要学习最重要的三个东西,他们不能说是具体的编程语言,但是是做前端所必需的东西.就是HTML,CSS以及JS.
HTML:相当于一个网页的骨架,是最核心的部分,所有的内容都存在于这个地方,用以调整整个页面的布局.
CSS:相当于一件衣服,可以给网页穿上,也就是可以极大地改善网页的可读性,以及界面,让其显示更加亲民,或者说给人印象更深刻.
JSL:相当于一个马达,负责让网页动起来,尽管很多网页是静态的网页,但是动态网页明显回头率更高,也会让人更有访问的欲望
今天我们先来介绍一下HTML的部分知识.
HTML
html的概念及特点
首先,我们要知道html并不是一种编程语言,其全名叫做超文本标记语言,标记语言我们可以理解,就是用来做标记的语言.超文本这三个字,可以有两种理解,一种就是超级,这种文本比一般的文本要更高级,有更多的功能,和作用,另一种理解就是超链接,就是那种我们点击一下就能跳转到另一个界面的超链接.
总的来说,HTML就是负责创建网页的标记语言.
另外,html的主要特点有三个:
- html对换行和空格不敏感,要用到的时候需要特别的格式去定义才可以
- html的空白是自动折叠的,就是说多个空格显示出来也只会是一个,除非用
多个叠加,就是多个空格,也会显示出来多个空格. - body主体里面的内容如果超长的话,会在网页上自动换行,不会一行一直显示下去.
html的结构
1
// 要用什么版本的html进行解析该网页
2
<html lang="en"> // lang=“en” 英语的意思，如果是lang = "zh"就是默认的中文
3
<head> // 头标签，是双标签。
4
<meta charset="UTF-8"> // meta 提供这个网页的基本信息，默认打开就是 utf-8 编码
5
<title>Document</title> // title 标题名称，就是打开网页最上方的网页名
6
</head>
7
<body> // 网页的主体内容，其中有各种标签
8
9
</body>
10
</html>
head常用标签
x
1
head里面常用的标签有五个,即title,style,script,link和meta,具体如下
2
3
<head>
4
<meta charset="UTF-8">
5
<title>hello</title>标题,设置的标题就是打开网页时最上方的网页名
6
<!--样式标签,样式标签可以更改网页的背景页面等-->
7
<style>
8
div {
9
background-color: red;
10
}
11
</style>
12
<!-- <script src="t.js">-->可以定义或者引入外部的js文件
13
<!-- </script>-->
14
<link rel="stylesheet" href="01.css">可以引入外部的样式表文件,也就是CSS文件
15
<!-- <meta http-equiv="refresh" content="2;URL = http://www.baidu.com">-->可以定义网页的原信息,或者指定网页自动跳转至指定网页
16
<meta name="keywords" content="meta">
17
<meta name="description" content="老男孩(这里要写这个网站的描述)">
18
</head>
body常用标签
body的常用标签就比较多,或者说,非常多.这也是我们日后用的最多的东西.
x
1
1. 标签的书写
2
双标签:<head></head>
3
单标签:<meta charset = 'UTF-8'>
4
2. 标签里面的属性
5
<标签名 属性名="属性值"></标签名>
6
<标签名 属性名="属性值"/>
7
<标签名 id = "属性值" class = "属性值 属性值 属性值"></标签名>
8
<标签名>内容</标签名>
9
<标签名 属性名 = "内容"/>
10
11
<br>br这是换行
12
<b>这是加粗</b>
13
<i>这是斜体</i>
14
<u>这是下划线</u>
15
<p>这是独占一个段落</p>
16
<s>这是删除</s>
17
<h1>标题1</h1>
18
<h2>标题2</h2>
19
<h3>标题3</h3>
20
<h4>标题4</h4>
21
<h5>标题5</h5>
22
<h6>标题6 最多到6,到7就会回归最原始的字体,不会是标题</h6>
23
<hr>这是水平线<hr>
24
25
<!--无序列表标签 #id .class
26
disc 实心圆点
27
circle 空心圆圈
28
square 方块
29
none 无样式
30
-->
31
<ul class="a">
32
<li>1</li>
33
<li>2</li>
34
<li>3</li>
35
</ul>
36
37
<!--有序列表标签
38
type属性:
39
1 数字列表,默认
40
A 大写字母
41
a 小写字母
42
I 大写罗马
43
i 小写罗马
44
-->
45
<ol type="A" start="2">
46
<li>1</li>
47
<li>2</li>
48
<li>3</li>
49
</ol>
50
51
<!--表格标签
52
th 标题
53
td tabledate 数据
54
55
border:表格边框
56
cellpadding:内边距
57
cellspacing:外边距
58
像素,百分比(最好通过css来控制宽度
59
)
60
rowsapn:单元格竖跨多少行(仅限内容,标题不竖跨)
61
colspan:单元格横跨多少行(合并单元格)
62
-->
63
<table border="10">
64
<thead>
65
<tr>
66
<th>name</th>
67
<th>age</th>
68
<th>sex</th>
69
</tr>
70
</thead>
71
<tbody>
72
<tr>
73
<td>egon</td>
74
<td>39</td>
75
<td>female</td>
76
</tr>
77
<tr>
78
<td>egon</td>
79
<td>39</td>
80
<td>female</td>
81
</tr>
82
<tr>
83
<td>egon</td>
84
<td>39</td>
85
<td>female</td>
86
</tr>
87
</tbody>
88
</table>
89
90
<!--img 图片标签
91
src = "图片地址"
92
alt = "当图片不能加载的时候就会显示,还有给搜索引擎提示图片的内容"
93
title = "当我们鼠标悬浮在图片上的时候就会显示"
94
-->
95
96
<a标签>
97
<a href="http://www.baidu.com" target="_blank" >点我</a>
98
99
<form表单>几乎是html里面最重要也是最常用的标签,和input联用
100
<!--action属性是提交地址,method是提交方式,也叫请求方式-->
101
<!--如果提交的有图片,需要修改enctype的默认值为multipart/form-data,如果没有则不用修改-->
102
<form action="" method="post" enctype="multipart/form-data">
103
<!--类型text是明文,password是密文-->
104
<div>
105
<!--hidden可以隐藏输入框-->
106
用户名:<input type="text" name="user">
107
108
</div>
109
<div>
110
密码:<input type="password" name="pwd">
111
</div>
112
<div>
113
<!--其实是提交的value属性的值-->
114
<!--type类型为radio时,checked="checked",默认选中该选项,当name字段相同的时候只能单选,name字段不同的时候可以多选-->
115
性别:<input type="radio" name="sex" value="1">男
116
<input type="radio" name="sex" value="0" checked="checked">女
117
</div>
118
<div>
119
<!--type类型为checkbox时,不管name是否一样,都可以多选-->
120
爱好: <input type="checkbox" name="hobbies" value="bsk">篮球
121
<input type="checkbox" name="hobbies" value="sing">唱
122
<input type="checkbox" name="hobbies" value="jump">跳
123
<input type="checkbox" name="hobbies" value="rap">rap
124
</div>
125
<div>
126
头像: <input type="file" name="arator">
127
</div>
128
<div>
129
<!--加入multiple之后可以同时选择多个select的选项,注意选择的时候要用ctrl或者shift-->
130
<!--selected = "selected"默认值-->
131
<select name="city" id="city" multiple>
132
<option value="1">北京</option>
133
<option value="2" selected=selected>上海</option>
134
<option value="3">广州</option>
135
<option value="4">深圳</option>
136
</select>
137
138
</div>
139
<div>
140
<!--value就是按钮的名字,submit为提交,以后尽量少用,多用button,提交用Js控制-->
141
<input type="submit" value="登录">
142
<input type="reset" value="重置">
143
<input type="button" value="我是按钮">
144
</div>
145
</form>
标签的总结
x
10
1
块级元素:
2
<h1>...</h1> 标题一级
3
<h2>...</h2> 标题二级
4
<h3>...</h3> 标题三级
5
<h4>...</h4> 标题四级
6
<h5>...</h5> 标题五级
7
<h6>...</h6> 标题六级
8
<hr> 水平分割线
9
<p>...</p> 段落
10
<ul>...</ul> 无序列表
11
<ol>...</ol> 有序列表
12
<dl>...</dl> 定义列表
13
<table>...</table> 表格
14
<form>...</form> 表单
15
<div>...</div> 块
16
17
行内元素:
18
<span>...</span>
19
<a>...</a> 链接
20
<br> 换行
21
<b>...</b> 加粗
22
<img> 图片
23
<i>...</i> 斜体
24
<del>...</del> 删除线
25
<u>...</u> 下划线
26
<input>...</input> 文本框
27
<textarea>...</textarea> 多行文本
28
<select>...</select> 下拉列表