HTML的学习（3）

最新推荐文章于 2024-04-18 05:00:00 发布

阿酒在看云

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量698

点赞数 1

本文链接：https://blog.csdn.net/weixin_34727238/article/details/82714336

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

备注：今天是学习html的第三天，对于以前掌握的不好的知识点能够更加清晰，但是，因为不熟练的关系只能完成简单的框架，在学习中重复性的东西太多难免有所疏忽大意，会忘记加上应该有的标签，在后面的学习中希望可以改进。

列表里面的清单

现在已经学会了如何创建一个有序列表和一个无序列表了，但是新的问题来了——如何在一个有序列表之中创建一个无序列表，这就要用到嵌套的知识。

当你使用嵌套标签的时候，打开的最后一个标签总是要第一个关闭。

举个栗子：

<ul><li>玉米饼!</li></ul>

说明

在21行创建一个无序列表；
在这个无序列表再增加两组item，一组是喜欢的男孩名称，另外一组是喜欢的女孩名称；
在每组item里面建立一个有序列表，每个有序列表里面建立三个item，并把喜欢的男孩名称和喜欢的女孩名称分别写进列表。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title>嵌套列表</title>
	</head>
	<body>
		<ol>
			<li>爸爸喜欢的东西
				<ul>
					<li>足球</li>
					<li>篮球</li>
				</ul>
			</li>
			<li>妈妈喜欢的东西
				<ul>
					<li>花草</li>
					<li>旅行</li>
				</ul>
			</li>
		</ol>
		<ul>
		  <li>喜欢的男孩
		  	<ol>
			  <li>胡歌</li>
			  <li>白敬亭</li>
			  <li>易烊千玺</li>
			</ol>
		  </li>
		  <li>四季
			<ol>
			  <li>春</li>
			  <li>夏</li>
			  <li>秋</li>
			  <li>冬</li>
			</ol>		
		  </li>
	  </ul>
	</body>
</html>

结果：

注释

我们已经介绍了很多关于列表的内容，下面我们学习改变一下样式。如果你还记得，假如HTML是网页的框架，那么CSS可让您为框架增加一些美观度，使网页更加漂亮。

虽然我们可以写一些内联的CSS样式，但是这只是意味着，我们可以在HTML文件中写一些样式，而不必担心去创建一个单独的CSS文件！我们学习这个首先是因为学会它会使以后学习CSS轻松了许多。在我们深入探讨字体之前，首先来了解下注释的功能。浏览器不会显示你的HTML代码的内容，但它会在代码中，以帮助你记住做了某些事情，为什么那样做。

说明

注释开始就是这样：  把第一行注释掉，然后单独留下第三行。

练习题：

<!DOCTYPE HTML>
<html>
  <head><title>我是一个标题</title></head>
  <!--把我放进去注释-->
  <body>
  <p>用户现在应该只能看见这条数据</p>
   <!-- 看不见这段话-->
  </body>
</html>

结果：

字体颜色

我们现在知道了style属性，以后我们也会常用到这些属性。

我们可以用它来定义很多不同的标签，不仅仅是<p>标签。下面我们改变标题内容的颜色。

改变文字的颜色，只需声明style属性，然后设置“颜色：蓝色”（或任何你喜欢的颜色）。例如：

<h2 style="color:red">

如果你想改变文字的大小和颜色？很简单！只需添加每个属性之间以分号。例如：

<h2 style="color: green; font-size:12px">

所有的颜色列表可以点击这里进行查询

不能写成下面这样:

    <h2 <h2 style="color: green; font-size:12px">

改变标题颜色为绿色，并且改变大小为16px；
改变第一个段落颜色为蓝色。
改变第二个段落的颜色为红色，把它的字体大小设置为10px。

练习题：

<!DOCTYPE html>
<html>
	<head>
		<title style="color:green;font-size:16px">改变颜色</title>
	</head>
	<body>
		<h1>最大的标题</h1>
			<p style="color:blue">一个巨大的熊和小鸭子是好朋友。</p>
			<p style="font-size:10px;color:red">但熊肚子饿，吃了鸭子。</p>
	</body>
</html>

结果：

阿酒在看云

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的学习（3）

备注：今天是学习html的第三天，对于以前掌握的不好的知识点能够更加清晰，但是，因为不熟练的关系只能完成简单的框架，在学习中重复性的东西太多难免有所疏忽大意，会忘记加上应该有的标签，在后面的学习中希望可以改进。列表里面的清单现在已经学会了如何创建一个有序列表和一个无序列表了，但是新的问题来了——如何在一个有序列表之中创建一个无序列表，这就要用到嵌套的知识。当你使用嵌套标签的时候，打开的...
复制链接

扫一扫