html5新增的内容
ChatGPT 说：
ChatGPT
HTML5 新增了许多新特性和元素，主要集中在语义化、媒体处理、图形支持和 API 增强等方面。以下是一些主要的新增内容：
1. 语义化标签
HTML5 引入了多个语义化标签，使页面结构更加清晰：
<header>：定义页面或区域的头部。<nav>：定义导航链接的区域。<section>：定义文档中的区域或章节。<article>：定义文章内容。<footer>：定义页面或区域的底部。<aside>：定义与页面内容相关的侧边内容。<main>：定义文档的主体部分。
2. 多媒体标签
HTML5 新增了用于嵌入音视频内容的标签：
<audio>：用于音频播放。<video>：用于视频播放。- 支持属性如
controls（控制条）、autoplay（自动播放）、loop（循环播放）等。
3. 图形与图像处理
<canvas>：用于绘制图形，支持 2D 绘图操作，可以通过 JavaScript 绘制图像、图形和处理动画。<svg>：支持使用矢量图形格式（SVG）直接在页面中绘制图像。
4. 表单增强
HTML5 对表单的功能进行了增强，新增了多种表单输入类型：
- 新的输入类型：
email、url、number、date、range、search、color等。 - 属性增强：
required（必填字段）、pattern（正则表达式验证）、placeholder（占位文本）等。 <datalist>：提供可选项列表供用户选择。<output>：用于显示表单的计算结果。
5. 本地存储
HTML5 提供了持久存储机制，支持在客户端存储数据：
localStorage：本地存储，数据没有过期时间，持久保存在浏览器中。sessionStorage：会话存储，数据在会话结束时清除。
6. 地理位置 API
Geolocation API：允许网页获取用户的位置信息。
7. 离线 & 存储
Application Cache（已废弃）：允许页面在离线状态下也能运行。- Service Workers：用于控制缓存和后台同步，结合
PWA提供离线体验。
8. WebSockets
WebSocket API：用于创建持久的双向通信通道，支持实时通讯。
9. 新的 JavaScript API
Drag and Drop API：支持拖放功能。History API：提供对浏览器历史的操作接口，可以无刷新地更改 URL。Web Workers：允许后台线程处理任务，防止主线程阻塞。
10. 文档编辑
contenteditable属性：允许元素内容变为可编辑。designMode：将整个文档设置为可编辑状态。
这些新增内容使 HTML5 更加强大，支持现代 Web 应用的开发需求，如多媒体处理、离线支持和实时通信等。
css3新增的内容
ChatGPT 说：
ChatGPT
CSS3 引入了大量新特性和功能，增强了网页设计的灵活性和表现力。以下是 CSS3 中一些主要的新增内容：
1. 选择器
- 属性选择器：根据元素属性选择，如
[type="text"]。 - 结构性伪类选择器：如
:nth-child(),:nth-of-type(),:last-child等，用于精确选择特定的元素。 - UI 伪类选择器：如
:focus,:enabled,:disabled等，用于表单元素状态选择。 - 其他选择器：如
:not()排除某个选择器的元素，::before,::after用于插入内容。
2. 盒模型
box-sizing：允许使用content-box（默认）或border-box来指定元素的宽度和高度是否包含内边距和边框。
3. 背景和边框
border-radius：使元素具有圆角。border-image：使用图片作为边框。box-shadow：为元素添加阴影效果。- 多背景图像：通过
background-image可以为一个元素定义多个背景图。
4. 颜色和透明度
- RGBA 和 HSLA 颜色模式：支持带透明度的颜色定义（如
rgba(255, 0, 0, 0.5)）。 opacity：定义元素的透明度。
5. 文本效果
text-shadow：为文本添加阴影效果。word-wrap和word-break：控制文字的换行方式。text-overflow：定义当文本溢出容器时的处理方式，如ellipsis省略号效果。
6. 字体
- Web 字体（@font-face） ：允许使用自定义字体，而不必局限于系统字体。
font-size的相对单位：如rem，相对根元素的字体大小。
7. 2D/3D 变换（Transforms）
transform：用于旋转（rotate），缩放（scale），倾斜（skew）和移动（translate）元素。- 2D 变换：如
rotate(),scale(),translate()。 - 3D 变换：如
rotateX(),rotateY(),translateZ()。
8. 过渡（Transitions）
transition：定义元素的过渡效果，比如渐变，平滑地从一个状态到另一个状态。- 例如：
transition: all 0.3s ease-in-out;。
9. 动画（Animations）
@keyframes：定义动画关键帧。animation：创建复杂的 CSS 动画，支持多个属性如持续时间、延迟、循环等。- 例如：
animation: myAnimation 2s infinite;。
10. 弹性盒模型（Flexbox）
display: flex：用于创建灵活的布局模型，轻松实现元素的对齐、分布和排列。- 关键属性如：
justify-content,align-items,flex-direction。
11. 网格布局（Grid Layout）
display: grid：用于创建二维网格布局，能轻松定义行和列的布局方式。- 关键属性如：
grid-template-columns,grid-template-rows,grid-gap。
12. 媒体查询（Media Queries）
@media：根据不同设备的屏幕尺寸、分辨率等条件，应用不同的 CSS 样式，实现响应式设计。- 例如：
@media screen and (max-width: 600px) { ... }。
13. 多列布局（Multi-column Layouts）
column-count：定义文本分成几列。column-gap：定义列与列之间的间距。- 例如：
column-count: 3; column-gap: 20px;。
14. 渐变（Gradients）
- 线性渐变（
linear-gradient） ：实现线性颜色过渡。 - 径向渐变（
radial-gradient） ：实现从中心向外的颜色渐变。 - 例如：
background: linear-gradient(to right, red, yellow);。
15. 弹性（Elasticity）
calc()：允许在 CSS 中进行动态计算，比如width: calc(100% - 50px);。
16. 响应式图片
srcset和sizes：用于根据不同的屏幕分辨率提供不同尺寸的图像。
这些新增特性使得 CSS3 在网页设计中更加强大和灵活，能够创建更复杂的布局、动画效果、响应式设计等。
