html + css的基础知识
HTML 和 CSS 是构建网页的两大基础技术，它们共同构成了网页的结构与样式。
HTML（超文本标记语言）
HTML 是网页的骨架，用于定义网页的内容和结构。它通过一系列标签来描述网页中的元素，如标题、段落、图片、链接等。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>页面标题</title></head><body> <h1>标题</h1> <p>段落内容</p> <img src="image.jpg" alt="图片描述"></body></html>
<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：根元素，包含整个页面。
<head>：包含页面元数据，如标题、字符编码等。
<body>：包含页面可见内容。
常用标签
标签类型 示例标签 作用
标题标签 <h1> 到 <h6> 定义不同级别的标题
段落标签 <p> 定义段落
图片标签 <img> 插入图片
链接标签 <a href="url"> 创建超链接
列表标签 <ul>、<ol>、<li> 创建无序或有序列表
语义化标签
语义化标签有助于提升网页的可读性和 SEO，例如：
<header>：页面头部
<nav>：导航栏
<main>：主要内容区域
<article>：文章内容
<footer>：页面底部
CSS（层叠样式表）
CSS 用于控制网页的外观和布局，将结构（HTML）与样式分离，使网页更加美观和灵活。
引入方式
内联样式：直接在 HTML 元素中使用 style 属性。
<p style="color: red;">红色文字</p>
内部样式表：在 <head> 中使用 <style> 标签。
<style> p { color: blue; }</style>外部样式表：通过 <link> 标签引入外部 CSS 文件。
<link rel="stylesheet" href="styles.css">
核心概念
选择器：用于选择 HTML 元素并应用样式，例如：
.class-name { color: red; } /* 类选择器 */#id-name { font-size: 16px; } /* ID 选择器 */p { margin: 10px; } /* 元素选择器 */盒模型：每个 HTML 元素都可以看作一个矩形盒子，
包括内容区、内边距（padding）、边框（border）和外边距（margin）。
div { width: 100px; padding: 10px; border: 1px solid #000; margin: 20px;}布局方式：
Flexbox：用于一维布局（水平或垂直排列）。
Grid：用于二维网格布局。
传统布局：如 float 和 position，现已较少使用。
响应式设计
为了适配不同设备的屏幕尺寸，可以使用响应式单位：
vw / vh：视窗宽度/高度的百分比。
rem：相对于根元素字体大小的单位。
实践建议
语义化优先：使用语义化标签提升网页结构清晰度和可访问性。
样式与结构分离：将样式写在 CSS 文件中，避免内联样式。
响应式设计：使用媒体查询或弹性布局实现适配不同屏幕。
兼容性考虑：确保代码在主流浏览器中正常显示。
通过掌握 HTML 和 CSS 的基础知识，可以构建结构清晰、样式美观的网页。