HTML+css的基本运用

HTML（超文本标记语言）

HTML 是用于构建网页结构的基础语言，它使用 ** 标签（Tags）** 来定义页面元素。以下是一些核心概念：

1. 基本结构

html

预览

xml 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5
<html>：根标签，包含整个网页
<head>：包含元数据（字符编码、页面标题等）
<body>：包含可见的页面内容

2. 常用标签

标题：<h1>到<h6>（重要性递减）
段落：<p>
列表：无序列表<ul>+ 列表项<li>
链接：<a href="URL">链接文本</a>
图片：<img src="图片地址" alt="描述">
容器：<div>（块级容器）和<span>（行内容器）

CSS（层叠样式表）

CSS 用于美化 HTML 元素，控制它们的外观和布局。以下是核心概念：

1. 样式应用方式

CSS 可以通过三种方式应用到 HTML：

内联样式 ：直接在 HTML 标签中使用style属性
内部样式表 ：在<head>标签中使用<style>标签
外部样式表：链接外部.css 文件（示例中使用的是内部样式表）

2. 基本语法

css

css 复制代码

选择器 {
    属性: 值;
    属性: 值;
}

选择器 ：指定要样式化的 HTML 元素（如h1, .container）
属性和值 ：定义具体的样式（如color: red;, font-size: 16px;）

3. 常用选择器

元素选择器 ：直接使用标签名（如p, h1）
类选择器 ：使用.后跟类名（如.container）
ID 选择器 ：使用#后跟 ID 名（如#main-content）

示例代码详解

HTML 部分

html

预览

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML+CSS基础示例</title>
    <!-- CSS样式表 -->
</head>
<body>
    <div class="container">
        <h1>HTML与CSS基础示例</h1>
        
        <p>这是一个展示HTML和CSS基本运用的示例页面...</p>
        
        <img src="https://picsum.photos/800/400" alt="示例图片">
        
        <!-- 更多内容... -->
    </div>
</body>
</html>

关键点：

<meta charset="UTF-8">：确保中文正常显示
<meta name="viewport">：响应式设计基础
<div class="container">：使用类选择器应用样式
图片使用占位图服务（picsum.photos）

CSS 部分

css

css 复制代码

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

设置全局字体、边距和背景色

css

css 复制代码

h1 {
    color: #333;
    text-align: center;
    text-decoration: underline;
}

标题居中并添加下划线

css

css 复制代码

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

创建居中容器，添加圆角和阴影效果

css

css 复制代码

button:hover {
    background-color: #45a049;
}

使用伪类:hover实现按钮悬停效果

核心概念总结

盒模型（Box Model） ：每个 HTML 元素都是一个矩形盒子，包含内容区、内边距（padding）、边框（border）和外边距（margin）
响应式设计 ：使用max-width和相对单位（如百分比）使页面适应不同屏幕尺寸
层叠原则：CSS 样式优先级由选择器特异性、位置和！important 决定
盒阴影和圆角 ：使用box-shadow和border-radius创建现代 UI 效果

你可以通过修改示例代码中的 CSS 属性来观察不同的效果，例如改变颜色、调整边距或修改按钮样式。

上述代码中各部分代码的作用分别是什么？

介绍一下其他美化HTML元素的CSS属性

除了HTML和CSS，还有哪些前端开发技术？