前端入门基础之 HTML 与 CSS 之一
大纲
- 前端入门基础之 HTML 与 CSS 之一
- 前端入门基础之 HTML 与 CSS 之二
- 前端入门基础之 HTML 与 CSS 之三
- 前端入门基础之 HTML 与 CSS 之四
- 前端入门基础之 HTML 与 CSS 之五
前言
Web 标准
Web 标准是由 W3C（万维网联盟组织）组织制定，包括以下三部分：
结构: HTML表现: CSS行为: JavaScript
浏览器内核
IE: trident 内核Firefox: gecko 内核Opear: webkit 内核Safari: webkit 内核Chrome: blink 内核，属于 webkit 内核的一个分支
HTML 发展史
提示
HTML5 是一个新的 HTML 版本，新增了一些标签和功能，适用于高级浏览器。H5 开发是一个泛指，指的就是移动端页面开发的意思。
HTML 基础
HTML 标签
标签的类型
单标签：自结束标签，例如:<meta>双标签：有开始有闭合的标签，例如：<html></html>
标签的关系
并列关系：同级关系，是兄弟之间的关系嵌套关系：包含关系，是祖先和后代之间的关系
基本标签
<!DOCTYPE html>：文档类型的声明，让浏览器按照相应版本的 HTML 进行解析<html>：网页的根标签，所有其它的标签都被包含在里面<head>：头部标签，关于网页的一些配置信息<meta charset="utf-8">：字符集设置或者叫编码设置，各种字符集编码的说明可看这里
常用标签
<p>：段落标签<br>：换行标签<hr>：水平线标签<h1> - <h6>：标题标签<i>、<em>：倾斜标签<s>、<del>：删除标签<u>、<ins>：下划线标签<b>、<strong>：加粗标签
提示
- 标签基本都具备一定的语义，爬虫引擎会根据标签语义来获取文本信息
<em>、<del>、<ins>、<strong>这些标签，除了具备显示效果之外，更强调语义
图片标签
插入图片和设置背景图的区别
插入图片是使用 <img> 标签，标签在网页中是占位置的，而设置背景图是靠属性 background。由于属性是不占位置的，可以简单认为背景图就是一个丰富多彩的背景颜色，背景图的尺寸与标签的尺寸无关。
1 |
|
图片不存在时显示默认图片
当图片加载失败时，可以通过 onerror 属性指定默认显示的图片，使用示例如下：
1 | <img src="https://www.example.cn/img/head.jpg" onerror="javascript:this.src='https://qiniu.example.cn/gif/loading.gif'" > |
或者指定默认的 Base64 图片：
1 | <img src="https://www.example.cn/img/head.jpg" onerror="javascript:this.src='data:image/gif;base64,R0lGODlhDAEMAfcBMQAAAADXXXXXXXXXXXXXXXXXXXXX'"> |
路径
绝对路径
提示
路径是指网页和其他文件的位置关系，出于安全考虑，浏览器不允许直接通过绝对路径访问本地磁盘中的文件。
相对路径
同级相对路径
1 | <img src="phone.jpg"> |
下级相对路径
链接
超链接
空链接
当没有想好链接跳转到哪个网页时，则可以设置成空链接。空链接写一个 # 时，点击后会返回顶部，通常会写两个 ##。
1 | <a href="##"> |
锚点链接
在网页内部进行跳转，需要给目标链接标签设置 id 属性。可以通过 <a> 标签中的 href 属性，使用 #id 来关联 id 属性的值。
1 |
|
列表
无序列表
1 |
|
有序列表
1 |
|
自定义列表
自定义列表是被一组 dl 管理的列表，dt 是主题，dd 是列表项。其中 dl 只能包含 dt 和 dd，而 dt 和 dd 可以包含其他标签。
1 |
|
表格
表格基础
标签
table：表格标签tr：行标签th：表头标签，内容水平居中且加粗的td：单元格标签，列默认是以当前列中最宽的为基准caption：表格标题
属性
width：宽度height：高度border：边框宽度cellspacing：单元格与单元格之间的间距align：文本的对齐方式：left / 居左、center / 居中、right / 居右colspan: 跨列合并单元格rowspan: 跨行合并单元格
表格实战
通过 table 标签实现课程表（如下所示）：
★展开案例代码★
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<meta charset="utf-8">
<title>课程表</title>
</head>
<body>
<table border="1px" width="800px" height="300px" cellspacing="0">
<caption>
<h2>课程表</h2>
</caption>
<tr align="center" bgcolor="red">
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr align="center" bgcolor="#00BFFF">
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr align="center">
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center">
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
<tr align="center">
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
<tr align="center">
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center">
<td>语文</td>
<td>数学</td>
<td>体育</td>
<td>生理</td>
<td>情感</td>
<td>电竞</td>
</tr>
</table>
</body>
</html>
表单
表单基础
![]()
![]()
表单实战
★展开案例代码★
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="#" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" />
<br><br>
<label for="password">密码：</label>
<input type="password" id="password" />
<br><br>
性别：
<input type="radio" name="gender" id="man" checked /><label for="man">男</label>
<input type="radio" name="gender" id="female" /><label for="female">女</label>
<br><br>
学历：
<input type="radio" name="edu" id="edu-level-1" /><label for="edu-level-1">中职</label>
<input type="radio" name="edu" id="edu-level-2" /><label for="edu-level-2">大专</label>
<input type="radio" name="edu" id="edu-level-3" /><label for="edu-level-3">本科</label>
<input type="radio" name="edu" id="edu-level-4" /><label for="edu-level-4">硕士</label>
<input type="radio" name="edu" id="edu-level-5" /><label for="edu-level-5">博士</label>
<br><br>
国籍：
<select>
<option value="0">泰国</option>
<option value="1" selected>中国</option>
<option value="2">日本</option>
<option value="3">韩国</option>
<option value="4">印度</option>
</select>
<br><br>
工作年限：
<select>
<optgroup label="初级">
<option value="1">1 年</option>
<option value="2">2 年</option>
<option value="3">3 年</option>
</optgroup>
<optgroup label="中级">
<option value="4">4 年</option>
<option value="5">5 年</option>
<option value="6">6 年</option>
</optgroup>
<optgroup label="高级">
<option value="7">7 年</option>
<option value="8">8 年</option>
<option value="9">9 年</option>
<option value="10">10 年</option>
</optgroup>
</select>
<br><br>
兴趣爱好：
<input type="checkbox" value="0" id="read"><label for="read">阅读</label>
<input type="checkbox" value="2" id="sport"><label for="sport">运动</label>
<input type="checkbox" value="3" id="music"><label for="music">音乐</label>
<br><br>
<label for="evaluate">自我评价：</label>
<br>
<textarea id="evaluate" cols="50" rows="6"></textarea>
<br><br>
<input type="submit" value="提交"></input>
<input type="reset" value="重置"></input>
</form>
</body>
</html>
特殊字符
![]()
代码注释
1
2
<!-- 这是HTML代码的注释 -->
<img src="phone.jpg" width="800px" height="1000px">
搜索引擎优化
利用 <meta> 标签可以进行搜索引擎优化，示例 HTML 代码如下：
1
2
<meta name="keywords" content="前端开发">
<meta name="description" content="前端入门基础的 HTML 与 CSS 知识点。">
