1. 标签语法
HTML超文本标记语言————HyperText Markup Language。 超文本:链接 标记:标签,带尖括号的文本
1.1 标签结构
- 成对出现,包裹内容
- <>里放英文字母(标签名)
- 结束标签比开始标签多/
- 标签分类:双标签和单标签
2. HTML骨架
- html:整个网页
- head:网页头部,用来存放给浏览器看的信息,例如CSS title:网页标题
- body:网页主体,用来存放给用户看的信息,例如图片、文字
3. 标签的关系
- 父子关系(嵌套关系):子级标签换行且缩进(Tab键)
- 兄弟关系(并列关系):兄弟标签换行要对齐
4. 注释
对代码的解释和说明,提高程序的可读性,方便理解、查找代码。
5. 标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等 显示特点:
- 文字加粗
- 字号逐渐减小
- 独占一行(换行)
注:h1标签在一个网页中只能用一次,用来放新闻标题或网页的logo,h2~h6没有使用次数的限制
6. 段落标签
一般用在新闻段落、文章段落、产品描述等,显示特点如下:
- 独占一行
- 段落之间存在间隙
7. 换行和水平线
- 换行:br
- 水平线:hr
8. 文本格式化标签
为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
- strong——>加粗
- em——>倾斜
- ins——>下划线
- del——>删除线
- b——>加粗
- i——>倾斜
- u——>下划线
- s——>删除线
注:前四个标签自带强调含义(语义)。
9. 图像标签
用于在网页中插入图片
其中,属性src是用于指定图像的位置和名称,是必须属性。 图像标签img的属性:
- alt:替换文本,图片无法显示时显示的文字
- title:提示文本,鼠标悬停在图片上时显示的文字
- width:图片的宽度
- height:图片的高度
10. 路径
路径指的是查找文件时,从起点到终点经历的路线。
路径分类:
- 相对路径:从当前文件位置出发查找目标的文件
- 绝对路径:从盘符出发查找到的目标文件
10.1 相对路径
查找方式:从当前文件位置出发查找目标文件
- 特殊符号:/表示进入某个文件夹里面——>文件夹名/
- .表示当前文件所在的文件夹——>./
- ..表示当前文件的上一级文件夹——>../
10.2 绝对路径
查找方式:Windows电脑从盘符出发;Mac电脑从根目录(/)出发
注:Windows默认是\,其他系统是/,建议统一写为/
特殊的绝对路径——>在线网址:www.baidu.com/?tn=8507023… ,应用场景:网页底部的友情链接
11. 超链接标签
href属性值是跳转地址,是超链接的必须属性。 超链接默认是在当前窗口跳转页面,添加target="_blank"实现新窗口打开页面。
注:开发初期,不确定跳转地址,则href值为#,表示空链接,不会跳转,会在当前页面刷新一次。
12. 音频
常见属性:
- src:音频URL,支持MP3、Ogg、Wav
- controls:显示音频控制面板
- loop:循环播放
- autoplay:自动播放-为提升用户体验,浏览器一般会禁用自动·播放功能
注:在写H5的属性时,若属性名和属性值相同,可简写为一个单词。
13. 视频
-
src:视频URL,支持MP4、WebM、Ogg
-
controls:显示视频控制面板
-
loop:循环播放
-
autoplay:自动播放-为提升用户体验,浏览器支持在静音状态自动播放
-
muted:静音播放