<Java Web>1 HTML 和 CSS

本文最后更新于：2023年6月27日 上午

1 HTML 和 CSS

网页由三部分组成：内容（结构）、表现、行为

内容：在页面中可以看到的数据称为内容。一般使用 HTML 技术来展示

表现：内容在页面上的展示形式，如布局、颜色、大小等。一般使用 CSS 技术实现。

行为：页面中元素与输入设备交互的相应。一般使用 JavaScript 技术实现。

1.1 HTML

HTML 即 Hyper Text Markup Language（超文本标记语言）

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件。通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

Java 文件需要编译后才能运行，但 HTML 文件可以直接由浏览器运行。

HTML 的代码注释：

<!-- 这是一段注释 -->

编写规范：

<!DOCTYPE html>					<!-- [1] -->
<html lang="en">				<!-- [2] -->
    <head>						<!-- [3] -->
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>						<!-- [4] -->
        Hello <b>World</b>
    </body>
</html>

  1. 约束、声明：

    <!DOCTYPE html>

  2. HTML 标签：

    <html lang="en">		<!-- lang="en" 即语言是英文。中文的场合 lang="zh_CN" -->
    ...
</html>

    <html> 表示 HTML 的开始。</html> 表示 HTML 的结束。

    HTML 标签中一般包含有 2 部分。分别是 head 和 body

  3. head 标签：

    <head>
    <meta charset="UTF-8">	<!-- meta charset="UTF-8" 即使用 utf8 字符集 -->
    <title>标题</title>
</head>

    <head> 表示头部信息的开始。</head> 表示头部信息的结束

    头部信息一般包含 3 部分内容：

    1. title 标签
    2. css 样式
    3. js 代码

  4. body 标签：

    <body>
    Hello <b>World</b>
</body>

    body 标签是整个 HTML 页面显示的主体内容

1.1.1 HTML 标签

标签的格式：

<标签名>封装的数据</标签名>

  • 标签名的大小写不敏感。

    比如：<b>bold</b>（bold）和 <B>bold</B>（bold）效果相同

  • 标签分为两种：

    • 单标签：<标签名/>

      也称作自结束标签。如 <hr/>（水平线）

    • 双标签：<标签名>封装的数据</标签名>

      其中 <标签名> 为开始标签，</标签名> 为结束标签

  • 标签拥有自己的属性。属性分为 2 种：

    • 基本属性。可以修改简单的样式效果

      比如：<a bgcolor="blue">RED</a>"（RED）

    • 事件属性。可以直接设置事件响应后的代码

      比如：<b onclick="alert('Clicked')">CLICK</b>（CLICK）

标签的语法：

有时错误的语法也能正确显示，这是因为浏览器会尽可能修复那些错误的标签。听我说谢谢你，因为有你……

  • 标签不能交叉嵌套
  • 双标签必须正确闭合
  • 属性必须有值。属性值必须加引号
  • 注释不能嵌套

1.1.2 常用的标签

#font 标签：

<font color="#FF7CAA" face="华文行楷" size="6">font 标签</font>

font 标签

可选的属性：

  • color：颜色。可以是颜色名或十六进制色号
  • face：字体
  • size：字号

#特殊字符：

  • <br/>：换行符

  • <hr/>：水平线

  • &lt;：<

    &gt;：>

  • &nbsp：空格

    通常情况下，HTML 会将连续的空格压缩成 1 个空格。使用该字符以实现多个连续空格

#标题标签：

HTML 提供了 6 级标题标签

<h1>H1</h1>
<h2 align="left">H2</h2>
<h3 align="right">H3</h3>
<h4 align="center">H4</h4>
<h5>H5</h5>
<h6>H6</h6>

可选属性：

  • align：对齐属性。left（左对齐，默认）、right（右对齐）、center（居中对齐）

#超链接：

<a href="https://***********">通道 A</a>
<a href="https://***********" targrt="_self">通道 B</a>
<a href="https://***********" targrt="_blank">通道 C</a>

通道 A
通道 B
通道 C

可选属性：

  • taget：跳转方式。_self（当前页面跳转，默认），_blank（打开新页面跳转）

#列表标签：

<ul>
    <li>刻晴</li>
</ul>
<ol>
    <li>胡桃</li>
    <li type="none">甘雨</li>
</ol>
  • 刻晴
  1. 胡桃
  2. 甘雨

其中，<ul> 是无序列表（unordered list），<ol> 是有序列表（ordered list），<li> 是列表项

可选属性：

  • type：列表样式。none 的场合不显示列表符号

#图片标签：

<img src="*********" width="471" height="754" alt="甘雨"/>
甘雨

可选属性：

  • src：图片路径

    可以是绝对路径（http://ip:port/工程名/资源路径）或相对路径（../img/1.jpg）

  • width：图片宽度

    height：图片高度

  • border：图片边框宽度

  • alt：图片加载失败时，使用指定文本内容替代显示

#表格标签：

<table border="5" width="150" height="150">
    <tr ceilspacing="5">
		<td>1.1</td>
		<th>1.2</th>
	    <th>1.3</th>
	</tr>
    <tr align="right">
        <td>2.1</td>
        <td>2.2</td>
        <td rowspan="2">2.3</td>
    </tr>
    <tr>
        <td colspan="2">3.1</td>
    </tr>
</table>
1.1 1.2 1.3
2.1 2.2 2.3
3.1

其中 <table> 是表格标签，<tr> 为行标签，<th> 为表头标签，<td> 为单元格标签

可选属性：

  • width：表格宽度

    height：表格高度

  • border：表格边框宽度

  • cellspacing：单元格间距

  • colspan：单元格合并（行）

    rowspan：单元格合并（列）

    那个合并的场合，被合并的单元格需要删除

#框架标签：

<iframe src="********" width="600" height="420" name="tar">
</iframe>
<table>
    <tr>
    	<td><a href="********" target="tar">按钮A</a></td>
        <td><a href="********" target="tar">按钮B</a></td>
        <td><a href="********" target="tar">按钮C</a></td>
        <td><a href="********" target="tar">按钮D</a></td>
        <td><a href="********" target="tar">按钮E</a></td>
    </tr>
</table>
按钮A 按钮B 按钮C 按钮D 按钮E 复原

iframe 标签和 a 标签组合使用的步骤：

  1. 在 iframe 标签中使用 name 属性定义一个名称
  2. 让 a 标签的 target 属性指向 iframe 声明的 name

#表单标签：

表单就是 HTML 页面中，用来收集用户信息的所有元素的集合。收集后会把信息发送给服务器。

<form action="******" method="get">
    一个框：<input type="text" value="ᓚᘏᗢ" size="50"/><br/>
    又一个框：<input type="password"/><br/>
    双一个框：<input type="radio" name="t"/>喵 <input type="radio" name="t" checked="checked"/>汪<br/>
    叒一个框：<input type="checkbox"/>☆ <input type="checkbox"/>★<br/>
    叕一个框：<select>
    <option>-</option>
    <option>ฅʕ•̫͡•ʔฅ</option>
    </select><br/>
    叒一个框：<textarea rows="1" cols="15">༼ つ ◕_◕ ༽つ</textarea><br/>
    双一个框：<input type="reset"/><br/>
    又一个框：<input type="submit"/><br/>
    一个框：<input type="file"/><br/>
    最后一个框：<input type="hidden"/>
</form>
一个框：
又一个框：
双一个框：喵 汪
叒一个框：☆ ★
叕一个框：
叒一个框：
双一个框：
又一个框：
一个框：
最后一个框：
  • input type=“text”：文本输入框。value 设置初始内容
  • input type=“password”：密码输入框。value 设置初始内容
  • input type=“radio”：单选框。通过 name 进行分组，checked 变更初始状态
  • input type=“checkbox”：复选框。checked 变更初始状态
  • select：下拉列表框。option 是其中选项。selected 设置默认选中
  • textarea：多行文本输入框。rows 显示行数，cols 是显示列数
  • input type=“reset”：重置按钮。value 设置按钮文字
  • input type=“submit”：提交按钮。value 设置按钮文字
  • input type=“file”：文件上传按钮。
  • input type=“hidden”：隐藏框

<form> 的可选属性有：

  • action：这些信息的接收地址

    要发送信息，必须给每个输入框添加 name，给选择框添加 value

  • method：信息的发送方式

    get 的场合，传送 URL 中的表单内容，格式 URL?name=value&name=value...。该方法不安全，且有长度限制（100 字符）

    post 的场合，传送 request 主体中的表单内容。

#其他标签：

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>段落标签1</p>
<p>段落标签2</p>
div标签1
div标签2

span标签1
span标签2

段落标签1

段落标签2

  • <div> 标签，默认独占 1 行
  • <span> 标签，其长度等于封装数据的长度
  • <p> 标签，默认在段落前方或后方各空一行，除非已有空行

1.2 CSS 技术

CSS（层叠样式表单）是用于增强网页样式，并允许将信息与网页内容分离的一种标记性语言

语法：

选择器 {
    属性:值;		/*注释内容*/
}
  • 选择器：根据选择器决定受 CSS 样式影响的 HTML 元素（标签）
  • 属性：要改变的样式名。每个属性有一个值，被 : 分开
  • 多个声明：多个声明之间以 ; 分开。最后一条声明最后可以不加分号，但还是建议加上

1.2.1 CSS 与 HTML 的组合

  • 方法 1：行内样式

    在每个标签上添加 style 属性

    <audio controls="controls" src="*********" style="background-color: transparent">audio</audio>

    这样做的缺点：可读性、复用性差

  • 方法 2：内嵌样式

    在 head 标签中，使用 style 标签定义所需 CSS 样式

    注意 style 标签内为 CSS 格式，其中注释也要用 CSS 格式书写

    <head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style  type="text/css">
        div {
            border: 4px double #FFA0A0;
            background-color: #30AFD0;
        }
    </style>
</head>
<body>
    <div>测试内嵌样式</div>
</body>
    测试内嵌样式

    这样做的缺点：只能在同一页面内复用代码，并且不便于维护

  • 方法 3：外部样式

    把 CSS 写成单独的 CSS 文件，再通过 link 标签引入

    1.css：

    span {
    border: 2px solid #aFAfAf;
    background-color: #0DA0FF;
    color: #FFFFFF;
    font-size: 20px;
}

    test.html：

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    <span><b>测试外部样式</b></span>
</body>

    测试外部样式

以上三种方法的优先级为：行内样式 > 内嵌样式 > 外部样式

1.2.2 CSS 选择器

#标签名选择器：

可以选择哪些标签被动的使用该样式

标签名 {
    属性: 值;
}

这个场合，那些标签名变成选择器指定的样式。

#id 选择器：

可以让我们通过 id 属性选择性地使用样式

#id属性值 {
    属性: 值;
}

这个场合，那些持有相应 id 属性的标签变成选择器指定的样式

/* CSS 文件 */
#id19 {
    color: #00DFD0;
    font-size: 20px;
}
<!-- HTML 文件 -->
<span id="id19">测试 id 选择器</span>

测试 id 选择器

#class 选择器：

能通过 class 属性有效地选择性使用样式

.class属性值 {
    属性: 值;
}

这个场合，那些持有相应 class 属性的标签变成选择器指定的样式

/* CSS 文件 */
.class35 {
    border: 2px solid green;
}
<!-- HTML 文件 -->
<span class="class35">测试 class 选择器</span>

测试 class 选择器

#组合选择器：

选择器1, 选择器2, 选择器3 {
    属性: 值;
}

这个场合，符合至少一个选择器的标签变成指定样式

1.2.3 选择器常用样式

  • 颜色：color

    背景颜色：background-color

    值可以是：颜色名（white）、RGB 值（rgb(255, 255, 255)）、十六进制表示值（#FFFFFF）

  • 宽度：width

    高度：height

    字体大小：font-size

    值可以是：像素值（15px）、百分比值（20%）

  • 边框：border

    值有三部分，以空格分隔。分别是：宽度、样式、颜色

    其中，样式有：none（默认值无边框）、hidden（隐藏边框，IE 不支持）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（3D 凹槽）、ridge（3D 凸槽）、inset（3D 凹边）、outset（3D 凸边）

    这个样式值的数量会影响每条边的样式表现

  • DIV 居中：margin-left、margin-right

    值为 auto。配置一个的场合会远离那个方向对齐。两个都配置时居中

  • 文本对齐方式：text-align

    可以是 center、right、left、start、end 等

  • 超链接去除下划线：text-decoration: none

  • 表格边框合并：border-collapse: collapse

  • 列表去除修饰：list-style: none

Java Web
#笔记 #Java Web
<Java Web>1 HTML 和 CSS
https://i-melody.github.io/2022/05/23/Java/Java Web/1 HTML 和 CSS/
作者
Melody
发布于
2022年5月23日
许可协议