html标签
标签分类
- 块级元素：独占一行
header、footer、nav、section、article、aside
ol、ul、li、dl、dt、dd、div、h1-h6、p、figure - 内联元素：不独占一行，代码换行有空格，不能设置css样式
span、a、strong、b、em、i
mark、cite、sub、sup、del - 内联块元素：不独占一行，代码换行有空格，可以设置css样式
img
标签初始化(即去掉默认样式)
dl，dd ：有margin值
h1-h6，body，p ：有margin值
ol,ul ：有margin值有padding值，有样式
a ：有下划线，蓝色（text-decoration color）
img ：下面有留白（vertical-align：top/middle）
h1-h6 ：加粗(font-weight)
em，i ：斜体(font-style)
mark ：字体背景颜色(background)
表单相关标签
form表单提交
数据提交方式：method：get/post
数据提交地址：action
input输入框：text 文本框 ----name 区分输入框输入的数据（比如输入18，name为age，
后台获取就是age=18） value 文本框默认内容，纯黑色
submit 提交按钮----value 按钮名称
password 密码框（特点就是输入密码后是黑点点）
reset 重置框(重置此框之前form表单之内的值)
button 自定义按钮
file 上传文件
radio 单选框----name需要一样，才能单选。加上checked:默认选中
checkbox 复选框----加上checked：默认选中
注意：数据要提交： name 和value必须有。（后台才能知道这是什么）
image 图片
email 邮箱
tel 电话(移动端点击，只显示数字) 各地电话差异大所以不验证
search 输入后，有个×号清空此输入框内容（各浏览器展示情况不同，少用）
url 输入网址（提交时要验证）
color 选择输入颜色（少用。可用于换肤）
range 数字滚动条。可用js获取值，max最大，min最小，step每次拉动步数
number 数字选择器。输入或选择各种数字。min，max，step
datetime-local 日期及时间
date 日期
week 周
month 年月
hidden 隐藏信息（个人信息会被监控）
输入框更多属性
placeholder 输入框默认填写信息，跟value有区别
重点：修改颜色，百度撒
autocomplete 是否记录用户输入过的内容 on开启，off关闭
注意：添加name，结合提交表单
contenteditable 定义内容是否可编辑 true可以，false不行
readonly 只读
disabled 禁用
formnovalidate 取消验证
required 必填项
autofocus 自动获取光标
formaction 新增提交地址，不依靠 form上面的 action
pattern 正则验证 title:提示内容，:invalid正则验证错误时输入框的样式
button按钮 ：与input的type为button的按钮一样
select option ：下拉框
textarea ：文本输入框
datalist list ： 有输入提示（类似下拉框的输入框）
progress ：进度条（max最大值，value当前进度），可以加工下更好看
输入框优化用户体验
- 用label标签优化输入框（扩大选中区域）
- 用outline优化输入框（输入框输入时有蓝色线条边框）
//扩大选中区域，点男也能选中
<label>
<input type="radio" name="gender">
<span>男</span>
</label>
.ipt{outline:none} //去掉输入时的蓝色线条边框，可改为其他颜色
<input type="text" class="ipt"
表格标签
- thead、tfoot、caption 都能不写。但是tbody必须写
- 合并单元格列：colspan=“n” ：合并n列
- 合并单元格行：rowspan=“n” ：合并n行 （不允许跨thead、tbody、tfoot合并）
- border-spacing：边框间距
- border-collapse:collapse; 边框合并（更细）
<!-- 边框可以直接加在table标签，并且不加单位 -->
<table border="1">
<!-- <caption>表格的标题</caption> 不常用-->
<thead>
<tr>
<th>表格的头部</th>
<th>表格的头部</th>
<th>表格的头部</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格的主体</td>
<td colspan="2">表格的主体</td> <!-- 合并之后，后面的要多出去，记得删除 -->
<td>表格的主体</td>
</tr>
<tr>
<td>表格的主体</td>
<td rowspan="2">表格的主体</td> <!-- 合并之后，后面元素也要多，记得删除 -->
<td>表格的主体</td>
</tr>
<tr>
<td>表格的主体</td>
<td>表格的主体</td>
<td>表格的主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格的主体</td>
<td>表格的主体</td>
<td>表格的主体</td>
</tr>
</tfoot>
</table>
html常用标签
列表标签
- 有序列表ol li
- 无序列表ul li
- 自定义列表dl dt dd
- 注意根据需要清除默认样式
- 有序列表无序列表设置样式
list-style-type 列表符号（有序列表默认数字，无序列表默认实心圆。circle空心圆 square实心正方形 none不要列表符号）
list-style-image 列表符号图片(用url导入图片地址)
list-style-position 列表符号位置（outside，inside）
文本类标签
<br /> 强制换行
<hr /> 水平线
<h> 标题
<p> 段落（段落自带margin）
<span> 文本（行内标签）
<strong><b> 加粗（strong强调加粗，b加粗）
<em><i> 斜体（em强调加粗，i加粗）
<sup> 上标标签（2的三次方：2<sup>3</sup>）
<sub> 下标标签（氢气：H<sub>2<sub>）
<del> 删除线标签（原件现价）
<mark> 高亮（自带背景颜色黄色）
<time> 时间标签（加不加浏览器都没有变化，开发自己用）
<cite> 引用（文本变斜体罢了）
a标签
- target：_blank 新窗口打开 _self 在当前窗口打开
- ：base标签控制所有的a标签 ，写在head中
- a标签作用：
1、跳转页面
2、锚点（即跳转到页面的那个哪个div或者哪个部位等等）
3、打电话（tel:400-123-0826）
4、下载文件（href填写需要下载的地址压缩包）
5、发邮件（110@qq.com）
img标签
- img标签的五个属性
width 图片宽度
height 图片高度
src 图片位置
titile 鼠标悬停时图片显示文字
alt 图片不显示时的文字 - 让图片底部不留白
vertical-align:middle/top 设置图文对齐方式
留白原因：文字四条线：顶线、中线、基线、底线。而图文对齐方式默认为基线对齐，文字基线位于中下方，图片基线位于最底部
html5常用标签
<canvas> 画图的
<header> 头部
<article> 文章（可以包含：标题：作者、发布时间、发布内容等）
<aside> 侧边内容（侧边悬浮等）
<section> 划分板块（免得遍地div）
<footer> 底部（网站底下的哪些小模块）
<nav> 导航栏（包含a标签的超链接，文字可跳转的部分）
<svg> 定义矢量图
<menu> 菜单
<menuitem> 菜单可点击项
<video> 视频
<audio> 音频
<source> 为video和audio提供数据源
<track> 为video和audio指定字母
<figure> 用于引入图片，网页中独立的内容，移除之后不会对其他内容有影响
<figcaption> 用于描述图片的标题
video/audio 标签
flash 很早之前，pc端视频都用这个插件，但是移动端基本不支持，而且是adobe公司私人的，后来被html5干掉。
视频格式：
即后缀分别为.ogg .mp4 .webm 。当前浏览器不支持此视频格式会出现 x 号。
标签属性：
autoplay 视频准备完毕，直接播放
controls 显示浏览器默认控件，如播放按钮（如果有此属性，就不能自定义设置控件了）
width 宽度
height 高度
loop 循环播放
muted 静音播放
poster 点击播放按钮前的图片
src 资源地址
preload 预加载，如果有autoplay，就不必用这个了。页面加载时，即没有点击播放，缓存后续视频（值为auto时）。
paused 暂停
played 播放
src 资源路径
buffered 返回已缓存部分的TimeRanges对象。
TimeRanges对象：包含length已缓冲的数量、start(index)某个已缓冲的开始位置、end(index)某个已缓冲的结束位置
currentSrc 返回当前视频的url值
currentTime 设置或返回当前视频看到的时间位置（可以设置快进，快退）
defaultMuted 静音播放 与muted一样
defaultPlaybackRate 设置或返回倍数播放速度
duration 返回当前视频的时间
ended 视频是否已经结束，返回布尔值
error 返回错误状态码1234，具体对应看文档
networkState 返回网络状态码1234，具体对应看文档
readyState 返回视频就绪状态码1234，具体对应看文档
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
volume 设置或返回音量
标签方法
load 重新加载视频。 切换src的视频，需要执行load才能流畅切换
paly 开始播放
pause 暂停播放
canPlayType 检查浏览器是否能播放当前视频。
方法参数：
video/ogg; codecs="theora, vorbis"
video/mp4; codecs="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
返回值：probably几乎支持 maybe也许支持 ""不支持
标签事件
play 播放事件
pause 暂停事件
当音频/视频处于加载过程中时，会依次发生以下事件：
loadstart 浏览器开始加载视频
durationchange 浏览器时长变化
loadedmetadata 已经加载视频元数据（元数据：时长、尺寸等）
loadeddata 已经加载当前数据帧
progress 当浏览器正在下载音频/视频时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
seeked 当用户已跳跃到音频/视频中的新位置时
seeking 当用户开始跳跃到音频/视频中的新位置时
...
audio 标签
音频格式： mp3
标签属性、方法、事件： 与video差不多
figure figcaption标签使用
<figure>
<img src="./img/img8.jpg" alt="">
<img src="./img/img9.jpg" alt="">
<figcaption>点进来看看，这个里面的东西巴适得很</figcaption>
</figure>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
