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

最新推荐文章于 2025-03-22 22:08:33 发布

Long_poem

最新推荐文章于 2025-03-22 22:08:33 发布

阅读量338

点赞数 5

文章标签：笔记 html css

本文链接：https://blog.csdn.net/2301_78806917/article/details/145558666

版权

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

文章目录

HTML + CSS 重点知识点总览
总结

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等