前言
ok今天来总结一下学习的HTML和CSS
跳转
HTML
一、HTML 基础
- 定义：超文本标记语言（HyperText Markup Language），用于创建网页的标记语言
- 作用：构建网页的结构和内容，如文本、图像、链接、表单等
1. HTML 文档结构
<!DOCTYPE html>：声明文档类型为 HTML5<html>：根元素，整个 HTML 页面的容器<head>：包含页面的元数据，如标题、字符编码、样式表链接等<title>：设置页面的标题，显示在浏览器的标题栏或标签页上<meta>：定义文档的元信息，如字符集（charset）、描述（name="description"）、关键词（name="keywords"）
<body>：包含页面的可见内容，如文本、图片、链接等
2. 基本标签
- 标题标签 ：
<h1>-<h6>，用于定义不同级别的标题，<h1>是最高级别的标题，<h6>是最低级别的标题 - 段落标签 ：
<p>，用于定义段落文本 - 换行标签 ：
<br>，用于在文本中强制换行 - 水平线标签 ：
<hr>，用于在页面中插入一条水平线 - 文本格式化标签
- 加粗 ：
<b>或<strong>，<strong> - 斜体 ：
<i>或<em>，<em> - 下划线 ：
<u> - 删除线 ：
<s>或<del>，<del> - 上标文本：
<sup>，用于公式中的上标 - 下标文本：
<sub>，用于公式中的下标
- 加粗 ：
- 列表标签
- 无序列表 ：
<ul>，列表项使用<li>标签，用于创建无序列表，如项目符号列表 - 有序列表 ：
<ol>，列表项使用<li>标签，用于创建有序列表，如数字列表 - 自定义列表 ：
<dl>，包含<dt>（定义术语）和<dd>（定义描述），用于创建自定义列表
- 无序列表 ：
- 链接标签
<a>：用于创建超链接href：属性指定链接的目标地址target：属性指定链接的打开方式（如_blank在新窗口打开，_self在同一窗口打开（默认））title：为链接添加提示文本
- 图片标签
<img>：用于插入图片src：属性指定图片的源文件地址alt：属性提供图片的替代文本，当图片无法显示时显示该文本width和height：设置图像的宽度和高度
- 表格标签
<table>：定义表格。常用属性有：border：设置表格的边框宽度width和height：设置表格的宽度和高度
<tr>：定义表格行<td>：定义表格单元格<th>：定义表格表头单元格，通常用于第一行或第一列，加粗显示并居中对齐
- 表单标签
<form>：定义表单，用于收集用户输入。常用属性：action：指定表单提交的目标 URLmethod：指定表单提交的方式，如get或post
- 表单元素
- 文本输入框 ：
<input type="text">，用于输入单行文本 - 密码输入框 ：
<input type="password">，用于输入密码，输入内容会被隐藏 - 电子邮件输入框：
<input type="email">，用于输入电子邮件，自动验证输入的格式 - 单选按钮 ：
<input type="radio">，用于从一组选项中选择一个选项，name属性用于分组，value属性指定选项的值 - 复选框 ：
<input type="checkbox">，用于选择多个选项，name属性用于分组，value属性指定选项的值 - 提交按钮 ：
<input type="submit">或<button type="submit">，用于提交表单数据 - 下拉列表 ：
<select>用于创建下拉选择框。常用属性：name：指定名称<option>：定义下拉列表中的选项，value属性指定选项的值，selected属性指定默认选中的选项
- 文本域 ：
<textarea>，用于输入多行文本。常用属性：name：指定名称rows和cols：指定文本框的行数和列数placeholder：指定提示文本
- 文本输入框 ：
二、HTML 语义化标签
<header>：表示页面或区域的头部，通常包含网站标志、导航菜单等<nav>：定义导航链接的区域，用于包含页面的导航菜单<main>：表示页面的主要内容区域，一个页面只能有一个<main>元素<article>：表示独立的、完整的内容块，如博客文章、新闻报道等<section>：定义文档中的一个区域，用于对页面内容进行分组<aside>：表示页面的侧边栏内容，通常包含与页面主要内容相关的补充信息<footer>：表示页面或区域的底部，通常包含版权信息、联系方式等
三、HTML5 新特性
多媒体标签
<video>：定义视频播放器。常用属性：src：指定视频文件的路径controls：显示播放控件width和height：设置视频的宽度和高度- 支持的视频格式：MP4、WebM、Ogg
<audio>：定义音频播放器。常用属性：src：指定音频文件的路径controls：显示播放控件- 支持的音频格式：MP3、WAV、OGG
表单新类型
date：日期选择器time：时间选择器datetime-local：本地日期和时间选择器month：月份选择器week：周选择器number：数字输入框，可设置最小值、最大值和步长range：滑动条输入框，可设置最小值、最大值和步长color：颜色选择器
CSS
一、CSS 基础
- 定义：层叠样式表（Cascading Style Sheets），用于控制 HTML 文档的外观和格式
- 作用：实现网页的布局、颜色、字体、间距等样式设计，使网页更加美观和易用
1. CSS 引入方式
- 内联样式 ：在 HTML 元素中使用
style属性直接设置样式，如<p style="color: red;">这是红色文本</p>。 - 内部样式表 ：在 HTML 文档的
<head>部分使用<style>标签定义样式，如<style>p { color: blue; }</style> - 外部样式表 ：创建独立的 CSS 文件（如
styles.css），然后在 HTML 文档的<head>部分使用<link rel="stylesheet" href="styles.css">引入
2. CSS 选择器
- 优先级判定
- 优先级规则：内联样式 > ID 选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器。
- 具体优先级计算：通过选择器的组合和重要性（
! important）来确定最终的优先级。
- 标签选择器 ：根据 HTML 标签名选择元素，如
p { color: green; }会选择所有的<p>元素 - 类选择器 ：以
.开头，根据元素的class属性值选择元素，如.highlight { background-color: yellow; }会选择所有class为highlight的元素 - ID 选择器 ：以
#开头，根据元素的id属性值选择元素，如#main-content { width: 800px; }会选择id为main-content的元素 - 通用选择器 ：
*，选择所有元素，如* { margin: 0; padding: 0; } - 组合选择器
- 后代选择器 ：如
div p选择<div>元素内的所有<p>元素 - 子元素选择器 ：如
div > p选择<div>元素的直接子<p>元素 - 相邻兄弟选择器 ：如
h1 + p选择紧跟在<h1>元素后的<p>元素 - 通用兄弟选择器 ：如
h1 ~ p选择在<h1>元素之后的所有<p>元素
- 后代选择器 ：如
- 属性选择器 ：根据 HTML 元素的属性值选择元素，如
a[href="https://www.example.com"] { color: blue; }选择所有href属性值为https://www.example.com的<a>标签
3. CSS 属性
- 文本属性
color：设置文本颜色font-size：设置字体大小font-family：设置字体族text-align：设置文本对齐方式：left、right、center、justifytext-decoration：设置文本装饰，如下划线（underline）、删除线（line-through）、上方线（overline）、默认无（none）line-height：设置行高
- 盒模型属性
width和height：设置元素的宽度和高度padding：设置元素的内边距，可分别设置上、右、下、左的内边距margin：设置元素的外边距，可分别设置上、右、下、左的外边距border：设置元素边框，可细分为border-style、border-width、border-color等box-sizing：定义盒模型的计算方式，content-box（默认，宽度和高度只包括内容区域）或border-box（宽度和高度包括内容区域、内边距和边框）
- 边框属性
border-style：设置边框样式：solid、dashed、dotted、double、noneborder-width：设置边框宽度border-color：设置边框颜色border-radius：设置边框圆角border：综合设置边框属性
- 背景属性
background-color：设置背景颜色background-image：设置背景图片。background-repeat：设置背景图片的重复方式，如repeat、no-repeat等background-position：设置背景图片的位置background-size：设置背景图片的大小background：综合设置背景属性
- 布局属性
display：设置元素的显示类型：block：块级元素，独占一行inline：行内元素，不独占一行inline-block：行内块级元素，不独占一行，但可以设置宽高和内边距、外边距none：隐藏元素flex：弹性布局grid：网格布局
二、CSS 高级特性
1. CSS 盒模型
- 标准盒模型 ：元素的
width和height只包括内容区域，padding、border和margin在其外部 - 怪异盒模型（IE 盒模型） ：元素的
width和height包括内容区域、padding和border，margin在其外部 - 可以通过
box-sizing属性来设置盒模型，box-sizing: content-box为标准盒模型，box-sizing: border-box为怪异盒模型
2. CSS 浮动
float属性 ：如float: left或float: right用于使元素向左或向右浮动，脱离标准文档流- 清除浮动 ：使用
clear属性，如clear: both来清除浮动对周围元素的影响，防止父元素塌陷
3. CSS 定位
static：默认定位方式，元素按照正常的文档流排列relative：相对定位，元素相对于其正常位置进行偏移，在文档流中仍占据原来的空间absolute：绝对定位，元素相对于最近的已定位祖先元素（position不是static的元素）进行定位，脱离标准文档流fixed：固定定位，元素相对于浏览器窗口进行定位，脱离标准文档流sticky：粘性定位，元素在滚动过程中根据位置变化表现为相对定位和固定定位的结合
4. CSS 弹性盒模型（Flexbox）
- 使用方法 ：将容器设置为弹性容器，
display: flex - 弹性容器的属性
flex-direction：设置主轴方向，如row、row-reverse、column、column-reversejustify-content：设置主轴上子元素的对齐方式，如flex-start、flex-end、center、space-between、space-aroundalign-items：设置交叉轴上子元素的对齐方式，如flex-start、flex-end、center、stretch、baseline
- 弹性子元素的属性
flex-grow：设置子元素的增长因子flex-shrink：设置子元素的收缩因子flex-basis：设置子元素的初始大小
5. CSS 网格布局（Grid）
- 使用方法 ：将容器设置为网格容器，
display: grid - 网格容器的属性
grid-template-columns：定义列的大小，如grid-template-columns: 100px 200px auto;grid-template-rows：定义行的大小grid-gap：设置网格间隙
- 网格项的属性
grid-column-start、grid-column-end、grid-row-start、grid-row-end：用于指定网格项在网格中的位置
以下未正式学习，网络搜索得来
6. CSS 动画与过渡
- 过渡（Transition）
transition-property：指定应用过渡效果的 CSS 属性。transition-duration：指定过渡效果的持续时间。transition-timing-function：指定过渡效果的时间函数，如ease、linear、ease-in、ease-out、ease-in-out。transition-delay：指定过渡效果的延迟时间。transition：综合设置过渡属性。
- 动画（Animation）
@keyframes：定义动画的关键帧，指定在动画过程中元素的样式变化。animation-name：指定动画的名称，对应@keyframes中定义的动画。animation-duration：指定动画的持续时间。animation-timing-function：指定动画的时间函数。animation-delay：指定动画的延迟时间。animation-iteration-count：指定动画的播放次数，如infinite表示无限次播放。animation-direction：指定动画的播放方向，如normal、reverse、alternate、alternate-reverse。animation-play-state：指定动画的播放状态，如running、paused。animation：综合设置动画属性。
7. CSS 响应式设计
- 媒体查询（Media Query）
- 使用
@media查询不同的设备类型和屏幕特征，如屏幕宽度、高度、分辨率等，为不同的设备应用不同的 CSS 样式。 - 常见的媒体查询条件：
max-width：最大屏幕宽度。min-width：最小屏幕宽度。orientation：屏幕方向，portrait（竖屏）或landscape（横屏）。
- 使用
- 响应式布局技巧
- 使用百分比宽度：为元素设置百分比宽度，使其在不同屏幕尺寸下自动调整大小。
- 使用弹性布局（Flexbox）：通过
display: flex和相关属性实现灵活的布局。 - 使用网格布局（Grid）：通过
display: grid和相关属性创建网格布局。 - 使用图片的响应式处理：为图片设置
max-width: 100%;和height: auto;，使其在不同屏幕尺寸下自动调整大小并保持比例。
示例：
1 |
|
1 | /* 全局样式 */ |