文章目录
一、WEB标准
在学习HTML之前，先介绍一些web的标准。
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
二、HTML的初认识
1、概念
2、结构
最基本的结构就如下图的红色框架部分。
可以把html比作小猪佩奇的身体，head比作是她的头，body就是她的身体，title就是她的眼睛——标题。
3、标签
以strong标签的结构图为例：
结构说明：
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
三、排版标签
- 1、标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
- 2、段落标签
场景：在新闻和文章的页面中，用于分段显示
- 3、换行标签
- 4、水平线标签
四、文本格式化标签
| 标签 | 说明 |
|---|---|
| b或strong | 加粗 |
| u或ins | 下划线 |
| i或em | 倾斜 |
| s或del | 删除线 |
实际项目开发中选择标签的原则：标签语义化
- 即：根据语义选择对应正确的标签
- 如：需要写标题，就使用h系列标签
- 如：需要写段落，就使用p标签
- ……
五、媒体标签
场景：在网页中显示图片
标签的完整结构图：
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
图片标签的src属性：
图片标签的alt属性：
图片标签的title属性：
图片标签的width和height属性：
进行一个小总结：
| 属性 | 说明 |
|---|---|
| src | 指定需要展示图片的路径 |
| alt | 替换文本，当图片加载失败时，才显示的文字 |
| title | 提示文本，当鼠标悬停时，才显示的文字 |
| width | 图片的宽度 |
| height | 图片的高度 |
六、音频标签
场景：在页面中插入音频
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(部分浏览器不支持) |
| loop | 循环播放 |
七、视频标签
场景：在页面中插入视频
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
| loop | 循环播放 |
八、链接标签
场景：点击之后，从一个页面跳转到另一个页面
链接标签的target属性
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转(覆盖原网页) |
| _blank | 在新窗口中跳转(保留原网页) |
空链接（了解）
九、总结
