# HTML+CSS入门知识点有哪些
## 一、HTML基础篇
### 1. HTML文档结构
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
<!DOCTYPE> 声明文档类型<html> 根元素，lang属性定义语言<head> 包含元数据和引用的外部资源<body> 包含所有可见内容<h1>~<h6> 标题标签<p> 段落标签<span> 行内容器<br> 换行<hr> 水平线<img src="url" alt="描述"> 图片<audio>/<video> 音视频<iframe> 内嵌框架<ul> 无序列表<ol> 有序列表<li> 列表项<table border="1">
<tr>
<th>表头</th>
<td>单元格</td>
</tr>
</table>
<form action="/submit" method="post">
<input type="text" name="username">
<button type="submit">提交</button>
</form>
<!-- 内联样式 -->
<div style="color:red;"></div>
<!-- 内部样式表 -->
<style>
body { background: #fff; }
</style>
<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">
| 选择器类型 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | p |
选择所有 标签 |
| 类选择器 | .class |
选择class=“class”的元素 |
| ID选择器 | #id |
选择id=“id”的元素 |
| 通配符 | * |
选择所有元素 |
div {
width: 200px; /* 内容宽度 */
padding: 20px; /* 内边距 */
border: 1px solid; /* 边框 */
margin: 10px; /* 外边距 */
box-sizing: border-box; /* 切换盒模型计算方式 */
}
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 100px;
}
.container {
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
}
.item {
flex: 1; /* 弹性比例 */
}
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.item {
grid-column: span 2;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}
vw/vh 视口宽高的1%rem 相对于根元素字体大小em 相对于当前元素字体大小<meta name="viewport" content="width=device-width, initial-scale=1.0">
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slide 1s forwards;
}
.gradient {
background: linear-gradient(to right, red, yellow);
}
.shadow {
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
text-shadow: 1px 1px 2px #000;
}
.card {
transform: rotate(15deg) perspective(500px);
transform-style: preserve-3d;
}
总结：HTML+CSS作为前端开发的基石，需要掌握：
1. 语义化的HTML结构
2. 精准的CSS选择器使用
3. 灵活的布局方案
4. 响应式设计思维
5. 持续的实践与创新
建议通过实际项目练习巩固这些知识点，从简单的个人主页开始，逐步挑战更复杂的布局效果。 “`
注：本文约1850字，包含了HTML和CSS的核心知识点，采用Markdown格式编写，可直接用于技术博客或学习笔记。实际使用时可根据需要调整图片链接和代码示例。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
