L的极客工坊

Appearance

HTML5 & CSS3基础 ​

HTML5基础 ​

语义化标签 ​

HTML5引入了语义化标签，使网页结构更加清晰：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义化页面</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <section>
                <h1>文章标题</h1>
                <p>文章内容...</p>
            </section>
        </article>
        
        <aside>
            <h2>侧边栏</h2>
            <p>相关内容...</p>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 版权所有</p>
    </footer>
</body>
</html>

表单增强 ​

HTML5为表单添加了新的输入类型和属性：

html
<form>
    <input type="email" placeholder="邮箱地址" required>
    <input type="tel" placeholder="电话号码" pattern="[0-9]{11}">
    <input type="date" name="birthday">
    <input type="color" name="favorite-color">
    <input type="range" min="0" max="100" value="50">
    <input type="file" accept="image/*" multiple>
    <textarea placeholder="请输入内容"></textarea>
    <button type="submit">提交</button>
</form>

多媒体支持 ​

HTML5原生支持音频和视频：

html
<!-- 音频 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

<!-- 视频 -->
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

CSS3基础 ​

选择器 ​

CSS3增强了选择器的功能：

css
/* 属性选择器 */
input[type="text"] {
    border: 1px solid #ccc;
}

/* 伪类选择器 */
a:hover {
    color: red;
}

/* 伪元素选择器 */
p::before {
    content: "★ ";
}

/* 结构选择器 */
li:nth-child(odd) {
    background-color: #f0f0f0;
}

盒模型 ​

CSS3的盒模型包括内容、内边距、边框和外边距：

css
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    box-sizing: border-box; /* 包含边框和内边距 */
}

布局技术 ​

Flexbox布局 ​

css
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    flex: 1;
    margin: 10px;
}

Grid布局 ​

css
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    grid-template-rows: auto;
}

.grid-item {
    padding: 20px;
    background-color: #f0f0f0;
}

动画和过渡 ​

过渡效果 ​

css
.button {
    background-color: blue;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: red;
    transform: scale(1.1);
}

关键帧动画 ​

css
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-element {
    animation: slideIn 1s ease-out;
}

响应式设计 ​

媒体查询 ​

css
/* 移动设备 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* 平板设备 */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

视口单位 ​

css
.responsive-element {
    width: 90vw; /* 视口宽度的90% */
    height: 50vh; /* 视口高度的50% */
    font-size: 4vw; /* 响应式字体大小 */
}

现代CSS特性 ​

变量 ​

css
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --border-radius: 4px;
}

.button {
    background-color: var(--primary-color);
    border-radius: var(--border-radius);
}

渐变 ​

css
.gradient-bg {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

.radial-gradient {
    background: radial-gradient(circle, #ff6b6b, #4ecdc4);
}

阴影和滤镜 ​

css
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    filter: blur(1px);
}

.image {
    filter: grayscale(50%) brightness(1.2);
}

最佳实践 ​

性能优化 ​

  1. CSS压缩: 使用工具压缩CSS文件
  2. 选择器优化: 避免过度嵌套的选择器
  3. 避免重排重绘: 合理使用transform和opacity
  4. CSS预处理器: 使用Sass、Less等提高开发效率

兼容性处理 ​

  1. 前缀处理: 使用Autoprefixer自动添加浏览器前缀
  2. 渐进增强: 为不支持新特性的浏览器提供降级方案
  3. 特性检测: 使用@supports检测CSS特性支持

代码组织 ​

  1. 模块化: 按功能组织CSS文件
  2. 命名规范: 使用BEM等命名方法论
  3. 注释: 为复杂样式添加注释说明