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

目标图片:

文字素材:


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


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

  * 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浏览器运行截图:

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

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

相关文章

【数据仓库】数仓分层方法

文章目录 一. 数仓分层的意义1. 清晰数据结构。2. 减少重复开发3. 方便数据血缘追踪4. 把复杂问题简单化5. 屏蔽原始数据的异常6. 数据仓库的可维护性 二. 如何进行数仓分层&#xff1f;1. ODS层2. DW层2.1. DW层分类2.2. DWD层2.3. DWS 3. ADS层 4、层次调用规范 一. 数仓分层…

Ubuntu中安装R语言环境并在jupyter kernel里面增加R kernel

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

程序运行前后内存分区存储

程序运行前是源码 在程序运行后&#xff0c;生成了exe可执行程序 分为代码区和全局区 代码区&#xff1a; 存放CPU执行的机器指令代码区是共享的&#xff0c;共享的目的是对于频繁被执行的程序&#xff0c;只需要在内存中有一份代码就可以了代码区是只读的&#xff0c;其只读…

Redis解决缓存问题

目录 一、引言二、缓存三、Redis缓存四、缓存一致性1.缓存更新策略2.主动更新 五、缓存穿透六、缓存雪崩七、缓存击穿1.基于互斥锁解决具体业务2.基于逻辑过期解决具体业务 一、引言 在一些大型的网站中会有十分庞大的用户访问流量&#xff0c;而过多的用户访问对我们的MySQL数…

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(四)

编辑员工和分类模块功能开发 1. 编辑员工1.1 需求分析与设计1.1.1 产品原型1.1.2 接口设计 1.2 代码开发1.2.1 回显员工信息功能1.2.2 修改员工信息功能 1.3 功能测试 2. 分类模块功能开发2.1 需求分析与设计2.1.1 产品原型2.1.2 接口设计2.1.3 表设计 2.2 代码实现2.2.1 Mappe…

windows服务器热备、负载均衡配置

安装网络负载平衡 需要加入的服务器上全部需要安装网络负载平衡管理器 图形化安装&#xff1a;使用服务器管理器安装 在服务器管理器中&#xff0c;使用“添加角色和功能”向导添加网络负载均衡功能。 完成向导后&#xff0c;将安装 NLB&#xff0c;并且不需要重启计算机。 …

做一个Sprngboot文件上传-阿里云

概述 这个模块是用来上传头像以及文章封面的&#xff0c;图片的值是一个地址字符串&#xff0c;一般存放在本地或阿里云服务中 1、本地文件上传 我们将文件保存在一个本地的文件夹下&#xff0c;由于可能两个人上传不同图片但是却同名的图片&#xff0c;那么就会一个人的图片就…

【c++】——类和对象(中)——实现完整的日期类

作者:chlorine 专栏:c专栏 我的花一定会开。 【学习目标】 拷贝复制——赋值运算符重载 目录 &#x1f393;运算符重载(-><...) &#x1f393;日期&天数 &#x1f393;前置和后置重载 我们完成了赋值运算符重载章节的学习&#xff0c;对operator关键字的使用有…

如何使用`open-uri`模块

首先&#xff0c;我们需要使用open-uri模块来打开网页&#xff0c;并使用Nokogiri模块来解析网页内容。然后&#xff0c;我们可以使用Nokogiri的css方法来选择我们想要的元素&#xff0c;例如标题&#xff0c;作者&#xff0c;内容等。最后&#xff0c;我们可以使用open-uri模块…

线圈寿命预测 数据集讲解

来自-郭师兄 1.这个是线圈数据的阻抗、电抗等数据&#xff0c;我想根据这个个数据进行线圈寿命预测也就是RUL预测&#xff0c;请问有什么思路吗。 最简单的思路&#xff1a; 数据通过某种方法进行压缩表征到一维再通过 同时需要标签。 确定一个特征 使用降维方法如同PCA来构…

互联网Java工程师面试题·微服务篇·第二弹

目录 18、什么是 Spring 引导的执行器&#xff1f; 19、什么是 Spring Cloud&#xff1f; 20、Spring Cloud 解决了哪些问题&#xff1f; 21、在 Spring MVC 应用程序中使用 WebMvcTest 注释有什么用处&#xff1f; 22、你能否给出关于休息和微服务的要点&#xff1f; 23、…

Vue.js中的状态管理:理解和使用Vuex

目录 前言 Vue.js 样式绑定 Vue.js class class 属性绑定 实例 1 实例 2 实例 3 实例 4 数组语法 实例 5 实例 6 Vue.js style(内联样式) 实例 7 实例 8 实例 9 Vue.js 组件 全局组件 全局组件实例 局部组件 局部组件实例 Prop Prop 实例 动态 Prop Pro…

Makefile应用

Makefile实例 在c.c里面&#xff0c;包含一个头文件c.h&#xff0c;在c.h里面定义一个宏&#xff0c;把这个宏打印出来。 c.c&#xff1a; #include <stdio.h> #include <c.h>void func_c() {printf("This is C %d\n", C); }c.h #define C 1然后上传…

ubuntu开机系统出错且无法恢复。请联系系统管理员。

背景&#xff1a; ubuntu22.04.2命令行&#xff0c;执行自动安装系统推荐显卡驱动命令&#xff0c;字体变大&#xff0c;重启后出现如下图错误&#xff0c;无法进入系统&#xff0c;无法通过CTRLALTF1-F3进入TTY模式。 解决办法&#xff1a; 1.首先要想办法进入系统&#xff…

Python 日志记录器logging 百科全书 之 日志回滚

Python 日志记录器logging 百科全书 之 日志回滚 前言 在之前的文章中&#xff0c;我们学习了关于Python日志记录的基础配置。 本文将深入探讨Python中的日志回滚机制&#xff0c;这是一种高效管理日志文件的方法&#xff0c;特别适用于长时间运行或高流量的应用。 知识点&…

飞天使-django创建一个初始项目过程

创建django项目 运行项目 运行命令 pyhont manage.py runserver 然后访问 http://127.0.0.1:8000/&#xff0c; 则可以打开本地新建的项目 虚拟环境的部署-mac 在一台计算机上可以通过虚拟环境实现多个版本Django的开发环境 安装虚拟环境工具&#xff1a;如果你的系统中没有安…

Qt执行带参sql

//准备执行的sql语句&#xff0c;此为带参的sql语句query.prepare("update employee set Name:Name, Gender:Gender,Height:Height,"" Birthday:Birthday, Mobile:Mobile, Province:Province,"" City:City, Department:Department, Education:Educati…

202311.13 windows通过vscode ssh远程连接到Ubuntu 连接失败 waiting for server log

关闭VScode时没有关闭终端的Ubuntu进程&#xff1f; 导致重启后不能正常连接到Ubuntu了 Windows 系统自带的cmd终端通过ssh 可以连接 应该是vscode里对Ubuntu 的服务器端配置出了问题 参考&#xff1a;记录 VSCode ssh 连接远程服务器时出错及解决方法 在Windows 的vscode里面执…

红色旅游AR互动体验将景区推向更广泛的市场

AR技术的出现使得各展厅观众可以在虚拟和现实的层面进行互动&#xff0c;利用AR和VR技术&#xff0c;将展览地点扩展到特定的虚拟领域&#xff0c;实现了"无触觉"交互体验&#xff0c;增强现实技术和展馆的对接更加激发人们了解新事物的兴趣。 一、AR景区&#xff1a…

WordPress 文档主题模板Red Line -v0.2.2

此主题作为框架&#xff0c;做承载第三方页面之用&#xff0c;例如飞书文档等&#xff0c; 您可以将视频图片等资源放第三方文档上&#xff0c;通过使用此主题做目录用。 此主题使用前后端分离开发&#xff0c;也使用了一些技术尽量不影响正常的SEO&#xff0c;还望注意。 源码…