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>
相关推荐
破无差5 小时前
《赛事报名系统小程序》
小程序·html·uniapp
从零开始学习人工智能9 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
yddddddy10 小时前
html基本知识
前端·html
小白640217 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
蓝胖子的多啦A梦19 小时前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
面向星辰1 天前
html各种常用标签
前端·javascript·html
李昊哲小课2 天前
HTML 完整教程与实践
前端·html
小*-^-*九2 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
hashiqimiya3 天前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu3 天前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html