HTML第二课:块级元素

  • 块级元素

块级元素

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>HTML4 块级元素展示</title><style type="text/css">body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background-color: #f5f5f5;color: #333;margin: 0;padding: 20px;line-height: 1.6;}h1 {color: #2c3e50;text-align: center;margin-bottom: 30px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);}table {width: 90%;margin: 0 auto;border-collapse: collapse;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);background-color: white;}th, td {padding: 5px;text-align: left;border-bottom: 1px solid #ddd;}th {background-color: #3498db;color: white;text-align: center;}tr:hover {background-color: #f9f9f9;}pre {font-family: 'Courier New', Courier, monospace;background-color: #f8f9fa;padding: 5px;border-radius: 3px;white-space: pre-wrap;}</style></head>
<body style="text-align: center">
<h1>HTML4 块级元素展示</h1>
<table  border="1" align="center"><tr><td>块级元素名称</td><td>基本语法</td><td>代码示列</td><td>注释说明</td></tr><tr><td>&lt; div &gt;</td><td>  <pre > &lt;div&gt; 这是一个 div 元素 &lt;/ div&gt; </pre></td><td><div>这是一个 div 元素</div></td><td>定义一个块级元素</td></tr><tr><td>&lt; p &gt;</td><td>  <pre > &lt;p&gt; 这是一个 p 元素 &lt;/ p&gt; </pre></td><td><p>这是一个 p 元素</p></td><td>定义段落</td></tr><tr><td>&lt; h1 &gt;</td><td>  <pre > &lt;h1&gt; 这是一个 h1 元素 &lt;/ h1&gt; </pre></td><td><h1>这是一个 h1 元素</h1></td><td>定义标题</td></tr><tr><td>&lt; h2 &gt;</td><td>  <pre > &lt;h2&gt; 这是一个 h2 元素 &lt;/ h2&gt; </pre></td><td><h2>这是一个 h2 元素</h2></td><td>定义标题</td></tr><tr><td>&lt; h3 &gt;</td><td>  <pre > &lt;h3&gt; 这是一个 h3 元素 &lt;/ h3&gt; </pre></td><td><h3>这是一个 h3 元素</h3></td><td>定义标题</td></tr><tr><td>&lt; h4 &gt;</td><td>  <pre > &lt;h4&gt; 这是一个 h4 元素 &lt;/ h4&gt; </pre></td><td><h4>这是一个 h4 元素</h4></td><td>定义标题</td></tr><tr><td>&lt; h5 &gt;</td><td>  <pre > &lt;h5&gt; 这是一个 h5 元素 &lt;/ h5&gt; </pre></td><td><h5>这是一个 h5 元素</h5></td><td>定义标题</td></tr><tr><td>&lt; h6 &gt;</td><td>  <pre > &lt;h6&gt; 这是一个 h6 元素 &lt;/ h6&gt; </pre></td><td><h6>这是一个 h6 元素</h6></td><td>定义标题</td></tr><tr><td>&lt; pre &gt;</td><td>  <pre > &lt;pre&gt; 这是一个 pre 元素 &lt;/ pre&gt; </pre></td><td><pre>这是一个 pre 元素</pre></td><td>定义预格式文本</td></tr><tr><td>&lt; hr &gt;</td><td>  <pre > &lt;hr&gt; </pre></td><td><hr></td><td>定义水平线</td></tr><tr><td>&lt; ul &gt;</td><td>  <pre > &lt;ul&gt; 这是一个 ul 元素 &lt;/ ul&gt; </pre></td><td><ul>这是一个 ul 元素</ul></td><td>定义无序列表</td></tr><tr><td>&lt; ol &gt;</td><td>  <pre > &lt;ol&gt; 这是一个 ol 元素 &lt;/ ol&gt; </pre></td><td><ol>这是一个 ol 元素</ol></td><td>子集</td></tr><tr><td>&lt; li &gt;</td><td>  <pre > &lt;li&gt; 这是一个 li 元素 &lt;/ li&gt; </pre></td><td><li>这是一个 li 元素</li></td><td>定义列表项</td></tr><tr><td>&lt; dl &gt;</td><td>  <pre > &lt;dl&gt; 这是一个 dl 元素 &lt;/ dl&gt; </pre></td><td><dl>这是一个 dl 元素</dl></td><td>这是一个 dl 元素</td></tr><tr><td>&lt; dt &gt;</td><td>  <pre > &lt;dt&gt; 这是一个 dt 元素 &lt;/ dt&gt; </pre></td><td><dt>这是一个 dt 元素</dt></td><td>定义列表项的标题</td></tr><tr><td>&lt; dd &gt;</td><td>  <pre > &lt;dd&gt; 这是一个 dd 元素 &lt;/ dd&gt; </pre></td><td><dd>这是一个 dd 元素</dd></td><td>列表项的描述</td></tr><tr><td>&lt; address &gt</td><td>  <pre > &lt;address&gt; 这是一个 address 元素 &lt;/ address&gt; </pre></td><td><address>这是一个 address 元素</address></td><td>定义联系信息</td></tr><tr><td>&lt; blockquote &gt;</td><td>  <pre > &lt;blockquote&gt; 这是一个 blockquote 元素 &lt;/ blockquote&gt; </pre></td><td><blockquote>这是一个 blockquote 元素</blockquote></td><td>定义引用</td></tr><tr><td>&lt; form &gt;</td><td>  <pre > &lt;form&gt; 这是一个 form 元素 &lt;/ form&gt; </pre></td><td><form action="">这是一个 form 元素</form></td><td>定义表单</td></tr><tr><td>&lt; fieldset &gt;</td><td>  <pre > &lt;fieldset&gt; 这是一个 fieldset 元素 &lt;/ fieldset&gt; </pre></td><td><fieldset>这是一个 fieldset 元</fieldset></td><td>描述字段集</td></tr></table>
</body>
</html>

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

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

相关文章

微论-突触的作用赋能思考(可能是下一代人工智能架构的启发式理论)

突触智能&#xff1a;微观结构与宏观智慧的桥梁摘要&#xff1a;传统人工智能模型&#xff0c;尤其是深度学习&#xff0c;将突触简单抽象为一个静态的权重参数&#xff0c;这极大地简化了生物计算的复杂性。本文受启发于生物突触的微观功能&#xff0c;提出了一种新的智能架构…

ARM - GPIO 标准库开发

一、STM32MP157AAA开发板套件介绍1.1 核心板 - 主板如图所示&#xff1a;主板各部分介绍1.2 IO 拓展板如图所示&#xff1a;IO拓展板各部分介绍开发板名称&#xff08;硬件平台&#xff09;&#xff1a;FS-MP1A主控制器&#xff1a;STM32MP157AAA3 Cortex-A7 * 2 Cortex-M4 -…

橙武低代码:不仅仅是云SaaS,更是云端开发+本地部署的新范式

版权归作者所有&#xff0c;转载请注明出处。 一、低代码的时代背景 在过去十年里&#xff0c;软件研发模式经历了巨大的演变。从传统的瀑布开发&#xff0c;到敏捷、DevOps&#xff0c;再到如今的低代码/无代码平台&#xff0c;研发效率和交付模式发生了根本性变化。低代码的…

神经语言学视角:脑科学与NLP深层分析技术的交叉融合

引言&#xff1a;从“统计拟合”到“类人理解”——NLP的下一个范式近年来&#xff0c;以Transformer架构为核心的大型语言模型&#xff08;LLM&#xff09;在自然语言处理&#xff08;NLP&#xff09;领域取得了前所未有的成功 。它们能够生成流畅的文本、回答复杂的问题&…

Coze源码分析-工作空间-项目查询-前端源码

前言 本文将深入分析Coze Studio项目中用户登录后进入工作空间查看和管理项目的前端实现&#xff0c;通过源码解读来理解工作空间项目开发功能的架构设计和技术实现。Coze Studio采用了现代化的React TypeScript技术栈&#xff0c;结合微前端架构和模块化设计&#xff0c;为用…

【系统架构师设计(9)】系统设计:结构化设计与面向对象设计

文章目录一、核心思想&#xff1a;模块化与对象化的设计哲学1、结构化设计的核心思想2、面向对象设计的核心思想3、两种设计方法的本质区别二、结构化设计知识点1、设计阶段2、设计原则3、 内聚类型&#xff08;从低到高&#xff09;耦合类型&#xff08;从低到高&#xff09;模…

还在从零开发AI应用?这个项目直接给你500个现成方案!!!

大家好&#xff0c;我是顾北&#xff0c;一名AI应用探索者&#xff0c;也是GitHub开源项目收集者。昨晚又在GitHub上瞎逛...咦&#xff0c;碰到了一个特别有意思的项目。说实话吧&#xff0c;作为一个天天折腾AI工具的人&#xff0c;见过的项目没有一千也有八百了&#xff0c;但…

react+taro的使用整理

前言&#xff1a; 本文主要整理下我们跨段工具taro的具体使用方法与相关资料。 taro官网&#xff1a; 安装及使用 | Taro 文档 安装&#xff1a; 全局脚手架安装&#xff1a; npm install -g tarojs/cli 使用脚手架安装我们的taro项目 taro init myApp 运行到不同小程序教…

从 “容器保姆” 到 “云原生王者”:K8s 全方位指南

目录 开头专业总结 一、先搞懂&#xff1a;K8s 到底是什么&#xff1f;能解决什么痛点&#xff1f; 1. K8s 的本质 2. 核心用处&#xff08;解决的痛点&#xff09; 二、K8s 核心知识点&#xff1a;组件与概念&#xff08;标重点&#xff01;&#xff09; &#xff08;一…

03.《交换的底层逻辑:从基础到应用》

交换基础 文章目录交换基础MAC 地址&#xff1a;设备的 “全球唯一身份证”MAC 地址的基本属性MAC 地址的三类类型&#xff08;按通信范围划分&#xff09;以太帧以太帧的两个标准格式1. Ethernet_II 格式&#xff08;常用&#xff09;2. IEEE 802.3 格式&#xff08;少用&…

火语言 RPA 界面应用生成:轻量化开发核心优势

火语言 RPA 界面应用生成功能&#xff0c;主打 “低门槛、快落地”&#xff0c;无需复杂开发环境与专业技术&#xff0c;就能快速实现需求验证与工具搭建&#xff0c;尤其适配中小团队与个人&#xff0c;核心优势如下&#xff1a;​一、1 小时搞定需求验证&#xff1a;3 步落地…

第三方软件测试机构【多语言开发(PHP/Java/Python)WEB 应用的安全专业测试流程】

PHP应用测试安全 文件包含漏洞&#xff1a;检测include/require函数参数未过滤场景&#xff08;如?page../../../etc/passwd&#xff09; 命令注入&#xff1a;检查system()/exec()函数输入验证&#xff08;如| cat /etc/passwd&#xff09; 会话安全&#xff1a;验证session …

C++条件变量学习

1、概述你知道条件变量"虚假唤醒"问题么&#xff0c;下面代码有问题么void CFileTaskThread::Run() {while (!m_bStop){CFileItemRequest* pFileItem;{std::unique_lock<std::mutex> guard(m_mtItems);if (m_Filelist.empty()){if (m_bStop)return;// 等待条件…

React Native系统组件(一)

1&#xff0c;View&#xff0c;UI的构建基石 四个方向&#xff0c;水平&#xff0c;水平倒序&#xff0c;垂直&#xff0c;垂直倒序 flexGrow与flex的区别&#xff0c;flexgrow是分父布局剩余的空间&#xff0c;flex是分父布局全部的空间上面的是flexgrow 123 下面的是flex 123…

Git 代码提交管理指南

目录 1. 初始设置&#xff08;首次使用 Git 时&#xff09; 2. 日常提交工作流程 场景一&#xff1a;已有本地项目&#xff0c;首次连接到远程仓库 场景二&#xff1a;已有远程仓库&#xff0c;克隆到本地 3. 更精细的文件管理 4. 提交信息规范 5. 分支管理策略 6. 高级…

go-mapus最简单的离线瓦片地图协作

基于leaflet.jsleaflet-geoman.jsgolangbeegogormsqlitewebsocket等实现一个最简单的地图协作。绘制图元&#xff0c;其他用户浏览器上实施显示绘制和修改结果&#xff0c;大家可同步进行绘制和修改。设置线型和颜色&#xff0c;粗细和透明度。保存到sqlite数据库。动画演示地图…

调式记录之八位机软件串口

现在在上班&#xff0c;做的项目几乎都是关于八位机的&#xff0c;八位机有个挺CD的点硬件资源少&#xff0c;打印之类的需要软件串口&#xff0c;有时候调的刚到很玄学&#xff0c;也有可能是我知识没有学得恨透。首先我得需要发送这句话并在代码里面设置我的延时时间&#xf…

嵌入式学习day40-硬件(1)

嵌入式&#xff1a;以应用为中心&#xff1a;消费电子(手机、蓝牙耳机、智能音响&#xff09;、医疗电子(心率脉搏、呼吸机&#xff09;、无人机&#xff08;大疆DJ&#xff09;、机器人&#xff08;人形四足机器人)计算机技术&#xff1a;计算机五大组成&#xff1a;运算器(数…

管理中心理学问:面试中教你识别他人需求动机

“我工作是为了钱&#xff0c;为了吃,住&#xff0c;和用钱买东西。”“我工作是为了地位和认可。”“我工作是为了有所归属&#xff0c;为了成为一个团体的成员。”“我工作是想高升。”“我工作是因为人应该工作&#xff0c;这是唯一的权利。”“我工作为了获取知识和认识世界…

【JavaScript】读取商品页面中的结构化数据(JSON-LD),在不改动服务端情况下,实现一对一跳转

前端实践&#xff1a;从商品页面读取 mpn 并实现一对一跳转 在实际开发中&#xff0c;我们经常会遇到这样一种需求&#xff1a; 用户浏览 A 网站的商品页面后&#xff0c;点击按钮能够直接跳转到 B 网站的对应商品。 表面看似只是一个按钮跳转&#xff0c;但如果不同商品需要精…