我才开始学javaweb（重点不在这）可能学的比较慢，勿说
HTML 基础结构
HTML 文档的基本结构包含 <!DOCTYPE html> 声明、<html> 根元素、<head> 头部和 <body> 主体部分。<head> 中包含页面元信息，如标题、字符编码和视口设置。<body> 用于放置页面可见内容。
<!DOCTYPE html>
<html>
<head><title>页面标题</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><!-- 页面内容 -->
</body>
</html>
排版与格式
<h1> 到 <h6> 用于定义标题，数字越小级别越高。<p> 定义段落，<span> 为行内文本容器，<strong> 和 <em> 分别用于加粗和斜体文本。<br> 和 <hr> 用于换行和水平分隔线。
<h1>一级标题</h1>
<p>这是一个段落 <strong>加粗文本</strong> 和 <em>斜体文本</em>。</p>
<span>行内文本</span>
<br>
<hr>
特殊字符
HTML 使用实体代码显示特殊字符，如 表示空格，> 和 < 分别代表 > 和 <。
<p>使用 < 和 > 表示尖括号。</p>
布局元素
块级元素如 <div>、<section> 和 <article> 独占一行，常用于页面布局。行内元素如 <span> 和 <a> 仅占用必要宽度。
<div>块级容器</div>
<section>文档章节</section>
<span>行内容器</span>
<a href="#">超链接</a>
超链接
<a> 标签的 href 属性指定链接地址，target 控制打开方式（_self 为当前窗口，_blank 为新窗口）。
<a href="https://example.com" target="_blank">示例链接</a>
表格
表格由 <table> 定义，<tr> 为行，<td> 为单元格，<th> 为表头。<caption> 添加表格标题。
<table border="1"><caption>表格标题</caption><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
</table>
表单
<form> 用于收集用户输入，action 指定提交地址，method 定义 HTTP 方法（GET 或 POST）。表单项包括文本框、单选/复选框、下拉列表等。
<form action="/submit" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username"><input type="submit" value="提交">
</form>
多媒体
<img> 嵌入图片，<audio> 和 <video> 分别用于音频和视频，controls 属性显示播放控件。
<img src="image.jpg" alt="图片描述">
<audio src="music.mp3" controls></audio>
<video src="video.mp4" controls width="400"></video>
CSS 基础语法
CSS（层叠样式表）由选择器和声明块组成。选择器用于定位 HTML 元素，声明块包含属性和值，用于定义样式。
selector {property: value;
}
选择器类型
元素选择器：直接使用 HTML 标签名作为选择器。
p {color: blue;
}
类选择器：以点（.）开头，匹配 class 属性相同的元素。
.highlight {background-color: yellow;
}
ID 选择器：以井号（#）开头，匹配 id 属性相同的元素。
#header {font-size: 24px;
}
属性选择器（*了解）：根据元素的属性及属性值来选择元素。
input[type="text"] {border: 1px solid gray;
}
伪类选择器（*了解）：用于定义元素的特殊状态。
a:hover {color: red;
}
伪元素选择器（*了解）：用于选择元素的特定部分。
p::first-letter {font-size: 150%;
}
盒模型
CSS 盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
.box {width: 200px;padding: 20px;border: 5px solid black;margin: 10px;
}
布局方式
浮动布局：使用 float 属性让元素向左或向右浮动。
.left {float: left;width: 50%;
}
Flex 布局：通过 display: flex 创建弹性容器，子元素可以灵活排列。
.container {display: flex;justify-content: space-between;
}
Grid 布局：通过 display: grid 创建网格布局，适合复杂布局需求。
.grid {display: grid;grid-template-columns: 1fr 1fr 1fr;
}
定位方式
静态定位：默认定位方式，元素遵循正常文档流。
.static {position: static;
}
相对定位：相对于元素原来的位置进行偏移。
.relative {position: relative;top: 10px;left: 20px;
}
绝对定位：相对于最近的已定位祖先元素进行偏移。
.absolute {position: absolute;top: 0;right: 0;
}
固定定位：相对于浏览器窗口进行定位，不随滚动条移动。
.fixed {position: fixed;bottom: 0;left: 0;
}
盒子模型的概念
盒子模型（Box Model）是CSS布局的核心概念，描述每个HTML元素被看作一个矩形盒子，包含内容、内边距、边框和外边距四部分。
盒子模型的组成部分
内容区（Content）
显示元素的文本、图片等实际内容，可通过width和height属性设置大小。div {width: 200px;height: 100px; }内边距（Padding）
内容区与边框之间的透明区域，控制元素内部空间。div {padding: 10px; /* 统一设置 */padding-top: 5px; /* 单独设置 */ }边框（Border）
围绕内边距和内容的边界线，可设置样式、宽度和颜色。div {border: 1px solid #000; /* 简写 */border-radius: 5px; /* 圆角 */ }外边距（Margin）
盒子与其他元素之间的透明区域，控制外部间距。div {margin: 20px; /* 统一设置 */margin-left: auto; /* 水平居中 */ }
标准模型与怪异模型
标准盒子模型（content-box）
width和height仅定义内容区大小，总宽度需加上padding和border。div {box-sizing: content-box; /* 默认值 */ }总宽度公式：
$总宽度 = width + padding-left + padding-right + border-left + border-right$怪异盒子模型（border-box）
width和height包含内容、内边距和边框，布局计算更直观。div {box-sizing: border-box; }总宽度公式：总宽度 = width（已包含 padding 和 border ）
实际应用技巧
- 水平居中：通过
margin: 0 auto实现块级元素居中。 - 外边距合并：相邻垂直外边距会合并为较大值，可通过
overflow或padding避免。 - 负外边距：可调整元素位置或实现重叠效果，但需谨慎使用。
调试工具
浏览器开发者工具（如Chrome DevTools）的“Elements”面板可直观查看盒子模型各部分尺寸，辅助调试布局问题。
