<br>换行
<hr>水平线
Ctrl+/注释
文本格式化
加粗:b和strong
下划线:u和ins
倾斜:i和em
删除线:s和del
语义:用英文突出重要性的强调语境
1.图片:<img src=”” alt=””title=””>
Src:图片路径
alt:图片加载失败,显示文本
title:鼠标悬停提示
width:宽度
height:高度
注意:只设置width或height中一个,会等比自动缩放
相对路径(常用):从当前文件(html网页)开始出发找目标文件的过程
同级目录:./文件名,可表示当前。也可直接写文件名
下级目录:同级文件夹/文件名
上级目录:../返回一级,../文件名。先返回再找文件
绝对路径(了解):目录下的绝对位置,从盘符开始的路径或网络地址
2.音频:<audio src=”” controls autoplay loop></audio>
Controls:显示播放的控件
Autoplay:自动播放(部分浏览器不支持)
Loop:循环播放
注意:目前支持三种格式 MP3、Wav、Ogg
3.视频 <video src=”” controls autoplay loop ></video>
Controls:显示播放的控件
Autoplay:自动播放(谷歌中需配合muted实现静音播放)
Loop:循环播放
注意:视频目前支持三种格式MP4、WebM、Ogg
4.超链接 <a href=”./目标网页.html” target=“”>超链接</a>
Target:
_self:默认值,在当前窗口中跳转(覆盖原网页)
_blank:在新窗口中跳转(保留原网页)
5.列表
无序列表:无明确排序
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul:只能包括li标签
li:可以包含任意内容
有序列表:有明确排序
<ol>
<li></li>
<li></li>
<li></li>
</ol>
ol:只能包括li标签
li:可以包含任意内容
自定义列表:有标题有内容
dl:表示自定义列表的整体,用于包裹dt/dd
dt:表示自定义列表的主题
dd:表示自定义列表针对主题的每一项内容
注意:dd会默认缩进显示
dl:中只能包含dt/do
dt/do可任意嵌套任意内容
6.表格
<table border=””>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Table:表格整体,可用于包裹多个tr
Tr: 表格每行,包裹td
Td:表格单元格,包裹内容
注意 嵌套关系:table > tr > td
相关属性
Border:边框宽度
Width:表格宽度
Height:表格高度
表格标题和表头单元格标签
Caption:表格整体大标题,默认表格上居中位置
Th:一列小标题,通常用于表格第一行
注意:caption写在table标签内部
Th卸载tr标签内部(用于替换td标签)
表格结构标签
Thead:表格头部
Tbody:表格主体
Tfoot:表格底部
合并单元格
1.明确合并的单元格
2.通过左上原则,确定保留谁删除谁
上下合并——只保留最上的,删除其他
左右合并——只保留最左的,删除其他
跨行合并(垂直)Rowspan
跨列合并(水平)Colspan
注意:同一个结构中的单元格才能合并,不能跨结构(thead、tbody、tfoot)
7.表单:一般用于登录、注册、搜索
<Input>
Type属性值
Text:文本框,用于输入单行文本
Password:密码框,用与输入密码
Radio:单选框,用于多选一
Checkbox:多选框,用于多选多
File:文件选择,用于之后上传文件
Submit:提交按钮,点击之后提交数据给后端服务器
Reset:重置按钮,恢复表单默认值
Button:普通按钮,默认无功能,之后配合js添加功能
提示字:
Type:text
Placeholder:占位符,提示用户输入内容
单选框:
Type:radio
Name:分组,有相同name属性值的单选框为一组
Checked:默认选中
文件:
Type:file
Multiple:多文件选择
按钮input:
Submit:提交按钮,点击之后提交数据给后端服务器
Reset:重置按钮,恢复表单默认值
Button:普通按钮,默认无功能,之后配合js添加功能
注意:实现以上按钮功能,要用form标签把表单标签包裹起来
Action:提交地址
Value:按钮名字
Button按钮
<button></button>
Type:
Submit:提交按钮,点击之后提交数据给后端服务器
Reset:重置按钮,恢复表单默认值
Button:普通按钮,默认无功能,之后配合js添加功能
注意:谷歌种button默认是提交按钮,
Select下拉菜单
Select标签:下拉菜单的整体
Option标签:下拉菜单的每一项
Selected属性:下拉菜单的默认选中
Textarea文本域
Cols:规定了文本域内可见宽度
Rows:规定了文本域内可见行数
注意:右下角可以拖拽改变大小,实际开发时针对样式效果推荐用css设置
Label:常用于绑定内容和表单标签的关系
使用方法1:
使用label把内容包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的ID属性值
使用方法2:
直接使用label标签把内容和表单一起包裹起来
需要把label标签的for属性删除即可
语义化标签
无语义的布局标签
Div标签:一行只显示一个(独占一行)
Span标签:一行可以显示多个
有语义的布局标签
在HTML5新版本中,用于手机网页
Header:网页头部
Nav:网页导航
Footer:网页底部
Aside:网页侧边栏
Section:网页区块
Article:网页文章
注意:以上标签显示特点和div一致,但是比div多了不同的语义
字符实体
能通过字符实体在网页中显示特殊符号
常见的字符实体,用&连接
空格: