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

 

posted @ 2022-07-03 20:49  永远爱芒果  阅读(156)  评论(0编辑  收藏  举报