HTML基础认知（一）

星绵崽崽

已于 2022-07-19 22:36:54 修改

阅读量124

点赞数 3

文章标签： html servlet 前端

于 2022-07-19 21:23:55 首次发布

本文链接：https://blog.csdn.net/weixin_47672177/article/details/125881084

版权

1.网页的组成

文本图片音频视频超链接等元素组成

2.Web标准

结构---html
表现---css
行为---javaScript

3.`html`基本骨架

<!--html 网页的整体-->
<html>
<!--head  网页的头部-->
   <head>
	<!--title 网页的标题-->
	<title>网页的标题</title>
</head>	
	
<!--body网页的主体(身体)-->
<body>
	网页的主体
</body>

</html>

4.标签构成及标签关系

双边标签
	<开始标签>内容</结束标签>
	<p>内容11</p>
单边标签
<br>
标签关系
    父子关系
    兄弟关系

5.排版标签

5.1标题标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
特点
独占一行
文字加粗
h1-h6依次变小

标题标签没有h7

标题标签只有6级

5.2段落标签

<p>段落标签</p>
特点
独占一行
段落与段落之间有间隙
当缩放浏览器窗口大小时会自动换行显示

5.3换行标签水平线标签

<br>
<hr>

5.4文本格式化标签

加粗
<strong>加粗</strong>
<b>加粗</b>
倾斜
<em>倾斜</em>
<i>倾斜</i>
下划线
<ins>下划线</ins>
<u>下划线</u>
删除线
<del>删除线</del>
<s>删除线</s>

推荐使用单词较长的标签,语义更加强烈

重点需要掌握 strong em

5.5图像标签

网页中显示一张图片

<img src="图片的路径">

属性:
src:图片地址,必写属性
alt:替换文本图片加载失败时,显示文本信息.
title:提示文本鼠标悬停时,显示文本信息.
width:宽度
height:高度

5.6路径

绝对路径 以计算机盘符开始的路径

  <!-- 盘符开头 -->
    <img src="D:\web83\day01\02-案例\baby.jpg" alt="">
    <!-- 网络地址 --e
    <!-- 如果绝对路径是以网络地址
        必须以http://开头或者https://
     --e
    <img src="http://www.itheima.com/images/logo.png" alt="">

相对路径

当前文件：当前的html网页

目标文件：要找到的图片

从当前文件开始出发找目标同级目录
   方法一: 目标文件名称
   方法二:./目标文件名称
下级目录
   方法一: 目标文件夹/目标文件名称
   方法二:./目标文件夹/目标文件名称
上级目录
   上一级
   ../目标文件名称
   上两级
   ../../目标文件名称文件的过程

5.7音频标签

<audio src="./05-素材/music.mp3" controls autoplay loop></audio>

src 音频的播放路径(必写属性)
controls 显示播放控件
autoplay 音频加载完毕会自动播放(部分浏览器不支持)
loop 循环播放

5.8视频标签

<video src="./05-素材/video.mp4" controls width="400" autoplay muted loop></video>

src 视频的路径(必写属性)
controls 显示视频的播放控件
width:设置宽度
autoplay:视频加载完毕自动播放需要配合muted属性实现静音播放
loop:循环播放

5.9超级链接标签

一个页面跳转到另外一个页面

<a href="链接地址">链接文本</a>
链接分类
外部链接( 外部链接  一定要要以http://或以https://开头)
<a href="https://www.mi.com/">外部链接</a>
内部链接
<a href="./内部网页文件.html">内部链接</a>
下载链接(下载链接 文件的后缀名一定要以 .exe  .zip .rar结尾的文件)
<a href="./01.zip">下载链接</a>
网页元素链接
<a href="https://www.jd.com/"><img src="./05-素材/cat.gif" alt=""></a>
空链接
<a href="#">空链接</a>
target:设置连接的跳转方式
	取值
	_self:默认值 当前窗口跳转
	_blank:保留当前窗口,从新打开新的窗口
 <a href="https://www.jd.com/" target="_blank">保留原始页面,从新打开新的页面</a>