当前位置： 首页 > news >正文

web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》

news 2026/2/8 23:53:21

目标图片：

文字素材：


    网页设计语言基础练习案例


        ——几个从语义上和文字相关的标签

  * h标签（h1~h6）：用来定义网页的标题，成对出现。
  * p标签：用来设置网页的段落，成对出现。
  * br标签：换行符，单独出现。
  * 列表标签：成对、成组出现。
      o 无序列表：ul　 和　 列表项：li
      o 有序列表：ol　 和　 列表项：li
      o 定义列表：dl　和　定义术语：dt　和　定义描述：dd
  * span标签：无意义标签，成对出现

h标签(h1~h6)
    h是header的首字母缩写，后面的数字表示标题的级别。
    默认自带效果：加粗，自带间距，且独立成行。

p标签
    p是paragraph的首字母缩写，用来设置段落文本。
    默认自带效果：段间距，且独立成行。

br标签
    换行符，只回一行，行间距较小时可以使用，且不够精确。
    默认自带效果：换行。

列表标签
    无序列表，默认列表符为实心圆点，有左填充，嵌套子列表的列表符会发生变化。
    有序列表，默认列表符为阿拉伯数字，有左填充。
    定义列表，没有列表符，dl后面要跟着dt和dd，一个dt可以和多个dd搭配，其
    中dd默认带左间距
    列表元素是块级元素，能独立成行，一般不单独使用，因为单独的元素不能表
    达完整的语义，且有可能在样式的呈现上回出现意想不到的问题。
    列表元素能够实现网页当中的结构化信息，如需要排列显示的导航菜单、新闻
    信息等。

span标签
    span无实际意义，没有固定样式，是行级元素
    一般作为部分文本定义特殊样式时使用，完善排版。

图片素材：

Dreamweave-html运行代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<h1>
<h1 align="center">
网页设计语言基础练习案例</h1>
<hr below style="border:3px dashed #FFCC00;">
<h3>
<h3 align="center">
——几个从语义上和文字相关的标签</h3><ul>
<li style="disc;">
<img src="practice3.jpg"style="float:right;margin-right:130px; width="91" height="135" />
<b style="color:red;">h标签（h1~h6）：</b>用来定义网页的标题，成对出现。</li>
<li><b style="color:red;">p标签:</b>用来设置网页的段落，成对出现。</li>
<li><b style="color:red;">br标签:</b>换行符、单独出现。</li>
<li><b style="color:red;">列表标签:</b>成对、成组。</li>
<li><b style="color:red;">span标签:</b>无意义标签，成对出现。</li>
</ul>
<div>
<div align="center">
<div style="border:1px dashed #000;width:500px;height:80px;">
<div style="text-align:left;width:480px;height:70px;background-color:#FC9;color:black;font-size:16px;padding-left:20px;padding-top:10px;">
<li>无序列表：ul　 和　 列表项：li</li>
<li>有序列表：ol　 和　 列表项：li</li>
<li>定义列表：dl　和　定义术语：dt　和　定义描述：dd</li>
<ul></div><dl><div>
<div style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>h标签(h1~h6)</dt>
<dd>h是header的首字母缩写，后面的数字表示标题的级别。</dd>
<dd>默认自带效果：加粗，自带间距，且独立成行。</dd>
</div></dl>
<dl><div>
<div style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>p标签</dt>
<dd>p是paragraph的首字母缩写，用来设置段落文本。</dd>
<dd>默认自带效果：段间距，且独立成行。</dd>
</div></dl>
<dl><div>
<div style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>br标签</dt>
<dd>换行符，只回一行，行间距较小时可以使用，且不够精确。</dd>
<dd>默认自带效段:换行。</dd>
</div></dl><div style="border:1px solid #000;width:500px;height:220px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>列表标签</dt>
<dd>无序列表，默认列表符为实心圆点，有左填充，嵌套子列表的列表符会发生变化。</dd>
<dd>有序列表，默认列表符为阿拉伯数字，有左填充。</dd>
<dd>定义列表，没有列表符，dl后面要跟着dt和dd，一个dt可以和多个dd搭配，其中dd默认带左间距。</dd>
<dd>列表元素是块级元素，能独立成行，一般不单独使用，因为单独的元素不能表达完整的语义，且有可能在样式的呈现上回出现意想不到的问题。</dd>
<dd列表元素能够实现网页当中的结构化信息，如需要排列显示的导航菜单、新闻信息等。</dd>
</div></dl><dl style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>span标签</dt>
<dd>span无实际意义，没有固定样式，是行级元素。</dd>
<dd>一般作为部分文本定义特殊样式时使用，完善排版。</dd>
</div></dl></body>
</html>

Edge浏览器运行截图：

Goole浏览器运行截图：

相关文章：

web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》

目标图片&#xff1a; 文字素材&#xff1a; 网页设计语言基础练习案例 ——几个从语义上和文字相关的标签 * h标签&#xff08;h1~h6&#xff09;&#xff1a;用来定义网页的标题&#xff0c;成对出现。 * p标签&#xff1a;用来设置网页的段落&#xff0c;成对出现。 * b…...

编程日记 2023/11/14 1:45:52

APP备案获取安卓app证书公钥获取方法和签名MD5值

前言 在开发和发布安卓应用程序时&#xff0c;了解应用程序证书的公钥和签名MD5值是很重要的。这些信息对于应用程序的安全性和合规性至关重要。现在又因为今年开始APP必须接入备案才能在国内各大应用市场上架&#xff0c;所以获取这两个值成了所有开发者的必经之路。本文将介…...

编程日记 2023/11/14 1:44:51

cefsharp 93.1.140 如何在js中暴露c#类

从cefsharp79版本开始&#xff0c;旧的RegisterJsObject方法被删除了。 也就是说想使用79以后的版本&#xff0c;就必须更新js暴露c#对象的方法了。由于79之前的注册方法是不需要在js中进行注册的&#xff0c;在93版本上如何在不改动前端页面的基础上实现内核升级咧&#xff0c…...

编程日记 2023/11/14 1:43:50

同一台Linux同时安装MYSQL5.7和MYSQL8（第一篇）

在一台Linxu上面同时安装mysql5.7和mysql8.0的步骤&#xff0c;记录一下&#xff0c;方便后续回顾&#xff0c;后续文章之后会接着介绍搭建两台虚拟机一主一从的架构。 其中配置的文件名称、目录、端口号、IP地址要根据自己电脑的实际情况进行更改。 安装完成后效果 [rootzong…...

编程日记 2023/11/14 1:42:49

【CSS】解决上层盒子遮挡下层图片点击事件的三种方法

1. Pointer Events 属性 CSS 的 pointer-events 属性是一个强大的工具&#xff0c;可以控制元素是否接收用户的交互事件。通过将上层盒子的 pointer-events 设置为 none&#xff0c;我们可以确保它不会阻止下层图片的点击事件。 .upper-box {z-index: 999; /* 设置更高的 z-i…...

编程日记 2023/11/14 1:41:48

力扣每日一题 ---- 2906. 构造乘积矩阵

这题很简单(一下就能想到是前缀和的提米)&#xff0c;但是在处理12345上面需要仔细一点&#xff0c;本来我最开始想到的时候全部累乘在除掉当前数&#xff0c;但是这样就没有把12345考虑进去&#xff0c;如果他本身是12345的话&#xff0c;那么除他以外的乘积并不一定是0&#…...

编程日记 2023/11/14 1:40:46

Tomcat学习

一、入门 在webapp里面必须先创建一个文件夹&#xff0c;文件夹里面放的内容&#xff0c;才会被访问到。 创建一个javaweb项目后 二、servlet 1.概述 2.servlet生命周期 3.servlet实例的创建时机 4.Servlet实例的初始化参数 5.HTTP状态码 6.servelet返回JSON数据 7.服务端设置…...

编程日记 2023/11/14 1:39:45

Linux系统上搭建高可用Kafka集群（使用自带的zookeeper）

本次在CentOS7.6上搭建Kafka集群 Apache Kafka 是一个高吞吐量的分布式消息系统&#xff0c;被广泛应用于大规模数据处理和实时数据管道中。本文将介绍在CentOS操作系统上搭建Kafka集群的过程&#xff0c;以便于构建可靠的消息处理平台。 文件分享&#xff08;KafkaUI、kafka…...

编程日记 2023/11/14 1:38:43

WebSocket在node端和客户端的使用

摘要 如果想要实现一个聊天的功能&#xff0c;就会想到使用WebSocket来搭建。那如果没有WebSocet的时候&#xff0c;我们会以什么样的思路来实现聊天功能呢&#xff1f; 假如有一个A页面 和 B页面进行通信&#xff0c;当A发送信息后&#xff0c;我们可以将信息存储在文件或者…...

编程日记 2023/11/14 1:37:42

ENVI IDL：如何将txt文本文件转化为GeoTIFF文件？

01 前言 此处的文本文件形式如下&#xff1a; 里面包含了众多点位信息&#xff08;不是站点数据&#xff09;&#xff0c;我们需要依据上述点的经纬度信息放到对应位置的像素点位置&#xff0c;放置完后如下&#xff1a; 可以发现&#xff0c;还存在部分缺失值&#xff0c;我们…...

编程日记 2023/11/14 1:36:40

北邮22级信通院数电：Verilog-FPGA（9）第九周实验（2）实现下降沿触发的JK触发器（带异步复位和置位功能）

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 JK.v module JK (input clk,input J,input K,input…...

编程日记 2023/11/14 1:35:40

pyqt5UI同步加载

问题记录&#xff1a;pyqt5 怎样实现修改ui而不改变py代码&#xff0c;例如一个文件存入ui代码&#xff0c;另一个文件引入ui代码 起因&#xff1a;由于在写一个漏扫工具&#xff0c;由于ui的平频繁改动导致主体代码结构变动&#xff0c;所以先有没有方法能够不改变主题代码&am…...

编程日记 2023/11/14 1:34:39

CentOS 7 安装 Redis 5 （单机 6379）

CentOS 7 安装 Redis 5 &#xff08;单机 6379&#xff09; 自己准备好 Redis 5 的安装包并上传至 /opt/ 下的 redis 文件夹下&#xff1a; cd /opt mkdir redis cd redis准备好 Redis 所需的编译环境&#xff1a; yum -y install gcc yum -y install gcc-c解压上传的 Redis…...

编程日记 2023/11/14 1:33:38

sqlplus set参数大区

通过设置不同的SET参数&#xff0c;可以定制SQLPlus的行为和输出格式&#xff1a; SET 参数描述SET AUTOTRACE显示SQL语句的执行计划和统计信息&#xff0c;用于性能优化。SET FEEDBACK控制是否显示SQL语句执行的行数&#xff0c;可提高结果可读性。SET LINESIZE设置每行的最大…...

编程日记 2023/11/14 1:32:37

从0到0.01入门React | 006.精选 React 面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...

编程日记 2023/11/14 1:31:36

GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题

目录 GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题背景思路分析代码实现引入依赖读取并遍历矢量文件处理并“缝合”一个多边形的内外环结果保存到新的矢量文件中完整代码效果展示仓库代码地址GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问…...

编程日记 2023/11/14 1:30:35

javaSE学习笔记（五）集合框架-Collection，List，Set，Map，HashMap，Hashtable，ConcurrentHashMap

目录 四、集合框架 1.集合概述 集合的作用 集合和数组的区别 集合继承体系 数组和链表 数组集合 链表集合 2.Collection 方法 集合遍历 并发修改异常 3.List List集合的特有功能&#xff08;核心是索引&#xff09; 集合遍历 并发修改异常产生解决方案ListItera…...

编程日记 2023/11/14 1:29:34

web3 React dapp项目通过事件从区块链中拿到 已取消 已完成 和所有的订单数据 并存入redux中

好 上文web3通过antd 在React dapp中构建订单组件基本结构我们算是把一个基本的订单组件展示做出来了 然后 我们继续 起一下环境先 ganache 终端运行 ganache -dMetaMask 登录一下 然后 打开项目 发布一下合约 truffle migrate --reset然后 运行一下 测试脚本 转入交易所 E…...

编程日记 2023/11/14 1:28:33

25、Flink 的table api与sql之函数(自定义函数示例)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

编程日记 2023/11/14 1:27:32

MybatisPlus —注解汇总

本文将介绍 MybatisPlus 注解包相关类详解&#xff08;更多详细描述可点击查看源码注释&#xff09; 注解类包源码&#xff1a;&#x1f449; mybatis-plus-annotation(opens new window) 一、#TableName(opens new window) 描述&#xff1a;表名注解&#xff0c;标识实体类对…...

编程日记 2023/11/14 1:26:29

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/1/20 19:54:35

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02