HTM标签

超链接标签

超链接标签：<a> 文本或图片 </a>
用法1：在页面中使用超链接标签跳转到另一个页面

属性	描述
href	页面跳转的地址，相对地址或绝对地址； `###`：空连接；`#`：跳转到当前页面顶部；`不写`：刷新当前页面
target	跳转页面的打开方式 `_blank`: 在新窗口打开 `_self`[默认]: 在自身窗口打开 `_paren`t: 在父窗口打开 `_top`: 在顶级窗口打开自定义名称窗口

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接标签</title>
</head>
<body><h1>超链接标签</h1><h2>1、在页面中使用超链接标签跳转到另一个页面</h2><ul><li>href: 页面跳转的地址，相对地址或绝对地址</li><li>target: 跳转页面的打开方式</li><ul><li>_blank: 在新窗口打开</li><li>_self[默认]: 在自身窗口打开</li><li>_parent: 在父窗口打开</li><li>_top: 在顶级窗口打开</li><li>自定义名称窗口</li></ul></ul><a href="http://www.baidu.com" target="_blank">百度</a><a href="index.html">首页</a><br><a href="https://www.yuanshen.com/#/"><img src="image/ys.96a55539.png" alt="" width="10%"></a>
</body>
</html>

用法2：跳转到页面指定位置
1. 定义位置(标记) < a name|id="标记"></a>
2. 跳转到指定位置 < a href="#标记"></a>

表格标签

表格标签用来在页面中规则整齐的显示数据
标签：
- table：定义表格
- - border：表格的边框
  - width：表格的宽度
  - height：表格的高度
  - bgcolor：表格的背景颜色
  - align：表格的水平对齐方式，left、center、right
- tr：定义行
- - bgcolor：行的背景颜色
  - align：行的内容水平对齐方式
  - valign：行的内容垂直对齐方式 top、middle、bottom
- td：定义列
- - bgcolor：单元格的背景颜色
  - align：单元格的内容水平对齐方式
  - valign：单元格的内容垂直对齐方式
- th：定义列标题，加粗居中显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格标签</title>
</head>
<body><table border="1" width="500" height="400" bgcolor="gold"><tr><th>姓名</th><th>班级</th><th>学号</th></tr><tr><td>张三</td><td>一班</td><td align="right" valign="top">1001</td></tr><tr align="center"><td>李四</td><td>二班</td><td>2001</td></tr><tr bgcolor="blue"><td>王五</td><td>一班</td><td>1002</td></tr><tr><td>宋六</td><td bgcolor="red">三班</td><td>3001</td></tr></table>
</body>
</html>

列合并、行合并
列合并：colspan

行合并：rowspan

在这里插入图片描述

<table border="1" width="500" height="400"><tr><th colspan="3" align="center" bgcolor="gold">课程表</th></tr><tr align="center"><td rowspan="3" bgcolor="skyblue">周一</td><td>上午</td><td>语文</td></tr><tr align="center"><td>下午</td><td>数学</td></tr><tr align="center"><td>晚上</td><td>物理</td></tr><tr align="center"><td rowspan="3" bgcolor="skyblue">周二</td><td>上午</td><td>语文</td></tr><tr align="center"><td>下午</td><td>数学</td></tr><tr align="center"><td>晚上</td><td>物理</td></tr>
</table>

表单标签

form元素常用属性

action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method:请求方式：get 和post
get:
地址栏,请求参数都在地址后拼接 path?name=“张三”&password=“123456”
不安全
效率高
get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据

post：
地址栏：请求参数单独处理。
安全可靠些
效率低
post请求大小理论上无限；一般用于插入删除修改等操作

enctype:表示是表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)

input元素

不同type值呈现不同状态。

属性值	描述	代码
text	单行文体框	< input type=“text”/>
password	密码框	< input type=“password”/>
radio	单选按钮	< input type=“radio”/>
checkbox	复选框	< input type=“checkbox”/>
date	日期框	< input type=“date”/>
time	时间框	< input type=“time”/>
datetime	日期和时间框	< input type=“datetime”/>
email	电子邮件输入	< input type=“email”/>
number	数值输入	< input type=“number”/>
file	文件上传	< input type=“file”/>
hidden	隐藏域	< input type=“hidden”/>
range	取值范围	< input type=“range”/>
color	取色按钮	< input type=“color”/>
submit	表单提交按钮	< input type=“submit”/>
button	普通按钮	< input type=“button”/>
reset	重置按钮	< input type=“reset”/>
image	图片提交按钮	< input type=“image”/>

文件上传

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传</title>
</head>
<body><h1>文件上传</h1><form action="" method="post" enctype="multipart/form-data"><!-- multiple：可以选择多个图片 -->头像:<input type="file" name="photo" multiple><br><!-- 隐藏域：隐藏在表单中，表单提交时会发给服务器 --><input type="hidden" name="id" value="8888888"><input type="submit" value="上传"></form>
</body>
</html>

元素练习 email、number、range、color、date、time

<form action="" method="post" enctype="application/x-www-form-urlencoded"><table><tr><td>邮箱</td><td><input type="email" name="email"></td></tr><tr><td>年龄</td><td><input type="number" name="age" min="1" max="100"></td></tr><tr><td>满意度</td><td><input type="range" name="level" min="1" max="100"></td></tr><tr><td>喜欢的颜色</td><td><input type="color" name”color></td></tr><tr><td>出生日期</td><td><input type="date" name="born"></td></tr><tr><td>访问时间</td><td><input type="time" name="time"></td></tr><tr><td colspan="2"><input type="submit" value="提交"></td></tr></table></form>

name属性是必须的，否则不会交给服务器，value就是提交的数据

select：下拉列表

选项
- <option>文本</option>
属性
- selected：默认选中
- multiple：多选

textarea：文本域

属性
- cols：列数
- rows：行数
高级属性：
- readonly：只读
- disabled：禁用
- required：必填

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>其他表单元素</title>
</head>
<body><form action="" method="post" enctype="application/x-www-form-urlencoded"><table><tr><td>用户名</td><td><input type="text" name="username" value="admin" readonly></td></tr><tr><td>密码</td><td><input type="password" name="password" required></td></tr><tr><td>学历</td><td><select name="edu"><option value="none">无</option><option value="High school education">高中</option><option value="University degree">大学</option><option value="Postgraduate degree">研究生</option><option value="Doctoral degree">博士</option></select></td></tr><tr><td>自我介绍</td><td><textarea name="info" cols="30" rows="10" style="resize: none;"></textarea></td></tr><tr><td colspan="2"><input type="submit" value="提交"><input type="reset" value="重置" disabled></td></tr></table></form>
</body>
</html>

框架标签

内嵌标签：iframe

<iframe src="" frameborder="0"></iframe>

<body><!-- src:关联页面地址 frameborder：是否有边框，0没有，1有--><table width="100%" border="1"><tr><td colspan="2"><iframe src="top.html" frameborder="0" width="100%"></iframe></td></tr><tr><td width="20%"><iframe src="left.html" frameborder="0" width="100%" height="700"></iframe></td><td><iframe src="right.html" frameborder="0" width="100%" height="700" name="main"></iframe></td></tr></table>
</body>

其他标签、特殊字符

<!DOCTYPE html>
<html lang="en">
<head><!-- 定义网页的的编码方式 --><meta charset="UTF-8"><!-- 适配移动端浏览器 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置页面的关键字，配合搜索引擎，多个关键字使用逗号隔开 --><meta name="keyword" content="Java开发,IT培训"><title>Document</title>
</head>
<body><h1>特殊字符</h1>空格：空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格<br>大于号：&gt;<br>小于号：&lt;<br>注册符号：&reg;<br>双引号：&quot;<br>人民币：&yen;<br>
</body>
</html>