HTML5 + CSS3 基础知识梳理

HTML5和CSS3是现代网页设计和开发的核心技术。以下是HTML5和CSS3的基础知识点：

HTML5:

• 新的语义元素：<header>, <nav>, <section>, <article>, <aside>, <footer>。
• 表单控件增强：日期、时间、电话、邮件、URL、范围、数字输入。
• 媒体回放：<video> 和 <audio> 元素。
• Canvas绘图：绘制图形、图表和动画。
• 地理定位API。
• 离线应用程序缓存。
• 存储机制：localStorage和sessionStorage。

CSS3:

• 边框、阴影、圆角。
• 渐变：线性、径向。
• 字体 @font-face。
• 转换：2D转换。
• 动画、变换。
• 多列布局。
• 多媒体查询。
• 盒模型：宽度、高度、边距、填充。

示例代码：

HTML5:

<header>
  <h1>我的网站</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</nav>
<section id="home">
  <h2>欢迎来到主页</h2>
  <p>这里是主页内容...</p>
</section>
<footer>
  <p>版权所有 &copy; 2023</p>
</footer>

CSS3:

body {
  background-color: #f2f2f2;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #333;
  color: #fff;
  padding: 1em;
}
 
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
nav li {
  display: inline;
  margin-right: 10px;
}
 
nav a {
  text-decoration: none;
  color: #fff;
}
 
section {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
}
 
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}

这个示例展示了HTML5和CSS3的基本用法，包括语义元素、媒体元素、布局和样式。