HTML
简介
中文名:超文本标记语句
全称:Hyper Text Markup Language
超文本:以文本展示非文本的内容
标记:有特殊含义的标签
基本格式
方式1:<标签名 属性区> 内容区</标签名>
方式2:<标签名 属性区 />
注意:
方式1可以在其中嵌套标签,方式2不可以嵌套别的标签
多个属性直接使用空格隔开
方式1,前面的<>称为开始标签,后面的<>称为结束标签
注释
语法: <!-- 注释内容 -->
基本结构
<!-- html的注释 -->
<!--
<!DOCTYPE html>
作用:表示当前文档类型为html文件
-->
<!DOCTYPE html>
<!--
html:网页根标签
包含网页中的所有内容
-->
<html>
<!--
head:头标签
其中内容是给浏览器看的,如网页编码格式,css样式,js代码
网页标题
-->
<head>
<!-- title:网页标题,开始标签与结束标签之间为标题名称 -->
<title>网页标题</title>
<!--
<meta charset="utf-8" />
设置网页编码格式为UTF-8
-->
<meta charset="utf-8" />
</head>
<!--
body:体标签
其中内容主要给用户看
-->
<body>
HELLO WORLD
</body>
</html>
常用标签
基本标签
文本展示标签:font
图片展示标签:img
音频:audio
视频:video
换行:br
水平分割线:hr
表单标签
input:输入
type:输入类型
text:文本输入,默认的类型
password:密码输入
radio:单选按钮,注意,name属性值相同则为一组,要求需要value值,该值不会显示,但是后期提交时获取使用
checkbox:多选按钮
button:按钮
submit:提交按钮
reset:重置按钮
file:文件上传
...
placeholder:提示字,属性值自定义
name:标签名称,属性值自定义
value:值,在类型为按钮时,表示按钮上显示的内容
select:选择器
属性:
multiple:设置可以多选
size:展示的子项数量
子项:option
属性:
selected:默认选中
textarea:文本域
属性:
rows:行
cols:列
form:表单
属性
enctype:上传类型
application/x-www-form-urlencoded
不上传文件就使用该类型,该类型为默认类型
multipart/form-data
上传文件使用该类型
method:请求方式
get:显式请求
如:http://127.0.0.1:8080/?username=admin&password=123456
注意:不能超过100个字符
经验:get用于下载
post:隐式请求
注意:上传数据量无限制
经验:post用于上传或密码相关
action:接收请求的地址
超链接标签
示例1:连接网页
<a href="https://www.baidu.com">百度一下</a> <a href="test.html">到test</a>
示例2:锚点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>锚点</title> </head> <body> <font id="top"></font> <a href="#top01">01</a> <!-- 点击"01"跳转到"第一个"的位置 --> <br /> <a href="#top02">02</a> <!-- 点击"02"跳转到"第二个"的位置 --> <br /> <a href="#top03">03</a> <!-- 点击"03"跳转到"第三个"的位置 --> <br /> <font id="top01">第一个</font> <br /> <font > 1<br /> 1<br /> 1<br /> </font> <font id="top02">第二个</font> <br /> <font > 1<br /> 1<br /> 1<br /> </font> <font id="top03">第三个</font> <br /> <font > 1<br /> 1<br /> 1<br /> </font> <!-- a标签中可以放img标签 --> <a href="#top"> <img src="img/test.png" /> <!-- 点击图片跳转到顶部位置 --> </a> </body> </html>
布局标签
标题标签
h1,h2,h3,h4,h5,h6
段落标签:p
列表
ul:无序列表
ol:有序列表
表格
table:表格
tr:行
td:单元格
th:表头
容器标签
<div></div>
fieldset
<fieldset style="width: 300px;">
<legend>管理员登录</legend>
<input type="text" placeholder="请输入账号" />
<br />
<input type="password" placeholder="请输入密码" />
<br />
<input type="button" value="登录" />
</fieldset>
框架标签
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table width="100%" height="830px" border="1" cellspacing="0"> <tr height="100px"> <td colspan="2" align="right"> <img src="img/jd.jpg" /> </td> </tr> <tr> <td width="20%"> <a href="https://www.taobao.com" target="myiframe">淘宝</a> <br /> <a href="https://www.jd.com/" target="myiframe">京东</a> </td> <td width="80%"> <iframe name="myiframe" width="100%" height="100%"></iframe> </td> </tr> </table> </body> </html>
其他
注意:所有标签都有id,class属性
一个网页中id属性值不能重复
一个网页中class属性值允许重复
注意:所有标签都有onclick(点击)事件
意味着所有标签都可以当做按钮