重头开始嵌入式第三十五天(网页设计)

2024-09-05 23:44

本文主要是介绍重头开始嵌入式第三十五天(网页设计),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

web网页设计

1.什么是web网页?

2.简单的网页编写

1.格式  

注意保存为2.标签 

3,元素的属性

4,文本元素属性

5超链接

6 img 单标签

7列表

1.无序列表 前面无数字

2.有序列,前面有数字

8 .表格

9 .html 实体

10,表单 传递参数,数据


web网页设计

1.什么是web网页?

Web 网页是通过互联网访问的文档,通常由 HTML(超文本标记语言)、CSS(层叠样式表)和 JavaScript 等技术构建而成。
 
Web 网页具有以下特点:
 
一、内容呈现
 
1. 多媒体展示
- 可以包含文本、图像、音频、视频等多种形式的内容,为用户提供丰富的信息和娱乐体验。
- 例如,新闻网页会有文字报道、图片新闻以及相关的视频报道。
2. 动态更新
- 网页内容可以随时更新,保持信息的时效性。新闻网站、博客等经常会发布新的文章和资讯,用户每次访问都可能看到不同的内容。
 
二、交互性
 
1. 用户参与
- 用户可以通过表单提交、评论、点赞等方式与网页进行互动。这使得网页不仅仅是信息的展示平台,还成为了用户交流和参与的场所。
- 例如,社交媒体网页允许用户发布动态、评论他人的帖子,进行互动交流。
2. 链接和导航
- 网页之间通过超链接相互连接,用户可以方便地从一个网页跳转到另一个网页,浏览不同的内容。导航栏、菜单等元素帮助用户在网页中快速找到所需的信息。
- 比如,在一个电商网站上,用户可以通过导航栏浏览不同的商品类别,点击商品链接查看详细信息。
 
三、跨平台访问
 
1. 多种设备兼容
- 可以在不同的操作系统(如 Windows、Mac、Linux)和设备(如电脑、手机、平板)上通过浏览器访问。
- 随着移动互联网的发展,越来越多的网页采用响应式设计,以适应不同屏幕尺寸的设备。
2. 全球访问性
- 只要有互联网连接,用户可以从世界任何地方访问 Web 网页。这使得信息的传播和共享变得更加便捷和广泛。
- 例如,一个企业的官方网站可以被全球各地的客户访问,了解企业的产品和服务。

2.简单的网页编写

1.格式  


<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>中文测试。。。。</title>
</head>
<body>
这里是测试body测试内容。。。
</body>
</html>

注意后缀保存为.html

2.标签 

在body内
<h1></h1>双标签 标题 ,加粗,换行  1-6 ---》小
<p></p> 双标签  段落,有换行功效
<hr> 单标签  左到右分割符
<!--    -->注释


3,元素的属性


给元素提供更多的属性,大部分的元素属性
语法:<标签 属性1=参数1 属性2=参数2>
1)align left,right,center
2) bgcolor ,body的属性设置网页的背景色
<body bgcolor="0xff1234" bgcolor="0xff1234">


4,文本元素属性


b 元素 <b>内容</b> 加粗
br 换行<br> 如果是p标签中间有间隔
i元素, 字体倾斜<i></i>
del元素 删除文字<del></del>
strong  强调一段文字,效果类似 b标签
u元素,下划线<u></u>
small元素, 超小字体<small></small>
sub 下标<sub></sub>
sup  上标<sup></sup>
<br>h<sub>2</sub>0
<br>100m<sup>2</sup>
ruby,拼音,<ruby>二姐 <rt>(er) (jie)<rt></ruby>,可能部分浏览器不支持。
mark 元素 <mark> </mark> 加黄色背景


5超链接

5种形式
1,链接外部网站<a href="http://www.baidu.com">baidu</a>
2,链接本地文件<br><a href="1.html">1111</a>
3,图片链接<br><a href="1.html"><img src="abc.jpg"></a>
4,电子邮件链接打开电子邮件<br><a href="mailto:123@13.com">contract me</a>
5,下载文件链接<br><a href="abc.jpg">下载</a>

上面的方法在打开新网页时,老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>


6 img 单标签

src 图像来源
alt 如果不能正确打开,显示的文字
width, heigh
<img src="abc.jpg" alt="美女" width="100" height="200">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的, 高度百分比无效的


7列表

有序列,无序序列
自定义列表

1.无序列表 前面无数字

<ul> 
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
有个type属性 文字最前面的符号
disc 黑色实心圆
circle 白色空心圆
square 黑色方块

2.有序列,前面有数字

<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
其中可以放文字,图片,或链接
有type属性,设置排序使用什么数字
start 开始值,后面的++;

8 .表格

表格的构成,
table,外框
tr 行
td 列
<table>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
3行 3列
表格的属性
 border 边框粗细
 th,是tr的属性,列标题,自动居中,加粗
 colspan,横向合并单元格,需要 整形参数
<tr><th colspan="3">name</th></tr> 
表格的合并
rowspan ,列项合并,整数参数

9 .html 实体

用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的

10,表单 传递参数,数据

<form></form>
<!-- 表单中重要的字元素 input button -->
<!-- 属性 action,指定表单发送的地址 -->
<!-- 属性 method 发送的方式 get,post -->
<!--get方法 数据会附加到url的后面传递给服务器 默认-->
<!--post,将数据包大包发给服务器,等候服务器来读取 -->
input元素(输入框)他是表单的一个字属性
指定表单中的内容项,比如输入内容的文本框
可以指定表单属性,也可以放在表单的外面。
input元素的属性:
type,指定输入框的类型,text单行文本,password密码,submit提交按钮,
reset,重置按键,button按键,普通的按键需要和特定的时间关联。
image:图片式按键
hidden:隐藏字段,该内容不显示在页面上,提交其他的一些变量。
email: 是一个邮箱类型,新特性,可能支持有差异
required:表示内容必须填写,不然不能提交。
name:名称,输入内容识别名称,传递参数时候的参数名称
value: 默认值,输入框默认填入的内容,
maxlength,指定最大长度
placeholder,设置提示信息的。

更多内容可以去下面网站查找:

https://www.w3school.com.cn/index.html

这篇关于重头开始嵌入式第三十五天(网页设计)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1140395

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域,图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能,成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限,比如只有一台高性能电脑时,如何高效地让七人同时流畅地进行设计工作,便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器(CPU):选择多核、高线程的处理器,例如Intel的至强系列或AMD的Ry

荣耀嵌入式面试题及参考答案

在项目中是否有使用过实时操作系统? 在我参与的项目中,有使用过实时操作系统。实时操作系统(RTOS)在对时间要求严格的应用场景中具有重要作用。我曾参与的一个工业自动化控制项目就采用了实时操作系统。在这个项目中,需要对多个传感器的数据进行实时采集和处理,并根据采集到的数据及时控制执行机构的动作。实时操作系统能够提供确定性的响应时间,确保关键任务在规定的时间内完成。 使用实时操作系统的

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

嵌入式Openharmony系统构建与启动详解

大家好,今天主要给大家分享一下,如何构建Openharmony子系统以及系统的启动过程分解。 第一:OpenHarmony系统构建      首先熟悉一下,构建系统是一种自动化处理工具的集合,通过将源代码文件进行一系列处理,最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件、动态链接库文件、可执行文件、脚本文件、配置文件等。      我们在编写hellowor

SprinBoot+Vue网络商城海鲜市场的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作者,全网30w+

嵌入式方向的毕业生,找工作很迷茫

一个应届硕士生的问题: 虽然我明白想成为技术大牛需要日积月累的磨练,但我总感觉自己学习方法或者哪些方面有问题,时间一天天过去,自己也每天不停学习,但总感觉自己没有想象中那样进步,总感觉找不到一个很清晰的学习规划……眼看 9 月份就要参加秋招了,我想毕业了去大城市磨练几年,涨涨见识,拓开眼界多学点东西。但是感觉自己的实力还是很不够,内心慌得不行,总怕浪费了这人生唯一的校招机会,当然我也明白,毕业