Web前端开发技术实验与实践(第3版)储久良编著实训2

web 专栏收录该内容
19 篇文章 14 订阅

实训2 格式化文本、段落与列表

项目6 文本与段落标记应用
页面效果截图
在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>格式化文本信息</title>
	</head>
	<body>
		<!--1.标题字应用-->
		<strong>1.标题字应用</strong>
		<h1 align="center"><ruby><rt>ruan</rt><rt>jian</rt><rt>gong</rt><rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h1>
		<h4 align="left"><ruby><rt>ruan</rt><rt>jian</rt><rt>gong</rt><rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h4>
		<h5 align="right"><ruby><rt>ruan</rt><rt>jian</rt><rt>gong</rt><rt>cheng</rt></ruby>是全国就业薪酬涨幅最大的专业</h5>
		<hr color="#ff3333">
		<strong>2.段落、字体标记应用</strong>
		<!--2.段落、字体标记应用-->
		<p>
			<font face="隶书" size="5" color="blue">&nbsp;&nbsp;&nbsp;&nbsp;网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。</font>
		</p>
		<strong>3.文本标记应用</strong>
		<!--3.文本标记应用-->
		<p align="center">2X<sup>2</sup>+3X=9&nbsp;&nbsp;&nbsp;&nbsp;x<sub>1</sub>+x<sub>2</sub>=10</p>
		<address align="center">地址:江苏省南京市珠江路1924号</address>
		<blockquote>
			超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
		</blockquote>
		<strong>4.其他排版标记应用</strong>
		<pre>
			<font size="7" color="red">春思</font>
					<font size="5" color="">--李白
						燕草如碧丝,秦桑低绿枝。
						当君怀归日,是妾断肠时。
						春风不相识,何事入罗帏?
		【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物起兴,写独处 秦地的思妇触景生情,终日思念远在燕地卫戍的夫君,
		盼望他早日归来。三、四句由 开头两句生发而来,继续写燕草方碧,夫君必定思归怀己,此时秦桑已低,妾已断 肠,进一层表达了思妇之情。五
		、六两句,以春风掀动罗帏时,思妇的心理活动,来 表现她对爱情坚贞不二的高尚情操。全诗以景寄情,委婉动人。
		</font>
		</pre>
		<hr color="#ff00ff" size="3">
	</body>
</html>

项目7 高校资讯新闻条目设计
页面效果截图
在这里插入图片描述

代码

<!--prj_2_2.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表实现新闻展示</title>
		<style type="text/css">
			.bt {
				font-size: 22px;
				font-family: 黑体;
				margin: 0 auto;
				padding: 0 20px;
			}

			.div1 {
				width: 530px;
				height: 280px;
				border: 1px solid #ccff99;
			}

			ul {
				list-style-type: disc;
				font-size: 22px;
				line-height: 33px;
				color: blue;
			}

			h2 {
				font-size: 32px;
				background: #ebebeb;
				color: #000099;
				margin: 0 auto 10px auto;
			}
		</style>
	</head>
	<body>
		<div id="" class="div1">
			<h2>科研发展</h2>
			<p class="bt">高校资讯 科技前沿 成果展示 学术会议</p>
			<ul>
				<li>国防科技大学员问鼎2014国际数模竞赛最高奖 </li>
				<li>同济大学教授阮仪三获2014亨利•霍普•里德奖</li>
				<li>中科大徐春叶教授获2014年国际材料科学奖 </li>
				<li>北京和睦家医院肺癌诊疗会诊中心成立</li>
				<li>兰州大学博士生获全国优秀博士学位论文提名</li>
			</ul>
		</div>
	</body>
</html>

项目8 设计制度宣传展板
页面效果截图
在这里插入图片描述

代码

<!--prj_2_3.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设计制度宣传展板</title>
		<style type="text/css">
			body {
				text-align: center;
				font-size: 20px;
				font-weight: bold;
			}

			h1 {
				font-size: 32px;
				font-family: 黑体;
				height: 62px;
				padding-top: 15px;
				text-align: center;
				color: white;
				background: #9999ff;
			}

			.div1 {
				width: 650px;
				height: 940px;
				text-align: left;
				padding: 50px;
				background: url(../img/prj_image2_2.jpg);
				letter-spacing: 1px;
			}
		</style>
	</head>
	<body>
		<div id="" class="div1">
			<h1>大型分析仪器管理办法</h1>
			<ol type="1" start="1">
				<li>大型仪器必须有专人保管,须配有稳压电源,使用前须先检查仪器间各电路连接情况,再开稳压电源,然后再启动仪器开关。</li>
				<li>必须严格执行仪器设备运行记录制度,记录仪器运行状况、开关机时间。凡不及时记录者,一经发现,停止使用资格一周。</li>
				<li>使用仪器必须熟悉本仪器的性能和操作方法,本科生作毕业论文使用时应有教师在场,熟悉操作使用后必须经有关教师和实验人员同意方可进行独立操作。</li>
				<li>仪器使用完毕,必须将各使用器件擦洗干净归还原处,盖上防尘罩,关闭电源,打扫完室内清洁,方可离开。</li>
				<li>下次使用者,在开机前,首先检查仪器清洁卫生、仪器是否有损坏,接通电源后,检查是否运转正常。发现问题及时报告管理员,并找上一次使用者问明情况,知情不报者追查当次使用者责任。</li>
				<li>若在操作使用期间出现故障,应及时关闭电源,并向有关管理人员报告,严禁擅自处理、拆卸、调整仪器主要部件,凡自行拆卸者一经发现将给予严重处罚。用后切断电源、水源,各种按钮回到原位,并做好清洁工作、锁好门窗。</li>
				<li>所有仪器设备的操作手册及技术资料原件一律建档保存,随仪器使用的只能是复印件。</li>
				<li>保持仪器清洁,仪器的放置要远离强酸、强碱等腐蚀性物品,远离水源、火源、气源等不安全源。 </li>
				<li>各仪器要根据其保养、维护要求,进行及时或定期的干燥处理、充电、维护、校验等,确保仪器正常运转。每学期进行一次仪器使用检查,发现有损坏应及时请有关部门维修。</li>
				<li>仪器不能随意搬动,更不能借给外单位使用;校内人员经实验室主任批准后可在实验室按上述规定使用。</li>
			</ol>
			<h3 align="right">大型仪器管理办公室</h3>
		</div>
	</body>
</html>

项目9 设计饭店菜单价目表
页面效果截图
在这里插入图片描述

代码

<!--prj_2_4.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绿晶饭店菜单价目表</title>
		<style type="text/css">
			body {
				background: url(../img/prj_image_2_4_153.jpg) no-repeat;
			}

			div {
				width: 950px;
				height: 730px;
				text-align: center;
				padding-left: 80px;
			}

			dt {
				font: bold 24px;
			}

			dd {
				font: 18px 隶书;
			}

			h3 {
				font: bold 32px 黑体;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="">
			<h3>绿晶饭店菜单价目表</h3>
			<dl>
				<dt>心满意粥</dt>
				<dd>菜心粒肉片粥.......6元</dd>
				<dd>皮蛋瘦肉粥.........5元</dd>
				<dd>香茜鱼片粥.........8元</dd>
				<dd>生菜丝骨腩粥.......6元</dd>
				<dd>枣丝杞子猪肝粥.....6元</dd>
				<dd>状元及第粥.........8元</dd>
				<dd>生菜肚丝粥.........8元</dd>
				<dd>明火白粥...........2元</dd>
			</dl>
			<dl>
				<dt>饮料</dt>
				<dd>矿泉水...........2元/瓶</dd>
				<dd>旺仔牛奶.........5元/瓶</dd>
				<dd>高山青草奶......10元/瓶</dd>
				<dd>王老吉...........5元/罐</dd>
				<dd>雪碧.............4元/瓶</dd>
				<dd>可口可乐.........4元/罐</dd>
				<dd>和其正凉茶.......4元/罐</dd>
				<dd>康师傅红/绿茶....4元/瓶</dd>
			</dl>
			<dl>
				<dt>红酒</dt>
				<dd>特饮干红.........................98元/瓶</dd>
				<dd>法国查尔斯干红..................128元/瓶</dd>
				<dd>注册解百纳干红..................168元/瓶</dd>
				<dd>张裕圆桶干红(特选级)黑色......168元/瓶</dd>
				<dd>张裕圆桶解百纳(特选级)红色...258元/瓶</dd>
				<dd>张裕卡斯特(特选级)黑色.........398元/瓶</dd>
			</dl>
		</div>
	</body>
</html>

  • 7
    点赞
  • 0
    评论
  • 25
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

Web前端开发最佳实践 完整带目录.pdf 个人收集电子书,仅用学习使用,不可用于商业用途,如有权问题,请联系删除! 目录: 前 言 一部分 高效Web前端开发综述 1章 Web前端开发概述 2 1.1 Web前端开发的范畴 2 1.1.1 什么是Web前端开发 2 1.1.2 Web前端开发需要具备的技能 3 1.2 Web前端开发现状 6 1.3 规范的Web前端代码:更易维护、更高性能和更安全 9 2章 高效Web前端开发 11 2.1 前端代码的结构组织和文件的命名 11 2.2 前端代码重构 13 2.3 合理使用前端框架 15 2.4 多浏览器测试:多测试,早测试 16 2.5 Web前端代码开发和调试 19 2.5.1 Web前端集成开发环境 19 2.5.2 Web前端代码调试 20 2.5.3 Web前端性能分析 21 2.5.4 代码和资源的压缩合并 22 2.6 前端代码基本命名规范和格式规范 25 2.6.1 HTML命名规范及格式规范 25 2.6.2 CSS命名规范及格式规范 27 2.6.3 JavaScript命名规范及格式规范 30 二部分 HTML最佳实践 3章 标准的HTML代码 36 3.1 验证代码是否符合标准 36 3.2 标准的HTML页面结构 39 3.3 正确闭合HTML标签 40 3.4 停止使用不标准的标签和属性,简化HTML代码 41 3.5 样式结构分离 43 3.6 添加JavaScript禁用的提示信息 45 3.7 添加必要的[meta]标签 49 4章 高可读性的HTML 53 4.1 HTML语义化 53 4.2 如何设置网页标题层级 58 4.3 如何正确设计表单 60 4.4 精简HTML代码 65 4.5 过时的块状元素和行内元素 68 5章 积极拥抱HTML5 71 5.1 HTML5新特性的使用 71 5.1.1 使用HTML5中简化的定义方式 72 5.1.2 使用HTML5中的新标签和新属性 73 5.2 不要使用HTML5中已废弃的标签和属性 78 5.3 如何处理浏览器的兼容问题 79 三部分 CSS最佳实践 6章 高维护性的CSS 84 6.1 如何高效地组织CSS代码 84 6.2 使用CSS Reset:统一浏览器显示效果 89 6.3 给CSS样式定义排序 94 6.4 合理利用CSS的权重:提高代码的重用性 97 6.5 CSS代码的兼容性:如何兼容IE浏览器 101 6.6 em、px还是% 104 7章 高性能的CSS 109 7.1 使用高效的CSS选择器 109 7.2 CSS相关的图片处理 112 7.3 减少CSS的代码量 116 7.4 其他CSS高性能实践 120 8章 CSS3相关最佳实践 122 8.1 查看浏览器的支持情况 122 8.2 添加必要的浏览器前缀 123 8.3 做好CSS3中新特性的兼容处理 127 四部分 JavaScript最佳实践 9章 高维护性的JavaScript 132 9.1 养成好的编码习惯,提高代码的可维护性 132 9.2 使用更严格的编码格式 138 9.3 事件处理和业务逻辑分离 141 9.4 配置数据和代码逻辑分离 142 9.5 逻辑结构样式分离 145 9.5.1 从JavaScript代码逻辑中分离CSS样式 145 9.5.2 从JavaScript代码逻辑中分离HTML结构 146 9.6 JavaScript模板的使用 149 9.7 在JavaScript开发中应用MVC模式 152 9.8 JavaScript模块化开发 154 9.9 合理使用AJAX技术 156 10章 高性能的JavaScript 159 10.1 加快JavaScript文件的加载速度 159 10.2 养成好的编码习惯,提高代码运行速度 162 10.3 使用高性能的变量或属性值读取方式 165 10.4 高效的DOM操作 168 10.5 使用辅助工具优化JavaScript代码性能 173 11章 高安全性的JavaScript 178 11.1 常见的Web前端攻击方式 179 11.2 不要轻易信任任何外部传入的数据 180 11.3 其他前端安全防范实践 183 五部分 移动Web前端开发 12章 移动Web前端开发最佳实践 186 12.1 移动Web前端开发概述 187 12.1.1 主流的移动终端和移动浏览器 187 12.1.2 移动端和桌面端Web前端开发的差异 188 12.1.3 如何让桌面Web页面兼容移动设备 190 12.1.4 开发移动Web站点的准备工作 196 12.2 移动Web前端开发相关技术最佳实践 199 12.2.1 HTML相关最佳实践 200 12.2.2 CSS相关最佳实践 202 12.2.3 JavaScript相关最佳实践 205
©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值