内容大纲
1. HTML简介
HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它使用一系列标签来描述网页的结构和内容。HTML5是最新的HTML标准，引入了许多新特性和元素，使网页开发更加灵活和强大。
HTML的主要特点包括：
- 标记语言：使用标签来定义内容的结构和含义
- 平台无关：可以在任何支持HTML的浏览器中显示
- 易于学习：语法简单直观
- 可扩展性：可以与CSS和JavaScript结合使用
更多学习教程www.fgedu.net.cn
2. 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>
<!-- 页面内容 -->
</body>
</html>
2.1 文档类型声明
<!DOCTYPE html> 声明文档类型为HTML5，告诉浏览器使用HTML5标准解析页面。
2.2 html元素
<html> 元素是HTML文档的根元素，包含整个页面的内容。lang 属性指定页面的语言。
2.3 head元素
<head> 元素包含页面的元数据，如字符集、视口设置、标题等。
2.4 body元素
<body> 元素包含页面的可见内容，如文本、图片、链接等。
3. HTML常用元素
3.1 文本元素
<h1>到<h6>：标题元素，级别从1到6<p>：段落元素<br>：换行元素<hr>：水平线元素<strong>：强调文本（粗体）<em>：强调文本（斜体）
3.2 链接和图像
<a>：链接元素，使用href属性指定链接地址<img>：图像元素，使用src属性指定图像地址，alt属性指定替代文本
3.3 列表元素
<ul>：无序列表<ol>：有序列表<li>：列表项
3.4 表单元素
<form>：表单元素<input>：输入元素，使用type属性指定输入类型<textarea>：文本域元素<select>：下拉选择元素<button>：按钮元素
3.5 语义化元素
<header>：页面头部<nav>：导航栏<main>：主要内容<section>：区块<article>：文章<aside>：侧边栏<footer>：页面底部
4. CSS简介
CSS（Cascading Style Sheets）是用于描述HTML文档样式的语言。它允许开发者控制网页的布局、颜色、字体等视觉效果。CSS3是最新的CSS标准，引入了许多新特性，如圆角、阴影、动画等。
CSS的主要特点包括：
- 层叠性：样式可以叠加和继承
- 选择性：可以选择特定的HTML元素应用样式
- 灵活性：可以创建复杂的视觉效果
- 可维护性：将样式与内容分离，便于维护
学习交流加群风哥微信: itpux-com
4.1 CSS的引入方式
- 内联样式：在HTML元素的
style属性中定义样式 - 内部样式表：在HTML文档的
<head>部分使用<style>标签定义样式 - 外部样式表：在单独的CSS文件中定义样式，然后在HTML文档中使用
<link>标签引入
5. CSS选择器
5.1 基本选择器
- 元素选择器：选择指定类型的元素，如
p选择所有段落 - 类选择器：选择具有指定类的元素，如
.class选择所有具有 class 属性的元素 - ID选择器：选择具有指定ID的元素，如
#id选择具有 id 属性的元素
5.2 复合选择器
- 后代选择器：选择指定元素的后代元素，如
div p选择 div 元素内的所有 p 元素 - 子选择器：选择指定元素的直接子元素，如
div > p选择 div 元素的直接子 p 元素 - 相邻兄弟选择器：选择指定元素的相邻兄弟元素，如
div + p选择 div 元素后的第一个 p 元素 - 通用兄弟选择器：选择指定元素的所有兄弟元素，如
div ~ p选择 div 元素后的所有 p 元素
5.3 伪类选择器
:hover：选择鼠标悬停的元素:active：选择活动的元素:focus：选择获得焦点的元素:first-child：选择第一个子元素:last-child：选择最后一个子元素
6. CSS常用属性
6.1 文本属性
color：文本颜色font-family：字体系列font-size：字体大小font-weight：字体粗细text-align：文本对齐方式text-decoration：文本装饰
6.2 盒模型属性
width：宽度height：高度margin：外边距padding：内边距border：边框border-radius：边框圆角box-shadow：盒阴影
6.3 背景属性
background-color：背景颜色background-image：背景图像background-position：背景位置background-repeat：背景重复方式background-size：背景大小
6.4 布局属性
display：显示方式（block、inline、inline-block、flex、grid等）position：定位方式（static、relative、absolute、fixed、sticky）float：浮动方式（left、right、none）clear：清除浮动（left、right、both、none）flex：弹性布局属性grid：网格布局属性
7. 响应式设计基础
响应式设计是一种网页设计方法，使网页能够适应不同屏幕尺寸和设备。主要通过以下技术实现：
7.1 视口设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7.2 媒体查询
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于等于768px时应用的样式 */
body {
font-size: 14px;
}
.container {
width: 100%;
}
}
7.3 弹性布局
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
min-width: 200px;
}
7.4 网格布局
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
8. HTML/CSS最佳实践
生产环境建议
- 使用语义化HTML元素，提高代码可读性和SEO
- 将CSS与HTML分离，使用外部样式表
- 使用CSS预处理器（如Sass、Less）提高开发效率
- 使用CSS重置或 normalize.css 统一浏览器默认样式
- 优化CSS选择器，提高渲染性能
- 使用响应式设计，确保在不同设备上的良好显示
- 压缩CSS文件，减少加载时间
- 使用CSS变量，便于维护和主题切换
- 遵循BEM（Block, Element, Modifier）命名规范
- 使用CSS lint工具检查代码质量
风哥风哥提示：学习HTML/CSS的最佳方法是实践，通过创建实际项目来巩固所学知识。
更多学习教程公众号风哥教程itpux_com
author:www.itpux.com
本文由风哥教程整理发布,仅用于学习测试使用,转载注明出处:http://www.fgedu.net.cn/10327.html
