众所周知: 不懂前端的后端不是好程序员


安装VScode

官网:https://code.visualstudio.com/
安装最新稳定版就行

基本结构

image-20211122182458529

  • 第一行是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
  • ...标签是开发人员在告诉浏览器,整个网页是从这里开始的,到结束,也就是html文档的开始和结束标签。
  • ...标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
  • ...标签是编写网页上显示的内容。

常用标签

标题标签

1
2
3
<h1>这是1个标题。</h1>
<h2>这是2个标题。</h2>
<h3>这是3个标题。</h3>

分隔标签

1
<hr>

段落标签

1
2
<p>这是一个段落 </p>
<p>这是另一个段落</p>

折行标签

1
<p>这个<br>段落<br>演示了分行的效果</p>

文字相关标签

1
2
3
4
5
6
7
8
9
10
11
    <!--
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
-->

链接标签

1
2
3
4
5
6
<a href="https://www.baidu.com" target="_blank">我是链接</a>
<p>图片链接:
<a href="https://www.baidu.com">
<img border="0" src="https://ypy.pandolar.top/PicGo/202111021700626.jpg" alt="HTML 教程" width="32"
height="32"></a>
</p>

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table border="1">
<tr>
<th>姓名</th>
<th>绰号</th>
</tr>
<tr>
<td>孙悟空</td>
<td>呆子</td>
</tr>
<tr>
<td>猪八戒</td>
<td>猪</td>
</tr>
</table>
<tr>标签:表示表格中的一行
<td>标签:表示表格中的列
<th>标签:表示表格中的表头

列表标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ol>
<li>
我是第一名
</li>
<li>
我是第二名
</li>
<li>
我是第三名
</li>
</ol>
<ul>
<li>
我是第四名
</li>
<li>
我是第五名
</li>
<li>
我是第六名
</li>
</ul>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<form name="biaodan" action="https://x.pandolar.top/" method="GET">
<p>
<label for='username'>姓名:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label>密码:</label>
<input type="text" name="password" id="password">
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label for=爱好></label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swming" /> 游泳
</p>
<p>
<label>照片</label>
<input type="file" name="" id="pic">
</p>
<p>
<label>个人描述</label>
<textarea name="about" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label>籍贯</label>
<select name="site" id="">
<option value="0">beijing</option>
<option value="1">shanghai</option>
<option value="2">hangzhou</option>
</select>
</p>
<p>
<input type="submit" name="submit" id="">
</p>
</form>

CSS基础

CSS的作用

CSS用来干嘛的?如图所示:

三种CSS引入方式

行内式

直接在div标签内进行css引入,比较少用

1
2
3
<div style="width: 100px;height: 100px;background-color: bisque;">
hello css
</div>

内嵌式

在head标签内加入style标签,在style标签中编写css代码。

1
2
3
4
5
6
7
8
9
<head>
...
<style type="text/css">
h3{
color: blue;
}
</style>
...
</head>

外链式

通过载入.css文件的方式引入外部的CSS文件

1
2
3
4
5
<head>
...
<link rel="stylesheet" href="css/main.css" type="text/css">
...
</head>
  • 行内式几乎不用
  • 内嵌式在学习css样式的阶段使用
  • 外链式在公司开发的阶段使用,可以对 css 样式和 html 页面分别进行开发。

CSS选择器

标签选择器

以标签开头,作用范围广,一般用在通用的样式里面

1
2
3
4
5
<style type="text/css">
h3{
color: blue;
}
</style>

类选择器

使用最多的选择器,可以一对多、多对一、多对多,多个类选择器需要使用空格分割

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
...
<style type="text/css">
.brown{color: brown;}
.big{font-size: 50px;}
.box{width: 400px; height: 500px; background: blue;}
</style>
...
</head>
<body>
<div class="brown">我是一个div</div>
<h3 class="big brown">我是一個H3標題</h3>
<p class="box big">我是一個P標簽</p>
</body>
</html>

ID选择器

给一个CSS样式标记一个id,不能重复,而且id只能用于页面上的一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。