HTML 标签讲解

HTML 标签讲解

      • HTML 语言结构
      • 根元素
      • 元数据元素
      • 主体根元素
      • 大纲元素
      • 文本内容
      • 语义化内联文本
      • 图像与多媒体
      • 编辑标识
      • table表格内容
      • 表单内容
      • table表单

HTML 语言结构

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

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

根元素

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

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

在这里插入图片描述

元数据元素

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

基本信息以及对该网页描述类的数据都要放在该标签中,其中包括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、搜索框、作者名称,等等。

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

优化爬虫效率:利用HTTP代理进行并发请求

网络爬虫作为一种自动化数据采集工具&#xff0c;广泛应用于数据挖掘、信息监测等领域。然而&#xff0c;随着互联网的发展和网站的增多&#xff0c;单个爬虫往往无法满足大规模数据采集的需求。为了提高爬虫的效率和性能&#xff0c;我们需要寻找优化方法。本文将介绍一种利用…

企业无线局域网部署最佳实践

文章目录 企业无线局域网部署最佳实践引言1. 无线网规划和设计a. 选择合适的频宽b. 网络规划工具c. 考虑物理环境d. 用户密度和需求e. 未来扩展f. 安全性和策略g. 测试和验证2. 无线局域网容量2.1 用户和设备预测2.2 应用流量分析2.3 带宽管理2.4 无线技术选择2.5 网络健康检查…

Java程序中常用的设计模式有哪些和该种设计模式解决的痛点

设计模式是大量程序员智慧的结晶&#xff0c;是优秀的代码范式&#xff0c;是以前那些大佬程序员的编程经验总结&#xff0c;非常值得学习。 在软件开发中&#xff0c;有许多常用的设计模式&#xff0c;每种模式都解决了特定类型的问题。以下是一些常见的设计模式及其简要介绍&…

鳄鱼指标和ADX组合后,发现买卖信号真清晰

通过之前的文章分享&#xff0c;anzo capital昂首资本相信各位投资者对ADX已经有了深刻的理解&#xff0c;今天在后台有小伙伴分享了鳄鱼指标&#xff0c;没想到的是&#xff0c;鳄鱼指标和ADX组合后&#xff0c;买卖信号变的更清晰了&#xff0c;今天就分享一下。 鳄鱼指标是一…

uni-app 之 vue语法

uni-app 之 vue语法 image.png --- v-html 字符 --- image.png <template><view><view>{{title}}</view>--- v-html 字符 ---<view>{{title2}}</view><view v-html"title2"></view><view>{{arr}}</view&g…

API接口接入电商平台案例,采集淘宝天猫拼多多1688京东LAZADA数据按关键字搜索商品示例

按关键字搜索商品数据API接口可以让用户轻松地在海量商品中找到自己需要的商品。这个接口包括多种搜索方式&#xff0c;例如利用关键字搜索商品名称、商品描述、商品分类、商家信息等。同时&#xff0c;还可以通过不同的排序方式进行筛选&#xff0c;例如销量排行、价格排行、评…

垃圾回收 - 标记压缩算法

压缩算法是将标记清除算法与复制算法相结合的产物。 1、什么是标记压缩算法 标记压缩算法是由标记阶段和压缩阶段构成。 首先&#xff0c;这里的标记阶段和标记清除算法时提到的标记阶段完全一样。 接下来我们要搜索数次堆来进行压缩。压缩阶段通过数次搜索堆来重新填充活动对…

51单片机简易时钟闹钟八位数码管显示仿真( proteus仿真+程序+原理图+报告+讲解视频)

51单片机简易时钟闹钟八位数码管显示仿真( proteus仿真程序原理图报告讲解视频&#xff09; 1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图元器件清单 5. 设计报告6. 设计资料内容清单&&下载链接资料下载链接&#xff08;可点击&#xff09;&#xff1a; 51单片机…

排序算法:堆排序

数组、链表都是一维的数据结构&#xff0c;相对来说比较容易理解&#xff0c;而堆是二维的数据结构&#xff0c;对抽象思维的要求更高&#xff0c;所以许多程序员「谈堆色变」。但堆又是数据结构进阶必经的一步&#xff0c;我们不妨静下心来&#xff0c;将其梳理清楚。 堆&…

【MySQlL学习笔记】(九)内外连接

内外连接 内连接外连接左外连接右外连接 表的连接分为内连和外连 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们前面学习的查询都是内连接&#xff0c;也是在开发过程中使用的最多的连接查询。 语法&#xff1a; select 字段 from 表…

腾讯云网站备案详细流程_审核时间说明

腾讯云网站备案流程先填写基础信息、主体信息和网站信息&#xff0c;然后提交备案后等待腾讯云初审&#xff0c;初审通过后进行短信核验&#xff0c;最后等待各省管局审核&#xff0c;前面腾讯云初审时间1到2天左右&#xff0c;最长时间是等待管局审核时间&#xff0c;网站备案…

选择最适合您的Bug管理软件:市场比较与推荐

“Bug管理软件哪家好&#xff1f;市场上有许多优秀的Bug管理系统品牌如&#xff1a;Zoho Projects、JIRA、Redmine、Bugzilla、MantisBT。” 一款高效的Bug管理系统可以帮助团队更有效地发现、记录和解决软件中的问题&#xff0c;从而提高产品质量和用户满意度。本文将为您介绍…

QT人脸识别知识

机器学习的作用&#xff1a;根据提供的图片模型通过算法生成数据模型&#xff0c;从而在其它图片中查找相关的目 标。 级联分类器&#xff1a;是用来人脸识别。 在判断之前&#xff0c;我们要先进行学习&#xff0c;生成人脸的模型以便后续识别使用。 人脸识别器&#xff1a;…

jenkins常见问题

1、忘记密码&#xff1f; 解决办法&#xff1a; 找到安装目录&#xff0c;linux安装目录一般是在/root/.jenkins,下用户文件users/admin_xxxxxx/config.xml文件。 打开文件&#xff0c;找到passwordHash块改为&#xff1a;#jbcrypt:$2a 10 10 10DdaWzN64JgUtLdvxWIflcuQu2fgrrM…

Java 复习笔记 - 面向对象篇

文章目录 一&#xff0c;面向对象概述二&#xff0c;类和对象&#xff08;一&#xff09;类和对象的概述&#xff08;二&#xff09;定义类的补充注意事项 三&#xff0c;封装四&#xff0c;就近原则和this关键字&#xff08;一&#xff09;就近原则&#xff08;二&#xff09;…

自学Python01-创建文件写入内容

此处省去安装和前言&#xff0c;需要两个东西 一个去下载安装python官方库 Welcome to Python.org 一个是编译器pycharm PyCharm 安装教程&#xff08;Windows&#xff09; | 菜鸟教程 PyCharm: the Python IDE for Professional Developers by JetBrains 第一节 练习print…

Java复习-23-包

包的定义与使用 包的定义 包 存放类程序文件的目录&#xff0c;程序类中定义的包名称必须采用小写字母的形式定义。 package com.example.demo ; // 定义包&#xff0c;其中.表示分割子目录 (子包) public class Hello {public static void main(String args[]) {System.ou…

记录--移动端的双击事件好不好用?

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 2023年了&#xff0c;我不允许还有人不会自己实现移动端的双击事件。 过来&#xff0c;看这里&#xff0c;不足 50 行的代码实现的双击事件。 听笔者娓娓道来。 dblclick js原生有个dblclick双击…

UDP的可靠性传输

UDP系列文章目录 第一章 UDP的可靠性传输-理论篇&#xff08;一&#xff09; 第二章 UDP的可靠性传输-理论篇&#xff08;二&#xff09; 文章目录 UDP系列文章目录前言1.TCP 和UDP格式对比2.UDP分片原理3.UDP 传输层应该注意问题4.MTU5.UDP 分片机制设计重点 一、ARQ协议什么…

Python基础知识详解:数据类型、对象结构、运算符完整分析

文章目录 python基础知识数据类型类型检查对象&#xff08;object&#xff09;对象的结构变量和对象类型转换运算符(操作符)1. 算术运算符2. 赋值运算符3. 比较运算符&#xff08;关系运算符&#xff09;4. 逻辑运算符5. 条件运算符&#xff08;三元运算符&#xff09; 总结 py…