基础认知
认识基础语法
网页组成
文本 图片 音频 视频 超链接等元素组成
web标准
结构---html
表现---css
行为---javaScript
html基本骨架
<!--html 网页的整体-->
<html>
<!--head 网页的头部-->
<head>
<!--title 网页的标题-->
<title>网页的标题</title>
</head>
<!--body网页的主体(身体)-->
<body>
网页的主体
</body>
</html>
html:网页的主体
head:网页的头部
title:网页的标题
body:网页的主体
html语法规范
html注释
解释说明的作用,给程序员或者其它同事看.
快捷键:ctrl+/
标签分类
双边标签
<p>内容</p>
单边标签
<br>
<hr>
标签关系
父子关系(嵌套关系)
兄弟关系(并列关系)
标签构成 及标签关系
双边标签
<开始标签>内容</结束标签>
<p>内容11</p>
单边标签
<br>
标签关系
父子关系
兄弟关系
排版标签
标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
特点
独占一行
文字加粗
h1-h6依次变小
标题标签 没有h7
标题标签只有6级
段落标签
<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:高度
路径
绝对路径
绝对路径 以计算机盘符开始的路径
<!-- 盘符开头 -->
<img src="D:\web83\day01\02-案例\baby.jpg" alt="">
<!-- 网络地址 -->
<!-- 如果绝对路径是以网络地址
必须以http://开头或者https://
-->
<img src="http://www.itheima.com/images/logo.png" alt="">
相对路径
当前文件：当前的html网页
目标文件：要找到的目标文件名称
从当前文件开始出发找目标文件的过程
文件路径
绝对路径:以计算机盘符开始.
<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="./05-素材/music.mp3" controls autoplay loop></audio>
src 音频的播放路径(必写属性)
controls 显示播放控件
autoplay 音频加载完毕会自动播放(部分浏览器不支持)
loop 循环播放
视频标签
<video src="./05-素材/video.mp4" controls width="400" autoplay muted loop></video>
src 视频的路径(必写属性)
controls 显示视频的播放控件
width:设置宽度
autoplay:视频加载完毕自动播放 需要配合muted属性实现静音播放
loop:循环播放
超级链接标签
一个页面跳转到另外一个页面
<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>
