没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
HTML5
定义:超文本标记语言,主要用来描述网页中的文本,图片,
音频,视频等内容
基本标签
标题标签:<h1></h1> ~<h6></h6>共六级标签,重要程度依次减小
段落标签:<p></p>,段落之前存在间隙;独占一行
换行标签:<br>
水平线标签:<hr>,主题的分割转换
文本格式化标签:让文字加粗,下划线,倾斜,删除线等效
果
strong:加粗;<strong>文本</strong>
ins:下划线
em:倾斜
del:删除线
图片标签及属性
src:目标图片的路径(必须有);<img src ="路径名">
alt:替换文本,文本加载失败时显示
title:提示文本,当鼠标悬停时,显示提示文本。
width和height:宽度和高度(数字);如果只设置其中一个,另一个会等比例缩放
(图片不会变形),若同时设置两个,有变形风险
路径
绝对路径 目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
相对路径
从当前文件开始出发找目标文件的过程
分类
同级目录 当前文件和目标文件在同一目录中;可以直接写名字或者是"./名字"
下级目录 目标文件在下级目录; src="文件夹名/文件名"
上级目录 目标文件在上级目录; src="../文件名”
音频标签及其属性
<audio></audio>;支持三种格式:MP3,Wav,Ogg
src="路径"
contrlos:显示播放的控件
autoplay:自动播放(部分浏览器不支持)
loop:循环播放
视频标签及其属性
<video></video>;支持三种格式:MP4,WebM,Ogg
src="路径"
control:显示播放控件
autoplay:自动播放(谷歌浏览器需要配合muted实验静音播放)
loop:循环播放
链接标签及其属性
实现页面的跳转
<a href="目标网页.html"></a>
target:目标网页的打开形式
_self:默认值,在当前窗口中跳转
_blank:在新窗口中跳转(保留原网页)
列表标签
应用场景:在网页中按行展示关联性内容,如新闻列表,排行榜,账单
分类
无序列表
列表的每一项前默认显示圆点标识
标签组成
dl:表示无序列表的整体,用于包裹li标签
li:用于表示无序列表的每一项,用于包含每一行的内容
有序列表
在网页中表示一组由顺序之分的列表,如:排行榜;每一项前默认显示序列标号
标签组成
ol:包裹li标签
li:表示有序列表的每一项
自定义列表
在网页底部导航中通常会使用自定义列表实现
标签组成
dl:表示自定义列表的整体,用于包裹dt/dd内容
dt:表示自定义列表的标题
dd:表示自定义列表的针对主题的每一项内容
表格标签:
应用场景:在网页中以行+列的单元格方式整齐展示数据,如学生成绩表
基本标签
table:表格整体,用于包裹多个tr
tr:表格每行,用于包裹td
td:表格单元格,用于包裹内容
相关属性
更推荐使用css设置格式
格式
border 边框宽度
width 表格宽度
height 表格高度
其他属性
场景 在表格中表示整体大标题和一列小标题
标签
caption 表格大标题:表示表格整体的大标题,默认在表格整体顶部居中位置显示
th
表头单元格:表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显
示;常书写在突然标签内部
结构标签
场景:让表格内容结构分组,突出表格的不同部分,使语义更加清晰
标签
thead 头部
tbody 主体
tfoot 底部
单元格合并
步骤:
明确合并的单元格
左上原则,确定保留谁,删除谁
格式设置
rowspan="合并格数 " 跨行合并,将多行的单元格垂直合并
colspan="合并格数" 跨列合并,将多列单元格水平合并
PS
只有一个结构标签中的单元格才能合并,不能跨结构标签合并(thead,tbody,
tfoot)
表单标签
input标签
场景 在网页中显示收集用户信息的表单效果,如:登录页,注册页
属性
文本输入
text
单行文本输入
placeholder 占位符,提示用户输入内容的文本
password 密码框,用于输入密码
选择框
radio
单选框,用于多选一
添加name属性分组,一组只能选择一个
checked 默认选项
checkbox 多选框,用于多选多
文件输入
file 文件选择,用于之后上传文件
multiple 多文件选择
按钮属性
submit 提交按钮,用于提交
reset 重置按钮,用于重置
button 普通按钮,默认无功能,需配合js添加功能
添加value="文本",点击按钮后,可以更改提示信息
如果要实现以上按钮功能,要配合form标签使用,用form标签把表单一起包裹起来
button按钮标签
场景:在网页中显示用户点击的按钮
属性
submit 提交按钮
reset 重置按钮
button 普通按钮,需配合js使用
button使双标签,以便包裹其他内容,文字,图片等
select标签
标签组成
select标签 下拉菜单整体
option标签 下拉菜单的每一项
属性 下拉菜单的默认选中
textarea文本域标签
场景 在网页中提供可输入多行的表单控件
标签名 textarea
常见属性
cols 规定了文本域可见宽度
rows 规定了文本域内可见行数
ps:右下角拖拽可以改变大小,更推荐使用css设置格式
label标签 场景
用于绑定内容与表单标签的关系
绑定方法
方法一
使用label标签把内容(如文本)包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
方法二
直接使用label标签把内容和表单标签一起包裹起来
删除label标签的for属性
语义化标签
场景:在HTML5中,推出了一些有语义的布局标签供开发者使用
以下标签特点和div一致,但是多了不同语义 div: 分割标签,可以把网页分割为不同的部分
标签
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章
字体实符 空格  
极客1号
- 粉丝: 39
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页