欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5大前端学习过程第一周(Day03)

程序员文章站 2022-06-10 14:51:49
...

2020年2月13日
今天是写博客的第二天,也是学习前端的第三天,毕业设计的课题题目又被打了回来,很难受,很累,不过也算是过得充实吧!毕竟是大四以前的债,唉,欠的都要还的。
一. 本节课学习目标。

  1. 掌握HTML标签分类。
  2. 了解HTML转义字符。
  3. 掌握表格标签的功能以及用法。 ★重点
  4. 掌握CSS的使用以及多种CSS选择器的用法。
  5. 了解选择器的优先级。
  6. 掌握div和span标签的用途。 ★重点

二. HTML标签分类。

  1. 根据标签个数分类。
    单标签:只有一个标签。 <br>, <hr>, <img>, <meta>, 实现一个特定的功能。
    双标签:既有开始标签,也有结束标签。 Html,head,Body,title,h1~h6,p,a,ul,li,ol,strong,em。
  2. 根据标签特性分类(网页效果)。
    2.1 行属性标签。
    行属性标签可以和其他行属性标签放置在同一行。
    例如:a,img,em,strong。
    2.2 块属性标签。
    块属性标签都是独占一行的。
    例如:h1~h6,p,ul,li,ol。

三. 转义字符。

  1. 特殊字符的输入。
    HTML5大前端学习过程第一周(Day03)
  2. 空格。浏览器在解析网页时,会将敲的空格键全部忽略掉,要想显示空格,必须使用&nbsp;转义字符来进行代替。
  3. <>。用<>括起来的都是标签,标签都会被浏览器解析掉,不会在网页中显示,如果要想显示需要使用转义字符。 < = &lt; > = &gt;
    转义字符代码块:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转义字符</title>
	</head>
	<body>
		<p>如何启动记事本:</p>
		
		<p>
			开始<br>
			&nbsp;&nbsp;所有程序<br>
			&nbsp;&nbsp;&nbsp;&nbsp;附件<br>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;记事本
		</p>
		
		<!-- 版权 -->
		&copy;
		<!-- 人民币 -->
		&yen;
		<!-- 摄氏度 -->
		&deg;
		
		<!-- 网页中显示<> -->
		<p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)</p>
		<ul>
			<li>HTML 标签是由尖括号包围的关键词,比如 &lt;html&gt;</li>
			<li>HTML 标签通常是成对出现的,比如 &lt;b&gt;&lt;/b&gt;</li>
			<li>标签对中的第一个标签是开始标签,第二个标签是结束标签</li>
			<li>开始和结束标签也被称为开放标签和闭合标签</li>
		</ul>
	</body>
</html>

四. 表格基础。

  1. 表格的功能。
    1.1 构建一个基本表格。
    1.2 表格添加行。
    1.3 表格每一行添加单元格。
    1.4 表格添加列标题。
    1.5 表格添加表格标题。
    1.6 表格合并多行。
    1.7 表格合并多列。
  2. 表格的常用标签。
    Table: 标识表格,代表外层的表格大容器。 表格:是由行和列组成。
    Tr: 标识行,每一行都要用一个tr标签。
    Td: 标识普通单元格,每一个单元格用来填写一个数据。
    Th: 标识列标题单元格,自带加粗,实现水平居中。
    Caption:表格的标题,表头。
  3. 表格的常用属性。
    Border:边框。 Border=”边框的宽度”, 单位px。
    Cellspacing:设置单元格与单元格之间的间隙。 单位:px。 不想要间隙,就给0。
    Cellpadding: 设置单元格中的内容与单元格边框之间的距离。 单位:px。
    HTML5大前端学习过程第一周(Day03)
    以下属性作为了解:
    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>
		<!-- 生成64列的表格 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>

  1. 快速生成表格结构。
    table>(tr>td4)4
    解释:tr>td
    4: 这是一行的模板。 (tr>td
    4)4 按照这个模板生成4行。
    知识点: > 代表下一级,父子关系。
    table>(tr>th
    4)+(tr>td4)3
    解释:
    tr>th
    4: 这是第一行的模板, (tr>th
    4)1
    tr>td
    4: 这是其他三行的模板, (tr>td*4)*3按照这个模板生成3遍。
    知识点: + 代表兄弟关系。

五. CSS简介。

  1. CSS介绍。
    CSS(Cascading Style Sheet):层叠式样式表。
    CSS作用:给HTML标签添加样式,让网页变得美观。
  2. CSS写在什么位置。
    2.1 找到head标签的title标签下,添加上一对style标签。
    2.2 CSS代码就写在style标签中。
  3. CSS注释。
    快捷键: ctrl + /
    HTML注释: <!—注释内容 -->
    CSS注释: /* 注释内容 */

六. CSS选择器以及优先级。
CSS是对HTML标签做样式修改,必须要确定修改哪些标签。
CSS需要配合选择器来使用,选择器的目的就是为了选择要进行样式修改的标签。

  1. id选择器。
    一对一修改。
    a.需要给要进行样式设置的标签,添加id属性,设置一个唯一值。
    b.通过id选择器访问到id为jack的元素,进行样式修改。
    格式: #id的名字 {
    css样式
    }

  2. class选择器。
    一对多修改。 (类选择器)
    a.需要给要进行样式设置的标签,添加class属性,设置一个统一值。
    b.通过class选择器访问到class为lo的元素,进行样式修改。
    格式: .class的名字 {
    css样式
    }

  3. 元素选择器。
    作用:能够访问到同名的所有的元素。 比如:所有的p元素,所有的a元素。
    格式: 元素名称 { css样式 }

    CSS的属性:CSS属性的格式 属性名:属性值;
    注意:编程时,使用的所有的符号,一定要在英文状态下,不识别中文标点符号的。

  4. 背景颜色: background-color: yellow;

  5. 文字颜色: color:red;

  6. 文字大小: font-size: 50px; 单位px,默认16px。

  7. 文字水平对齐: text-align: center; left左对齐,right右对齐,center居中对齐。

  8. 元素宽度: width:100px; 单位:px。

  9. 元素高度: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>