:无序列表和有序列表,用于显示项目列表。:列表项,放在或标签内。
:区块级元素,用于结构化网页内容。
掌握了HTML的基础标签和结构后,您就可以开始构建简单的网页了。在HTML中,文本、图像、视频等多媒体内容都可以被嵌入并显示在网页中。
二、CSS简介
CSS(CascadingStyleSheets)是层叠样式表的缩写,用于控制网页的外观和布局。简单来说,HTML定义了网页的结构,而CSS则负责网页的样式。通过CSS,您可以改变网页元素的颜色、字体、排版、大小和位置等,甚至可以实现响应式设计,让网页在不同设备上都能良好展示。
2.1CSS的基本语法
CSS的语法非常简单,由选择器和声明组成:
选择器:选择需要应用样式的HTML元素。
声明:由属性和值组成,描述元素的样式。
一个简单的CSS规则如下:
h1{
color:red;
font-size:30px;
}
在这个例子中,h1是选择器,表示对所有
标签的文本应用样式。声明部分由两个属性:color(文本颜色)和font-size(字体大小)组成。
2.2CSS选择器
CSS选择器用于选定要应用样式的元素,常用的选择器有:
标签选择器:如h1,p,a等,选定所有指定标签的元素。
类选择器:以.开头,如.container,选定所有带有class="container"属性的元素。
ID选择器:以#开头,如#header,选定id="header"的元素。
后代选择器:如divp,选定所有在
内的
元素。
通过这些选择器,您可以灵活地控制网页各个元素的样式。
三、如何结合HTML和CSS进行网页设计
HTML和CSS通常是配合使用的,您可以在HTML文件中通过标签链接外部的CSS文件,也可以直接在标签内编写CSS样式。以下是一个简单的HTML和CSS结合的例子:</p><h3><!DOCTYPEhtml></h3><h3><htmllang="zh"></h3><h3><head></h3><h3><metacharset="UTF-8"></h3><p><metaname="viewport"content="width=device-width,initial-scale=1.0"></p><h3><title>我的第一个网页</title></h3><h3><style></h3><h3>body{</h3><p>font-family:Arial,sans-serif;</p><p>background-color:#f4f4f4;</p><h3>}</h3><h3>h1{</h3><h3>color:#333;</h3><h3>}</h3><h3>p{</h3><h3>font-size:18px;</h3><h3>}</h3><h3>
欢迎来到我的网站
这是我使用HTML和CSS制作的第一个网页。
在这个示例中,HTML定义了网页的结构,而CSS定义了网页的外观,包括背景色、字体和标题颜色。
四、总结
HTML和CSS是网页设计的基础,掌握它们是您成为前端开发者的第一步。通过HTML定义网页结构,再通过CSS美化网页的外观,您可以轻松制作出自己喜欢的网页。我们将继续深入学习更高级的HTML和CSS技术,让您的网页设计能力更上一层楼。