HTML文本标记语言

最新推荐文章于 2024-03-30 11:13:51 发布
最新推荐文章于 2024-03-30 11:13:51 发布
阅读量585 收藏
点赞数 1
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44297161/article/details/108676329
版权

HTML文本标记语言

HTML

HTML是HyperText Mark-up Languages的首字母简写，其意思为超文本标记语言，是一种用于制作网页语言，其中的内容都是由一个一个标签组成

注意，HTML时一种标记语言，而不是一种编程语言

html文档也叫做web文档，说白了就是一个网页，html文件的扩展名是.html或者.htm；html文件用编辑器打开显示的是文本，用浏览器打开则会通过浏览器按照标签描述的内容将文件渲染成网页

HTML发展史的图示如下

HTML的发展史视图，该图来源于网上
HTML的发展史视图，该图来源于网上

HTML的基本结构

(1)文件的扩展名为.html或者.htm

(2)文本结构包括“头”部分(head)和“主体”部分(body)，其中“头”部分提供关于网页的信息，“主体”部分提供网页的具体内容

(3)HTML是由标签和内容组成，最外层要用<html>…</html>标签将其包裹

(4)HTML的标签有两种：单标签和双标签

  • 单标签：</标签名>
  • 双标签：<标签名>…</标签名>

(5)HTML的标签规范：

  • 标签名要小写
  • 属性名要用双引号
  • 标签要闭合
    注意当html文件不遵守规范时浏览器不会报错，同时也会尽量的去解析，若是解析不成功则不会显示该部分的网页效果

模板示意如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个html的模板示意</title>
</head>
<body>
</body>
</html>

其中就包含有“头”部分和“主体”部分以及标签的规范
用浏览器打开的示意图为：

模板示意图

HTML中的注释

html代码中，在需要对该部分代码进行一定的说明时可以插入注释，即是对代码的解释
格式为：

<!-- 注释的内容 -->

HTML头部的描述

在该博客中使用的是MarkDown表格语法，由于该语法表格不能实现表格中单元格合并，所以要实现单元格的合并则不能使用该表格语法，但是MarkDown表格语法兼容HTML，则可以使用HTML中的<table>…</table>
可参考链接Markdown表格合并单元格

元素/标签说明/描述
<title>- 定义浏览器中的标题
- 页面被收藏夹收藏时显示的内容
-显示在搜索引擎结果中的页面标题
<base>- 页面上的所有链接规定默认地址或默认目标
<link>- 标签定义文档与外部资源之间的关系
<style>- 标签用于为HTML文档定义样式信息
<meta>- 提供关于HTML文档的元数据
<script>- 定义客户端的脚本

我们举个例子使用一下几个标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>举个例子</title>
    <style>
        h1{
            color: crimson;
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <h1>这是一个例子</h1>
    <h2>这是一个例子</h2>
    <h3>这是一个例子</h3>
</body>
</html>

其中有运用的之后所涉及的标签内容，这里我们先不多做解释
让我们来看在浏览器打开之后的效果
在这里插入图片描述

我们能看到标题显示的“举个例子”这就是<title>标签显示出来的，有在<body>标签中显示的是具体内容

HTML的文本标签

常用标签表格：

元素/标签说明/描述
<hn>…</hn>-标签内的n的值为1~6，表示的是标签不同格式的标题
<i>…</i>-标签表示的斜体
<em>…</em>-标签表示的是强调斜体 与<i>…</i>的区别是方便搜索
<b>…<b>-标签表示的是加粗
<strong>…<strong>-标签表示的是强调加粗 与<strong>…<strong>的区别是方便搜索
<cite>…</cite>标签表示作品标题的引用
<sub>…</sub>标签表示下标
<sup>…</sup>标签表示上标
<del>…</del>标签表示删除线

我们来举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>举个例子</title>
    <style>
        h1{
            color: crimson;
            margin: 0px auto;
        }
    </style>
</head>
<body>
    <h1>
        <cite>这是一个例子</cite>
    </h1>
    <h2>
        <i>这是一个例子</i>
    </h2>
    <h3>
        <em>这是一个例子</em>
    </h3>
    <h4>
        <b>这是一个例子</b>
    </h4>
    <h5>
        <strong>这是一个例子</strong>
    </h5>
    <h6>
        <del>这是一个例子</del>
        这是一个例子
    </h6>
    H<sub>2</sub>O
    2<sup>10</sup>=1024
</body>
</html>

让我们来看在浏览器打开之后的效果
效果示意图
这样我们能很直观的看到字体的变化

HTML的格式化标签

常用的格式化标签表格：

元素/标签说明/描述
<br/>-单标签，表示换行
<p>…</p>-双标签，表示换段
<hr/>-标签表示水平分割线
<div>…<div/>-标签常用于组合块元素，以便通过CSS进行格式化
<span>…<span/>-标签用于包含的文本，可以使用CSS或者JavaScript对其进行定义样式

常用的列表格式化标签表格：

元素/标签说明/描述
<ul>…</ul>-无序列表
<ol>…</ol>-有序列表
<li>…</li>-列表项
<dl>…</dl>-自定义列表
<dt>…</dt>-自定义列表头
<dd>…</dd>-自定义列表内容

在此处，我们来举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML格式化标签</title>
</head>
<body>
    <h1>这是一个例子</h1>
    <hr/>
    <div>
        <p>
            <ul>
                <li>
                    <i>例子1</i>
                </li>
                <li>
                    <strong>例子2</strong>
                </li>
                <li>
                    <del>例子3</del>
                </li>
            </ul>
        </p>
        <p>
            <ol>
                <li>
                    <i>例子1</i>
                </li>
                <li>
                    <strong>例子2</strong>
                </li>
                <li>
                    <del>例子3</del>
                </li>
            </ol>
        </p>
        <p>
            <dl>
                <dt>举个例子</dt>
                <dd>
                    <i>例子1</i>
                </dd>
                <dd>
                    <strong>例子2</strong>
                </dd>
                <dd>
                    <del>例子3</del>
                </dd>
            </dl>
        </p>
    </div>
</body>
</html>

其中包含有有序列表，无序列表，以及自定义列表
让我们通过浏览器来看看效果
效果示意图

HTML的图像标签

顾名思义可以明白该标签的用法：就是在网页中插入图片
格式：
<img/>
其中，在内部可以添加属性值：

  • src：图片名以及url，即图片的路径
  • alt：图片加载失败时显示出来的内容
  • title：文本提示属性，即当鼠标放上去的时候显示出来的内容
  • width：图片的宽度
  • heigth：图片的高度
  • border：图片边框线的粗细
    我们举个例子，首先呢，我从网上着都了一张明星的图片，参考链接薛之谦
    然后，我们将获得的照片路径放在src属性中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML的图像标签</title>
</head>
<body>
    <div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg" alt="薛之谦" title="薛之谦" width="180px" height="auto"/>
    </div>
    <div>
        <img src="" alt="薛之谦" title="薛之谦" width="180px" height="auto"/>
    </div>
</body>
</html>

在这里，一个img标签有图片连接路径，另一个没有，则没有的那个会显示出alt属性的内容，同时，当我们的而鼠标放到图片生静置几秒时会显示出title的属性值
让我们来看看看浏览器的效果
效果示意图

HTML的超链接标签

实现文字、图片等进行的一个跳转
格式：
<a href=“目标链接的url”>…</a>
其中该标签的常用属性：

  • href：表示目的链接的跳转地址
  • target：表示链接的打开方式
    • _blank：新窗口
    • _parent：父窗口
    • _self：本窗口(默认)
    • _top：顶级窗口
    • framename：窗口名
    • title：文字属性提示(详情)

在这里呢，我又去找了个视频的链接薛之谦–我好像在哪里见过你.mp4
然后呢我们利用这个链接进性实现超链接的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML的超链接标签</title>
</head>
<body>
    <div>
        <a href="http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4" target="_blank" title="薛之谦1">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg" alt="薛之谦">
        </a>
        <a href="http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4" target="_parent" title="薛之谦2">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg" alt="薛之谦">
        </a>
        <a href="http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4" target="_self" title="薛之谦3">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg" alt="薛之谦">
        </a>
        <a href="http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4" target="_top" title="薛之谦4">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg" alt="薛之谦">
        </a>
    </div>
</body>
</html>

让我们来看看在浏览器中的效果
效果示意图
在这里我将照片作为一个超链接进行点开，同时我们可以对target的属性进行实现
效果示意图
效果示意图
在两张图中可以看到有在当前窗口打开的，和在新的窗口打开的

HTML的表格标签

常用的表格标签表格

元素/标签说明/描述常用属性
<table>…</table>标签表示定义表格border、width、cellspacing、cellpadding
<caption<…</caption>标签表示定义表格标题align
<th>…</th>标签表示定义表格的表头align、valign、bgcolor、rowspan、colspan、width、heigth
<tr>…</tr>标签表示表格的行align、valign、bgcolor
<td>…</td>标签表示表格的单元格align、valign、bgcolor、rowspan、colspan、width、heigth
<thead>…</thead>标签表示表格的页眉align、valign
<tbody>…</tobdy>标签表示表格的主体align、valign
<tfoot>…</tfoot>标签表示表格的页脚align、valign

在这里，我从网上找了一些图片的资源和一些视频的资源进行表格的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML的超链接标签</title>
    <style>
        img{
            width: 90%;
            height: auto;
        }
    </style>
</head>
<body>
    <div>
        <thead>心有谦谦结</thead><br/>
        <tbody>
            <table border="1">
                <tr>
                    <td>
                        <a href="http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4" target="_blank" title="薛之谦1">
                            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg" alt="薛之谦" title="薛之谦1">
                        </a>
                    </td>
                    <td>
                        <a href="http://fs.mv.web.kugou.com/202009191603/19e1e86f007dd5916d5d9c401124b125/G126/M07/02/17/XpQEAFpgLMSABqqzBPe5OU7hfkM721.mp4" target="_blank" title="薛之谦2">
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600512667171&di=d3db4bec367c5395de48a3a496c871d1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F26%2F20161126200206_cnEWr.thumb.400_0.jpeg" alt="薛之谦" title="薛之谦1">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="http://fs.mv.web.kugou.com/202009191604/2f42a03a92cfa0d4c90c2fcbe9f8d08c/G095/M01/11/14/P5QEAFkVhhaAUcMqBUToPYopRjo628.mp4" target="_blank" title="薛之谦3">
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600512667170&di=b6a1d8f9abed8ca6ddab94b8494a2bec&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn16%2F735%2Fw499h236%2F20180721%2Ff890-hfqtahi3379592.jpg" alt="薛之谦" title="薛之谦1">
                        </a>
                    </td>
                    <td>
                        <a href="http://fs.mv.web.kugou.com/202009191606/9bf4b58693c3713a09123f5609fa0ae3/G091/M00/0A/04/O5QEAFtrnTWAIoUeB3cYRkgTdGo190.mp4" target="_blank" title="薛之谦4">
                            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3704963114,1914319017&fm=26&gp=0.jpg" alt="薛之谦" title="薛之谦1">
                        </a>
                    </td>
                </tr>
            </table>
        </tbody><br/>
        <tfoot>谢谢谦谦</tfoot>
    </div>
</body>
</html>

让我们来看看浏览器中的效果
效果示意图

图中可以看到页眉，页脚，我们分别点开四张图片时则会跳转到不同的超链接，效果图我就不再一一显示出来了，可以自己去试试哟

总结

在本次学习的内容中，有了对前端进一步的理解，同时，对前端的一些标记也有了一定程度上的熟悉，这篇博客中还有许多的不足，等着大家对我的博客进行一定的补充[呲牙]，希望这篇文章对大家有帮助，最后呢，我在这里跑题一下[呲牙]，虽然我不是薛之谦的粉丝，但是我挺喜欢他的，嘿嘿嘿

&陈橙澄&
关注
HTML标记语言
pan_junbiao的博客
08-06 6818
HTML的全称是Hyper Text Markup Language，即超文本标记语言。HTML是一种在互联网上常见的网页制作标记性语言，HTML用于描述超文本中内容的显示方式。使用 HTML 可以实现在网页中定义一个标题、文本或者表格等。严格的说，HTML 并不能算作是一种程序设计语言，因为它缺少了程序设计语言所应有的特征。HTML是通过浏览器的翻译，将网页中的内容呈现...
HTML(超文本标记语言)
pingLS1016的博客
06-07 2925
HTML（超文本标记语言）是专门给文本添加语义的，而不是修改文本形式，这些用于描述其他文本语义的文本，我们称之为标签，这些标签在浏览器中不会被显示，所以被称为超文本标记语言。
(自创) 一种新的轻量级文本标记语言 - MarkOwl
Likianta 的博客
04-30 1582
设计目标 语法优雅 标记简洁 & 易于书写 语法健全. 不能出现自相矛盾, 漏洞百出, 解释不清的地方 标记含义明确, 不要有歧义 标记不可以对正文文字造成视觉干扰 (不能让阅读者看着眼花缭乱, 分不清主次, 感到不适或困惑等) 标记规则的设计有完整的内在逻辑. 不能让各种标记百花齐放, 毫无规律可循 标记是宽容的. 错误的标记不会造成文本渲染的灾难 可扩展, 可编程. 最好支持脚本语言 (python/javascript) 的控制 可配置: 全局配置, 项目配置, 单文件配置 (front m
HTML标记语言——（二）
angji4799的博客
11-12 178
表格 1.表格的基本结构--<table>标记 基本格式 <table 属性1=“属性值1” 属性2=“属性值2” 属性3=“属性值3”> table标记的属性： 　　（1）width（表格的宽度，可以是像素值px，也可以是父集的百分百） 　　（2）height（表示表格的高度，可以是像素值px，也可以是父集的百分百） 　　...
HTML标记语言--常用标记
sziit_jerry的博客
05-31 6048
HTML标记语言标记符号 html：整个页面 head：页面首部 title：页面标题 body：页面正文 p：段落 h1-6：标题1号到6号 hr：水平线 a：锚点 <a href="www.baidu.com" target="_self">百度网址</a>无序列表：unordered list ul：无序列表 li：列表项目 <ul type="square">
HTML超文本标记语言速查手册.pdf
07-14
HTML超文本标记语言速查手册.pdf HTML超文本标记语言速查手册.pdf是HTML语言的速查手册，涵盖了HTML语言的基本结构、标签、属性和事件处理等方面的知识。下面是根据手册中的内容生成的相关知识点： 一、HTML基本...
HTML，全称HyperText Markup Language，即超文本标记语言
最新发布
05-12
HTML，全称HyperText Markup Language，即超文本标记语言，不是一种编程语言，而是一种描述性的标记语言。12 HTML包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体...
HTML API文档 HTML称为超文本标记语言
01-13
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字...
超文本标记语言.html
02-28
web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等。
Web前端（一）HTML超文本标记语言
cainiaoayue的博客
07-29 2567
文章目录一.Web前端开发介绍1.Web概述2.Web起源3.Web的特点4.Web工作原理5.URL介绍二.HTML网页结构1.HTML基本结构2.HTML文档类型3.HTML文档规范与注释（1）文档规范（2）HTML注释三.HTML标签1.文本标签2.换行标签3.列表标签4.div与span标签5.图片标签img6.超连接标签7.表格标签8.表单标签9.下拉列表标签10.文本域标签11.按钮标...
HTML超文本标记语言
理想主义的花终将盛开在浪漫主义的土壤里，我的热情永远不会熄灭在现实的平凡之中，我们终将上岸，阳光万里。
03-17 1094
HTML超文本标记语言
超文本标记语言HTML
qq_55674489的博客
12-29 1381
现今在网速足够快的情况下，非常适合使用web项目。开发好的网页可以部署在服务器中,然后通过浏览器访问即可。 那么要如何开发网页呢？ 基本都是使用html,css,javaScript开发网页(vue.js elementUI他们都是在html,css,js基础上封装而来的) 这就引出了，今天要讲的第一部分HTML。
HTML简单标记语言
ice___snow的博客
08-31 2446
一， HTML文字标记 普通文字，页面上正常显示 字体标记： &lt;i&gt; &lt;/i&gt;定义斜体文本 &lt;strong&gt;&lt;/strong&gt;文本加粗 &lt;sup&gt;&lt;/sup&gt;小写上标 &lt;sub&gt;&lt;/sub&gt;小写下标 &lt;font&gt;&lt;/font&amp
1. 初识网页标记语言HTML—HTML简介
Zephyr Hou 的博客
12-16 1812
HTML教程-简介前言一、什么是HTML？二、简单的HTML例子Reference 欢迎学习交流！ 邮箱：zengf.hou@bit.edu.cn 前言 编程语言的学习相对费事费力，尤其是对初学编程的朋友们。相比于其他编程语言，HTML作为一种超文本标记语言（Hyper Text Markup Language，简称：HTML）似乎更为简单，严格意义上讲，它并不算是一种编程语言，而是一种标记语言（makeup language）。从我的经历来讲，我感觉它更像markdown 和Latex 等工具，通过特定的
HTML简介
anxiankai7500的博客
03-20 196
HTML简介 学号：201631062509 姓名：杨菓 1.什么是 HTML? HTML 语言用于描述网页。 HTML 是指超文本标记语言: Hyper Text Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了H...
HTML常用文本标签以及注释文本
lh11223326的博客
03-30 3387
文本是一种常见的元素，在日常生活，在描述某个东西时，在阅读文章时，都会大量出现。而在Web中我们所书写的代码，也是文本的一部分，有时候大量文字聚集在一起时我们常常难以找到其中关键点，所以在Web中就有很多用来描述文本的标签。HTML标签的语法和属性-CSDN博客html中提供了到六个级别的标题标签，标签的级别最高，标签的级别最低，通过这些标签可以定义网页的标签，合理使用标题可以使网页层次结构更加清晰。HTML标题标签只能用来定义标题，不可以使用标题标签来对文本进行加粗设计。
HTML介绍
liitdar的博客
03-26 5578
HTML，即超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML文件的扩展名为htm（因为之前的文件系统最多只支持三位扩展名）或html。超文本。
html基础学习
热门推荐
weixin_52676304的博客
10-15 1万+
html新手学习，以菜鸟教程为主
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值