『JavaWeb前端』一、HTML-精炼-易懂
时间：2021-07-05 17:08:45
收藏：0
阅读：0
一、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 - 0 标签的输入提示
list属性搭配<datalist>标签来使用 输入提示
<datalist>标签中的提示项由<option>标签包裹
<datalist id="fruit">
<option>梨</option>
<option>西瓜</option>
<option>苹果</option>
<option>菠萝</option>
<option>火龙果</option>
</datalist>
请输入水果名：<input list="fruit">
5 - 1 <form>标签：
| 属性 | 值 | 作用 |
|---|---|---|
method |
get | （提交数据的方式）收集少量的用户信息，url长度限制为4KB |
| post | 收集大量用户信息，信息保存在HTTP请求消息的正文，提交后不能使用刷新按钮 | |
action |
地址（form.html） | 提交表单时转到的url地址 |
5 - 2 <input>标签：
| 属性 | 值 | 作用 |
|---|---|---|
type |
type=button |
可点击按钮，已弃用，一般按钮，，由button标签中的button替代 |
type=text |
单行的输入字段，用户可在其中输入文本（默认宽度为 20 个字符） | |
type=password |
密码字段 | |
type=date |
日期输入框 | |
type=time |
时间输入框 | |
type=hidden |
隐藏输入框(用户不可见，但输入框的值会随表单一起提交，用与多页面收集用户信息) | |
type=radio |
单选按钮，name相同的一组只能选一个 | |
type=checkbox |
复选框 | |
type=reset |
重置按钮，清除表单中的所有数据，已废弃，由button标签中的reset替代 | |
type=submit |
提交按钮，把表单数据发送到服务器，已废弃，由button标签中的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之间的导航有点复杂，可能出现不一致的情况
- 刷新页面后载入的页面和用户期望的可能不一致
评论（0）