web基础学习之(二)HTML介绍
代码详解
<html>
<head>
<title>Document</title>
</head>
<body>
测试页面
</body>
</html>
网页中固定结构是通过HTML标签进行描述的
每一个页面都有固定的结构,如：整体、头部、标题、主体
html是整体、head是头标签、标题是title、主体是body
标签
标签的类型
标签由<、>、/、英文单词组成的，并且把标签中<>包裹起来的英文单词或者字母成为标签名
常见标签由两部分组成的，我们称为双标签，前面部分成为开始标签，后面的部分叫结束标签、两部分包裹内容
少数标签由一部分组成、我们称为单表签。自成一体，无法包裹内容。
标题标签
代码
<h1>1级标签</h1> <h2>2级标签</h2> <h3>3级标签</h3> <h4>4级标签</h4> <h5>5级标签</h5> <h6>6级标签</h6>
特点
1.文字都有加粗
2.文字都有变大、并且从h1-h6文字逐渐变小
3.独占一行
P标签段落标签
代码
<p>我是一段文字</p>
特点
1.段落之间存在间隔
2.独占一行
HTML注释
<!-- -->
background标签(背景图片)
<style>
body {
background:url("zz.jpeg") no-repeat center center; /*加载背景图*/ /* 背景图不平铺 */
background-size:cover; /* 让背景图基于容器大小伸缩 */
background-attachment:fixed; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ //此条属性必须设置否则可能无效/
background-color:#CCCCCC; /* 设置背景颜色，背景图加载过程中会显示背景色 */
background-image: url("/test/img/154e.png");
background-repeat: no-repeat; /*属性设置是否及如何重复背景图像*/
} </style>
Audio标签(音频标签)
<audio id="bgmMusic" src="demo.mp3" autoplay="autoplay" loop="loop" preload="auto" type="audio/mp3"></audio>
controls是显示播放的控件
src是音频的路径
autoplay是自动播放
loop是循环播放
提示:
MP3、Wav、Ogg
全局属性
br换行标签
代码:
<br>
单标签
让文字强制转换
hr标签
代码:
<hr>
特点:
单标签
在页面中显示一条水平线
文本格式化标签
场景:需要让文字加粗、下划线、倾斜、删除线等效果
代码都是双标签:
<b> 加粗 <strong> 加粗 <u>下划线 <ins>下划线 <i>倾斜 <em>倾斜 <s>删除线 <del>删除线
突出重要性的强调语境
图片标签
<img src="" alt="">
alt是替换文本
title是提示文本当鼠标悬停时、才显示的文本
width是宽度
height是高度
注意:
如果只设置width和height中的一个，另一个没设置的会自动等比例缩放
如果同时设置width和height两个，若设置不当此时图片可能会变形
单标签
img标签需要展示对应的效果、需要借助标签的属性进行设置
全局属性
属性注意点:
1.标签的属性写字开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
路径的介绍
绝对路径:
绝对路径:指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如:
1.盘符
2.完整的网络地址
相对路径
概念普及
当前文件:当前的html网页
目标文件:要找到的图片
相对路径:从当前文档开始出发目标文件的过程
相对路径分类:
同级目录
下级目录
上级目录
同级目录代码:
#方法一 <img src="目标图片"> #方法二 <img src="./目标图片>
下级目录:目标文件在下级目录中
代码:
<img src="目录/图片>
上级目录:目录文件在上级目录中
<img src="../目录/图片" alt="">
视频标签
代码:
<video src="./MP4" controls></video>
src是视频的路径
controls是显示播放的控件
autoplay是自动播放 配合muted实现静音播放
loop是循环播放
全局属性
连接标签
代码
<a href="./目标网页">超链接</a>
1.双标签，内部可以包裹内容
2.如果需要a标签之后去指定页面，需要a标签的href属性
http://www.divcss5.com/html/h57427.shtml
https://www.gxlsystem.com/qianduan-2746.html
https://www.w3school.com.cn/tags/tag_video.asp
