HTML基础标签

最新推荐文章于 2024-09-15 22:12:53 发布

鱼Y.

最新推荐文章于 2024-09-15 22:12:53 发布

阅读量96

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/weixin_63448962/article/details/131657266

版权

这是一条学习记录贴

什么是HTML？

HTML全称Hyper Text Markup Language，即超文本标记语言。

HTML基础知识

版本说明

<!DOCTYPE html>
<!-- 版本说明 -->

语言

<html lang="en">
    <!-- 语言
        en：英文
        zn：中文
    -->

头部

<head>
    <!-- 头部 -->
        <!-- UTF-8 编码方式 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- favicon网页图标 -->
    <link rel="shortcut icon" href="./img/1.ico" type="image/x-icon">
    <!-- 网页标题 -->
    <title>Day1</title>
</head>

主体内容：

<body>
    
</body>

标题标签<h></h>

<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>

段落标签

<p>这是一个段落</p>

水平线标签

 <hr>

换行标签

<br>

通用标签

  <div style="width: auto; height: 50px; background-color: aquamarine; text-align: center;">这是一个div</div>

通用行内标签

    <span style="width: auto; height: 50px; background-color: beige ; text-align: center;">这是一个span</span>

字体标签

<!-- 字体标签，属性包含color，face，size -->
    <font color="darkgreen">这是字体颜色示例</font>
    <font face="楷体">这是字体字体示例</font>
    <font size="20">这是字体大小示例</font>

粗体标签

<b>这是第一种粗体演示</b>
<strong>这是第二种粗体演示</strong>

斜体标签

<i>这是第一种斜体演示</i>
<em>这是第二种斜体演示</em>

删除线标签

<s>这是第一种删除线演示</s>
<del>这是第二种删除线演示</del>

下划线标签

<u>这是第一种下划线演示</u>
<ins>这是第二种下划线演示</ins>

上标，下标标签

<p>这是<sup>上标</sup>演示</p>
<p>这是<sub>下标</sub>演示</p>

标记标签

<mark>这是标记标签演示</mark>

缩写标签

<abbr title="缩写标签演示">例如</abbr>

图片标签

<img src="存放图片路径" alt="图片加载失败时，会显示此内容" width="150" height="150">

链接标签

 <a href="http://www.baidu.com" target="_blank">百度搜索</a>
<!-- 
target:
    _self:默认窗口弹出（本窗口）
    _blank:新窗口弹出

插播一条src和href的区别
    src：引入资源
    href：跳转URL
 -->

音频标签

<audio src="存放路径" controls autoplay></audio>
 <!-- 
controls：播放控件 
autoplay：自动播放
loop：循环播放
-->

视频标签

<video src="存放路径" controls autoplay width="300" height="300"></video>
<!-- 
controls：播放控件 
autoplay：自动播放
loop：循环播放
-->

以下为完整代码

<!DOCTYPE html>
<!-- 版本说明 -->
<html lang="en">
    <!-- 语言
        en：英文
        zn：中文
    -->
<head>
    <!-- 头部 -->
        <!-- UTF-8 编码方式 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- favicon网页图标 -->
    <link rel="shortcut icon" href="./img/1.ico" type="image/x-icon">
    <!-- 网页标题 -->
    <title>Day1</title>
</head>
<body>
    <!-- 主体 -->

<!-- 基础标签 -->

    <!-- 标题标签 -->
            <!-- 复制当前行 shift+alt+⬇ -->
    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <h3>这是一个三级标题</h3>
    <h4>这是一个四级标题</h4>
    <h5>这是一个五级标题</h5>
    <h6>这是一个六级标题</h6>
    <!-- 段落标签 -->
    <p>这是一个段落</p>
    <!-- 水平线标签 -->
    <hr>
    <!-- 换行标签 -->
    <br>
    <p>这是一个<br>换行例子</p>
    <!-- 通用标签 -->
    <div style="width: auto; height: 50px; background-color: aquamarine; text-align: center;">这是一个div</div>
    <!-- 通用行内标签 -->
    <span style="width: auto; height: 50px; background-color: beige ; text-align: center;">这是一个span</span>
    <br>
<!-- 文本排版标签 -->

    <!-- 字体标签，属性包含color，face，size -->
    <font color="darkgreen">这是字体颜色示例</font><br>
    <font face="楷体">这是字体字体示例</font><br>
    <font size="20">这是字体大小示例</font><br>
    <!-- 粗体标签 -->
    <b>这是第一种粗体演示</b>
    <strong>这是第二种粗体演示</strong><br>
    <!-- 斜体标签 -->
    <i>这是第一种斜体演示</i>
    <em>这是第二种斜体演示</em><br>
    <!-- 删除线标签 -->
    <s>这是第一种删除线演示</s>
    <del>这是第二种删除线演示</del><br>
    <!-- 下划线标签 -->
    <u>这是第一种下划线演示</u>
    <ins>这是第二种下划线演示</ins><br>
    <!-- 上标标签 -->
    <p>这是<sup>上标</sup>演示</p>
    <!-- 下标标签 -->
    <p>这是<sub>下标</sub>演示</p>
    <!-- 标记标签 -->
    <mark>这是标记标签演示</mark>
    <!-- 缩写标签 -->
    <br>
    <abbr title="缩写标签演示">例如</abbr>
    <br>
    <!-- 图片标签 -->
    <img src="./img/ima.jpg" alt="rose" width="150" height="150">
    <!-- 链接标签 -->
    <br>
    <a href="http://www.baidu.com" target="_blank">百度搜索</a>
    <!-- 音频标签 -->
    <br>
    <audio src="./MP3/周杰伦-《半岛铁盒》.flac" controls autoplay></audio>
    <!-- 视频标签 -->
    <br>
    <video src="./MP4/《有我》.mp4" controls autoplay width="300" height="300"></video>
</body>
</html>

效果演示如下：