HTML基础认知和标签

HTML基础认知

1. 网页的知识

网页是由文字，图片，音频，视频，超链接等组成
常见的五大浏览器：IE，Firefox，Chrome，Safari和Opera

2. 渲染引擎

浏览器中专门对代码进行解析渲染的部分。不同的浏览器它的渲染引擎也是不同的，如下图所示

渲染引擎不同，导致解析相同代码时的速度，性能和效果也不同。根据用户体验的反馈，谷歌浏览器的渲染引擎速度快，性能高，效果好，所以在前端开发中推荐使用谷歌浏览器。（极少数情况需要使用火狐浏览器进行相关代码的调试）

3. Web标准

由三大部分构成。
结构：HTML->页面元素
表现：CSS->页面样式
行为：JavaScript->页面交互的动态效果

4. HTML基础认识

全名Hyper Text Markup Language简称超文本标记语言。
HTML的骨架结构由四个标签组成
html标签是网页的整体;
head标签是网页的头部;
body标签是网页的身体;
title标签是网页的标题

5. HTML标签的构成
6. HTML标签的属性

标签名和属性之间要以空格分开
属性之间没有顺序之分
标签上可以同时存在多个属性（比如可以存在多个class类名，但是只能存在一个id）

7. HTML标签的关系

父子嵌套关系和兄弟并列关系

HTML基础标签

1. 排版标签

• 标题标签

在新闻和文章的页面中，都离不开标题，用来突出显示文章主题，有h1,h2,h3,h4,h5,h6
文字都有加黑加粗，并且文字逐渐减小

• 段落标签

在新闻和文章的页面中，用于分段显示,p标签
段落之间存在间隙，并且独占一行

• 换行标签

让文字强制换行显示 br标签

• 水平线标签

分隔不同主题内容的水平线，了解即可，因为前期可能会使用，后期用CSS样式来调整 hr标签

2. 文本格式化标签

3. 媒体标签

• 图片标签

单标签,有src属性和alt属性

src只图片路径，可以是绝对或者相对路径
alt用来替换文本，当图片加载失败时，才会显示alt的文本，图片加载成功时，不会显示alt的文本
title属性是提示文本，当鼠标悬停在图片上时，才会显示的文本
width和height如果只设置了其中的一个，另一个会自动等比例的缩放，此时图片不会变形。如果同时设置，此时图片可能变形

• 路径

绝对路径指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
相对路径指从当前文件开始出发找目标文件的过程。
相对路径分为同级目录，下级目录和上级目录

• 音频标签

插入音频双标签为audio，支持的三种格式为MP3，WAV，Ogg

• 视频标签

双标签video
支持的格式有MP4,Ogg等

4. a链接标签

a链接又称为超链接，点击之后，实现最基本的跳转。
双标签，有默认下划线和默认颜色
target属性 _self是默认值，指在当前窗口中跳转,_blank在新窗口中跳转