当前位置: 首页 > backend >正文

HTML第三课:特殊元素

HTML第三课:特殊元素

  • 特殊元素
  • 代码展示

特殊元素

  • 不在行级元素和块级元素概念里面的元素
  • 无法控制没有宽高的元素

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 特殊元素展示</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 20px;}h1 {text-align: center;color: #333;}.element-section {margin-bottom: 30px;border: 1px solid #ddd;padding: 15px;border-radius: 5px;}h2 {color: #444;border-bottom: 1px solid #eee;padding-bottom: 5px;}pre {background-color: #f4f4f4;padding: 10px;border: 1px solid #ddd;border-radius: 3px;overflow-x: auto;}</style>
</head>
<body>
<h1>HTML 特殊元素展示</h1><!-- 元数据元素 -->
<div class="element-section"><h2>元数据元素</h2><h3>&lt;head&gt;</h3><p>作用:包含文档的元数据,如标题、样式、脚本等。</p><pre>&lt;head&gt;&lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;</pre><h3>&lt;meta&gt;</h3><p>作用:定义 HTML 文档的元数据,如字符编码、描述等。</p><pre>&lt;meta charset="UTF-8"&gt;
&lt;meta name="description" content="这是一个示例页面"&gt;</pre><h3>&lt;title&gt;</h3><p>作用:设置文档的标题,显示在浏览器标签页上。</p><pre>&lt;title&gt;示例页面&lt;/title&gt;</pre>
</div><div class="element-section"><h2>文本格式元素</h2><h3>&lt;br&gt;</h3><p>作用:插入一个换行符。</p><pre>&lt;p&gt;这是第一行&lt;br&gt;这是第二行&lt;/p&gt;</pre>
</div><div class="element-section"><h2>空格元素</h2><h3>&lt;& nbsp&gt;</h3><p>作用:插入一个空格。</p><pre>&lt;p&gt;这是第一行&lt;&nbsp&gt;这是第二行&lt;/p&gt;</pre>
</div><div class="element-section"><h2>特殊字符元素</h2><h3>&lt; &gt;</h3><p>作用:表示小于号。</p><pre>&lt;p&gt;小于号:&lt;&lt;/p&gt</pre>
</div></body>
</html>
http://www.xdnf.cn/news/19607.html

相关文章:

  • 跨境电商账号风控核心:IP纯净度与浏览器指纹的防护策略
  • 跳出“中央集权”的泥潭:以Data Mesh重构AI时代的活性数据治理
  • MySQL8.0 新特性随笔
  • css中 ,有哪些⽅式可以隐藏页⾯元素? 区别?
  • 详细介绍RIGHT JOIN及其用法
  • Vue2 入门(一)介绍及Demo项目创建
  • 【51单片机6位数码管显示矩阵键值至右向左自左向右】2022-11-29
  • Linux驱动开发学习笔记
  • web自动化测试(selenium)
  • [架构之美]pdf压缩实战笔记(十五)
  • FlutterUnit 3.3.0 | 全组件、全属性、鸿蒙支持来袭
  • 高德开放平台智能眼镜解决方案,Rokid Glasses AR导航实测
  • Proxy 我踩过的那些坑
  • apache-jmeter-5.1.1安装部署与使用教程(小白一看就会)​
  • 【游戏开发】街景风格化运用到游戏中,一般有哪些风格可供选择?
  • 【实测】安装最新Unity6的常规操作
  • intellij idea2021.3.3版本如何获取永久权限
  • 第二章:技术基石:写出“活”的代码(1)
  • 基础算法之二分算法 --- 1
  • AI-调查研究-67-具身智能 核心技术构成全解析:感知、决策、学习与交互的闭环系统
  • DVWA靶场通关笔记-DOM型XSS(Impossible级别)
  • 服务器托管需要注意什么事项?
  • STM32CUBEMX配置LAN8720a实现UDP通信
  • pycharm无法添加本地conda解释器/命令行激活conda时出现很多无关内容
  • 阿里云国际代理商:如何重置阿里云服务器密码?
  • 【ComfyUI】SDXL Turbo一步完成高速高效的图像生成
  • UNet改进(37):AxialDynamicConv2D原理剖析与实战应用
  • 【开发技术】Lucene.NET入门指南
  • 消息存储机制-索引文件及页缓存
  • 爬虫逆向--Day20Day21--JS逆向案例之Webpack逆向