（三）构建模块——Web页面建设

2019独角兽企业重金招聘Python工程师标准>>>

1.完成网页的基本过程：

①画一个粗略的草图作为页面构建的基础

②创建HTML的基本构建模块，把草图翻译成HTML的略图

③把蓝图翻译成真正的HTML文件

④在此基础上，做出改进，添加元素、样式等

2. <q>元素用于在HTML中增加简单的引用，引用的内容放在<q>和</q>中。例如：

<html><head><title>Quote Test Drive</title></head><body><p>You never know when you'll need a good quote, how about<q>To be or not to be</q>, or <q>Wherever you go,there you are</q>.</p></body>
</html>

这样和直接加双引号比起来，可以使页面更结构化、更有意义。另外，使用<q>元素便可以使用css设置引用文本的外观样式

3. 当引用一个段落或者引用的文本较长时，就需要使用<blockquote>元素了。<q>元素用于较短的引用，作为现有段落的一部分；<blockquote>用于较长的引用，需要单独显示。例如：

<h2>July 14, 2012</h2>
<p>I saw some Burma Shave style signs on the side of the roadtoday:
</p>
<blockquote>passing cars, when you can't see, May get you, A glimpse,Of eternity.
</blockquote>
<p>I definitely won't be passing any cars.
</p>

在块引用中显示多段可以把段落元素<p>放在<blockquote>中，一个段落对应一个段落元素。

4. ①<blockquote>和<q>是两种不同的元素，前者是块元素，单独显示，显示时前后总好像有一个空行；后者是内联元素，在页面文本流中总是在行内出现。类似<h1> <h2> ... <h6>和<p> <blockquote>都是块元素，<a> <q>和<em>都是内联元素。块元素总是"特立独行"，而内联元素则"随波逐流"

②块元素通常用作Web页面的主要构建模块，内联元素往往用来标记小段内容。设计页面一般先从较大的块元素开始，在完善页面时再加入内联元素。

③<br>元素用于提供换行符，在需要的时候增加一个<br>元素就会插入一个换行符：

<blockquote>passing cars, <br>when you can't see,<br> May get you, <br>A glimpse, <br>Of eternity.<br>
</blockquote>

④类似<br>这样设计为没有任何实际内容的元素叫做void元素，<img>也是void元素，或称为空元素。需要使用<br>或<img>只需要一个开始标记，这是一种方便的简写形式，可以减少HTML中标记的数量。

5.结合利用<li>元素和<u>或<ol>元素可以生成无序/有序列表。创建方法参考以下代码：

①创建列表前：

<h2>August 20, 2012</h2>
<img src="data:images/segway2.jpg">
<p>Well I made it 1200 miles already, and I passed through someinteresting places on the way: Walla Walla, WA, Magic City,ID, Bountiful, UT, Last Chance, CO, Why, AZ and Truth or Consequences, NM.
</p>

②创建列表的第一步，把每个列表项放在单独的<li>元素中：

<h2>August 20, 2012</h2>
<img src="data:images/segway2.jpg">
<p>Well I made it 1200 miles already, and I passed through someinteresting places on the way:
</p>
<li>Walla Walla, WA</li>
<li>Magic City, ID</li>
<li>Bountiful, UT</li>
<li>Last Chance, CO</li>
<li>Why, AZ</li>
<li>Truth or Consequences, NM</li>

③用<ol>(有序列表)或<ul>（无序列表）：

<h2>August 20, 2012</h2>
<img src="data:images/segway2.jpg">
<p>Well I made it 1200 miles already, and I passed through someinteresting places on the way:
</p>
<ol><li>Walla Walla, WA</li><li>Magic City, ID</li><li>Bountiful, UT</li><li>Last Chance, CO</li><li>Why, AZ</li><li>Truth or Consequences, NM</li>
</ol>

④用<ul>的一个例子：

<h2>June 2, 2012</h2>
<img src="data:images/segway1.jpg">
<p>My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:
</p>
<ul><li>cell phone</li><li>ipod</li><li>digital camera</li><li>and a protein bar</li>
</ul>
<p>    Just the essentials. As LaoTzu would have said, <q>A journey of a thousand miles beginswith one Segway.</q>
</p>

⑤记忆：unorderedlist=<ul> 无序列表

orderedlist=<ol> 有序列表

listitem=<li> 列表元素

⑥<ol>和<li>或者<ul>和<li>总要一起使用，否则就无意义。列表实际上就是一组列表项，<li>元素标示每个列表元素，<ol>或<ul>把元素归为一组。且<ol>或<ul>只能包含<li>元素、嵌套另一个列表，不能嵌套其他元素或文本。在列表中嵌套列表例如下例：

<html><head><title>This is a Nest List Test</title></head><body><ol><li>Charge Segway</li><li>Pack for trip<ul><li>cell phone</li><li>ipod</li><li>digital camera</li><li>a protein bar</li></ul></li><li>Call mom</li></ol></body>
</html>

chrome中测试结果：

⑦除了有序列表和无序列表，还有一种定义列表，列表中每一项都有一个定义术语(dt)和定义描述(dd),定义列表如下所示：

<html><head><title>This is a Definition List Test</title></head><body><dl><dt>Burma Shave Signs</dt><dd>Road signs common in the U.S. in the 1920sand 1930s advertising shaving products.</dd><dt>Route 66</dt><dd>Most famous road in the U.S. highway system.</dd></dl></body>
</html>

chrome测试结果：

6.把一个元素放在另一个元素中称为嵌套。例如<body>、<head>嵌套在<html>中，<p>、<h1>等嵌套在<body>中，<q>嵌套在<p>中，<title>嵌套在<head>中等等。HTML页面就是以嵌套的方式构造的。使用嵌套要确保元素标记正确匹配。

**小练习

A."扮演浏览器"：

错误①<head>没有结束标记

②<h1>没有结束标记

③</p>和</q>位置错误，<q>元素需嵌套在<p>元素中

④17行</em>标记错误，应为</li>

⑤22行多了元素结束标记</p>

⑥23、24行标记错误

⑦26-37行每行均缺少</li>结束标记

⑧25、38行列表标记不匹配

⑨最后缺少</html>结束标记

B."我是谁？"：

元素描述	名字	内联元素OR块元素
我是1级标题	<h1>	块元素
我时刻准备链接到另一个页面	<a>	内联元素
用我强调文本	<em>	内联元素
我是个列表，不过我不关心顺序	<ul>	块元素
我是真正的换行符	<br>	内联元素
我是放在列表中的列表项	<li>	块元素
我要保证我的列表项有序	<ol>	块元素
我的任务就是提供图像	<img>	内联元素
用我可以在段落中加引用	<q>	内联元素
用我来引用独立的文字	<blockquote>	块元素

7. 如果想输入特殊字符，比如<html>这几个字符而不想被浏览器误认为是html元素的开始，可以使用字符实体的简单缩写来指定。对于被认为"特殊"的字符，或者你想在web页面中使用某个你在编辑器里无法输入的字符，可以查找相应的字符实体缩写在HTML中直接输入。例如，<的缩写是<，>的缩写是&gt，在页面中输入:"The <html> element rocks."可以这样使用字符实体：“The <HTML> element rocks.”。如要显示&字符本身，则使用&。

8.本章源代码：

journal.html:

<html><head><title>My Trip Around the USA on a Segway</title></head><body><h1>Segway'n USA</h1><p>Documenting my trip around the US on very own Segway!</p><h2>August 20, 2012</h2><img src="data:images/segway2.jpg"><p>Well I made it 1200 miles already, and I passed through someinteresting places on the way: </p><ol><li>Walla Walla, WA</li><li>Magic City, ID</li><li>Bountiful, UT</li><li>Last Chance, CO</li><li>Why, AZ</li><li>Truth or Consequences, NM</li></ol><h2>July 14, 2012</h2><p>I saw some Burma Shave style signs on the side of the roadtoday:</p><blockquote>passing cars, <br>when you can't see,<br> May get you, <br>A glimpse, <br>Of eternity.<br></blockquote><p>I definitely won't be passing any cars.</p><h2>June 2, 2012</h2><img src="data:images/segway1.jpg"><p>My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:</p><ul><li>cell phone</li><li>ipod</li><li>digital camera</li><li>and a protein bar</li></ul><p>    Just the essentials. As LaoTzu would have said, <q>A journey of a thousand miles beginswith one Segway.</q></p></body>
</html>

DefinitionList.html:

<html><head><title>This is a Definition List Test</title></head><body><dl><dt>Burma Shave Signs</dt><dd>Road signs common in the U.S. in the 1920sand 1930s advertising shaving products.</dd><dt>Route 66</dt><dd>Most famous road in the U.S. highway system.</dd></dl></body>
</html>

NestList.html:

<html><head><title>This is a Nest List Test</title></head><body><ol><li>Charge Segway</li><li>Pack for trip<ul><li>cell phone</li><li>ipod</li><li>digital camera</li><li>a protein bar</li></ul></li><li>Call mom</li></ol></body>
</html>

转载于:https://my.oschina.net/u/2297516/blog/690023

（三）构建模块——Web页面建设相关推荐

构建高性能WEB站点笔记三
构建高性能WEB站点笔记三第10章分布式缓存 10.1数据库的前端缓存区文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...
LEMP构建高性能WEB服务器（第三版）
LEMP 自动化编译脚本下载:http://docs.linuxtone.org/autoinstall/ (定期更新,欢迎多测试,找bug) 介绍参考:http://bbs.linuxtone.or ...
domino子表单html,使用Domino表单构建Web页面.ppt
使用Domino表单构建Web页面大纲 Domino表单和HTML页面之间的关系 Notes元素在Web上HTML代码转换熟悉DominoDesignerWeb开发环境设计表单前的必备知识如何 ...
[译文]Domain Driven Design Reference（三）—— 模型驱动设计的构建模块
本书是Eric Evans对他自己写的<领域驱动设计-软件核心复杂性应对之道>的一本字典式的参考书,可用于快速查找<领域驱动设计>中的诸多概念及其简明解释. 其它本系列其它文章 ...
java web mvc_构建Java Web应用程序时遵循MVC的三个步骤
java web mvc 第1步做始终通过servlet / action bean处理URL(POST表单,单击链接等),而不是通过JSP处理为什么 ActionBeans(无论某些框架调用那 ...
构建Java Web应用程序时遵循MVC的三个步骤
步骤1 做始终通过servlet / action bean处理URL(POST表单,单击链接等),而不是通过JSP处理为什么 ActionBeans(无论某些框架调用那些类),而servlet很 ...
从零开始构建HTML 5 Web页面
HTML 5是时下Web开发领域炒得火热的一个术语,是的,很多人都看好它,也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站,如YouTube开始使用HTML 5视频,Google 已经弃 ...
第三个页面：构建新闻详情页面
笔记内容:构建新闻详情页面笔记日期:2018-01-09 从文章列表跳转到新闻详情页(组件自定义属性及获取属性) 在编写从文章列表跳转到新闻详情页的代码之前,先来修改一下之前的页面,之前我们编写了两 ...
Maven构建多模块web项目（IDEA）
title: Maven构建多模块web项目(IDEA) 项目结构 dangmanager => 父模块 manager_common => 公共模块(如工具类) manager_pojo ...

（三）构建模块——Web页面建设

（三）构建模块——Web页面建设相关推荐

最新文章

热门文章