前端入门基础之 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>:加粗标签

提示

  1. 标签基本都具备一定的语义,爬虫引擎会根据标签语义来获取文本信息
  2. <em><del><ins><strong> 这些标签,除了具备显示效果之外,更强调语义

图片标签

插入图片和设置背景图的区别

插入图片是使用 <img> 标签,标签在网页中是占位置的,而设置背景图是靠属性 background。由于属性是不占位置的,可以简单认为背景图就是一个丰富多彩的背景颜色,背景图的尺寸与标签的尺寸无关。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图</title>
</head>
<body style="background: url(https://dss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/29.jpg) no-repeat; background-size: 100% 100%; background-attachment: fixed;">
</body>
</html>

图片不存在时显示默认图片

当图片加载失败时,可以通过 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点链接</title>
</head>
<body>
<p>段落</p>
<p>段落</p>
<font color="blue" id="level1">第一层</font>
<p>段落</p>
<p>段落</p>
<font color="blue" id="level2">第二层</font>
<p>段落</p>
<p>段落</p>
<a href="#level1">跳转第一层</a>
</body>
</html>

列表

无序列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<h3>无序列表</h3>
<ul>
<li>商品一</li>
<li>商品二</li>
<li>商品二</li>
</ul>
</body>
</html>

有序列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<h3>有序列表</h3>
<ol>
<li>商品一</li>
<li>商品二</li>
<li>商品二</li>
</ol>
</body>
</html>

自定义列表

自定义列表是被一组 dl 管理的列表,dt 是主题,dd 是列表项。其中 dl 只能包含 dtdd,而 dtdd 可以包含其他标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<h3>自定义列表</h3>
<dl>
<dt>亚洲</dt>
<dd>中国</dd>
<dd>日本</dd>
<dd>韩国</dd>
</dl>
</body>
</html>

表格

表格基础

  • 标签

    • 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
<!DOCTYPE html>
<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
<!DOCTYPE html>
<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="提交"></button>
<input type="reset" value="重置"></button>
</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 知识点。">