网页设计（一）开发环境配置与HTML基础

在这里插入图片描述

一、使用HBuilderX创建项目和文件

加粗样式HX创建HTML文档的模板位置
在这里插入图片描述
template.html模板内容
在这里插入图片描述

1.创建HTML项目

创建项目引导界面
在这里插入图片描述
新建项目窗口
在这里插入图片描述
Web-2009030199项目所在位置图
在这里插入图片描述

2.在项目下新建prj_1_2.html文件

创建文件引导界面
在这里插入图片描述
新建html文件界面
在这里插入图片描述

3.新建prj_1_2.html文件

prj_1_2.html编辑界面
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是创建的第1个HTML文件</title>
	</head>
	<body>
		<p>这是创建的第1个HTML文件</p>
		<p>就是这么简单！！！</p>
	</body>
</html>

页面效果图
在这里插入图片描述

二、公民基本道德规范宣传页设计

1.实训过程与指导

编程实现如图所示的页面。具体步骤如下：
公民基本道德规范内容页面
在这里插入图片描述

2.在编辑窗口中输入代码，具体代码如下所示

<!-- prj_1_3.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>公民基本道德规范宣传页设计</title>
		<style type="text/css">
			p {
				font-size: 18px;
				/*字体大小18px */
				color: blue;
				/*颜色蓝色 */
				text-indent: 2em;
				/*首行缩进2个字符 */
			}
		</style>
	</head>
	<body>
		<h2 align="center">公民基本道德规范（二十字）</h2>
		<hr color="red">
		<h1 align="center"> “爱国守法，明礼诚信，团结友善，勤俭自强，敬业奉献”</h1>
		<p>公民基本道德规范是指公民应当遵守的基本道德规范。</p>
		<p align="right">----中共中央颁布的《公民道德建设实施纲要》</p>
		<hr />
		<p>我是陈伟中，计算机科学与工程学院软件工程专业，20软件工程1班。我自愿遵守公民基本道德规范。</p>
	</body>
</html>

3.另保存为对话框图

在这里插入图片描述

三、IT新书推荐

IT新书推荐页面
在这里插入图片描述

<!-- prj_1_4.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Author" content="Web前端开发工程师">
		<meta name="Keywords" content="Web前端开发，网页设计">
		<meta name="Description" content="初学者网站，实验家园">
		<title>新书推荐：Vue.js</title>
		<meta name="keywords" content="Vue.js入门与实战">
		<meta name="description" content="介绍Vue.js概述、基础、指令、组件开发、过渡与动画、Vue项目开发环境与辅助工具部署、Vue Router、Vuex、Vue UI及Vue 3.0基础应用。">
		<style type="text/css">
			img {
				width: 300px;
			}

			body {
				text-align: center;
			}

			p {
				text-indent: 2em;
				text-align: left;
			}
		</style>
	</head>
	<body bgcolor="#EEFFFF" text=GRB(50%,50%,50%) link="#FF0066" vlink="red" alink="#6F0" topmargin="10px" leftmargin="200px">
		<!-- meta标记、body标记属性应用  -->
		<h2 align="center">新书推荐：Vue.js前端框架技术与实战</h2>
		<hr color="red">
		<a href="http://www.tup.tsinghua.edu.cn/booksCenter/book_09106701.html" title="新书-Vue.js">
			<img src="pro14/newbook-14.jpg">
		</a>
		<p>Vue.js是一套用于构建用户界面的渐进式框架，是目前流行的三大前端框架之一。本书以Vue 2.6.12为基础，重点讲解Vue生产环境配置与开发工具的使用、基础语法、指令、组件开发及周边生态系统；以Vue
			3.0为提高，重点介绍新版本改进和优化之处以及如何利用新版本开发应用程序。</p>
		<p> 全书共分为12章，主要涵盖Vue.js概述、Vue.js基础、Vue.js指令、Vue.js基础项目实战、Vue.js组件开发、Vue.js过渡与动画、Vue项目开发环境与辅助工具部署、前端路由Vue
			Router、状态管理模式Vuex、Vue UI组件库、Vue高级项目实战以及Vue 3.0基础应用。每章均附有本章学习目标、本章小结、练习与实训，便于广大读者和工程技术人员学习、实践与提高。</p>
	</body>
</html>

四、我爱我的岗位：Web前端开发

1.实训过程与指导

编程实现如图1-14所示的页面。具体步骤如下：
在这里插入图片描述
我爱我的岗位页面效果图
在这里插入图片描述

其内容如下：

WEB前端开发工程师的岗位职责:
(1)协助系统架构设计师进行系统架构设计工作；
(2)承担WEB前端核心模块的设计、实现工作；
(3)承担主要开发工作，对代码质量及进度负责；
(4)参与进行关键技术验证以及技术选型工作；
(5)和产品经理沟通并确定产品开发需求。

<!-- prj_1_5.html-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Web前端开发岗位介绍</title>
		<style type="text/css">
			h2 {
				font-famliy: 微软雅黑;
				font-size: 24px;
				color: red;
				text-align: center;
			}

			p {
				text-indent: 2em;
				font-size: 18px;
			}

			body {
				background: url(pro15/img-1-5-webfe.jpg) no-repeat top left;
			}
		</style>
	</head>
	<body leftmargin="180px">
		<h2>我爱我的岗位：Web前端开发</h2>
		<hr color="#33CC66">
		<p>
			前端开发工程师的岗位职责:(1)协助系统架构设计师进行系统架构设计工作；(2)承担WEB前端核心模块的设计、实现工作；(3)承担主要开发工作，对代码质量及进度负责；(4)参与进行关键技术验证以及技术选型工作；(5)和产品经理沟通并确定产品开发需求。
		</p>
		<script type="text/javascript">
			alert("Web前端开发工程师就业前景好、薪酬高！");
		</script>
	</body>
</html>

五、 课外拓展训练

注意：在head标记中插入style标记语法如下：

<style type="text/css">
		p{/* 首行缩进2个字符 */
			text-indent: 2em;  }
</style>

1、meta、h3、hr、p等标记的应用

在这里插入图片描述
页面文字素材如下：

HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。

<!-- project_1_1.html 
  功能：meta、h3、hr、p等标记的应用
	      标题为"常用标记的应用"
-->
<!doctype html>
<html lang="en">
	<head>
		<!-- meta标记的应用 -->
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="Web前端开发工程师">
		<meta name="Keywords" content="Web前端开发、网页设计、企业建站">
		<meta name="Description" content="专门为机关、企(事)业、个体开发网站、定制页面">
		<title>常用标记的应用</title>
		<style type="text/css">
			p {
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<h3 align="center">meta、h3、hr、p等标记的应用</h3>
		<hr color="#FF00FF">
		<p>HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application
			Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。</p>
	</body>
</html>

2、body属性、注释标记的应用

在这里插入图片描述
页面文字素材如下：
HTML（Hyper Text Mark-up Language）即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-Lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

<!-- project_1_2.html 
标题：body属性及注释标记的应用
功能：利用CSS和body属性设计彩色页面	      
-->
<!doctype html>
<html lang="en">
	<head>
		<!-- meta标记的应用 -->
		<meta charset="UTF-8">
		<title>body属性及注释标记的应用</title>
		<!-- 插入内部样式表 -->
		<style type="text/css">
			p {
				text-indent: 2em;
				/*定义首行缩进2个字符 */
			}

			div {
				border: 1px dotted #660033;
				/* 定义div的边框样式 */
			}
		</style>
	</head>
	<!-- body的属性应用 -->
	<body text="#111111" topmargin="50px" leftmargin="50px" bgcolor="#F1F2FA">
		<!-- 插入1个图层div -->
		<div id="" class="">
			<!-- 在div中插入标题字、水平分隔线和段落 -->
			<h2>设计彩色页面</h2>
			<hr color="#00FF00">
			<p>HTML（Hyper Text Mark-up Language）即超文本标记语言，是WWW的描述语言，由Tim
				Berners-Lee提出。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。</p>
			<hr color="#FF0066">
		</div>
	</body>
</html>

作者主页： 正函数的个人主页
文章收录专栏： Web design
在这里插入图片描述

欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

什么是DNS（域名系统）

什么是DNS（域名系统）

域名系统&#xff08;DNS&#xff09;像是互联网的电话簿&#xff0c;将人们容易记住的网址转换成计算机能理解的IP地址。 没有DNS&#xff0c;我们就需要记住复杂的数字序列来访问网站 DNS的基本概念 定义&#xff1a;DNS是一个分布式数据库&#xff0c;它将域名&#xff08…
阅读更多...
智能小程序小部件(Widget)导航、地图、画布等组件，以及开放能力、原生组件说明

智能小程序小部件(Widget)导航、地图、画布等组件，以及开放能力、原生组件说明

智能小程序小部件(Widget)导航、地图、画布等组件&#xff0c;以及开放能力、原生组件说明。 导航组件 navigator 页面链接&#xff0c;控制小程序的跳转。navigator 子节点的背景色应为透明色。 属性说明 属性名类型默认值必填说明urlstring是跳转地址deltanumber1否当 …
阅读更多...
【开发实践】前端jQuery+gif图片实现载入界面

【开发实践】前端jQuery+gif图片实现载入界面

一、需求分析 载入界面&#xff08;Loading screen&#xff09;是指在计算机程序或电子游戏中&#xff0c;当用户启动应用程序或切换到新的场景时&#xff0c;显示在屏幕上的过渡界面。它的主要作用是向用户传达程序正在加载或准备就绪的信息&#xff0c;以及提供一种视觉上的反…
阅读更多...
Vue3中provide,inject使用

Vue3中provide,inject使用

一&#xff0c;provide,inject使用&#xff1a; 应用场景&#xff1a;向孙组件传数据 应用Vue3碎片&#xff1a; ref&#xff0c;reactive&#xff0c;isRef&#xff0c;provide, inject 1.provide,inject使用 a.爷组件引入 import {ref,provide} from vue const drinkListre…
阅读更多...
Spring Boot 中实现定时任务(quartz)功能实战

Spring Boot 中实现定时任务(quartz)功能实战

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…
阅读更多...
BuildRoot配置RTL8822CE WIFIBT模块（WIFI部分）

BuildRoot配置RTL8822CE WIFIBT模块（WIFI部分）

TinkerBoard2主板自带的无线模块为RTL8822CE&#xff0c;PCIe接口 之前在风火轮下载的Linux源码编译出来的BuildRoot根文件系统没有相关的驱动文件 [rootrk3399:/]# find . -name *.ko [rootrk3399:/]# lsmod Module Size Used by Not tainted [rootrk33…
阅读更多...
第二百七十一回

第二百七十一回

文章目录 1. 概念介绍2. 实现方法2.1 主要步骤2.1 注意事项 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何加载网络图片"相关的内容&#xff0c;本章回中将介绍如何加载本地图片.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在上一章回…
阅读更多...
Scrum敏捷研发管理解决方案

Scrum敏捷研发管理解决方案

Leangoo领歌是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo领歌上手快、实施成本低&#xff0c;可帮助企业快速落地敏捷&#xff0c;提质增效、缩短周期、加速创新…
阅读更多...
力扣刷MySQL-第一弹（详细解析）

力扣刷MySQL-第一弹（详细解析）

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;力扣刷题讲解-MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出…
阅读更多...
C++学习笔记（四十二）：c++ 结构化绑定

C++学习笔记（四十二）：c++ 结构化绑定

本节介绍c结构化绑定&#xff0c;改知识点是c17中增加的新特性&#xff0c;主要是用来处理c多返回值的问题。 原来c17之前返回多个值的方法之前专门有一节内容在描述&#xff0c;简单回顾一下原来使用tuple返回多个返回值的方法&#xff0c;代码如下&#xff1a; #include &l…
阅读更多...
条件风险价值CVaR内容介绍(MATLAB例程)

条件风险价值CVaR内容介绍(MATLAB例程)

在对微电网优化调度过程中&#xff0c;由于新能源机组出力和负荷的不确定性&#xff0c;若采用确定性的优化调度方案会存在一定的风险。当风电和光伏输出功率的实际值低于预测值时&#xff0c;需要增加可控机组出力或切除部分负荷&#xff1b;反之&#xff0c;若风电和光伏输出…
阅读更多...
Mybatis----面向接口

Mybatis----面向接口

让mybatis自动生成dao层接口的实现类 这是dao层接口的实现类&#xff0c;在mybatis中我们可以省略这种实现接口的方式&#xff0c;直接面向接口操作数据库&#xff0c;mybatis可以帮我们自动生成接口的实现类&#xff0c;也就是下面这个实现类mybatis帮我们生成了。 1、修改se…
阅读更多...
如何提高匹配的速度

如何提高匹配的速度

基于形状的匹配&#xff0c;改进了无数次&#xff0c;其实已经很满意了。 想起刚入门机器视觉那会儿&#xff0c;我们写的代码&#xff0c;无论c还是c#的&#xff0c;都是调用人家的函数&#xff0c;从来没想过&#xff0c;自己有一天把这些函数代替了。 那时候调用evision的…
阅读更多...
ES 之索引和文档

ES 之索引和文档

本文主要介绍ES中的数据组成结构单元。 一、文档(Document) 1、概念 ES的数据存储单元是面向文档的&#xff0c;文档是所有数据存储&#xff0c;搜索的最小单元。 你可以把ES中的文档对应成mysql中的一条条数据记录。到时候你存进ES的数据就是一个个文档。 文档存入ES是序列…
阅读更多...
读书笔记：单载波频域均衡技术 SC-FDE

读书笔记：单载波频域均衡技术 SC-FDE

原文&#xff1a;https://mp.weixin.qq.com/s?__bizMzU5NzgxNDgwMg&mid2247486891&idx1&sn51e0dc3d28bcf356126dc8ae922f5533&chksmfe4cf6d6c93b7fc0237d4e2107b5671a401db8ed7a8527159ef18333d2b1f48c56b381f846ae&mpshare1&scene1&srcid0117h6K…
阅读更多...
Windows Redis图形客户端 Another Redis Desktop Manager的简单使用教程

Windows Redis图形客户端 Another Redis Desktop Manager的简单使用教程

1、 Redis官方文档 2、 Redis国内中文版文档 3、 Redis客户端 Another Redis Desktop Manager 4、连接redis服务 我直接使用的是公司搭建好的服务。连接服务需要以下几个信息&#xff1a; HostPortPasswordSSL 5、New Key 5.1 如何创建一个Key&#xff1f; 点击New k…
阅读更多...
《SPSS统计学基础与实证研究应用精解》视频讲解：SPSS中用到的概率分布

《SPSS统计学基础与实证研究应用精解》视频讲解：SPSS中用到的概率分布

《SPSS统计学基础与实证研究应用精解》2.2 视频讲解 视频为《SPSS统计学基础与实证研究应用精解》张甜 杨维忠著 清华大学出版社 一书的随书赠送视频讲解2.2节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。本书旨在手把手教会使…
阅读更多...
Vue3的使用

Vue3的使用

一 Vue3的变化 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API&#…
阅读更多...
2024年华数杯国际赛B题：光伏发电功率 思路模型代码解析

2024年华数杯国际赛B题：光伏发电功率 思路模型代码解析

2024年华数杯国际赛B题&#xff1a;光伏发电功率&#xff08;Photovoltaic Power&#xff09; 一、问题描述 中国的电力构成包括传统能源发电&#xff08;如煤、油和天然气&#xff09;、可再生能源发电&#xff08;如水电、风能、太阳能和核能&#xff09;以及其他形式的电力…
阅读更多...
Redis 服务器 命令

Redis 服务器 命令

目录 1.Redis Client Pause 命令 - 在指定时间内终止运行来自客户端的命令简介语法可用版本: > 2.9.50返回值: 返回 OK。如果 timeout 参数是非法的返回错误。 示例 2.Redis Debug Object 命令 - 获取 key 的调试信息简介语法可用版本: > 1.0.0返回值: 当 key 存在时&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站