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

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

news 2025/11/13 18:16: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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/11/13 14:13:53

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/11/12 21:40:00

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/11/7 20:05:21

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/25 11:57:30

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/11/9 21:18:43

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/11/10 2:40:50

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2025/11/12 9:54:50

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/11/12 13:38:19

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/9/20 11:57:48