HTML5大前端学习过程第一周（Day03）
程序员文章站
2022-06-10 14:51:49
...
2020年2月13日
今天是写博客的第二天，也是学习前端的第三天，毕业设计的课题题目又被打了回来，很难受，很累，不过也算是过得充实吧！毕竟是大四以前的债，唉，欠的都要还的。
一. 本节课学习目标。
- 掌握HTML标签分类。
- 了解HTML转义字符。
- 掌握表格标签的功能以及用法。 ★重点
- 掌握CSS的使用以及多种CSS选择器的用法。
- 了解选择器的优先级。
- 掌握div和span标签的用途。 ★重点
二. HTML标签分类。
- 根据标签个数分类。
单标签：只有一个标签。 <br>, <hr>, <img>, <meta>, 实现一个特定的功能。
双标签：既有开始标签，也有结束标签。 Html,head,Body,title,h1~h6，p,a,ul,li,ol,strong,em。 - 根据标签特性分类（网页效果）。
2.1 行属性标签。
行属性标签可以和其他行属性标签放置在同一行。
例如：a，img，em，strong。
2.2 块属性标签。
块属性标签都是独占一行的。
例如：h1~h6，p，ul，li，ol。
三. 转义字符。
- 特殊字符的输入。
- 空格。浏览器在解析网页时，会将敲的空格键全部忽略掉，要想显示空格，必须使用
转义字符来进行代替。 - <>。用<>括起来的都是标签，标签都会被浏览器解析掉，不会在网页中显示，如果要想显示需要使用转义字符。 < =
<> =>
转义字符代码块：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转义字符</title>
</head>
<body>
<p>如何启动记事本：</p>
<p>
开始<br>
所有程序<br>
附件<br>
记事本
</p>
<!-- 版权 -->
©
<!-- 人民币 -->
¥
<!-- 摄氏度 -->
°
<!-- 网页中显示<> -->
<p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>
<ul>
<li>HTML 标签是由尖括号包围的关键词，比如 <html></li>
<li>HTML 标签通常是成对出现的，比如 <b> 和 </b></li>
<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
<li>开始和结束标签也被称为开放标签和闭合标签</li>
</ul>
</body>
</html>
四. 表格基础。
- 表格的功能。
1.1 构建一个基本表格。
1.2 表格添加行。
1.3 表格每一行添加单元格。
1.4 表格添加列标题。
1.5 表格添加表格标题。
1.6 表格合并多行。
1.7 表格合并多列。 - 表格的常用标签。
Table: 标识表格，代表外层的表格大容器。 表格：是由行和列组成。
Tr: 标识行，每一行都要用一个tr标签。
Td: 标识普通单元格，每一个单元格用来填写一个数据。
Th: 标识列标题单元格，自带加粗，实现水平居中。
Caption：表格的标题，表头。 - 表格的常用属性。
Border：边框。 Border=”边框的宽度”， 单位px。
Cellspacing：设置单元格与单元格之间的间隙。 单位：px。 不想要间隙，就给0。
Cellpadding: 设置单元格中的内容与单元格边框之间的距离。 单位：px。
以下属性作为了解：
Align：让内容水平对齐。 值：left左对齐，right右对齐，center居中对齐。
Valign：让内容垂直对齐。 值：top顶部对齐，bottom底部对齐，middle居中对齐，baseline基线对齐。
Width：设置元素的宽度。
Height: 设置元素的高度。
表格代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--
需求：
1.表格：用来存储学生信息。
2.存储3个学生的信息，每个学生分别存储姓名，性别，年龄，成绩。
问题：我们需要创建一个几行几列的表格？
-->
<!-- 表格 -->
<table border="1px" cellspacing="0px" cellpadding="20px">
<caption>学生信息表</caption>
<!-- 行： tr -->
<!-- 1 -->
<tr>
<!-- 单元格： td -->
<!-- <td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>成绩</td> -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<!-- 2 -->
<tr>
<td>Frank</td>
<td>男</td>
<td>18</td>
<td>100</td>
</tr>
<!-- 3 -->
<tr>
<td>Rose</td>
<td>女</td>
<td>16</td>
<td>99</td>
</tr>
<!-- 4 -->
<tr>
<td>Jack</td>
<td>未知</td>
<td>38</td>
<td>59.9</td>
</tr>
</table>
</body>
</html>
单元格合并：
1.colspan:合并同行但是不同列的单元格。 Colspan=”合并的数量” 。
2.rowspan：合并同列但是不同行的单元格。 Rowspan=”合并的数量”。
注意点：
a. 合并的属性一定是添加给要合并的第一个单元格。
b. 单元格合并完成之后，多余的单元格一定要删除掉！！！。
合并代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单元格合并</title>
</head>
<body>
<!-- 生成6行4列的表格 table>(tr>td*4)*6-->
<table border="1" cellspacing="0" width="800px" align="center">
<!-- 1 -->
<tr align="center">
<td colspan="4">课程时间表</td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<!-- 2 -->
<tr align="center">
<td>时间安排</td>
<td>授课安排</td>
<td>周一~周五</td>
<td>周六日</td>
</tr>
<!-- 3 -->
<tr align="center">
<td rowspan="4">上午</td>
<td>进直播时间</td>
<td>9:10</td>
<td rowspan="4">自习</td>
</tr>
<!-- 4 -->
<tr align="center">
<!-- <td></td> -->
<td>第一节课</td>
<td>9:30~10:30</td>
<!-- <td></td> -->
</tr>
<!-- 5 -->
<tr align="center">
<!-- <td></td> -->
<td>间休</td>
<td>10:30~10:50</td>
<!-- <td></td> -->
</tr>
<!-- 6 -->
<tr align="center">
<!-- <td></td> -->
<td>第二节课</td>
<td>10:50~11:50</td>
<!-- <td></td> -->
</tr>
</table>
</body>
</html>
- 快速生成表格结构。
table>(tr>td4)4
解释：tr>td4: 这是一行的模板。 (tr>td4)4 按照这个模板生成4行。
知识点： > 代表下一级，父子关系。
table>(tr>th4)+(tr>td4)3
解释：
tr>th4: 这是第一行的模板， (tr>th4)1
tr>td4: 这是其他三行的模板， (tr>td*4)*3按照这个模板生成3遍。
知识点： + 代表兄弟关系。
五. CSS简介。
- CSS介绍。
CSS（Cascading Style Sheet）：层叠式样式表。
CSS作用：给HTML标签添加样式，让网页变得美观。 - CSS写在什么位置。
2.1 找到head标签的title标签下，添加上一对style标签。
2.2 CSS代码就写在style标签中。 - CSS注释。
快捷键： ctrl + /
HTML注释： <!—注释内容 -->
CSS注释： /* 注释内容 */
六. CSS选择器以及优先级。
CSS是对HTML标签做样式修改，必须要确定修改哪些标签。
CSS需要配合选择器来使用，选择器的目的就是为了选择要进行样式修改的标签。
-
id选择器。
一对一修改。
a.需要给要进行样式设置的标签，添加id属性，设置一个唯一值。
b.通过id选择器访问到id为jack的元素，进行样式修改。
格式： #id的名字 {
css样式
} -
class选择器。
一对多修改。 (类选择器)
a.需要给要进行样式设置的标签，添加class属性，设置一个统一值。
b.通过class选择器访问到class为lo的元素，进行样式修改。
格式： .class的名字 {
css样式
} -
元素选择器。
作用：能够访问到同名的所有的元素。 比如：所有的p元素，所有的a元素。
格式： 元素名称 { css样式 }CSS的属性：CSS属性的格式 属性名：属性值;
注意：编程时，使用的所有的符号，一定要在英文状态下，不识别中文标点符号的。 -
背景颜色： background-color: yellow;
-
文字颜色： color:red;
-
文字大小： font-size: 50px; 单位px，默认16px。
-
文字水平对齐： text-align: center; left左对齐，right右对齐，center居中对齐。
-
元素宽度： width：100px； 单位：px。
-
元素高度：height：40px；单位：px。
css代码块：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
/* css是写在这个位置的，写到style标签中间。 */
p {
/* 要对p元素修改的css样式 */
background-color: yellow;
}
#jack {
color: red;
}
.lo {
/* 文字大小 */
font-size: 50px;
}
</style>
</head>
<body>
<!-- body中经常写html结构，html标签代码。 -->
<p id="jack">马云说：我对钱不感兴趣，但是我对花钱还是感兴趣的。</p>
<p class="lo">王健林：定个小目标，挣他一个亿。</p>
<a href="" class="lo">刘强东：我脸盲，我看不出谁漂亮。</a>
<p class="lo">肖战长的好像你现男友。</p>
<p>李现是你男神吗？</p>
<!--
需求：
1.将所有的p元素，背景颜色改成黄色。
2.将第一个p元素，文字颜色改成红色。
3.将第二个p元素和第三个p元素以及a标签，文字大小改为50px。
-->
</body>
</html>