HTML+CSS常用的标签总结

HTML 标签:

1. 结构标签:
   - `<html>`:HTML 文档的根元素。
   - `<head>`:包含元信息,如标题、字符编码等。
   - `<meta>`:定义页面的元信息,如字符编码、作者、描述等。
   - `<title>`:设置页面标题,显示在浏览器的标签页上。
   - `<base>`:设置页面中的所有相对 URL 的基本 URL。
   - `<link>`:用于引入外部资源,如 CSS 文件。
   - `<style>`:内部定义页面样式。
   - `<script>`:引入 JavaScript 代码。
   - `<noscript>`:在浏览器不支持脚本时显示的内容。
   - `<body>`:包含页面的可见内容。
   - `<section>`、`<article>`、`<nav>`、`<aside>`:HTML5 中的语义化标签,用于定义页面结构。
   - `<header>`、`<footer>`:页面的页眉和页脚。
   - `<h1>` 到 `<h6>`:标题标签,按重要性递减。
   - `<p>`:段落标签。
   - `<div>`、`<span>`:用于分组元素。
   - `<main>`:页面的主要内容。
   - `<iframe>`:嵌入其他页面或资源的框架。
   - `<figure>`、`<figcaption>`:图像、表格、代码等的容器和标题。
   - `<audio>`、`<video>`:插入音频和视频。
   - `<canvas>`:用于绘制图形。
   - `<svg>`:绘制矢量图形。
   - `<details>`、`<summary>`:用于创建可折叠内容。

2. 列表和表格标签:
   - `<ul>`、`<ol>`、`<li>`:无序列表和有序列表。
   - `<dl>`、`<dt>`、`<dd>`:定义列表。
   - `<table>`、`<tr>`、`<th>`、`<td>`:表格标签。
   - `<thead>`、`<tbody>`、`<tfoot>`:表格的头部、主体和底部。
   - `<colgroup>`、`<col>`:用于表格列的样式设置。
   - `<caption>`:表格的标题。

3. 表单和输入标签:
   - `<form>`:创建表单。
   - `<input>`:各种输入字段,如文本框、密码框等。
   - `<textarea>`:多行文本输入框。
   - `<select>`、`<option>`:下拉选择框和选项。
   - `<button>`:按钮。
   - `<fieldset>`、`<legend>`:用于组织表单元素。
   - `<label>`:用于标识输入字段。
   - `<datalist>`:为输入字段提供选项。
   - `<optgroup>`:选择框中的选项分组。

4. 超链接和媒体标签:
   - `<a>`:超链接。
   - `<img>`:插入图像。
   - `<map>`、`<area>`:用于图像映射。
   - `<audio>`、`<video>`:插入音频和视频。
   - `<source>`:多媒体元素的媒体资源。

5. 文本标签:
   - `<br>`:换行。
   - `<hr>`:水平分隔线。
   - `<em>`:强调文本。
   - `<strong>`:更强烈地强调文本。
   - `<code>`:内联代码。
   - `<blockquote>`、`<q>`:引用块和行内引用。
   - `<sub>`:下标。
   - `<sup>`:上标。
   - `<pre>`:预格式化文本。

CSS 属性和选择器:

1. 选择器:
   - 类选择器 `.class`:选择 class 属性匹配的元素。
   - ID 选择器 `#id`:选择 id 属性匹配的元素。
   - 元素选择器 `element`:选择指定元素类型的元素。
   - 通用选择器 `*`:选择所有元素。
   - 后代选择器 `ancestor descendant`:选择祖先元素内部的后代元素。
   - 子元素选择器 `parent > child`:选择直接子元素。
   - 相邻兄弟选择器 `element + element`:选择紧接在同一父元素下的相邻元素。
   - 伪类选择器 `:hover`, `:active`, `:nth-child`, ...:选择匹配特定状态或条件的元素。
   - 伪元素选择器 `::before`, `::after`:在元素前后插入内容。

2. 基本属性:
   - `color`:文本颜色。
   - `background-color`:背景颜色。
   - `font-family`:字体族。
   - `font-size`:字体大小。
   - `font-weight`:字体粗细。
   - `text-align`:文本对齐方式。
   - `line-height`:行高。

3. 盒模型属性:
   - `width`:宽度。
   - `height`:高度。
   - `

margin`:外边距。
   - `padding`:内边距。
   - `border`:边框。
   - `box-sizing`:盒模型尺寸计算方式。

CSS3 属性:

1. 过渡和动画:
   - `transition`:指定过渡效果。
   - `transform`:变换元素。
   - `animation`:创建动画。

2. 背景和渐变:
   - `background-image`:设置背景图像。
   - `linear-gradient`:创建线性渐变背景。
   - `radial-gradient`:创建径向渐变背景。

3. 阴影和边框:
   - `box-shadow`:设置阴影效果。
   - `border-radius`:设置边框圆角。
   - `border-image`:设置边框图像。

4. 弹性布局:
   - `display: flex`:创建弹性容器。
   - `flex-direction`:弹性项目的主轴方向。
   - `flex-wrap`:弹性项目的换行方式。
   - `justify-content`:在主轴上对齐弹性项目。
   - `align-items`:在交叉轴上对齐弹性项目。

5. 网格布局:
   - `display: grid`:创建网格容器。
   - `grid-template-columns`:定义网格列。
   - `grid-template-rows`:定义网格行。
   - `grid-gap`:设置网格之间的间隔。

以上内容涵盖了 HTML、HTML5、CSS 和 CSS3 中的主要标签、属性和选择器,可用于构建丰富的网页布局和样式效果。

猜你喜欢

转载自blog.csdn.net/A12536365214/article/details/132466149