HTML基础标签及基本知识

最新推荐文章于 2021-12-03 21:59:21 发布

Andre_Chen

最新推荐文章于 2021-12-03 21:59:21 发布

阅读量201

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/Andre_Chen/article/details/120314741

版权

本文介绍了HTML的基本概念，包括其作为标记语言的特性，标签的语法结构（如开始标签、自闭合标签、嵌套和属性），以及常用的标签如标题、段落、链接、图片、音频和视频的用法。通过实例演示了如何创建简单的HTML页面和链接。

摘要由CSDN通过智能技术生成

认识HTML：

        超文本标记语言(hyper text markup language)
       HTML不是一种编程语言，而是一种标记语言，描述网页的语言
       HTML使用标签描述网页中图片、文本、音乐、视频、超链接等

   *语法：
           1.文档的后缀名为：.html 或者 .htm - 两者无区别
           2.标签分为：
               (1)有开始标签和结束标签。如：<hrml> </hrml>
               (2)自闭和标签：开始标签和结束标签在一起。如：<br/> 换行标签
           3.标签可以嵌套：
               需要正确的嵌套，不能你中有我，我中有你；
                   错误：<a> <b> </a> </b>
                   正确：<a> <b> </b> </a>
           4.在开始标签内可以定义属性。

属性由键值对构成，值需要用引号（单双都可以）引起来；
5.html的标签不区分大小写，但是建议使用小写！

*注释和特殊符号：
           *注释： 快捷键：ctrl + /
           空格： 
           大于：>
           小于：⁢
           引号："
           版权号：@© ©

   *基本标签：
       <h1>~<h6> 标题
       <p>段落
       <br>换行
       <hr>间隔线
       <em>斜体
       <strong>加粗

简单案例：如梦令

</p>
<hr color="red" width="100%">
<h1>如梦令</h1>
<h3>李清照 &copy;</h3>
<hr color="blue" width="100%">
<p>
    <em>常记溪亭日暮，沉醉不知归路。</em><br>
    <strong>兴尽晚回舟，误入藕花深处。</strong><br>
    争渡，争渡，惊起一滩鸥鹭。
</p>

执行结果：

   *标签：
   旧文本：<font>文字 <br>换行 <hr>间隔线 <h1>标题 <p>换段 <b>加粗 <i>斜体 <center>居中
   链接：

          1.页面间得链接：<a href="链接路径或网址">名称</a>
       2.锚链接：跳至自身固定位置或者A页面跳到B页固定位置，需要锚标记
           链接标识：<a href="页面路径#位置名">点击标识</a> -
           指定位置：<a name="位置名"></a>
           eg：<a name="target"></a> --指定该位置名为target
               <a href="jinyesi.html#target">静夜思的音乐</a>
                   -- 点击标识静夜思的音乐就会直接到达文件jinyesi页面的target位置
       3.功能性链接：电子邮件.QQ.MSN 等链接
           eg：<a href="tencent://Message/?Uin=666666&Site=&Menu-=yes">QQ联系</a>
               <a href="mailto:666666@qq.com">邮件</a>

链接简单案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--页界面链接-->
<a href="jinyesi.html">静夜思</a>
<a href="https://www.baidu.com/">百度</a><br>
<!--锚链接-->
<a href="jinyesi.html#target">静夜思得视频</a><br>
<!--功能性链接-->
<a href="tencent://Message/?Uin=666666&Site=&Menu-=yes">QQ联系</a>
<a href="mailto:666666@qq.com">邮件</a>
</body>
</html>

结果：

   图片：<img src="图片路径"/>
   音频：<audio src="音频路径" controls="controls"></audio>
   视频：引入视频文件：<video src="视频路径" controls></video>
       给视频文件添加功能：（且闭合内的视频内容只播放读取到的第一个可播放文件，若读取到的第一个无法读取就会播放下一个继续读取）
       <video controls autoplay>
                   <source src="视频路径.webm"></video>
                    <source src="视频路径.mp4"></video>
       </video>

*备注：controls ：播放功能键； autoplay：自动播放；

<body>
<!--音频 audio src= -->
<audio src="file/mmm.mp3" autoplay controls></audio>
<br><hr>
<!--视频 video src= -->
<video src="file/bd.mp4" controls></video>
<video controls autoplay>
    <source src="file/bd.avi">
    <source src="file/bd.mp4">
</video>
<br>
</body>

结果：