HTML基础（2）-CSDN博客

本文链接：https://blog.csdn.net/weixin_43862765/article/details/95937114

1）认识表格：
表格table（会使用），存在即是合理的，表格现在还是一种较为常用的一种标签，常见处理、显示表格式数据
① 表格中提供了HTML中定义表格式数据的方法
② 表格中由行中的单元格组成
③ 表格中没有列元素，列的个数取决于行的单元格个数
④ 表格不要纠结与外观，那是css的作用
表格的学习要求：能手写表格结构，并且能合并单元格
创建表格：在HTML网页中，要想创建表格，就需要使用表格相应的标签。创建表格基本的语法格式如下：

<table>
	<tr>
	<td>单元格内的文字</td>
	…
	</tr>
</table>

其中table是用来定义一个表格的，tr用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对tr就有几行标签（td和th也必须在嵌套在tr标签中）。
练习的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二天课程学习—创建表格元素1</title>
	</head>
	<body>
		<table width="500px" border="2px">
			<tr>
				<th align="center">姓名</th>
				<th align="center">性别</th>
				<th align="center">电话</th>
				<th align="center">是否单身</th>
			</tr>
			<tr>
				<td align="center">王宝龙</td>
				<td align="center">男</td>
				<td align="center">110</td>
				<td align="center">否</td>
			</tr>
			<tr>
				<td align="center">崔鹏翔</td>
				<td align="center">男</td>
				<td align="center">119</td>
				<td align="center">是</td>
			</tr>
			<tr>
				<td align="center">刘崇煦</td>
				<td align="center">不男不女</td>
				<td align="center">120</td>
				<td align="center">万年单身</td>
			</tr>
			<tr>
				<td align="center">周培熠</td>
				<td align="center">男</td>
				<td align="center">520</td>
				<td align="center">凭实力目前单身</td>
			</tr>
		</table>
	</body>
</html>

上面的代码可以更简便一点（直接给tr标签里添加align = “center”）
截图效果是：
在这里插入图片描述
几个属性：

<table  border = “1” align = “center” cellspacing = “10” cellpadding = “10”>

Cellspacing表示单元格和单元格之间的距离
Cellpading表示单元格内容距离单元格边框的距离
(三参为0：border、cellspacing、cellpadding)
在这里插入图片描述
表格标题和表头单元格：
表头标签：表头单元格一半位于表格的第一行或者是第一列，其文本加粗居中，设置表头标签替代相应的单元格标签就可以了

表格结构：

表格标题：caption（只存在表格里面）

<table>
		<caption>我是表格标题</caption>
	</table>

(caption标签必须紧跟table标签之后，您只能对每一个表格定义一个标题，通常这个标题会被居中于表格之上)

合并单元格：（跨行合并：rowspan 跨列合并 colspan）
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除，例如：3个td合并成一个，就会多余两个，需要删除）
公式：删除的个数=合并的个数-1
合并的顺序：先上先左

4）今日小说排行：
在这里插入图片描述
要做出这样的表格：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二天今日小说排行练习</title>
		<base target="_blank" />
	</head>
	<body>
		<table align="center" border="2px" cellspacing="0px" cellpadding="0px">
			<caption>今日小说排行版</caption>
			<tr align="center">
				<th>排名</th>
				<th>关键词</th>
				<th>趋势</th>
				<th>今日搜索</th>
				<th>最近七日</th>
				<th>相关链接</th>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>鬼吹灯</td>
				<td>↓</td>
				<td>345</td>
				<td>123</td>
				<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cO80-ybFCoB8H944ue7vSwF8tNVuEy7QSjTGThVaG5Nc."/>贴吧</a>
					<a href="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/90/zi/on/iw/90.0/ih/67.5?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F3403%2F20160718220919-1980820896.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v69083.htm?fromTitle=%E9%AC%BC%E5%90%B9%E7%81%AF"/>图片</a>
					<a href="https://www.sogou.com/link?url=DOb0bgH2eKjRiy6S-EyBciCDFRTZxEJgMTznynMASKNVy6JvJfJZBvCJC-1zdrX6txDnxrDoWzVT-MgowryYvIOJ16amVS5LA4mtMjbBg0vVabgTa8qmDl0iaKTkyWbh">百度百科</a></td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>盗墓笔记</td>
				<td>↓</td>
				<td>124</td>
				<td>675672</td>
				<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cS2QE3vdfxrFD8eQbOOxUa-Pjf5RWoLIHxN7Cm3n0P6E."/>贴吧</a>
					<a href="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/135/zi/on/iw/90.0/ih/101.25?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F17792%2Fcut-20180821143239-1691699826_jpg_346_433_24500.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v156838.htm?fromTitle=%E3%80%8A%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0%E3%80%8B"/>图片</a>
					<a href="https://baike.baidu.com/item/%E5%90%B4%E9%82%AA/5577022">百度百科</a></td>
			</tr>
			<tr align="center">
				<td>3</td>
				<td>西游记</td>
				<td>↑</td>
				<td>7654</td>
				<td>123</td>
				<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cFVvxthplykjnKFW_7sziyxaTF6Nre3fB"/>贴吧</a>
					<a href="https://img01.sogoucdn.com/v2/thumb/resize/w/120/h/135/zi/on/iw/90.0/ih/101.25?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F754%2F20170916103925-56299110_png_438_600_389918.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v81050709.htm?fromTitle=%E8%A5%BF%E6%B8%B8%E8%AE%B0"/>图片</a>
					<a href="https://www.sogou.com/link?url=DSOYnZeCC_rZXVZCtvPXjmRFzFBIhMTsfXXJy1_j20oyrvlWdHJtSq3mlRzfPLR2">百度百科</a></td>
			</tr>
			<tr align="center">
				<td>4</td>
				<td>东游记</td>
				<td>↑</td>
				<td>23</td>
				<td>75645</td>
				<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cdyGov71-aBt701bh8v6f3Xv0AMyDAyon9FYHLs1EHfI."/>贴吧</a>
					<a href="https://img02.sogoucdn.com/net/a/04/link?&url=https%3A%2F%2Fgss3.bdstatic.com%2F84oSdTum2Q5BphGlnYG%2Ftimg%3Fwapp%26quality%3D80%26size%3Db150_150%26subsize%3D20480%26cut_x%3D0%26cut_w%3D0%26cut_y%3D0%26cut_h%3D0%26sec%3D1369815402%26srctrace%26di%3D0930992c20caa1559236e2b005c8c78f%26wh_rate%3Dnull%26src%3Dhttp%253A%252F%252Fimgsrc.baidu.com%252Fforum%252Fpic%252Fitem%252F4bed2e738bd4b31c908e5bf886d6277f9f2ff8c7.jpg&appid=100520103&referer=http://tieba.baidu.com/f?kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0"/>图片</a>
					<a href="https://www.sogou.com/link?url=DOb0bgH2eKjWdIrIu0k581wbbYQ3LWL42sYbOXuUgml701bh8v6f3Xv0AMyDAyonSytOou8Q6qzr3fg2LzbHEq3mlRzfPLR2">百度百科</a></td>
			</tr>
			<tr align="center">
				<td>5</td>
				<td>甄嬛传</td>
				<td>↓</td>
				<td>121</td>
				<td>7676</td>
				<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_c0DyN8llOjAC-MRfJK9m2DGsIEVBqxC7LsEqvT3uqrKUAr0gZzabzVA.."/>贴吧</a>
					<a href="https://img01.sogoucdn.com/net/a/04/link?&url=https%3A%2F%2Fgss3.bdstatic.com%2F84oSdTum2Q5BphGlnYG%2Ftimg%3Fwapp%26quality%3D80%26size%3Db150_150%26subsize%3D20480%26cut_x%3D0%26cut_w%3D0%26cut_y%3D0%26cut_h%3D0%26sec%3D1369815402%26srctrace%26di%3D4c1ad55e7add12c152a8c174450ed194%26wh_rate%3Dnull%26src%3Dhttp%253A%252F%252Fimgsrc.baidu.com%252Fforum%252Fpic%252Fitem%252F4bed2e738bd4b31c47edf03886d6277f9f2ff864.jpg&appid=100520103&referer=http://tieba.baidu.com/f?kw=%BA%F3%B9%AC%D5%E7%8B%D6%B4%AB"/>图片</a>
					<a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B/8230404">百度百科</a></td>
			</tr>
			<tr align="center">
				<td>6</td>
				<td>水浒传</td>
				<td>↑</td>
				<td>576576</td>
				<td>1231421</td>
				<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cDo7bPywBcrWhMGWTgYhho0FHnLoQIIlgXaVyuZCWUK8."/>贴吧</a>
					<a href="https://img02.sogoucdn.com/net/a/04/link?&url=https%3A%2F%2Fgss3.bdstatic.com%2F84oSdTum2Q5BphGlnYG%2Ftimg%3Fwapp%26quality%3D80%26size%3Db150_150%26subsize%3D20480%26cut_x%3D0%26cut_w%3D0%26cut_y%3D0%26cut_h%3D0%26sec%3D1369815402%26srctrace%26di%3Da137549118fd2a68585e72f007a7b091%26wh_rate%3Dnull%26src%3Dhttp%253A%252F%252Fimgsrc.baidu.com%252Fforum%252Fpic%252Fitem%252Ffd039245d688d43fad6e007a7c1ed21b0ff43b76.jpg&appid=100520103&referer=http://tieba.baidu.com/f?kw=%D0%C2%CB%AE%E4%B0%B4%AB"/>图片</a>
					<a href="https://www.sogou.com/link?url=DOb0bgH2eKjRiy6S-EyBciCDFRTZxEJg3azFCUQOYK6uCsIPhglAiq72NCRS-NvQsY_dFrdXDlkUXDwtitygldJIZCHleyBHVZxwfOT2sSWt7zahKn5a3g..">百度百科</a></td>
			</tr>
			<tr align="center">
				<td>7</td>
				<td>三国演义</td>
				<td>↑</td>
				<td>234</td>
				<td>7686</td>
				<td><a href="https://www.sogou.com/link?url=a8xlm0X2uvcGBOx2SiCYwgu4602TJj_cdyGov71-aBvfgOX8Gw_qhbWniCdqOfcTTmnNv3A13uvYHljPMCQe_63mlRzfPLR2"/>贴吧</a>
					<a href="https://img04.sogoucdn.com/v2/thumb/resize/w/120/h/135/zi/on/iw/90.0/ih/101.25?t=2&url=http%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F9706%2F20141204011040-1442824385.jpg%2F300&appid=200524&referer=http://baike.sogou.com/v84585057.htm?fromTitle=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%3A"/>图片</a>
					<a href="https://www.sogou.com/link?url=DOb0bgH2eKjRiy6S-EyBciCDFRTZxEJgAZWhGyBBaMpVy6JvJfJZBvCJC-1zdrX6ylF-6UlxLHLuNHiuHkTlqzBWXXZzW6TAudFPsRSaJXstVS6jOvw1AA..">百度百科</a></td>
			</tr>
		</table>
	</body>
</html>

基本代码是这样，实现的效果图是：
在这里插入图片描述
要是觉得太窄的话还是可以在table中加上width标签，至于剩下的那个颜色是css和js的事情了）
还可以加上表头好表身等标签，在第一行单元格中加上thead，后面则可以加上tbody，紧接着可以加上tfoot，这样结构就会更清晰

5）合并单元格：
Rowspan和colspan先上后下先左后右，所以在哪合并就在哪个td里面加上colspan，至于合并的对象所在的单元格可以删掉了
先确认跨行还是跨列
找到目标单元格
先上后下先左后右
看是否是第几行第几个（表格里面是没有列元素的）
删除的个数等于合并的个数减去1

6）表单标签：目的是收集用户信息，在网页中，也需要跟用户进行交互，收集用户资料，此时也需要表单，在HTML中，一个完整的表单通常由（表单控件）也叫表单元素、提示信息和表单域三个部分构成
Input控件：标签是单标签，type属性是基本的属性，取值不同，用于多种不同的控件类型。（表示输入信息）
Type说明属于哪种文档类型，password是密码输入框，radio是单选按钮（如果是一组，我们必须给它们命名相同的名字name，这样就可以多个选其中一个，这样就不至于同时选多项）CheckBox复选框，可以实现多组选择，image图像形式的提交按钮
File表示文件type = “file”，checked表示被选择的，不能更改，maxlength是最大长度限制（后面通过正则表达式使用）
在这里插入图片描述
这个图片真的是重点

7）下拉表单和文本域
Label标签：为input元素定义标注（标签）
作用：用于绑定一个表单元素，当点击label元素的时候，被绑定的表单元素就会获得输入焦点（可以把input标签包裹在里面）
For属性规定label与哪个表单元素绑定

<label for=”male”>Male</label>
<input type = “radio” name = “sex” id = “male” value = “male”>

Textarea控件（文本域）
Text文本框只能写一行，textarea支持复文本
文本内容

下拉表单（可以节约空间，使用select控件）
<

select>
	<option>选项1</option>
	<option>选项2</option>
	…
</select>

注意：中至少包含一对,在option中定义select=“selected”时，当前项即为默认选中项
⑧ 表单域

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>世纪佳缘，你在我也在~~</title>
</head>
<body>
	<table width="600px" align="center" border="0px"
cellspacing="0px" cellpadding="0px">
		<caption align="center"><h4>青春不常在，赶紧谈恋爱！</h4></caption>
		<tr align="center">
			<td>性别</td>
			<td>
				<input type="radio" name="a"/>男 <img src="男_wps图片.png" />
				<input type="radio" name="a"/>女<img src="女_wps图片.png" />
				<!--需要注意的是这个radio表示的是单选按钮，其中为了让这选按钮起作用，必须规定同一组要有相同的名字，用name = ""来实现-->
			</td>
		</tr>
		<br />
		<tr align="center">
			<td>生日</td>
			<td>
				<select>
					<option selected="selected">请选择年</option>
					<option>1998</option>
					<option>1999</option>
					<option>2000</option>
					<option>2001</option>
					<option>2002</option>
				</select>
				<select>
					<option selected="selected">请选择月</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
					<option>7</option>
					option>8</option>
					<option>9</option>
					<option>10</option>
					<option>11</option>
					<option>12</option>
				</select>
			</td>
		</tr>
		<br />
	<tr align="center">
			<td>居住地区</td>
			<td><input type="text" value="北京东城"/></td>
		</tr>
		<br />
		<tr align="center">
			<td>婚姻状况</td>
			<td>
				<input type="radio" name="x" />已婚
				<input type="radio" name="x" />离异
				<input type="radio" name="x"/>未婚
				<input type="radio" name="x" />丧偶
			</td>
		</tr>
		<br />
		<tr align="center">
			<td>学历</td>
			<td>
				<select>
					<option>高中</option>
					<option selected="selected">本科</option>
					<option>初中</option>
					<option>小学</option>
					<option>专科</option>
					<option>研究生</option>
					<option>博士生</option>
				</select>
			</td>
		</tr>
		<br />
		<tr align ="center">
			<td>月薪</td>
			<td>
				<input type="text" value="3000——5000"/>
			</td>
		</tr>
		<br />
		<tr align="center">
			<td>手机号</td>
			<td>
				<input type="password" />
			</td>
		</tr>
		<br />
		<tr align="center">
			<td>昵称</td>
			<td>
				<input type="text" />
			</td>
		</tr>
		<br />
		<tr align="center">
			<td>喜欢的类型</td>
			<td>
				<input type="checkbox" />妩媚
				<input type="checkbox" />柔美
				<input type="checkbox" />可爱
				<input type="checkbox" />小鲜肉
				<input type="checkbox" />型男
				<input type="checkbox" />气质
			</td>
		</tr>
		<br />
		<tr align="center">
			<td >自我介绍</td>
			<td>
				<textarea rows="10" cols="50"></textarea>
			</td>
		</tr>
		<br />
		<tr>
			<td>
				<input type="image" img src="注册.png" />
			</td>
		</tr>
		<tr align="center">
			<td width="200" height="20">
				<input type="radio" />我同意注册条款和会员加入标准
			</td>
		</tr>
		<tr align="center">
			<td><a href="www.taobao.com">我是会员，立即登录</a>
		</tr>
	</table>
		<ul >
			<p>我承诺:</p>
			<li>我已年满18周岁</li>
			<li>我将保持着严肃的态度加入到这个社区</li>
			<li>本人的一切情况属实</li>
		</ul>
</body>
</html>

截图如下（好丑）
在这里插入图片描述
我是真的不知道这个到底怎么对齐了（在立即注册后面）

8）查文档：
W3C: https://www.w3school.com.cn/（是一个公益的网站，里面可能有错误）
MDN: https://developer.mozilla.org.zh-CN/（国外的网站）

9）行内样式表：
CSS初识：美化样式
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图像的外形（身高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制以及整体的排版等，而且还可以针对不同的浏览器设置不同的样式
引入CSS样式表（按照书写位置来区分）
① 内部样式表：内嵌式是将代码集中写在HTML文档的head头部标签中，并且用style标签定义：

<head>
<style type = “text/CSS”>
		选择器{属性1：属性值1；属性2：属性值2;属性3：属性值3；}
</style>
</head>

之前小说代码里面可以在前面加上这个

<style type="text/css">
			th
			{
				color: deepskyblue;
			}
		</style>
	<!--选择器{属性：值；}-->

这样的结果就是我们的th一栏颜色变成了蓝色（当然也是可以把字体的大小变成14px）

td
	{
			font-size: 14px;
	}

② 行内样式表（内联样式）
内联样式（行内样式、行间样式、内嵌样式）通过标签的style样式来设置行内式，语法中的style是标签的属性，实际上任何一个HTML标签都有style属性，用来设置行内式。其中属性和值的书写规范，行内式只针对其所在的标签及嵌套在其中的子标签起作用

<标签名 style = “属性1：属性值1；属性2：属性值2；属性3：属性值3;”>内容</标签名>
	
	先来练习一下《忆江南》
	忆江南(1)

唐.白居易

江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。

作者介绍

白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。

注释

(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。

品评

此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
写的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>忆江南</title>
		<!--必须要加上style，来修改样式-->
		<style type="text/css">
			h4
			{
				color: pink;
			}
			p
			{
				color: #048
			}
		</style>
	</head>
	<body>
		<h3 style="color: lawngreen;">忆江南(1)</h3>

		<div style="color: yellow;">唐.白居易</div>

		<p>江南好，风景旧曾谙。 日出江花红胜火，春来江水绿如蓝， 能不忆江南。</p>

		<h4>作者介绍</h4>
		<p>白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。
			晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
		</p>

		<h4>注释</h4>

		<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。单调、双调两体。单调二十七字，双凋五十四字，皆平韵。
			(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。
		</p>

		<h4>品评</h4>

		<p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。
			同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。
		次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。
		三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。
		其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。
		篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
		</p>
	</body>
</html>

③ 外部样式表（外链式）
嵌入式是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

<head>
		<link href = “CSS文件的路径” type =”text/CSS” rel = “stylesheet”/>
</head>

(link标签必须放在head头部标签中，而且必须指出link标签的三个属性)
12）2个小问题总结：
在这里插入图片描述
14）类选择器：

选择器（重点）
要想将CSS样式应用于特定的HTML元素，首先需要找到目标元素，在CSS中，执行者一任务的样式规则部分被称为选择器

CSS基础选择器
① 标签选择器（元素选择器）：之前写的都是标签选择器
标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3}
或者元素名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
标签选择器的最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能差异化样式
② 类选择器：使用“.”（英文点号）进行标识，后面1紧跟其类名，其基本语法格式如下：
类名{属性1：属性值1；属性2：属性值2:；属性3：属性值3；}
标签调用的时候用class“类名”即可
类选择器最大的优势是可以为元素对象定义单独或相同的样式
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			/*div 标签选择器 把所有的div选择改为红色*/
			/*div
			{
				color: red;
			}*/
			/*上面点申明,下面class调用*/
			/*Ctrl+shift+/就可以快速进行注释了*/
			.suibian
			{
				color: deepskyblue;
			}
			.one
			{
				color: dodgerblue;
			}
			.two
			{
				color: red;
			}
			.three
			{
				color: yellow;
			}
			.four
			{
				color: limegreen;
			}
		</style>
	</head>
	<body>
		<div>我是选择器</div>
		<div>我是选择器</div>
		<div class="suibian">我是选择器</div>
		<p>下面要做一个谷歌的课堂里子</p>
		<span class="one">G</span>
		<span class="two">o</span>
		<span class="three">o</span>
		<span class="one">g</span>
		<span class="four">l</span>
		<span class="two">e</span>
	</body>
</html>

老师的实例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Google实例</title>
		<style>/*千万别忘了它*/
			span
			{/*这是标签选择器:让所有的span都变成150像素*/
				font-size: 150px;
			}
			.g
			{
				color: skyblueblue;
			}
			.o
			{
				color: red;
			}
			.oo
			{
				color: orange;
			}
			.l
			{
				color: green;
			}
		</style>
	</head>
	<body>
		<span class="g">G</span>
		<span class="o">o</span>
		<span class="oo">o</span>
		<span class="g">g</span>
		<span class="l">l</span>
		<span class="oo">e</span>
	</body>
</html>

类选择器可以使用多个选择器，可以多个页面使用
在这里插入图片描述