WEB入门.五 页面设计简介
H5和JAVASCRIPT实战教程
学习内容
Ø XHTML 的发展历程
Ø XHTML 和 HTML 的区别
Ø XHTML的DOCTYPE和基本标签
Ø CSS 常用属性
能力目标
Ø 熟练掌握XHTML 和 HTML 的区别
Ø 理解XHTML的DOCTYPE
Ø 掌握创建简单的XHTML页面布局
本章简介
在上一阶段我们全面地学习了客户端页面技术的实现——HTML，内容包括：HTML 基本标签、表单和框架的使用、模板的制作和应用以及常用的网页布局特效等。通过学习，我们已经可以使用所学技术完成企业级门户网站的静态页面设计。但在实际应用过程中，设计师设计的页面在不同浏览器中的浏览效果不够一致，将导致页面不能兼容的问题，例如：在页面中定义一个层，使用 width 和 height属性设计层的大小，IE浏览器在解析 width 和 height 属性时将包含边框和内边距的大小，而使用符合 W3C标准的浏览器FireFox 在解析时不包含边框和内边距的大小。为保证设计出符合 Web标准的页面，兼容多种浏览器版本包括信息家电产品，如手机、PDA 、平板电脑等，我们将在本阶段学习 XHTML 的相关知识，以及如何使用 XHTML + DIV + CSS 技术对客户端页面进行重构，从而保证浏览效果完全一致。
1.4.4 . 标签名称必须封闭
（2）锚点 通过使用 name 或 id属性，创建一个文档内部的书签 (即可以创建指向文档片段的链接)。
<a name="书签名称"> 返回顶部</a>
（3）发送电子邮件 链接到某个指定的电子邮件地址，此用法可以打开邮件客户端程序，用于给指定帐户发送邮件，但是在用户机器上需要安装邮件客户端软件才可以使用此功能。
<a href="mailto:电子邮件地址"> 联系我们 </a>
1.7
<body>
<a href="http://www.163.com">网易</a>
<a href="mangage/login.jsp">后台管理</a>
<ahref="mailto:wukong.sun@163.com">联系我们</a>
</body>
在浏览器中预览的效果如图 1.1.8所示。
图 1.1.8 <a> 标签
3. 行级文本标签 <span>
<span>标签一般被用在文本行中修饰特定文本的显示属性，或者局部辅助div标签完善页面布局。
<span>行级文本内容</span>
1.8
CSS样式代码：
<style type="text/css">
p{
font-family:Arial;
font-size:12px;
line-height:18px;
}
.firstLetter{
font-size:18px;
float:left;
}
</style>
HTML代码片段：
<body>
<h1>CSS的概念</h1>
<hr/>
<p><spanclass="firstLetter">CSS</span>（Cascading Style Sheet，可译为"层叠样式表"或"级联样式表"）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。</p>
</body>
在浏览器中预览的效果如图 1.1.9所示。
图 1.1.9span标签
1.6 CSS常用样式属性
<ahref="#" id="second">没有使用display:block;</a>
</body>
在浏览器中预览的效果如图 1. 1. 10 所示。
图 1. 1. 10display 属性
1.6.2 漂浮属性(float)
<li><ahref="#">博客</a></li>
<li><ahref="#">日记</a></li>
</ul>
在浏览器中预览的效果如图 1. 1. 11 所示。
图 1. 1. 11float 属性
1.6.3 外边距 (margin)和 内边距(padding)
B. <a href="http://www.163.com">网易门户</a>
C. < input type= "button" disabled />
D. < input type= "button" disabled = "disabled"/>
提示: 将 a 标签定义成块状显示设置宽度和高度，并设置浮动属性“float:left”。
WEB入门.五 页面设计简介相关推荐
- Web响应式布局设计简介
随着移动互联的到来,市面上的移动终端设备越来越多屏幕尺寸也大小不一.就拿苹果的iPhone来说就有多个不同尺寸的版本,还有iPad也是随着技术的进步屏幕大小.分辨率也在变化.更不用说基于开源Andro ...
- web安全测试服务开展流程简介
1.web安全测试流程设计简介 web安全测试业务主要围绕流程.标准.规范三个方面展开,其中流程是核心,标准和规范在流程运作中落地与执行. 2.web安全测试流程概要设计 当需要测试的web应用数以千 ...
- java判断读到末尾_Java Web入门之java--第一节 java 简介及开发环境安装
本篇博客是Java web入门的第一篇博客,这篇博客主要讲述java语言的一些简介. 一)先从Java语言的诞生说起. 1991年,Sun公司在一个叫做James Gosling的人的带领下,成立了一 ...
- Java Web入门项目之“网络交友”的设计与实现
前言:这个小项目是我刚学习JSP时,参考"JSP程序设计"这本书写的.这里之所以说参考这本书而不是照着这本书写,主要是因为我自己完成的时候删掉了不少繁琐的写法(比如:文件上传):同 ...
- Responsive Web Design 简单介绍与优缺点、实作入门, 响应式设计
这一两年中最夯的网页设计不外乎就是Responsive Web Design 了,中文译名为「自适应网页设计」(不过这个名称仍然不太好),就字面上意思来说就是当一个网页在不同的解析度下,会呈现不同的介 ...
- #java #web jsp开发入门（web应用概述、tomcat简介、编写步骤）
#java #web jsp开发入门与编写步骤(web应用概述.tomcat简介.编写步骤) 目录 #java #web jsp开发入门与编写步骤(web应用概述.tomcat简介.编写步骤) 1.w ...
- Web入门开发【二】- 网站设计
欢迎来到霍大侠的小院,我们来学习Web入门开发的系列课程. 首先我们来了解下这个课程能学到什么? 1.你将可以掌握Web网站的开发全过程. 2.了解基础的HTML,CSS,JavaScript语言. ...
- 拒绝平庸--浅谈WEB登录页面设计
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...
- 《播客》项目总结——web标准页面设计方面
前言: 来上海激动的第一个项目,无论是公司还是自己都有很多的不足.第一次做娱乐型的门户网站,对web标准的掌控能力的确是个很大的挑战.说实话,这一个项目对于web标准的使用自己只能给自己打65分,分数 ...
最新文章
- iOS进阶之架构设计MVC（1）
- XML文档类型定义DTD
- Linux Shell实例精讲学习笔记
- php function 输出,PHP中常用的输出函数总结
- sklearn PCA特征降维
- 异或运算交换两个整数
- 那些让我们哭的一塌糊涂的句子
- mysql 横纵表转化_数据库MySQL横纵表相互转化操作实现方法
- UI设计实用排版法则，优秀可临摹案例，剖析设计实例
- Python 3 进阶 —— print 打印和输出
- openstack nova ×××
- Vigenère密码（Day 1）详解
- 网络模型介绍、数据网络传输过程与网络传输速率
- 四年，新华三安全大变样
- 修改dns服务器有什么用,修改dns的好处是什么？
- r 选取从小到大的数据_r 选取表格的一列数据库
- Mysql索引：图文并茂，深入探究索引的原理和使用
- CDR中人民币符号怎么打
- 使用 axios 发送 http 请求
- train_test_split()，随机划分训练集和测试集的函数