『JavaWeb前端』一、HTML-精炼-易懂
时间:2022-03-29 01:53
一、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>
标签:
若图片有边框,用
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 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="/Public/code/img/iconds.jpg"></frame> <frame src="2.html"></frame> <frame src="3.html"></frame> </frameset> --> <frameset rows="33%,33%,*"> <frame src="/Public/code/img/iconds.jpg"></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之间的导航有点复杂,可能出现不一致的情况
- 刷新页面后载入的页面和用户期望的可能不一致