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

最新推荐文章于 2024-09-03 16:07:32 发布

情绪员Tim

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量523

点赞数 1

分类专栏： web前端文章标签：前端 html html5

本文链接：https://blog.csdn.net/QQ675396947/article/details/121899949

版权

web前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

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

想要视频教学？

请点击下方链接吧！

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

情绪员Tim

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
0基础学web----HTML认知

02-了解浏览器常用五大浏览器：IE浏览器、谷歌浏览器、火狐浏览器、safari浏览器（苹果浏览器）、opera浏览器（欧帕浏览器）03-初识web标准web前端标准技术：HTML（结构），CSS（样式），JavaSrcipt(行为)例如：HTML相当于人的身体，CSS相当于人的衣服，JavaScript相当于人的动作。04-html感知创建记事本来创建浏览器，将记事本后缀的txt改为html即可。添加内容：您好啊！web前端。运用<Strong></Strong&
复制链接

扫一扫