目录
1、基础认知
(1)网页有哪些部分组成的?
文字、图片、音频、视频、超链接
(2)网页背后的本质是前端程序员写的代码
(3)前端的代码用过浏览器转化(解析和渲染)成为用户可以看到的
2、HTML标签学习
2.1排版标签
2.1.1 标题标签
h系列标签
<h1>1级标签</h1>
.......
<h6>6级标签</h6>
特点:
(1)文字都有加粗
(2)文字都有变大,文字从h1到h6文字逐渐减小
(3)独占一行
2.1.2 段落标签
在新闻和文章的页面中,用于分段的显示
<p>我是一段文字<p>
特点:
(1)段落之间存在间隔
(2)独占一行
2.1.3 换行标签
让文字强制换行显示
<br>
特点:
(1)单标签
(2)让文字强制换行
2.1.4 水平线标签
分割不同主题内容的水平线
<hr>
主题的分割切换
特点:
(1)单标签
(2)在页面中显示一条水平线
2.2文本格式化标签
需要让文字加粗、下划线、倾斜、删除等效果(后者强调更加突出)
<b> 加粗 ==><strong>
<u> 下划线==><ins>
<i> 倾斜 ==><em>
<s> 删除线==><del>
2.3媒体标签
2.3.1图片标签
在网页中显示图片
<img src="" alt="">
src=""标签属性 src标签是属性名,""内属性值:目标图片的路径
注:
(1)单标签
(2)img标签需要展示对应的效果,需要借助标签的属性进行设置!
alt=""标签属性 alt标签是属性名,""内属性值:替换文本
注:
只有图片加载失败才会显示alt的文本
当图片加载成功时不会显示alt的文本
title=""标签属性 title标签是属性名,""内是属性值:提示文本
注:
等鼠标悬停时,才显示文本
width和height属性
属性值:宽度和高度(数字)
注:
如果只设置其中一个,另一个没设置的会自动等比例缩放(此时图片不变形)
如果同时设置了高度与宽度,若设置不当此时图片可能会变形
2.3.2路径
页面需要加载图片,需要先找见对应的图片
路径分为:
绝对路径:指相对目录下的绝对位置,可直接到达目标的位置,通常从盘符开始的路径
相对路径:从当前文件开始出发找目标文件的过程
相对路径的分类:
同级目录:当前文件和目标文件在同一目录中<img src="./目标文件.png">或<img src="目标图片.png">
下级目录:目标文件在下级目录中<img src="images/目标文件.gif">
上级目录:目标文件在上级目录中<img src="../images/目标文件.gif">
2.3.3音频标签
在页面中插入音频
<audio src="./music.mp3" controls></audio>
常见的属性:
src:音频的路径
controls:显示播放的控件
autoplay:自动播放
loop:循环播放
2.3.4视频标签
在页面中插入视频
<video src=“.video,mp4” controls></video>\
常见的属性:
src:视频的路径
controls:显示播放的控件
autoplay:自动播放(谷歌浏览器中需要配合muted实现静音播放)
loop:循环播放
注:
视频标签目前支持三种格式:MP4、WebM、Ogg
2.4链接标签
2.4.1链接标签的介绍
点击之后,从一个页面跳转到另一个页面
<a href="./目标网页.html">超链接</a>
特点:
(1)双标签,内部可以包裹内容
(2)如果需要a标签点击之后去指定页面,需要设置a标签的href属性
2.4.2链接标签属性
target:显示连接的窗口或框架;<a href="https://www.csdn.net/" target="_blank" >CSDN - 专业开发者社区</a>
_blank:在新窗口中打开链接,保留原网页;
_self:在当前窗口打开链接,覆盖原网页;
_parent:在父窗口中打开链接;
_top:在定级窗口中打开链接;
framename:窗口名称;
name:超链接,创建文档内的书签;
title:设置超链接的文字说明(鼠标悬停时显示)。