HTML 标签讲解

这篇具有很好参考价值的文章主要介绍了HTML 标签讲解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML 语言结构

  • Markup (标记、标签)用来容纳和描述内容

严格意义上,标签是指开始标签(例如 <p> 标签)或结束标签(例如 </p> 标签);元素(例如 p 元素或者称为<p>元素)则包括开始标签(自然也包括标签中定义的属性)、结束标签以及中间的内容(Content)。

根元素

该元素表示一个HTML文档的根(顶级元素),所以它也被称为根元素。所有其他元素必须是此元素的后代。

  • HTML (Hypertext Markup Language 超文本标记语言)
  • 标签含义:
    • html 它把其内部的内容描述为html代码,所有的html代码都必须放在html标签当中
      • html标签只包含 body 和 head 标签

HTML 标签讲解,html+css,html,前端

元数据元素

该元素用来设定文档相关的配置信息(元数据),包括文档的标题,引用的文档样式和脚本等。

基本信息以及对该网页描述类的数据都要放在该标签中,其中包括style和link标签

该元素可以包含任何可配置的元数据信息。

<meta charset="UTF-8">
<meta auther="jeffrey">
<meta email="tm@163.com">
  • meta表示基本信息,中文含义:元

    meta属于单标签,单标签无法加载内容

  • charset表示字符编码,中文含义:属性,charset属于meta的私有属性

    • 即:meta用来承载基本信息,交给浏览器,属性名=“属性值” key=“value”

该元素用来定义文档的标题,显示在浏览器的标题栏或标签页上。它只可以包含文本,若是包含有标签,则包含的任何标签都不会被解释。

该元素规定了外部资源与当前文档的关系。这个元素最常于链接样式表。

该元素的内部内容用来定义文档的样式风格,即层叠样式表。

  • style.css文件的引用
<link rel="stylesheet" href="./css/style.css">
  • rel全名relationshiop,中文:关联;表示引入的文件与当前文件的关系
  • href全名hypertext reference,超文本协议

该元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

base 用于定义href的基础网站,默认的根链接

1. 若href没有网络协议,则跳转至根链接,否则反之
  1. 如果没有base的,即默认base为当前服务器目录

主体根元素

该元素称为网页主体,所有的网页主体内容都在body当中,即显示在网页可视化窗口中展示的内容。

块级元素是纵向开辟空间,所以块级元素始终可以向下延展,css认为高度没有参考价值,因为可以随时可边,但宽度不能延展,块元素不能横向开辟空间,所以只有宽度可以被子元素参考。

​ body默认贴合窗口,body有margin值但不能发生穿透,body默认高度为0,它是所有元素的父级元素,任何块级元素的默认宽度都是父级元素的100%,但高度是根据自身内容而定,无法参照。

  • 若想参照父元素的宽度,有三个方法:

    1. 必须给父级元素固定高度,若子元素参照父级元素的百分比,会造成溢出。

      ​ 假设父级元高为100,子元素为父元素的50%,也就是50,那么父级元素会增长到150,那么子元素的高到底是多少;

    2. 将父级元素为body元素宽高的100%,然后绝对定位,top和left都为0,绝对定位参照整个可视化页面,窗口有多大,父级元素就有多大;

    3. 将父级元素绝对定位,上下左右全为0,不能有固定宽高。

大纲元素

该元素表示这部分内容在文档中应当是独一无二的,不包含在任何一系列文档中重复的内容,用来体现网页中的主要信息。使用 <main> 元素值得注意的一点是,它在每个页面中只能使用一次。<main> 元素的另外一个规定是,它不能作为 <article>, <header>, <aside>, <footer>, <nav> 的子元素节点。

该元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。

该元素用来描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表。

该元素表示文档中的一个区域,我们使用该元素来进行页面的逻辑性分区。

该元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

该元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。是section切除后剩余的部分。

该元素表示最近一个章节内容或者主体元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

~

该元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低。(该元素也可以被归类到文本元素的分类当中)

该元素代表一个段落的标题组。

元素中任何形式的内容所提供的联系信息适用于上下文的背景信息,可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。

<p>Contact the author of this page:</p>
<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

文本内容

该元素是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用 classid 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang),它应该在没有任何其它语义元素可用时才使用 (比如<article><nav>) 。

该元素表示文本的一个段落。全名paragraph

    表示多个有序列表项,通常渲染为有带编号的列表。

    • 全名order list

      表示多个无序列表项,通常渲染为非编号型的列表。

      • 全名unorder list

      到了这里,关于HTML 标签讲解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

      本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

      领支付宝红包 赞助服务器费用

      相关文章

      • [HTML]Web前端开发技术16(HTML5、CSS3、JavaScript )表格课后练习网页标题:域标签的使用网页标题:美家装饰联系我们网页标题:登录界面网页标题问卷调查——喵喵画网页

        希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 表格课后练习 网页标题:域标签的使用 网页标题:美家装饰联系我们 网页标题:登录界面 网页标题

        2024年01月24日
        浏览(25)
      • HTML 标签讲解

        HTML 语言结构 Markup (标记、标签)用来容纳和描述内容 严格意义上,标签是指开始标签(例如 p 标签)或结束标签(例如 /p 标签);元素(例如 p 元素或者称为 p 元素)则包括开始标签(自然也包括标签中定义的属性)、结束标签以及中间的内容( Content )。 根元素 该元

        2024年02月09日
        浏览(6)
      • 前端基础(HTML)——html介绍 & 常用标签 & 几个案例

        html是啥,常见的标签,几个例子 Hyper Text Markup Language (超 文本 标记语言) 简写:HTML,HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片

        2024年02月07日
        浏览(22)
      • 前端HTML标签1

        使用英文!,按tab键出现框架。 Document可以换成任意自己想要的命名。 作用:使页面结构更加清晰。 1.标题标签 2.段落标签 3.换行标签 4.文本格式标签 语义 标签 说明 加粗 strong/strong 或 b/b 推荐 strong ,语义更强烈 斜体 em/em 或 i/i 推荐使用 em ,语义更强烈 删除线 del/del 或

        2024年02月06日
        浏览(23)
      • HTML5前端标签练习

        标签的分类 标签的嵌套 a标签 验证form表单朝后端提交数据 效果 代码

        2024年02月08日
        浏览(26)
      • 「HTML和CSS入门指南」th 标签详解

                在 HTML 中, th 标签用于创建表格中的表头单元格。表头单元格通常用于标识每列中的数据,并且与普通单元格不同之处在于它们具有更强的语义含义。 以下是 th 标签的基本语法: 其中: table  标签用于创建表格。 thead  标签用于标识表格的表头部分。 tr  标签

        2024年02月08日
        浏览(25)
      • 用纯HTML,JS,CSS实现横向滚动标签页

        前不久,在我的一个项目中,需要展示一个横向滚动的标签页,它支持鼠标横向拖动和点击切换。在实现的过程中,我发现这个小功能需要同时用到前端的三辆马车,但是实现难度不高,而且最终效果还不错,是个难得的初学者项目,于是萌生了写这篇文章的想法,希望对初

        2024年02月08日
        浏览(26)
      • 「HTML和CSS入门指南」aside 标签详解

                在 HTML 中, aside 标签用于表示与页面或文章内容相关,但又不属于主要内容的侧边栏、导航区域、广告、标注等内容。通常用于包含附加信息、引用和其他次要元素。 以下是 aside 标签的基本语法: 请注意, aside 标签必须闭合,并且任何文本都应该放置在起始和

        2024年02月08日
        浏览(23)
      • 「HTML和CSS入门指南」video 标签详解

                在 HTML 中, video 标签用于向网页添加视频。它是一个独立的标签,没有结束标记,并且可以设置多种属性来控制视频播放器的行为和外观。使用 video 标签可以帮助您更好地展示您的内容,提高用户体验并且能够在不同设备和平台上播放视频。 以下是 video 标签的

        2024年02月08日
        浏览(26)
      • 【前端|HTML系列第2篇】HTML零基础入门之标签元素

        大家好,欢迎来到前端入门系列的第二篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)常用标签元素,帮助零基础小白快速入门。 掌握html常用表情的使用、基础特性以及用途。

        2024年02月11日
        浏览(21)

      觉得文章有用就打赏一下文章作者

      支付宝扫一扫打赏

      博客赞助

      微信扫一扫打赏

      请作者喝杯咖啡吧~博客赞助

      支付宝扫一扫领取红包,优惠每天领

      二维码1

      领取红包

      二维码2

      领红包