标签:复选框 get 用户信息 大小 选项 复杂 word 效果 页面跳转
<!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>
标示一段代码
空格
<
<
>
&
&
"
“
<a>
标签:属性 | 属性作用 | 值 |
---|---|---|
href |
指定超链接目标的 URL | 任何有效文档的相对或绝对 URL / 绝对路径(http/https/mailto/ftp) |
name |
记录页面跳转位置 | 设置页面锚点 top(顶部)/middle(中部) |
target |
指定打开位置 | _blank :新页面打开;_self :当前页面打开;targetname :指定窗口或Frame中打开链接 |
_parent :父窗口中打开;_top :最顶层父窗口中打开; |
||
<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>
<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 元素的值 |
<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>
<table>
标签:属性 | 值 | 作用 |
---|---|---|
border |
规定表格边框的宽度 | |
width |
规定表格的宽度 | |
cellpadding |
规定单元边沿与其内容之间的空白(单元格内边距) | |
cellspacing |
规定单元格之间的空白(单元格边框的宽度) | |
<th>,<td>,<tr>
标签:标签 | 作用 | 属性 | 值 | 作用 |
---|---|---|---|---|
<th> |
表头 | |||
<td> |
列 | colspan |
colspan=2 |
规定单元格可横跨的列数(占两列) |
rowspan |
rowspan=2 |
规定单元格可横跨的行数(占两行) | ||
align |
left,right,center |
规定单元格内容的水平对齐方式 | ||
<tr> |
行 | colspan |
||
rowspan |
||||
align |
<form>
:表单:用来搜集用户信息并提交给服务器
一般按钮要提交表单:JavaScript
<form method="post" >
用户名:<input type="txt" name="username"><br>
密码:<input type="password" name="password"><br>
<a><input type="submit" value="登录"></a>
</form>
list
属性搭配<datalist>
标签来使用 输入提示
<datalist>
标签中的提示项由<option>
标签包裹
<datalist id="fruit">
<option>梨</option>
<option>西瓜</option>
<option>苹果</option>
<option>菠萝</option>
<option>火龙果</option>
</datalist>
请输入水果名:<input list="fruit">
<form>
标签:属性 | 值 | 作用 |
---|---|---|
method |
get | (提交数据的方式)收集少量的用户信息,url长度限制为4KB |
post | 收集大量用户信息,信息保存在HTTP请求消息的正文,提交后不能使用刷新按钮 | |
action |
地址(form.html) | 提交表单时转到的url地址 |
<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 | 只读文本框,文本框显示为灰色,文本框的值不会发送到服务器 |
<textarea>
标签多行文本输入框
没有字符数的限制
属性 | 值 | 作用 |
---|---|---|
rows | 行数 | 内容过长时自动显示滚动条 |
cols | 列数 | |
<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>
<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>
<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>
框架中的链接可以在框架之间导航,通过设置 标签的 target 属性
<a>
的target
属性和<frame>
的name
属性相对应
<frameset>
的缺点标签:复选框 get 用户信息 大小 选项 复杂 word 效果 页面跳转
原文地址:https://www.cnblogs.com/carrybircks/p/14965089.html