HTML基础认知
- 网页的知识
网页是由文字,图片,音频,视频,超链接等组成
常见的五大浏览器:IE,Firefox,Chrome,Safari和Opera
- 渲染引擎
浏览器中专门对代码进行解析渲染的部分。不同的浏览器它的渲染引擎也是不同的,如下图所示
渲染引擎不同,导致解析相同代码时的速度,性能和效果也不同。根据用户体验的反馈,谷歌浏览器的渲染引擎速度快,性能高,效果好,所以在前端开发中推荐使用谷歌浏览器。(极少数情况需要使用火狐浏览器进行相关代码的调试)
- Web标准
由三大部分构成。
结构:HTML->页面元素
表现:CSS->页面样式
行为:JavaScript->页面交互的动态效果
- HTML基础认识
全名Hyper Text Markup Language简称超文本标记语言。
HTML的骨架结构由四个标签组成
html标签是网页的整体;
head标签是网页的头部;
body标签是网页的身体;
title标签是网页的标题
- HTML标签的构成
- HTML标签的属性
标签名和属性之间要以空格分开
属性之间没有顺序之分
标签上可以同时存在多个属性(比如可以存在多个class类名,但是只能存在一个id)
- HTML标签的关系
父子嵌套关系和兄弟并列关系
HTML基础标签
- 排版标签
- 标题标签
在新闻和文章的页面中,都离不开标题,用来突出显示文章主题,有h1,h2,h3,h4,h5,h6
文字都有加黑加粗,并且文字逐渐减小
- 段落标签
在新闻和文章的页面中,用于分段显示,p标签
段落之间存在间隙,并且独占一行
- 换行标签
让文字强制换行显示 br标签
- 水平线标签
分隔不同主题内容的水平线,了解即可,因为前期可能会使用,后期用CSS样式来调整 hr标签
- 文本格式化标签
- 媒体标签
- 图片标签
单标签,有src属性和alt属性
src只图片路径,可以是绝对或者相对路径
alt用来替换文本,当图片加载失败时,才会显示alt的文本,图片加载成功时,不会显示alt的文本
title属性是提示文本,当鼠标悬停在图片上时,才会显示的文本
width和height如果只设置了其中的一个,另一个会自动等比例的缩放,此时图片不会变形。如果同时设置,此时图片可能变形
- 路径
绝对路径指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
相对路径指从当前文件开始出发找目标文件的过程。
相对路径分为同级目录,下级目录和上级目录
- 音频标签
插入音频双标签为audio,支持的三种格式为MP3,WAV,Ogg
- 视频标签
双标签video
支持的格式有MP4,Ogg等
4. a链接标签
a链接又称为超链接,点击之后,实现最基本的跳转。
双标签,有默认下划线和默认颜色
target属性 _self是默认值,指在当前窗口中跳转,_blank在新窗口中跳转