第三章:HTML的字符实体,meta标签以及全局属性

devtools/2025/1/18 2:16:27/
htmledit_views">

目录

一、字符实体

二、meta元信息

三、全局属性

四、总结


一、字符实体

在 HTML 中,某些字符是预留的,不能直接使用。例如,小于号(<)和大于号(>)会被浏览器误认为是标签,空格会被认为是缩进而被处理。为了正确显示这些预留字符,我们需要使用字符实体。

字符实体有两种表示方式:1.使用实体名称:&entity_name;2.使用实体编号:&#entity_number;

 比如:我们要输出一个空格,可以直接输出,但是要输出几个空格,就不能直接输入空格,此时可以使用字符实体,空格的实体是&nbsp或者&#160,前者是实体名称,后者是实体编号。

下面是一些常用的字符实体(更多可在MDN官网查看):

二、meta元信息

meta即meta标签,元信息指网页的基本信息。

html"><!DOCTYPE html>
<html lang="zh-CN"><head><!-- 配置字符编码 --><meta charset="UTF-8"><!-- 针对Ie浏览器的一个兼容设置 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对移动端开发 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 配置网页的关键字 --><meta name="keywords" content="C语言,卿言卿语"><!-- 配置网页描述信息 --><meta name="description" content="里面写了很多代码和知识,值得你的到来"><!-- 针对搜索引擎爬虫配置 --><meta name="robot" content="noindex"><!-- 配置网页自动刷新 --><meta http-equiv="refresh" content="3;http://www.baidu.com"><!-- 针对双核浏览器,优先使用webkit内核进行渲染 --><meta name="renderer" content="webkit"><title>meta元信息</title>
</head><body></body></html>

大致有以上一些语句,分别具有不同的作用,比如第一句是配置字符编码的标准,第二句是针对IE浏览器的兼容性配置,第三句是针对移动端适配问题,第四句是配置网页关键字,即我们搜索文字是,为什么会出现某一个页面,因为这个页面配置了这个关键字,比如搜索商品是会出现电商网页,因为电商网页将“商品”两个字设置为了关键字。等等,更多meta标签的使用可以上MDN官网上查看。

三、全局属性

全局属性指大部分标签均具有的属性,不是所有属性都是全局属性,有些属性只有部分标签可以使用,下面介绍五个常用的全局属性:

1.id:id是给标签指定的唯一标识(id不能重复)。作用:可以结合a标签,实现锚点的跳转,具体可看上一章节;还可以结合lable标签使用;应用最多是结合css和js使用。

注意:id属性不能用于head,html,meta,script,style,title标签上,其他均可以。

2.class:给标签指定类名,随后通过css就可以给标签设置样式了。

3.style:给标签设置行内样式。

4.dir:内容的方向,可选值有ltr(从左至右,默认值),rtl(从右至左)。

注意:不能在head,html,meta,script,style,title标签上使用。

5.title:给标签设置文字提示,即鼠标悬浮一段时间,跳出来的提示文字。多用于超链接和图片。

更多全局属性可在MDN官网上查看。

四、总结

本章节介绍了HTML4的字符实体,meta元信息和常用的全局属性。下一节将介绍HTML5新增的功能。更多详细代码可点击此处查看Rocket/learn-HTMLAndCss。


http://www.ppmy.cn/devtools/151431.html

相关文章

数据库(MySQL)练习

数据库&#xff08;MySQL&#xff09;练习 一、练习1.15练习1.16练习 二、注意事项2.1 第四天 一、练习 1.15练习 win11安装配置MySQL超详细教程: https://baijiahao.baidu.com/s?id1786910666566008458&wfrspider&forpc 准备工作&#xff1a; mysql -uroot -p #以…

Android 播放SMB共享视频

表面上看MediaPlayer只能播放本地和http协议视频。没有直接支持smb://协议。那还能播放smb视频呢&#xff1f;也可以的&#xff01; MediaPlayer有一个方法叫&#xff1a;setDataSource(MediaDataSource)。 /*** Sets the data source (MediaDataSource) to use.** param data…

Vue3 Element-Plus el-tree 右键菜单组件

参考代码&#xff1a;实现Vue3Element-Plus(tree、table)右键菜单组件 这篇文章的代码确实能用&#xff0c;但是存在错误&#xff0c;修正后的代码&#xff1a; <template><div style"text-align: right"><el-icon size"12" color"#…

网络学习记录5

二、学习网络知识&#xff1a; 1、透传&#xff1a; ①“透传”指的是数据在传输过程中不被交换机或其他网络设备解析、修改或处理&#xff0c;而是直接从一个端口传输到另一个端口。这种传输方式保持了数据的原始性和完整性&#xff0c;常用于需要高速、低延迟的数据传输场景…

golang 在线词典

前言 输入一个英语单词&#xff0c;返回它的发音&#xff0c;解释&#xff0c;同义词&#xff0c;反义词&#xff0c;以及例子 使用的是免费翻译网站&#xff0c;彩云小译 注意&#xff0c;彩云小译更新&#xff0c;博主并没有找到dict响应&#xff0c;但是写这个却能调用 步骤…

Kibana:ES|QL 编辑器简介

作者&#xff1a;来自 Elastic drewdaemon ES|QL 很重要 &#x1f4aa; 正如你可能已经听说的那样&#xff0c;ES|QL 是 Elastic 的新查询语言。我们对 ES|QL 寄予厚望。它已经很出色了&#xff0c;但随着时间的推移&#xff0c;它将成为与 Elasticsearch 中的数据交互的最强大…

RabbitMQ-消息消费确认

我们一般使用的是消费者作为被动方接收 RabbitMQ 推送消息&#xff0c;另一种是消费者作为主动方可以主动拉取消息。 RabbitMq 服务器推送消息分为隐式(自动)确认和显示确认。 1 消费者拉取消息 消费者作为主动方拉取消息&#xff0c;每次只能获取一条。 using (var channel c…

如何在uniapp中实现一个表格组件?

功能介绍&#xff1a; 1 表格头自定义列。 2 表格头支持勾选功能&#xff0c;并且支持配置。通过配置显示或隐藏该功能 3 支持自定义样式和自定义操作。比如修改列数据内容样式&#xff0c;上图中年龄做了自定义的处理&#xff0c;点击某列内容可以自定义操作。 ----------…