【自学笔记】HTML+CSS基础知识点总览-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

HTML + CSS 重点知识点总览
- HTML部分
- - 1. 基本结构
  - 2. 常用标签
  - 3. 属性
  - 4. 语义化标签
- CSS部分
- - 1. 基本语法
  - 2. 选择器
  - 3. 盒模型
  - 4. 布局方式
  - 5. 响应式设计
  - 6. CSS3新特性
总结

HTML + CSS 重点知识点总览

HTML部分

1. 基本结构

<!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. 常用标签

头部标签：<head>, <title>, <meta>, <link>, <style>, <script>
文本内容标签：<h1>到<h6>, <p>, <br>, <hr>, <blockquote>, <pre>, <code>
列表标签：<ul>, <ol>, <li>
链接与导航：<a>, <nav>, <link>（在<head>中）
媒体标签：<img>, <audio>, <video>, <source>, <track>
表格标签：<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>
表单标签：<form>, <input>, <textarea>, <button>, <select>, <option>, <label>, <fieldset>, <legend>

3. 属性

全局属性：id, class, style, title, data-*
特定属性：如<a>标签的href, target；<img>标签的src, alt等

4. 语义化标签

<header>, <footer>, <section>, <article>, <aside>, <nav>, <main>

CSS部分

1. 基本语法

selector {property: value;
}

2. 选择器

基本选择器：元素选择器、类选择器（.）、ID选择器（#）、通配符选择器（*）
组合选择器：后代选择器（空格）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）
属性选择器：[attribute], [attribute=value], [attribute~=value], [attribute|=value], [attribute^=value], [attribute$=value], [attribute*=value]
伪类选择器：:hover, :active, :focus, :nth-child(), :first-child, :last-child等
伪元素选择器：::before, ::after, ::first-line, ::first-letter

3. 盒模型

内容（content）
内边距（padding）
边框（border）
外边距（margin）

4. 布局方式

标准文档流：块级元素与行内元素
浮动布局：float, clear
定位：static, relative, absolute, fixed, sticky
Flexbox布局：display: flex;, justify-content, align-items, flex-direction等
Grid布局：display: grid;, grid-template-columns, grid-template-rows, grid-area等