众所周知: 不懂前端的后端不是好程序员
安装VScode
官网：https://code.visualstudio.com/
安装最新稳定版就行
基本结构
- 第一行是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
- ...标签是开发人员在告诉浏览器，整个网页是从这里开始的，到结束,也就是html文档的开始和结束标签。
- ...标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
- ...标签是编写网页上显示的内容。
常用标签
标题标签
1
2
3
| <h1>这是1个标题。</h1>
<h2>这是2个标题。</h2>
<h3>这是3个标题。</h3>
|
分隔标签
段落标签
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作为选择器。
