HTML 和 CSS

使用 HTML 和 CSS 制作网页的详细指南

前言

在现代 Web 开发中,HTML 和 CSS 是构建网页的基础技术。HTML(超文本标记语言)用于定义网页的结构和内容,而 CSS(层叠样式表)用于控制网页的外观和布局。掌握这两项技术是制作现代网页的第一步。

本篇文章将详细介绍如何使用 HTML 和 CSS 制作一个简单的网页,从基本结构到页面样式,帮助你快速上手网页开发。


一、HTML 基础

1.1 什么是 HTML?

HTML(HyperText Markup Language)是用于定义网页内容的标记语言。它通过一系列标签将内容结构化,使浏览器能够理解并渲染网页。常见的 HTML 元素包括标题、段落、图片、链接等。

1.2 HTML 文档的基本结构

每个 HTML 文档都有固定的基本结构,包括 <!DOCTYPE> 声明、<html> 根元素、<head> 头部元素和 <body> 主体元素。以下是一个简单的 HTML 文件结构:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个简单的 HTML 页面示例。</p>
</body>
</html>

在这个示例中,<h1> 是一级标题标签,<p> 是段落标签,<meta> 标签用于定义页面的字符集和视口设置,<title> 标签用于设置网页标题。

1.3 常见的 HTML 标签

  • 标题标签 :从 <h1><h6>,用于定义不同层级的标题。<h1> 为最大标题,<h6> 为最小标题。
  • 段落标签<p> 标签用于定义段落。
  • 链接标签<a> 标签用于创建超链接,使用 href 属性指定链接地址。
  • 图片标签<img> 标签用于嵌入图片,使用 src 属性指定图片路径,alt 属性用于提供图片的替代文本。

二、CSS 基础

2.1 什么是 CSS?

CSS(Cascading Style Sheets)是用于控制网页外观的样式表语言。通过 CSS,开发者可以定义网页元素的颜色、字体、布局、大小等外观属性。CSS 可以嵌入到 HTML 文件中,也可以通过外部文件进行引入。

2.2 将 CSS 添加到 HTML

有三种方式将 CSS 添加到 HTML 页面中:

  1. 行内样式 :通过元素的 style 属性直接添加 CSS 样式。
  2. 内部样式表 :将 CSS 写在 <style> 标签中,通常放置在 <head> 部分。
  3. 外部样式表 :通过 <link> 标签引入外部 CSS 文件。
示例:行内样式
css 复制代码
<p style="color: red;">这是一个红色的段落。</p>
示例:内部样式表
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内部样式表示例</title>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      font-family: "Arial", sans-serif;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>我的网页</h1>
  <p>这是一个使用内部样式表的网页示例。</p>
</body>
</html>
相关推荐
小*-^-*九3 小时前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
hashiqimiya10 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu14 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
BUG创建者1 天前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull1 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰1 天前
html中css的四种定位方式
前端·css·html
IT利刃出鞘1 天前
HTML--最简的二级菜单页面
前端·html
yume_sibai1 天前
HTML HTML基础(4)
前端·html
面向星辰1 天前
html音视频和超链接标签,颜色标签
前端·html·音视频
信看1 天前
实用 html 小工具
前端·css·html