前端基础之HTML(1)
今天开始我们将要用python来写前端,那么,前端是什么?
前端可以理解为各种应用软件的界面,也可以理解为一个网页的界面,我们最常用来表示的也就是一个网页,或者说一个web端.那么用python来实现前端的设计,我们还需要学习最重要的三个东西,他们不能说是具体的编程语言,但是是做前端所必需的东西.就是HTML,CSS以及JS.
HTML:相当于一个网页的骨架,是最核心的部分,所有的内容都存在于这个地方,用以调整整个页面的布局.
CSS:相当于一件衣服,可以给网页穿上,也就是可以极大地改善网页的可读性,以及界面,让其显示更加亲民,或者说给人印象更深刻.
JSL:相当于一个马达,负责让网页动起来,尽管很多网页是静态的网页,但是动态网页明显回头率更高,也会让人更有访问的欲望
今天我们先来介绍一下HTML的部分知识.
HTML
html的概念及特点
首先,我们要知道html并不是一种编程语言,其全名叫做超文本标记语言,标记语言我们可以理解,就是用来做标记的语言.超文本这三个字,可以有两种理解,一种就是超级,这种文本比一般的文本要更高级,有更多的功能,和作用,另一种理解就是超链接,就是那种我们点击一下就能跳转到另一个界面的超链接.
总的来说,HTML就是负责创建网页的标记语言.
另外,html的主要特点有三个:
扫描二维码关注公众号，回复：
7446151 查看本文章
- html对换行和空格不敏感,要用到的时候需要特别的格式去定义才可以
- html的空白是自动折叠的,就是说多个空格显示出来也只会是一个,除非用
多个叠加,就是多个空格,也会显示出来多个空格. - body主体里面的内容如果超长的话,会在网页上自动换行,不会一行一直显示下去.
html的结构
xxxxxxxxxx
10
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常用标签
xxxxxxxxxx
18
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的常用标签就比较多,或者说,非常多.这也是我们日后用的最多的东西.
xxxxxxxxxx
1
13
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
width:像素,百分比(最好通过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
-->