- 本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、WEB标准
在学习HTML之前，先介绍一些web的标准。
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
二、HTML的初认识
1、概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
2、结构
最基本的结构就如下图的红色框架部分。
可以把html比作小猪佩奇的身体，head比作是她的头，body就是她的身体，title就是她的眼睛——标题。
3、标签
以strong标签的结构图为例：
结构说明：
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
三、排版标签
- 1、标题标签
场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
特点：
- 文字都有加粗
- 文字都有变大，并且从h1 → h6文字逐渐减小
- 独占一行
- 2、段落标签
场景：在新闻和文章的页面中，用于分段显示
特点：
- 段落之间存在间隙
- 独占一行
- 3、换行标签
特点：
- 单标签
- 让文字强制换行
- 4、水平线标签
特点：
- 单标签
- 在页面中显示一条水平线
四、文本格式化标签
| 标签 | 说明 |
|---|---|
| b或strong | 加粗 |
| u或ins | 下划线 |
| i或em | 倾斜 |
| s或del | 删除线 |
实际项目开发中选择标签的原则：标签语义化
- 即：根据语义选择对应正确的标签
- 如：需要写标题，就使用h系列标签
- 如：需要写段落，就使用p标签
- ……
好处：
- 对人：好理解，好记忆
- 对机器：有利于机器解析，对搜索引擎（SEO）有帮助
推荐： • strong、ins、em、del，表示的强调语义更强烈！
五、媒体标签
场景：在网页中显示图片
特点：
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置！
标签的完整结构图：
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
图片标签的src属性：
1、属性名：src 2、属性值：目标图片的路径
注意点： 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
图片标签的alt属性：
属性名：alt 属性值：替换文本 当图片加载失败时，才显示alt的文本 当图片加载成功时，不会显示alt的文本
图片标签的title属性：
属性名：title 属性值：提示文本 当鼠标悬停时，才显示的文本 注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
图片标签的width和height属性：
属性名：width和height 属性值：宽度和高度（数字） 注意点： 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形） 如果同时设置了width和height两个，若设置不当此时图片可能会变形
进行一个小总结：
| 属性 | 说明 |
|---|---|
| src | 指定需要展示图片的路径 |
| alt | 替换文本，当图片加载失败时，才显示的文字 |
| title | 提示文本，当鼠标悬停时，才显示的文字 |
| width | 图片的宽度 |
| height | 图片的高度 |
六、音频标签
场景：在页面中插入音频
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(部分浏览器不支持) |
| loop | 循环播放 |
注意点： 音频标签目前支持三种格式：MP3、Wav、Ogg
七、视频标签
场景：在页面中插入视频
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
| loop | 循环播放 |
注意点： 视频标签目前支持三种格式：MP4 、WebM 、Ogg
八、链接标签
场景：点击之后，从一个页面跳转到另一个页面
特点： 双标签，内部可以包裹内容 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
链接标签的target属性
属性名：target 属性值：目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转(覆盖原网页) |
| _blank | 在新窗口中跳转(保留原网页) |
空链接（了解）
功能： 点击之后回到网页顶部 开发中不确定该链接最终跳转位置，用空链接占个位置
九、总结
乐莫乐兮新相知，很高兴各位小伙伴可以坚持看完这篇文章。 如果对你有帮助，可以给博主三连支持一下哦~~ 非常感谢， 一起加油，一起进步！
