HTML的基础认知

最新推荐文章于 2024-07-25 11:26:35 发布

鹏zxp

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量45

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_74229555/article/details/128629057

版权

HTML的基础认知

网页组成

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

web标准

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

html骨架

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体,
        以后所有的标签 内容都放到body标签里面.
    </body>
</html>
html:网页的主体
head:网页的头部
title:网页的标题
body:网页的主体

html语法规范

html注释
解释说明的作用,给程序员或者其它同事看.
快捷键:ctrl+/
标签分类
	双边标签
	<p>内容</p>
	单边标签
	<br>
	<hr>
标签关系
    父子关系(嵌套关系)
    兄弟关系(并列关系)

排版标签

标题标签

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

段落标签

<p>一段文字</p>
特点:
双边标签
独占一行
段落直接有间隙
会根据浏览器窗口大小自动换行显示

换行标签

<br>
单边标签
强制换行

水平线标签

<hr>
单边标签
显示一条分割线

文本格式化标签

加粗:
<b>加粗</b>
<strong>加粗</strong>
下划线:
<u>下划线</u>
<ins>下划线</ins>
倾斜:
<i>倾斜</i>
<em>倾斜</em>
删除线:
<s>删除线</s>
<del>删除线</del>
重点掌握  strong em
推荐大家在实际开发中使用单词较长的标签,语义更加强烈.

媒体标签

图像标签

<img src="图片地址/图片路径">
属性:
src:图片的路径(必写属性)
alt:替换文本
title:提示文本
width:设置图片宽度
height:设置图片高度
boder:设置边框

文件路径

文件路径
绝对路径:以计算机盘符开始.
	<img src="D:\web79\day01\05-素材\baby.jpg" alt="">
 	<!-- 网址路径 一定要以https://或者以http://才可以出来 -->
    <img src="http://www.itheima.com/images/logo.png" alt="">
相对路径:从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.
同级目录
	方法一:目标文件名称
    方法二:./目标文件名称(推荐使用vscode提示)
<img src="./dog.gif" alt="">
下级目录
 	方法一: 目标文件夹/目标文件名称
 	方法二:  ./目标文件夹/目标文件名称(vscode提示)
<img src="./img/cat.gif" alt="">
上级目录
	../
<img src="../baby.jpg" alt="">

音频标签

<audio src="./music.mp3" controls autoplay loop></audio>
常见属性:
   src:音频路径
   controls:显示播放控件
   autoplay:自动播放
   loop:循环播放
  音频标签支持3种格式,推荐使用mp3

视频标签

 <video src="./video.mp4" controls autoplay loop muted width="300"></video>
 常见属性:
    src:视频的路径
    controls:显示播放控件
    autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放
    loop:循环播放
    width:设置宽度
   height:设置高度
视频标签支持3种格式,推荐使用mp4

超链接标签

<a href="链接的地址">跳转的文本</a>
属性:
href:链接跳转地址,必写属性.
target:设置窗口打开方式
	取值:
	_self:默认值,当前窗口打开页面
	_blank:新的窗口打开,保留原始窗口.
示例代码
<a href="https://www.jd.com/">外部链接</a>
<a href="./02-视频标签.html">内部链接</a>
<a href="链接地址"><img src="图片路径">网页元素链接</a>
下载链接 文件的后缀名必须以.exe .zip .rar等后缀名结尾
<a href="./02.zip">下载链接</a>
<a href="#">空链接</a>