HTML的基本标签
img 单标签
src 图片路径
alt 图片提示,图片无法加载时显示或者鼠标移上去时显示
ul 无序标签 ol 有序标签,li列表项目
type:修改列表项目的符号
ol:1,A,a,s,Ⅰ,ⅰ
ul:circle,square,disc
start:从多少开始排序,只能在ol上使用
a 标签
href:跳转的链接地址;外网域名要加http://或者https://
target:_blank 在新窗口显示
_self 在当前窗口展示
_top在顶层窗口中展示网页
_parent在父级窗口中显示网页
name:在指定name的窗口中显示
特殊字符
1 空格
2 < 小于 <
3 > 大于 >
4 & &符号 &
5 “ 双符号 "
6 © 版权 ©
7 ® 注册商标 ®
8 × 乘号 ×
9 ÷ 除号 ÷
标题标签
h1~h6 数字越小,字号越大
上下都有外边距,加粗显示,独占一行
水平分割线<hr/>
单标签,在页面中显示一条水平分割线
文字格式化标签
<b></b>
粗体<big></big>
大字号<em></em>
着重文字<i> </i>
斜体<small></small>
小字号<strong></strong>
粗体<sub></sub>
下标<sup></sup>
上标<del></del>
删除线<u></u>
下划线<strike></strike>
删除线
自定义标签
dl,dt,dt,自定义列表标签
音频和视频标签
<audio src="" controls="controls"></audio>
<video src="" controls="controls"></video>
iframe标签
<iframe></iframe>
内联框架
src:设置另一个网页文档的路径和文件名
frameborder:内联框架的边框样式
name:设置内联框架的名称,配合a标签的target属性,可以实现链接在指定的内联框架中显示
table标签
<table> 表格标签
<tr> 行标签
<td></td> 列标签
<td></td>
<td></td>
</tr>
</table>
table标签中的常见的标签属性及作用
tr标签的常用属性及作用
td标签的常用的属性及作用
caption标签的作用
<table>
<caption>标题</caption>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</table>
属性:align 值:left,right,top,bottom
form标签及标签属性
<form action="" method="" name="" enctype="">
</form>
属性:
action:表单提交数据到后台服务器的地址(url+接口名称)
name:表单名称,每个表单都有唯一一个的名称,在同一页面下不能重名
enctype:提交数据的编码
application/x-www-form-urlencoded:发送前编码所有字符(默认)
multipart/form-data:不对字符编码,在使用包含文件上传控件的表单时必须使用该值
text/plain:空格转换为‘+’加号,但不对特殊字符编码
method:规定表单如何提交提交方式为get和post两种方式
get和post的区别
post传输数据时会加密,在url地址栏看不到提交的数据
get提交数据时会把?号拼在url地址后面加上需要提交的数据,且用户能够看到提交的数据
html5中新增的属性
autocomplete:on/off 规定是否启用表单的自动完成功能
novalidate:novalidate 使用时,提交表单时不进行验证
input标签
属性:
type:定义input标签的类型
button 按钮 value值为按钮上显示的值
checkbox 多选框
file 上传文件
image 以图片形式的按钮
password 密码输入框
radio 单选框 name值相同
submit 提交按钮
reset 重置按钮
email 电子邮件输入框 输入的内容时电子邮件
url url输入框 输入的内容为url地址
tel 电话号码输入框 输入的内容必须是电话号码
date 日期控件,用来选择年月日,还有例如datetime,month,week,time,datetime-local这些与时间相关的控件的值
color 颜色控件
number 数字输入的控件(min属性,允许输入的最小数字 max属性,允许输入的最大的数字 step属性,控制数字变化的步长,也就是用户选择数字是,数字增加或减少的数量)
hidden 隐藏表单域,页面一般看不到,但是提交表单时会提交改域的数据
text 文本框 默认20个字符
checked:checked 默认选中
required=“required” 验证特殊输入框,如email url
maxlength 最大字符数
multiple 允许一个值以上,通常配合下拉框
size 定义输入字体的宽度
placeholder 提示信息
select option下拉列表标签
select必须嵌套option使用
属性:
multiple 多选
size 一次显示多个选项
textarea文本域标签
属性:
cols 定义有多少列
rows 定义有多少行
button按钮标签
属性:
type:
submit 提交按钮
button 普通按钮
reset 重置按钮
特殊属性
disabled 禁用
readonly 只读
legend标签和fieldset标签
fieldset 可以将表单内相关元素分组,并且会在相关元素周围绘制边框
legend 该组相关元素的标题
<fieldset>
<legend>登录</legend>
用户名:<input type="text">
密码:<input type="password">
<input type="submit" value="登录">
</fieldset>
figcaption标签和figure标签
figure标签规定独立的流内容(图片,图表,图像,代码等等)
元素的内容应该与主内容相关,同时元素的位置相对于主要内容是独立的,如果被删除,则不应对文档流产生影响
<figure>
<img src="" alt="">
<figcaption></figcaption>
</figure>
hgroup标签
表示文档部分的多级标题,用于对网页区段的标题进行组合。
<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>
datalist标签
需要与input标签配合使用,用来表示可选的列表。可用于搜索功能
代码如下:
<input list="check">
<datalist id="check">
<option value="java"></option>
<option value="javascript"></option>
<option value="c++"></option>
</datalist>
效果如下:
输入c时的效果
header标签
导航栏的容器
header标签不能放在footer,或者另一个header里面
section标签
定义文档某个区域
footer标签
定义文档尾部区域,语义化标签
blockquote标签
定义摘自另一个源的快引用,浏览器通常会对blockquote元素进行缩进,配合css做出漂亮的效果
代码:
<blockquote>
你好,我是blockquote标签
</blockquote>
效果:自动缩进两格
下一篇: 计算机网络