0基础学web----HTML认知 02-了解浏览器常用五大浏览器：IE浏览器、谷歌浏览器、火狐浏览器、safari

02-了解浏览器

常用五大浏览器：IE浏览器、谷歌浏览器、火狐浏览器、safari浏览器（苹果浏览器）、opera浏览器（欧帕浏览器）

03-初识web标准

web前端标准技术：HTML（结构），CSS（样式），JavaSrcipt(行为)

例如：HTML相当于人的身体，CSS相当于人的衣服，JavaScript相当于人的动作。

04-html感知

创建记事本来创建浏览器，将记事本后缀的txt改为html即可。添加内容：您好啊！web前端。运用进行加粗。

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-标签组成和关系

标签由双标签和单标签组成的，双标签为开始和结束，例如：。单标签则开始即可，不用使用结束标签：
，

09-标题和标签

标题标签相当于一个文档的标题，标题标签有六种

，

。

<!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-换行和水平线

换行标签为

<!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>

编辑

水平线标签为

<!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-文本格式标签化

编辑

以上标签功能上是一致的，没有任何区别性。只是、、、标签在代码中突出重要性的强调语境。

<!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

另一种是网络路径：

网络图片地址

i0.hdslb.com/bfs/feed-ad…

由于绝对路径不够稳定性，在开发中不常用。

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值不会出现保留原来网页。

编辑

想要视频教学？

请点击下方链接吧！

黑马程序员web前端开发入门教程，前端零基础html5+css3+前端项目视频教程_哔哩哔哩_bilibili

0基础学web----HTML认知