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

目录

一、字符实体

二、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

相关推荐
Mintopia1 小时前
Web 安全与反编译源码下的权限设计:构建前后端一体的信任防线
前端·安全·编译原理
林深现海2 小时前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
黄诂多2 小时前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界2 小时前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
文艺理科生2 小时前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构
千寻girling2 小时前
主管:”人家 Node 框架都用 Nest.js 了 , 你怎么还在用 Express ?“
前端·后端·面试
C澒2 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
清山博客3 小时前
OpenCV 人脸识别和比对工具
前端·webpack·node.js
要加油哦~3 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能
程序员Sunday3 小时前
说点不一样的。GPT-5.3 与 Claude Opus 4.6 同时炸场,前端变天了?
前端·gpt·状态模式