一、基础认知
目标:认识
网页组成
和
五大浏览器
,明确
Web
标准的构成
,使用
HTML
骨架
搭建出一个网页。
常见的五大浏览器:
IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)。
渲染引擎(浏览器内核):浏览器中专门
对代码进行解析渲染的部分。
![](https://i-blog.csdnimg.cn/blog_migrate/9f5bfbb1b4d8316e9b9ba1189c3ff2e9.png)
Web标准:让不同的浏览器按照相同的标准显示结果,让
展示的效果统一
!Web标准要求页面实现:结构、表现、行为三层分离。
![](https://i-blog.csdnimg.cn/blog_migrate/24b18f1ebde2707c67c1ce2b2336451c.png)
HTML(Hyper Text Markup Language)中文译为:超文本标记语言。
➢
专门用于网页开发的语言,主要通过
HTML标签
对网页中的文本、图片、音频、视频等内容进行描述。
HTML页面固定结构
![](https://i-blog.csdnimg.cn/blog_migrate/9a76e3bb56dc4cae2637ac83851d9a9a.png)
二、开发工具VS Code
VS Code的基本快捷键:
快速生成标签:英文 + tab
快速生成结构标签:! + tab
选中多行内容:Alt + shift + 鼠标左键
注释快捷键:ctrl + /
三、HTML标签学习
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为
标签名
常见标签由两部分组成,称之为:
双标签
。前部分叫
开始标签
,后部分叫
结束标签
,两部分之间包裹内容。少数标签由一部分组成,我们称之为:
单标签
。
3.1 标题标签h1 → h6
场景:在新闻和文章的页面中,都离不开
标题
,用来突出显示文章主题
语义:1~6级标题,重要程度依次递减
特点:
文字都有加粗
文字都有变大,并且从h1 → h6文字逐渐减小
独占一行
3.2 段落标签P
场景:在新闻和文章的页面中,用于分段显示
语义:段落
特点:
段落之间存在间隙
独占一行
3.3 换行标签br
场景:让文字强制换行显示
语义:换行
特点:
单标签
让文字强制换行
3.4 水平线标签hr
场景:分割不同主题内容的水平线
语义:主题的分割转换
特点:
单标签
在页面中显示一条水平线
3.5 文本格式化标签
场景:需要让文字加粗、下划线、倾斜、删除线等效果
语义:突出重要性的强调语境
3.6 图片标签img
场景:在网页中显示图片
特点:
单标签
img标签需要展示对应的效果,需要借助标签的属性进行设置!
![](https://i-blog.csdnimg.cn/blog_migrate/45977ac1e2912f4d29f965009cd9a97d.png)
属性名:src
属性值:目标图片的路径
属性值:目标图片的路径
属性名:alt
属性值:替换文本
• 当图片加载失败时,才显示alt的文本
• 当图片加载成功时,不会显示alt的文本
属性名:title
属性值:提示文本
•当鼠标悬停时,才显示的文本。注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签
属性值:提示文本
•当鼠标悬停时,才显示的文本。注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签
属性名:width和height
属性值:宽度和高度(数字)
注意点:
• 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
• 如果同时设置了width和height两个,若设置不当此时图片可能会变形
属性值:宽度和高度(数字)
注意点:
• 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
• 如果同时设置了width和height两个,若设置不当此时图片可能会变形
![](https://i-blog.csdnimg.cn/blog_migrate/6ab3c2524333abd6879c75aa91a1aaf0.png)
3.7 音频标签audio
3.8 视频标签video
3.9 链接标签a
场景:点击之后,从一个页面跳转到另一个页面
称呼: a标签、超链接、锚链接
特点:
• 双标签,内部可以包裹内容
• 如果需要a标签点击之后去指定页面,需要设置a标签的href属性
属性名:href
属性值:点击之后跳转去哪一个网页(目标网页的路径)
显示特点:
• a标签默认文字有下划线
• a标签从未点击过,默认文字显示蓝色
• a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)