02-了解浏览器
常用五大浏览器:IE浏览器、谷歌浏览器、火狐浏览器、safari浏览器(苹果浏览器)、opera浏览器(欧帕浏览器)
03-初识web标准
web前端标准技术:HTML(结构),CSS(样式),JavaSrcipt(行为)
例如:HTML相当于人的身体,CSS相当于人的衣服,JavaScript相当于人的动作。
04-html感知
创建记事本来创建浏览器,将记事本后缀的txt改为html即可。添加内容:您好啊!web前端。运用<Strong></Strong>进行加粗。
05-html骨架
HTML标签为开头和结尾,title标签为标题标签,body为主题正文标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
正文
</body>
</html>
06-web常用使用工具
Visual Studio Code
07-注释
注释相当于在代码里面的备注信息,不会实现注释里面的任何代码,方便提供开发者阅读代码。注释符号: “<!--”,“ -->”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 注释是用这符号的 -->
</body>
</html>
08-标签组成和关系
标签由双标签和单标签组成的,双标签为开始和结束,例如:<html></html>。单标签则开始即可,不用使用结束标签:<br>,<hr>
09-标题和标签
标题标签相当于一个文档的标题,标题标签有六种<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
10-换行和水平线
换行标签为<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>超文本标记语言,标准通用标记语言下的一个应用。<br> “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。</p>
</body>
</html>
水平线标签为<hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>超文本标记语言,标准通用标记语言下的一个应用。<br><hr> “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。</p>
</body>
</html>
11-文本格式标签化
以上标签功能上是一致的,没有任何区别性。只是<strong></strong>、 <ins></ins>、 <em></em>、 <del></del>标签在代码中突出重要性的强调语境。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>加粗1</b>
<strong>加粗2</strong>
<br>
<u>下划线1</u>
<ins>下划线2</ins>
<br>
<i>倾斜1</i>
<em>倾斜2</em>
<br>
<s>删除线1</s>
<del>删除线2</del>
</body>
</html>
12-图片的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/223.jpg" alt="">
</body>
</html>
13-图片属性
图片属性我们常见的有: <img src="images/223.jpg" alt="" title="" width="200" height="200">
alt是当图片加载失败后显示的文本
<img src="images/*****.jpg" alt="该图片显示失败">
titile是鼠标悬停在图片上提示的文本
<img src="images/223.jpg" alt="该图片显示失败" title="图片悬停提示" >
width是图片的宽度
<img src="images/223.jpg" alt="该图片显示失败" title="图片悬停提示" width="800" >
height是图片的高度
<img src="images/223.jpg" alt="该图片显示失败" title="图片悬停提示" width="800" height="200" >
注意:width和height属性只设置一个的情况下,不会改变图片的比例情况,保持图片原有的比例变大变小适应设置的width和height。
14-绝对路径
绝对路径有两种,一种是电脑本地的路径。
路径为:C:\Users\Mr.Qiu\Desktop\Html5+Css3
另一种是网络路径:
网络图片地址
https://i0.hdslb.com/bfs/feed-admin/49f751035fe4ef32f8dab6f9ebac1899b9371187.jpg@880w_388h_1c_95q
由于绝对路径不够稳定性,在开发中不常用。
15-相对路径
相对路径是在开发文件夹中所找到自己所需要的文件信息。例如:
src="images/223.jpg"
在同级的images文件夹中寻找223.jpg图片。
16-相对路径上级
相对路径上级是用“../”来表示文件夹的上一级。
17-音频标签
<audio src="images/林俊杰 - 她说.mp3" controls autoplay loop></audio>
18-视频标签
<video src="images/dongtai.mov" controls autoplay loop></video>
19-超链接
a标签点击它回替换本网页跳转到你点击的网页中去。
<a href="https://www.baidu.com">百度</a>
<a href="18-视频标签.html">18-网页视频标签</a>
<a href="#">#无标签</a>
a标签添加target属性的_blank值不会出现保留原来网页。