前端基础之HTML(1)HTMLhtml的概念及特点html的结构head常用标签body常用标签
今天开始我们将要用python来写前端,那么,前端是什么?
前端可以理解为各种应用软件的界面,也可以理解为一个网页的界面,我们最常用来表示的也就是一个网页,或者说一个web端.那么用python来实现前端的设计,我们还需要学习最重要的三个东西,他们不能说是具体的编程语言,但是是做前端所必需的东西.就是HTML,CSS以及JS.
HTML:相当于一个网页的骨架,是最核心的部分,所有的内容都存在于这个地方,用以调整整个页面的布局.
CSS:相当于一件衣服,可以给网页穿上,也就是可以极大地改善网页的可读性,以及界面,让其显示更加亲民,或者说给人印象更深刻.
JSL:相当于一个马达,负责让网页动起来,尽管很多网页是静态的网页,但是动态网页明显回头率更高,也会让人更有访问的欲望
今天我们先来介绍一下HTML的部分知识.
首先,我们要知道html并不是一种编程语言,其全名叫做超文本标记语言,标记语言我们可以理解,就是用来做标记的语言.超文本这三个字,可以有两种理解,一种就是超级,这种文本比一般的文本要更高级,有更多的功能,和作用,另一种理解就是超链接,就是那种我们点击一下就能跳转到另一个界面的超链接.
总的来说,HTML就是负责创建网页的标记语言.
另外,html的主要特点有三个:
多个叠加,就是多个空格,也会显示出来多个空格.
xxxxxxxxxx10 1
<!DOCTYPE html> // 要用什么版本的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>
xxxxxxxxxx18 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的常用标签就比较多,或者说,非常多.这也是我们日后用的最多的东西.
xxxxxxxxxx1 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 .class26
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
-->
