当前位置：首页 > news >正文

HTML — 总结

news 来源：原创 2025/4/24 12:22:20

注：本文章所谓的HTML总结是根据本人自己所学到的HTML知识以及之前部分文章的总结

介绍

HTML（超文本标记语言）是构建网页的核心技术，通过标签系统定义内容结构与呈现方式。1991年由蒂姆·伯纳斯-李提出，历经HTML4、XHTML等版本迭代，2014年HTML5成为主流标准，显著增强了多媒体支持与语义化能力。

HTML文档以<!DOCTYPE html>声明开头，包含<html>根标签，其内分为<head>和<body>两部分。<head>存放元信息，如标题（<title>）、字符集声明（<meta charset>）及外部资源链接；<body>则承载可见内容，通过<h1>至<h6>标题、<p>段落、<img>图像、<a>超链接等标签组织内容。标签通过属性扩展功能，例如<a href="url">中的href定义跳转地址。

HTML5引入语义化标签如<header>、<nav>、<article>，提升代码可读性与SEO效果，同时原生支持<video>、<audio>多媒体元素及<canvas>绘图功能。其离线存储、地理定位等API赋能复杂Web应用开发。作为网页结构层，HTML需与CSS（样式层）、JavaScript（行为层）协同工作，三者共同构成现代Web开发基石。其跨平台特性与标准化设计，使之成为互联网内容呈现的基础语言。

HTML 基本标签

HTML基础标签包括 <html>定义文档，<head>含元信息，<body>包裹内容，<h1>-<h6>标题，<p>段落，<a href>超链接，<img>图片，<ul>/<ol> 无序/有序列表，<div>区块容器，<span>行内元素，实现网页结构与内容编排

文档结构

<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：根元素，包裹整个页面。
<head>：包含元数据，如标题、字符集、外部资源链接。
- <meta charset="UTF-8">：定义字符编码。
- <title>：页面标题（显示在浏览器标签页）。
<body>：页面可见内容的主体部分。

内容标签

标题：<h1>到<h6>，重要性递减。
段落：<p>文本段落。
链接：<a href="url">链接文本</a>。
图片：<img src="图片路径" alt="替代文本">（单标签）。
列表：
- 无序列表：<ul> + <li>。
- 有序列表：<ol> + <li>。
表格：<table>包裹，<tr>定义行，<td>单元格，<th>表头。
容器：
- <div>：块级容器，用于布局。
- <span>：行内容器，用于文本样式。

表单标签

<form>：表单容器。
<input>：输入控件，类型由type定义（如 text, password, submit, radio, checkbox）。
<textarea>：多行文本输入。
<button>：按钮。
<select> + <option>：下拉选择框。

CSS 选择器

CSS选择器用于定位HTML元素，包括元素名、类（.）、ID（#）、属性（[]）、后代（空格）、子元素（>）、伪类（:hover）等，通过规则匹配目标元素，实现精准样式控制与页面美化

基本选择器

标签选择器：p { ... }。
类选择器：.class-name { ... }。
ID 选择器：#id-name { ... }。
通配符：* { ... }（选中所有元素）。

组合选择器

后代：div p（选中 div 内所有 p）。
子元素：div > p（仅直接子元素）。
相邻兄弟：div + p（紧接在 div 后的第一个 p）。
通用兄弟：div ~ p（div 之后的所有同级 p）。

属性选择器

[type="text"]：选中type属性为text的元素。
[href^="https"]：选中href以 https开头的元素。

伪类与伪元素

伪类：基于元素状态，如:hover（悬停）、:nth-child(n)（第 n 个子元素）。
伪元素：创建虚拟元素，如::before、::after。

优先级

!important > 行内样式 > ID > 类/属性/伪类 > 标签 > 通配符。

CSS 样式

CSS样式控制网页元素外观，通过内联、内嵌或外部文件定义布局、颜色、字体等属性，利用层叠、继承机制与盒模型实现页面美化与响应式设计，提升用户体验

文本与字体

font-family：字体类型。
font-size：字号（如15px）。
color：文字颜色（十六进制、rgb()、rgba()）。
text-align：对齐方式（left, center, right）。

背景与边框

background-color / background-image：背景颜色或图片。
border: 1px solid #000;：边框（宽度、样式、颜色）。

盒模型

width / height：内容区尺寸。
padding：内边距。
margin：外边距。
box-sizing: border-box;：尺寸包含边框和内边距。

布局

display：
- block（块级）、inline（行内）、inline-block（行内块级）。
- flex（弹性布局）、grid（网格布局）。
position：
- static（默认）、relative（相对定位）。
- absolute（绝对定位）、fixed（视口固定定位）。
浮动：float: left;，需用clear: both;清除。