HTML CSS

HTML (HyperText Markup Language) 是用于创建网页结构的标记语言，而 CSS (Cascading Style Sheets) 则用于为网页添加样式和布局。在 web 前端开发中，HTML 和 CSS 是必不可少的技术，因为它们共同构成了网页的基础架构和外观。

HTML 基础

在 HTML 中，标签是用来标记不同部分的元素，例如标题、段落、链接等。每个 HTML 标签都由尖括号包围，例如 <p> 表示段落标签。以下是一些常用的 HTML 标签：

• <h1> - <h6>：用于表示不同级别的标题
• <p>：用于表示段落
• <a>：用于创建链接
• <img>：用于插入图片
• <ul> 和 <ol>：分别用于创建无序列表和有序列表
• <div> 和 <span>：用于分组和样式化元素

除了标签，HTML 还可以使用属性来为元素添加额外的信息或样式。例如，<img> 标签可以使用 src 属性来指定图片的 URL。以下是一个简单的 HTML 示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <a href="https://www.example.com">点击这里访问示例网站</a>
  <img src="example.jpg" alt="示例图片">
</body>
</html>

CSS 基础

CSS 用于为 HTML 元素添加样式和布局。可以通过选择器来选中特定的元素，并为其应用样式。以下是一些常用的 CSS 属性：

• color：用于设置文本颜色
• font-size：用于设置字体大小
• background-color：用于设置背景颜色
• margin 和 padding：用于设置元素的外边距和内边距
• display：用于设置元素的显示方式

可以将 CSS 样式添加到 HTML 文档中的 <style> 标签中，也可以将样式单独保存在一个 .css 文件中，并通过 <link> 标签引入。以下是一个简单的 CSS 示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    p {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
</body>
</html>

以上是 HTML 和 CSS 的基础知识，通过学习和实践，你可以创建出漂亮且功能丰富的网页。在接下来的章节中，我们将深入探讨更多高级的 HTML 和 CSS 技术。