本文详细介绍了HTML的基础和进阶内容，包括HTML的结构、块级和内联标签、实体字符、表单元素如a、img、input等，以及CSS的基础知识，如CSS样式、表格样式和表单样式。此外，还讨论了input标签的各种类型及其属性，以及如何创建和使用表格、表单和框架。同时提到了frameset标签的优缺点及其在页面导航中的应用。
欢迎浏览『JavaWeb前端』专栏的其他文章：
二、CSS - 基础
文章目录
一、HTML
<!DOCTYPE html> <!--告诉浏览器网页所使用的文档类型（DOCTYPE）-->
<html> -- 文档的开始标签
<head> -- 文档头的开始标签
<title>标题</title> -- 文档标题，显示的浏览器标题栏中
</head> -- 文档头的结束标签
<body> -- 文档内容的开始标签
内容
</body> -- 文档内容的结束标签
</html> -- 文档的结束标签
<!--注释内容-->
块级标签：
就像标题、段落一样，需要在页面上占据一块的位置的标签
-
<h1>---<h6>标题
-
<p>段落标签（无格式）
-
<div>块标签
-
<pre>用于显示想要格式化显示的文本（代码）
内联标签：
-
<em>/<i>斜体
-
<strong>/<b>黑体
-
<sub>下标
-
<sup>上标
-
<br>换行
-
<hr>水平线
-
<span>普通内联标签
-
<code>标示一段代码
常用实体字符：
-
空格
-
<<
-
> -
&&
-
"“
1 - a 标签：
| 属性 | 属性作用 | 值 |
|---|---|---|
href | 指定超链接目标的 URL | 任何有效文档的相对或绝对 URL / 绝对路径（http/https/mailto/ftp） |
name | 记录页面跳转位置 | 设置页面锚点 top(顶部)/middle(中部) |
target | 指定打开位置 | _blank:新页面打开；_self:当前页面打开；targetname：指定窗口或Frame中打开链接 |
_parent:父窗口中打开；_top:最顶层父窗口中打开； | ||
2 - img标签：
若图片有边框，用
style="borde:0px;"属性去掉边框图片地图
<map>：设置点击图片不同位置，触发不同的连接
| 属性 | 值 | 作用 |
|---|---|---|
alt | alt="无法加载" | 规定图像的替代文本 |
src | src="图片地址" | 规定显示图像的 URL |
height | height=200px | 定义图像的高度 |
width | width=400px | 设置图像的宽度 |
usemap | usemap="#earthmap" | earthmap为<map>标签的name属性值 |
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img alt="earth" src="./stady.jpg" usemap="#earthmap"/>
<map name="earthmap">
<area shape="rect" coords="0,0,20,20" href="baidu" href="https://www.baidu.com" target="_blank">
<area shape="circle" coords="80,80,20" href="google" href="https://www.google.com" target="_blank">
</map>
</body>
</html>
3 - input 标签：
| 属性 | 值 | 作用 |
|---|---|---|
alt | alt="text" | 定义文本 |
type | type=button | 定义可点击按钮 |
type=text | 定义单行的输入字段，用户可在其中输入文本（默认宽度为 20 个字符） | |
type=password | 定义密码字段 | |
type=hidden | 定义隐藏的输入字段 | |
type=radio | 定义单选按钮 | |
type=checkbox | 定义复选框 | |
type=reset | 定义重置按钮，清除表单中的所有数据 | |
type=submit | 定义提交按钮，把表单数据发送到服务器 | |
value | value=" " | 规定 input 元素的值 |
4 - table 表格标签 ：
<table border="1" align="center" cellspacing="7" cellpadding="20">
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td colspan="2">占两列(1-4)</td>
<td >1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
4 - 1 table 标签：
| 属性 | 值 | 作用 |
|---|---|---|
border | 规定表格边框的宽度 | |
width | 规定表格的宽度 | |
cellpadding | 规定单元边沿与其内容之间的空白（单元格内边距） | |
cellspacing | 规定单元格之间的空白（单元格边框的宽度） | |
4 - 2 th，td，tr 标签：
| 标签 | 作用 | 属性 | 值 | 作用 |
|---|---|---|---|---|
<th> | 表头 | |||
<td> | 列 | colspan | colspan=2 | 规定单元格可横跨的列数(占两列) |
rowspan | rowspan=2 | 规定单元格可横跨的行数(占两行) | ||
align | left,right,center | 规定单元格内容的水平对齐方式 | ||
<tr> | 行 | colspan | ||
rowspan | ||||
align |
5 - 表单标签 form：
表单：用来搜集用户信息并提交给服务器
一般按钮要提交表单：JavaScript
<form method="post" >
用户名：<input type="txt" name="username"><br>
密码：<input type="password" name="password"><br>
<a><input type="submit" value="登录"></a>
</form>
5 - 1 form 标签：
| 属性 | 值 | 作用 |
|---|---|---|
method | get | （提交数据的方式）收集少量的用户信息，url长度限制为4KB |
| post | 收集大量用户信息，信息保存在HTTP请求消息的正文，提交后不能使用刷新按钮 | |
action | 地址（form.html） | 提交表单时转到的url地址 |
5 - 2 input 标签：
| 属性 | 值 | 作用 |
|---|---|---|
type | type=button | 可点击按钮 |
type=text | 单行的输入字段，用户可在其中输入文本（默认宽度为 20 个字符） | |
type=password | 密码字段 | |
type=hidden | 隐藏输入框(用户不可见，但输入框的值会随表单一起提交，用与多页面收集用户信息) | |
type=radio | 单选按钮 | |
type=checkbox | 复选框 | |
type=reset | 重置按钮，清除表单中的所有数据 | |
type=submit | 提交按钮，把表单数据发送到服务器 | |
value | 文本框的值 | |
name（必须包含） | 提交表单时，文本框的值value存储在name变量中 | |
| maxlength | 文本框允许输入的最多的字符数 | |
| readonly | 只读文本框 | |
| disabled | 只读文本框，文本框显示为灰色，文本框的值不会发送到服务器 |
5 - 3 textarea 标签
多行文本输入框
没有字符数的限制
| 属性 | 值 | 作用 |
|---|---|---|
| rows | 行数 | 内容过长时自动显示滚动条 |
| cols | 列数 | |
5 - 4 select 标签
下拉列表框
| 标签 | 属性 | 值 | 作用 |
|---|---|---|---|
| select | name | 下拉框的名称 | |
| size | 显示行数（>1） | 显示多少行，以平铺的形式显示 | |
| multiple | multiple | 可以多选 | |
| option | value | 选项代表的值 | 提交以后会将value的值存储到name中 |
| selected | selected | 是否选中此选项 | |
| optgroup | labal | 分组名称（此名称不可选中） | 用来对选项进行分组 |
<select name="country">
<optgroup label="北美洲">
<option value="America">美国</option>
</optgroup>
<optgroup label="亚洲">
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia" >俄罗斯</option>
</optgroup>
</select>
<select name="country" size="5" multiple="multiple">
<option value="America">美国</option>
<option value="China" selected="selected">中国</option>
<option value="India">印度</option>
<option value="Russia" >俄罗斯</option>
</select>
5 - 5 lable 标签、fieldset 标签
<lable>标签：实现点击按钮旁边与点击选项框的效果相同
<fieldset>标签：实现分组框
| 标签 | 属性 | 值 | 作用 |
|---|---|---|---|
| lable | for | <input>标签中id的值 | 点击按钮旁边与点击选项框的效果相同 |
| fieldset | style | width:200px | 设置分组框的大小 |
<fieldset>/<legend> | 分组框的名称 |
<fieldset style="width: 200px">
<legend>选择颜色</legend>
<label for="blue">蓝色</label>
<input type="radio" id="blue" name="color" ><br>
<label for="red">红色</label>
<input type="radio" name="color" id="red"><br>
<label for="white">白色</label>
<input type="radio" name="color" id="white">
</fieldset>
6 - 框架 frameset 标签
此标签不能写在<html>标签中，因为它是集成了多个html
可以将很多页面组合成一个页面
常见应用场景：（部分刷新）
一个 frame 中放置页面导航，另一个 frame 中放置页面内容，当点击页面导航时，只刷新页面内容。
| 标签 | 属性 | 值 | 作用 |
|---|---|---|---|
<frameset> | cols | px;%;* | 垂直分栏的各列的宽度(*表示占用剩余全部空间) |
| rows | px;%;* | 水平分栏的各行的宽度(*表示占用剩余全部空间) | |
| frameborder | 0 | 不显示分割条 | |
<frame> | noresize | noresize | 分割条不可拖动 |
| scrolling | no | 不显示滚动条 | |
<!-- <frameset cols="33%,33%,*">
<frame src="1.html"></frame>
<frame src="2.html"></frame>
<frame src="3.html"></frame>
</frameset> -->
<frameset rows="33%,33%,*">
<frame src="1.html"></frame>
<frame src="2.html" ></frame>
<frame src="3.html"></frame>
</frameset>
6 - 1 框架之间的导航
框架中的链接可以在框架之间导航，通过设置 标签的 target 属性
<a>的target属性和<frame>的name属性相对应
6 - 2 frameset 的缺点
- 无法正确显示页面的url地址
- 通过URL打开单独的一个内容页面时，看到的不是完整的页面
- Frame之间的导航有点复杂，可能出现不一致的情况
- 刷新页面后载入的页面和用户期望的可能不一致
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
