javaweb———html

发布于:2025-07-09 ⋅ 阅读:(19) ⋅ 点赞:(0)

我才开始学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 使用实体代码显示特殊字符,如 &nbsp; 表示空格,&gt;&lt; 分别代表 ><

<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元素被看作一个矩形盒子,包含内容、内边距、边框和外边距四部分。

盒子模型的组成部分
  1. 内容区(Content)
    显示元素的文本、图片等实际内容,可通过widthheight属性设置大小。

    div {
      width: 200px;
      height: 100px;
    }
    

  2. 内边距(Padding)
    内容区与边框之间的透明区域,控制元素内部空间。

    div {
      padding: 10px; /* 统一设置 */
      padding-top: 5px; /* 单独设置 */
    }
    

  3. 边框(Border)
    围绕内边距和内容的边界线,可设置样式、宽度和颜色。

    div {
      border: 1px solid #000; /* 简写 */
      border-radius: 5px; /* 圆角 */
    }
    

  4. 外边距(Margin)
    盒子与其他元素之间的透明区域,控制外部间距。

    div {
      margin: 20px; /* 统一设置 */
      margin-left: auto; /* 水平居中 */
    }
    

标准模型与怪异模型
  1. 标准盒子模型(content-box)
    widthheight仅定义内容区大小,总宽度需加上paddingborder

    div {
      box-sizing: content-box; /* 默认值 */
    }
    

    总宽度公式:
    $总宽度 = width + padding-left + padding-right + border-left + border-right$

  2. 怪异盒子模型(border-box)
    widthheight包含内容、内边距和边框,布局计算更直观。

    div {
      box-sizing: border-box;
    }
    

    总宽度公式:总宽度 = width(已包含 padding 和 border )

实际应用技巧
  • 水平居中:通过margin: 0 auto实现块级元素居中。
  • 外边距合并:相邻垂直外边距会合并为较大值,可通过overflowpadding避免。
  • 负外边距:可调整元素位置或实现重叠效果,但需谨慎使用。
调试工具

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


网站公告

今日签到

点亮在社区的每一天
去签到