标题
高频 HTML 代码片段和高频 CSS 代码片段
逍遥 - 01月06日 20:59
12℃ 0
内容
1.HTML5 标准基础骨架（所有页面必备）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 适配移动端 ，设置视口 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> <!-- 引入外部CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 页面内容 --> <header>页面头部</header> <main>页面主体</main> <footer>页面底部</footer> <!-- 引入外部JS（放在body末尾 ，避免阻塞渲染） --> <script src="script.js"></script> </body> </html>
2. 常用语义化标签（替代 div，提升 SEO 和可读性）
<!-- 页面结构类 --> <header>头部（导航、logo）</header> <nav>导航栏</nav> <main>主体内容（唯一）</main> <section>文档中的一个章节/区块</section> <article>独立的文章/内容（如博客 、**）</article> <aside>侧边栏（相关推荐 、广告）</aside> <footer>底部（版权、联系方式）</footer> <!-- 文本类 --> <mark>高亮文本</mark> <time datetime="2026-01-06">2026年1月6日</time> <abbr title="HyperText Markup Language">HTML</abbr> <!-- 缩写 -->
3. 常用表单控件（登录 / 注册 / 搜索场景）
<form action="/submit" method="post"> <!-- 文本输入框 --> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> </div> <!-- 密码框 --> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码" required> </div> <!-- 单选框 --> <div> <label><input type="radio" name="gender" value="male" checked> 男</label> <label><input type="radio" name="gender" value="female"> 女</label> </div> <!-- 复选框 --> <div> <label><input type="checkbox" name="agree" required> 同意用户协议</label> </div> <!-- 下拉选择框 --> <div> <label for="city">城市：</label> <select id="city" name="city"> <option value="">请选择</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> </select> </div> <!-- 提交/重置按钮 --> <button type="submit">提交</button> <button type="reset">重置</button> </form>
4. 多媒体嵌入（图片 / 视频 / 音频）
<!-- 响应式图片（适配不同屏幕） --> <img src="image.jpg" alt="图片描述" width="100%" loading="lazy"> <!-- loading="lazy" 懒加载 --> <!-- 视频（带控制栏 ，自动播放静音） --> <video src="video.mp4" controls autoplay muted loop width="100%"> 您的浏览器不支持视频播放 </video> <!-- 音频 --> <audio src="audio.mp3" controls> 您的浏览器不支持音频播放 </audio>
二 、高频 CSS 代码片段
1. CSS 重置样式（解决浏览器默认样式差异 ，必加）
/* 精简版Normalize.css，消除默认边距 、统一盒模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 宽高包含内边距和边框 */
}
/* 清除列表默认样式 */
ul, ol {
list-style: none;
}
/* 清除链接默认样式 */
a {
text-decoration: none;
color: inherit;
}
/* 统一表单元素样式 */
input, button, select {
font: inherit; /* 继承父元素字体 */
border: none;
outline: none;
}2. 万能居中布局（高频！）
/* 方法1：Flex实现水平+垂直居中（最推荐） */
.container {
width: 400px;
height: 300px;
border: 1px solid #ccc;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 方法2：定位+transform（适配旧浏览器） */
.container {
position: relative;
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
.center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 仅水平居中（文本/行内元素） */
.text-center {
text-align: center;
}
/* 仅水平居中（块级元素） */
.block-center {
width: 200px;
margin: 0 auto;
}3. Flex 弹性布局（现代布局核心，适配性强）
/* 常用导航栏布局（两端对齐） */
.nav {
display: flex;
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
padding: 0 20px;
height: 60px;
background: #333;
color: #fff;
}
.nav .logo {
font-size: 20px;
}
.nav .menu {
display: flex;
gap: 20px; /* 子元素间距（替代margin） */
}
/* 等分列布局（适配多列） */
.row {
display: flex;
width: 100%;
}
.col {
flex: 1; /* 等分宽度 */
padding: 10px;
border: 1px solid #eee;
}4. 响应式布局（适配移动端 / PC 端）
/* 基础样式（PC端） */
.container {
width: 1200px;
margin: 0 auto;
}
/* 平板端（768px-1200px） */
@media (max-width: 1200px) {
.container {
width: 90%;
}
}
/* 移动端（≤768px） */
@media (max-width: 768px) {
/* 导航栏改为垂直排列 */
.nav .menu {
flex-direction: column;
}
/* 等分列改为垂直排列 */
.row {
flex-direction: column;
}
}
/* 适配Retina屏的1px边框 */
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 1px;
background: #eee;
transform: scale(0.5);
transform-origin: left bottom;
}5. 常用视觉样式（提升页面美观度）
/* 圆角+阴影（卡片/按钮） */
.card {
border-radius: 8px; /* 圆角 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影（x轴偏移、y轴偏移、模糊 、颜色） */
padding: 20px;
margin: 10px;
}
/* 渐变背景 */
.gradient-bg {
background: linear-gradient(to right, #4facfe, #00f2fe); /* 从左到右渐变 */
color: #fff;
padding: 20px;
}
/* 文字截断（单行/多行） */
/* 单行截断 */
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行截断（适配webkit内核） */
.text-ellipsis-multi {
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示3行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 按钮样式（通用） */
.btn {
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s; /* 过渡动画 */
}
.btn-primary {
background: #007bff;
color: #fff;
}
.btn-primary:hover {
background: #0056b3;
}6. 清除浮动（解决父元素高度塌陷）
/* 方法1：伪元素清除（最常用） */
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 使用示例 */
.parent {
border: 1px solid #ccc;
}
.parent.clearfix {
/* 给父元素加这个类即可 */
}
.child {
float: left;
width: 100px;
height: 100px;
background: #eee;
margin: 10px;
}