本文介绍了HTML作为超文本标记语言用于描述网页结构，包括常用标签如<h1>、<p>、<a>等，以及属性的应用。CSS作为层叠样式表，用于定义网页元素的样式，如颜色、字体和布局。文中提到了CSS选择器如元素选择器、类选择器和ID选择器，以及CSS声明和盒模型的概念，帮助理解网页设计的基本原理。
HTML
HTML（超文本标记语言）是一种用于创建网页的标记语言。它允许我们使用标签来描述网页的结构和内容。
简单示例（如何使用标签来创建一个简单的网页）：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>这是一级标题</p>
</body>
</html>
在上面的示例中，我们使用了几种不同的标签，如 html、head、title、body、h1 和 p 等。这些标签允许我们定义网页的结构和内容。
除了上面提到的标签之外，HTML 还提供了许多其他标签，用于创建各种类型的内容，如列表、表格、链接和图片等。
HTML 标签
HTML 提供了许多不同类型的标签，用于创建各种类型的内容。下面是一些常用的 HTML 标签：
- <h1> 到 <h6>：用于创建标题。不同级别的标题具有不同的字体大小和粗细。
- <p>：用于创建段落。
- <a>：用于创建超链接。
- <img>：用于插入图片。
- <ul> 和 <ol>：用于创建无序列表和有序列表。
- <li>：用于创建列表项。
- <table>：用于创建表格。
- <tr>：用于创建表格行。
- <th> 和 <td>：用于创建表头单元格和表格数据单元格。
HTML 属性
HTML 标签可以包含属性，用于提供额外信息或改变标签的行为。例如，我们可以使用 href 属性来指定链接的目标地址，或使用 src 属性来指定图片的来源。
简单示例（演示如何使用属性来改变标签的行为）：
<a href="https://www.baidu.com">百度</a>
<img src="image.jpg" alt="An image">
在上面的示例中，我们为 <a> 标签添加了 href 属性，用于指定链接的目标地址。同时，我们为 <img> 标签添加了 src 属性，用于指定图片的来源。
HTML 表单
HTML 表单用于收集用户输入。它包含一些表单控件，如文本框、复选框、单选按钮和下拉列表等，允许用户输入数据。
简单示例：
<form action="submit.html" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
在上面的示例中，我们创建了一个简单的表单，包含两个文本框和一个提交按钮。用户可以在文本框中输入姓名和电子邮件地址，然后点击提交按钮将数据发送到服务器。
CSS
CSS（层叠样式表）是一种用于描述网页样式的语言。它允许我们定义网页中元素的颜色、字体、布局和其他样式。
简单示例：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: blue;
text-align: center;
}
p {
margin: 10px;
}
在上面的示例中，我们使用选择器（如 body、h1 和 p）来指定要应用样式的元素。然后，在每个选择器内部，我们使用声明来定义元素的样式。
CSS 选择器
CSS 提供了多种选择器，用于指定要应用样式的元素。下面是一些常用的 CSS 选择器：
- 元素选择器：用于选择特定类型的元素。例如，p 选择器会选择所有 <p> 元素。
- 类选择器：用于选择具有特定类的元素。例如，.highlight 选择器会选择所有具有 highlight 类的元素。
- ID 选择器：用于选择具有特定 ID 的元素。例如，#myElement 选择器会选择 ID 为 myElement 的元素。
- 属性选择器：用于选择具有特定属性的元素。例如，[href] 选择器会选择所有具有 href 属性的元素。
- 伪类选择器：用于选择处于特定状态的元素。例如，:hover 选择器会选择鼠标悬停在上方的元素。
这些选择器可以单独使用，也可以组合使用，以创建更复杂的选择规则。
CSS 声明
CSS 声明用于定义元素的样式。每个声明包含一个属性和一个值，用冒号分隔。
简单示例：
h1 {
color: blue;
text-align: center;
}
在上面的示例中，我们为 <h1> 元素定义了两个声明：color: blue 和 text-align: center。这两个声明分别定义了 <h1> 元素的颜色和文本对齐方式。
CSS 盒模型
CSS 盒模型是一种描述网页布局的模型。它将每个 HTML 元素表示为一个矩形盒子，并定义了盒子的内容、内边距、边框和外边距等部分。
简单示例：
.box {
width: 300px;
height: 150px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
在上面的示例中，我们为 .box 类定义了若干个盒模型相关的属性，如 width、height、padding、border 和 margin 等。
- width 和 height 属性用于定义盒子的内容区域的宽度和高度。
- padding 属性用于定义盒子的内边距，即内容区域与边框之间的空间。
- border 属性用于定义盒子的边框，包括边框的宽度、样式和颜色。
- margin 属性用于定义盒子的外边距，即盒子与其他元素之间的空间。
在实际开发过程中，我们为了美观通常会设置网页无任何边距。
这时候我们可以使用通配符选择器 * 来选择网页中的所有元素，然后将它们的 margin 和 padding 属性都设置为 0。这样，网页中的所有元素都不会有边距。
* {
margin: 0;
padding: 0;
}
扫一扫
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
