javaweb———html

我才开始学javaweb（重点不在这）可能学的比较慢，勿说

HTML 基础结构

HTML 文档的基本结构包含 <!DOCTYPE html> 声明、<html> 根元素、<head> 头部和 <body> 主体部分。<head> 中包含页面元信息，如标题、字符编码和视口设置。<body> 用于放置页面可见内容。

html 复制代码

<!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> 用于换行和水平分隔线。

html 复制代码

<h1>一级标题</h1>
<p>这是一个段落 <strong>加粗文本</strong> 和 <em>斜体文本</em>。</p>
<span>行内文本</span>
<br>
<hr>

特殊字符

HTML 使用实体代码显示特殊字符，如   表示空格，> 和 < 分别代表 > 和 <。

html 复制代码

<p>使用 < 和 > 表示尖括号。</p>

布局元素

块级元素如 <div>、<section> 和 <article> 独占一行，常用于页面布局。行内元素如 <span> 和 <a> 仅占用必要宽度。

html 复制代码

<div>块级容器</div>
<section>文档章节</section>
<span>行内容器</span>
<a href="#">超链接</a>

超链接

<a> 标签的 href 属性指定链接地址，target 控制打开方式（_self 为当前窗口，_blank 为新窗口）。

html 复制代码

<a href="https://example.com" target="_blank">示例链接</a>

表格

表格由 <table> 定义，<tr> 为行，<td> 为单元格，<th> 为表头。<caption> 添加表格标题。

html 复制代码

<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）。表单项包括文本框、单选/复选框、下拉列表等。

html 复制代码

<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 属性显示播放控件。

html 复制代码

<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属性设置大小。
css 复制代码
```
div {
  width: 200px;
  height: 100px;
}
```
内边距（Padding）

内容区与边框之间的透明区域，控制元素内部空间。
css 复制代码
```
div {
  padding: 10px; /* 统一设置 */
  padding-top: 5px; /* 单独设置 */
}
```
边框（Border）

围绕内边距和内容的边界线，可设置样式、宽度和颜色。
css 复制代码
```
div {
  border: 1px solid #000; /* 简写 */
  border-radius: 5px; /* 圆角 */
}
```
外边距（Margin）

盒子与其他元素之间的透明区域，控制外部间距。
css 复制代码
```
div {
  margin: 20px; /* 统一设置 */
  margin-left: auto; /* 水平居中 */
}
```

标准模型与怪异模型

标准盒子模型（content-box）
width和height仅定义内容区大小，总宽度需加上padding和border。
css 复制代码
```
div {
  box-sizing: content-box; /* 默认值 */
}
```
总宽度公式：

$总宽度 = width + padding-left + padding-right + border-left + border-right$
怪异盒子模型（border-box）
width和height包含内容、内边距和边框，布局计算更直观。
css 复制代码
```
div {
  box-sizing: border-box;
}
```
总宽度公式：总宽度 = width（已包含 padding 和 border ）

实际应用技巧

水平居中 ：通过margin: 0 auto实现块级元素居中。
外边距合并 ：相邻垂直外边距会合并为较大值，可通过overflow或padding避免。
负外边距：可调整元素位置或实现重叠效果，但需谨慎使用。

调试工具

浏览器开发者工具（如Chrome DevTools）的"Elements"面板可直观查看盒子模型各部分尺寸，辅助调试布局问题。