• 网页基本标签

    本次博客带领大家学习HTML中的基本标签。

    标题标签

    • 标题标签是用，数字越小，标题字体越大，例如

      。
    
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    段落标签

    • 段落标签使用的是

      ,将HTML中的文字进行分段，进入直接在HTML中输入文字的情况，是不会分段的，要使用

      才会进行分段处理。

    
<p>两只老虎，两只老虎，p>
<p>跑得快，跑得快，p>
<p>一只没有眼睛，p>
<p>一只没有尾巴，p>
<p>真奇怪！真奇怪！p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    换行标签

    • 换行标签是用
      进行换行，它与段落标签

      的区别是：换行标签是紧挨着换行输出，而段落标签是分段换行输出，间隙较大。

    
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    水平线标签

    • 水平线标签使用的是
      进行分割，使用水平线标签可以使得我们的网页板块更加清晰。

    字体样式标签

    • 粗体样式：使用对字体进行加粗。
    • 斜体样式：使用将字体变为斜体。
    粗体：<strong>i love youstrong>
斜体：<em>i love youem>

    • 1
    • 2

    特殊符号

    空格：  HTML中没有使用 的特殊符号，自己手打的空格，最后也只会输出一个。

    大于号：>

    小于号：<

    版权符号：©

    
空    格：
空     格
<br>
大于号：>
<br>
小于号：<
<br>
版权符号:©

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    图像标签

    请添加图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习title>
head>
<body>

<img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    链接标签

    请添加图片描述

    • 文本超链接：
    <a href="firstHtml.html" target="_blank">点击我跳转到页面一a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度a>

    • 1
    • 2
    • 图像超链接：
    <a href="firstHtml.html">
    <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
a>

    • 1
    • 2
    • 3
    • 锚链接：本身可以作为对指向目标页面的内容概述。但是单页站锚链接与锚文本有所不同。
      1. 需要一个锚标记。
      2. 跳转到标记。
    
<a name="top">顶部a>


<a href="firstHtml.html" target="_blank">点击我跳转到页面一a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度a>

<br>
<a href="firstHtml.html">
    <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
a>
<p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    a>
p><p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    a>
p><p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    a>
p><p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    a>
p>


<a href="#top">回到顶部a>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 功能链接：邮件链接：mailto
    
<a href="mailto:1661367006@qq.com">联系我a>

    • 1
    • 2
    • 3
    • 4

    行内元素和块元素

    • 块元素
      • 无论内容多少，该元素独占一行。
      • (p、h1-h6…)
    • 行内元素
      • 内容撑开宽度，左右都是行内元素的可以排在一行。
      • (a,strong,em…)

    列表标签

    • 什么是列表
      • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
    • 列表的分类
      • 无序列表(ul)
      • 有序列表(ol)
      • 自定义列表(dl)
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习title>
head>
<body>


<ol>
    <li>Javali>
    <li>Pythonli>
    <li>运维li>
    <li>前端li>
ol>
<hr>

<ul>
    <li>Javali>
    <li>Pythonli>
    <li>运维li>
    <li>前端li>
ul>

<dl>
    <dt>学科dt>

    <dd>Javadd>
    <dd>Pythondd>
    <dd>Linuxdd>
    <dd>Cdd>

    <dt>位置dt>

    <dd>北京dd>
    <dd>汕头dd>
    <dd>广州dd>
    <dd>厦门dd>
dl>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    表格标签

    • 基本结构：使用
      生成表格。
      • 单元格：使用生成。
      • 行：使用生成行。
      • 列：使用生成列。
      • 跨行：使用rowspan合并多行。
      • 跨列：使用colspan合并多列。
    <table border="1px">
    <tr>
        
        <td colspan="4">1-1td>

    tr>
    <tr>
        
        <td rowspan="2">2-1td>
        <td>2-2td>
        <td>2-3td>
        <td>2-4td>
    tr>
    <tr>
        <td>3-2td>
        <td>3-3td>
        <td>3-4td>
    tr>

table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    视频和音频标签

    • 视频标签：使用表示，其中src要填充视频的地址。

    • 音频标签：使用表示，其中src要填充音频的地址。

    • 可以使用controls来控制音频的播放与暂停，使用autoplay控制是否自动播放。

    <video src="../resources/video/3.mp4" controls autoplay>video>
<audio src="../resources/video/3.mp4" controls autoplay>audio>

    • 1
    • 2
  • 相关阅读:
    北京易华录大数据高级研发师1103面试题
    从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
    算法_每日一题(9.7)
    计算机网络考研笔记
    Unity技术手册 - 创建物体有几种方式？
    Day07 狂神说Java-MySQL＞P40-P45
    FISCO BCOS | 构建第一个区块链应用程序
    【附源码】计算机毕业设计JAVA专利查询与发布系统设计与实现
    安装RabbitMQ的各种问题（包括已注册成windows服务后，再次重新安装，删除服务重新注册遇到的问题）
    计算机毕设（附源码）JAVA-SSM基于框架的秧苗以及农产品交易网站
  • 原文地址：https://blog.csdn.net/lidong777777/article/details/126150303