HTML学习（一）

最新推荐文章于 2023-02-08 08:44:37 发布

Hyang904

最新推荐文章于 2023-02-08 08:44:37 发布

阅读量350

点赞数

分类专栏：寒假任务文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_64286326/article/details/122526935

版权

寒假任务专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML学习

1.HTML是什么

HTML称为超文本标记语言，全称Hyper Text Markup Language，是一种标识性语言。它包括一系列标签。HTML文本是由HTML标签组成的描述性文本，HTML标签可以展示图像、声音、图形、文字、表格、链接等等。

2.HTML文档示例

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8"> <!--源代码和此处指定的编码必须一直，否则浏览器中会显示乱码-->
         <title>文档标题</title>
     </head>    
     
     
     <body>
         文档内容...... <!..网页的内容标签都在这里，尖括号内的是注释，页面上看不到-->
     </body>
</html>

写完之后效果如下

当然我们查看网页源代码之后看到的也是我们刚才写的代码，如图

其中每个部分都代表着各自的含义

<mata charset="utf-8"> <!--这部分称为元信息 （是描述信息的信息）-->

例如我们可以写入

<meta name="keywords" content"关键词：我是菜鸡">

搜索引擎就会根据我们网页的关键词将该关键词收录，然后在搜索该关键词的时候，搜索引擎就会推送该关键词所属的网页。

比如我随便在百度搜索一下“我是菜鸡”，弹出来一个表情包网站

当我们查看该网站的源代码，就可以看到该网站所定义的关键词

3.1 Video 标签

手机端和PC端已经开始淘汰flash，网页中的音频、视频逐渐都会使用HTML标签来播放，而非flash

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8"> <!--源代码和此处指定的编码必须一直，否则浏览器中会显示乱码-->
         <title>文档标题</title>
     </head>    
     
     
     <body>
         文档内容...... <!..网页的内容标签都在这里，尖括号内的是注释，页面上看不到-->
         <video width="320" height="240" controls>
             <source src="开导.mp4" type="video/mp4">
                 您的浏览器不支持 HTML5 Video标签.
     </body>
</html>

写完之后我们可以打开看下效果

是可以正常播放的视频

<body>
         文档内容...... <!..网页的内容标签都在这里，尖括号内的是注释，页面上看不到-->
         <video width="320" height="240" controls>
             <source src="开导.mp4" type="video/mp4">
                 您的浏览器不支持 HTML5 Video标签.
     </body>

该部分就是我们的video标签

3.2 audio标签

audio的标签用法和video基本没有区别，我们直接用代码试试

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8"> <!--源代码和此处指定的编码必须一直，否则浏览器中会显示乱码-->
         <title>文档标题</title>
     </head>    
     
     
     <body>
         文档内容...... <!..网页的内容标签都在这里，尖括号内的是注释，页面上看不到-->
         <audio controls>
             <source src="lks.mp3">
               您的浏览器不支持 audio元素
         </audio>
     </body>
</html>

试了试效果是可以正常播放的

这是我们的audio代码块

<audio controls>
             <source src="lks.mp3">
               您的浏览器不支持 audio元素
</audio>
3.3 image标签

image代码如下

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8"> <!--源代码和此处指定的编码必须一直，否则浏览器中会显示乱码-->
         <title>文档标题</title>
     </head>    
     
     
     <body>
         文档内容...... <!..网页的内容标签都在这里，尖括号内的是注释，页面上看不到-->
        <img src="图片.jpg">
        
     </body>
</html>

其中图片的路径由很多种方式

1 在与html同级目录下

我们可以直接引用图片

<img src="图片.jpg">

2 在html上级的目录下

我们可以在前边加上../表示回到上级

<img src="../图片.jpg">

3 当我们引用网络图片时，可以直接在“”号内引入地址

<img src="https://hyang02.github.io/img/%E8%B7%AF%E9%A3%9E.png">

4 绝对路径

emm 绝对路径这里涉及到一些坑，我目前还不能够完全解决，下次一定！

5 base64

我们可以将图片转化为base64格式，然后将转化后的编码直接放在""号里面就行，因为编码过长，所以就不在展示

经过实验，上述的方式都可以正常加载图片，效果如下

3.5 超链接标签

1 当我们需要引入网络的链接时我们可以在body里写入

<a href="http:www.baidu.com">点我跳转到百度</a>

改代码块表示的是在该页面打开百度，并不会生成一个新的标签页

<a href="http:www.baidu.com" target="_blank">点我跳转到百度</a>

该代码则表示会打开一个新的标签也去浏览百度

2 当然我们也可引入本地的链接，具体如下

<a href="本地.html">点我跳转到本地.html</a>

需要注意的是，我们指定本地的链接时，也需要注意路径问题，具体规则同img相同

3 我们可以实现更多的功能，比如发送邮件

<a href="mailto:493225309@qq.com">点我发送邮件</a>

这个mailto 相当于一个协议，我们点击时会自动跳转到我们电脑本地上存在的邮件软件

4 我们还可以引入javascript

<a href="javascript:alert('我是谁？我在哪？')">test点我</a>

5 锚标记

<a href="#idTest">点我</a>
<div id="idTest1">定位到这里1</div>
<div id="idTest" style="position: absolute;top: 900px;">定位到这里2</div>

我们就可以通过代码进行定位了

Hyang904

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（一）

HTML学习1.HTML是什么HTML称为超文本标记语言，全称Hyper Text Markup Language，是一种标识性语言。它包括一系列标签。HTML文本是由HTML标签组成的描述性文本，HTML标签可以展示图像、声音、图形、文字、表格、链接等等。2.HTML文档示例<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--源...
复制链接

扫一扫