「HTML」从零开始学网页制作-04

试用DIV制作德国国旗

德意志联邦共和国，简称德国，国旗由3种颜色长方形所构成。

我们需要制作出3个长方形来组合成德国国旗，需要用到<div>标签。

什么是div？

<div> 可以定义文档中的分区或节；<div> 标签可以把文档分割为独立的、不同的部分。

我们暂且把 div 看作是一个盒子。

现在我们要做的就是让浏览器显示盒子，并把盒子变成长方形，然后染上黑，红，金这3种颜色。

试一试在<body></body>加上<div></div>

你会发现无论怎么刷新浏览器，还是一片空白。

这是因为<div>这个盒子没有正常完全的显示，所以需要两样东西：

第一：缺少宽度和高度；我们要在纸上画出长方形，就必须有长和宽，<div>也是同理。

第二：缺少边框或背景颜色；要想让<div>这个盒子能被我们看见，通常是给它加个边框或者背景颜色。

二者缺一不可，为了这两样东西，我们需要把 style 添加到<div>中：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

然后刷新浏览器，会出现一个黑色长方形：

我们来看一下加入<div>的html代码：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

style：它定义了<div>的样式，也就是说，要让div变成什么样子，就需要style来改变div。style等于号后面的width、height、background都属于style的属性。

width：定义div的宽度。

height：定义div的高度。

background：定义div的背景颜色。【黑色：rgb(0,0,0) 红色：rgb(255,0,0) 金色：rgb(255,200,0) 】

只是一行简单的代码，我们就已经完成了国旗1/3的制作，那么依葫芦画瓢，你自己写出剩下两行代码吧~

答案：

总结：<div></div>这个盒子需要宽width、高height、背景颜色background才能正常显示出来。

文本标记语言(英文HyperText Markup Language,简称：HTML)是一种用于创建网页的标准标记语言!
对于中文网页需要使用<meta charset='utf-8'>声明编码，否则会出现乱码。有些浏览器（如360浏览器）会设置GBK为默认编码，则你需要设置为<meta charset='gbk'>
例子模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文网(html.cn)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

什么是HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言：HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>

HTML 元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>

HTML 头部元素

头部元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。
可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素：
1.定义了浏览器工具栏的标题
2.当网页添加到收藏夹时，显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题

HTML <BASE> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <STYLE> 元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域

<META> 标签- 使用实例

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程教程">
定义网页作者:
<meta name="author" content="HTML">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

HTML head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

HTML 元素

HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。例：

开始标签	元素内容	结束标签
<p>	这是一个段落	</p>
<a href="default.html">	这是一个链接	</a>
<br>	换行

说明：HTML 文档是由 HTML 元素定义的
注：开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
HTML 文档由嵌套的 HTML 元素构成。大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

注释标签

HTML注释标签用来在源文档中插入注释。注释不会在浏览器中显示。可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用

标签定义及使用说明

注释标签用来在源文档中插入注释。注释不会在浏览器中显示。
您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。
您也可以在注释内容存储针对程序所定制的信息。在这种情况下，这些信息对用户是不可见的，但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中，这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。

<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>

注释：命令行最后的两个正斜杠（//）是 JavaScript 注释符号。这确保了 JavaScript 不会执行 –> 标签。
除了在源文档中有非常明显的作用外，许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档，从传统的 HTML/XHTML 注释中找到特定的字符序列，然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单地包括其他文件中的文本（即所谓的服务器端包含，server-inside include），也可能是复杂地执行其他命令去动态生成文档的内容。

HTML 段落与文字

标题

在 HTML 文档中，标题很重要。标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。其中<h1> 定义最大的标题，<h6> 定义最小的标题
HTML中的标题标签通过<h1>-<h6>来设置，越往下标题越小

段落

在HTML中段落是通过p标签来定义的，它可以将HTML文档分割为若干段落部分。因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。
注意：因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行
我们可以通过<br/>标签来对段落进行换行
如果希望在不产生一个新段落的情况下进行换行，就可以使用<br /> 标签，注意它是一个单标签。

文本格式化

HTML可定义很多供格式化输出的元素，例：使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式，从而显示粗体或者斜体
示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML教程(html.cn)</title> 
</head> 
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>

HTML 文本格式化标签

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML”计算机输出”标签

标签	描述
<kbd>	定义键盘码
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本
<code>	定义计算机代码

HTML 引文，引用，及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目

区块

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）；而内联元素则不会。

HTML 区块元素
可以通过 <div> 和 <span> 将 HTML 元素组合起来

HTML块级元素
块级元素在浏览器显示时，通常会以新行来开始和结束 - 例：<h1>, <p>, <ul>, <table>

HTML内联元素
内联元素在显示时通常不会以新行开始 - 例：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是块级元素，浏览器会在其前后显示折行 - 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 - <div> 元素的另一个常见的用途是文档布局

HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器 - 与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

HTML字符实体

在 HTML 中，某些字符是预留的，这些预留字符必须被替换为字符实体；而，一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体
在 HTML 中，某些字符是预留的。
比如在 HTML 中不能使用小于号（<）和大于号（>）因为浏览器会误认为它们是标签，所以希望能正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样
&entity_name;
或
&#entity_number;

HTML 字符实体
不间断空格
HTML 中的常用字符实体是不间断空格( )
浏览器总是会截短 HTML 页面中的空格，如果需要在页面中增加空格的数量，需要使用字符实体

有用的字符实体

显示结果	描述	实体名称	实体编码
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
“	引号	"	"
‘	撇号	' (IE不支持)	'
￠	分	￠	￠
￡	镑	￡	￡
￥	元	￥	￥
	欧元		
§	小节	§	§
?	版权	?	?
?	注册商标	?	?
?	商标	?	?
×	乘号	×	×
÷	除号	÷	÷

注意：实体名称对大小写敏感

欢迎大家提议、分享、交流、共同学习进步

篇，你可以学到Ember页面的创建，并且在不同的页面之间跳转。新建两个页面，一个是创建about页面，一个是创建contact页面。

看完本篇你将学到如下知识点：

定义路由
使用路由模板
自定义路由URL
使用<LinkTo>组件在不同模板之间跳转
组件之间传递参数、属性

定义路由

在前一篇，我们定义了一个index.hbs首页，接着继续在templates下面创建新的页面。

首先通过Ember CLI创建一个路由，

ember g route about

本机创建日志：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ? ember g route about

installing route

  create app/routes/about.js

  create app/templates/about.hbs

updating router

  add route about

installing route-test

  create tests/unit/routes/about-test.js

题外话：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ? 9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ?

这一段是我本机命令行自动前缀，如果你的命令行安装过zsh这个工具，就会很熟悉，zsh是一个非常强大而且漂亮的命令行工具。

打开router.js，可以看到自动创建了一个路由this.route('about');

使用路由模板

修改about路由模板文件app/templates/about.hbs，在文件内添加一下HTML内容。

{{!-- app/templates/about.hbs --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>

浏览器访问验证：http://localhost:4200/about。可以看到about页面的内容

使用同样的方式创建contact路由。

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:37 ? ember g route contact

installing route

  create app/routes/contact.js

  create app/templates/contact.hbs

updating router

  add route contact

installing route-test

  create tests/unit/routes/contact-test.js

在contact.hbs添加一些HTML内容。

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
</div>

浏览器访问验证：http://localhost:4200/contact。可以看到contact页面的内容

contact1.png

自定义路由URL

前面已经定义了两个页面，一个是about一个是contact。默认情况下访问的路径都是和路由同名的，另外Ember提供了非常灵活的扩展，你可以自定义的路由的访问路径，比如下面的代码，把contact路由的访问路径改为getting-in-touch，手动修改router.js文件。

Router.map(function() {
  this.route('about');
  this.route('contact', { path: '/getting-in-touch' });
});

注意看第三行，使用path属性指定这个路由的访问路径为getting-in-touch。

现在你在访问http://localhost:4200/contact就会发现报错了，提示找不到这个路由了。

contact2.png

再访问http://localhost:4200/getting-in-touch。可以看到页面的内容就是之前contact的内容。

contact3.png

使用<LinkTo>组件在不同模板之间跳转

<LinkTo>是Ember提供好的组件，用于在不同模板之间跳转，其作用类似于HTML标签中的<a>标签。

为何不直接用<a>标签而是要自定义一个跳转的组件呢？？因为使用普通的<a>标签，当你点击链接的时候会发送浏览器的刷新，但是Ember是单页应用不需要刷新整个页面，只要是实现页面的跳转即可（所谓的跳转其实就是实现不同的路由之间的切换，并且不会刷新页面）。

继续改造前面的创建的index,about和contact。分别在这两个模板页面中添加一个跳转的链接。

{{!-- index.hbs是 "/" 这个路径默认的页面。 --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome to Super Rentals!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  
  {{!-- 使用LinkTo组件添加一个跳转按钮，并且指定调整到的路由是about，也就是说当用户点击这按钮的时候会跳转到about这个子页面上 --}}
  <LinkTo @route="about" class="button">About Us</LinkTo>
  

  
  <a href="/about" class="button">About Us With A Tag</a>
</div>

index5.png

点击“About Us”这个按钮，然后看浏览器的地址栏，可以看到自动转到about这个路由下，并且页面不会刷新。为了验证前面所说的效果，我在About Us后面添加了一个<a>标签按钮，当你点击这个链接的时候会看到浏览器自动刷新了，并且也跳转到about页面上。

index6.png

继续改造about和contact，分别添加跳转按钮。

{{!-- app/templates/about.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
  
  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
  {{!-- 增加一个跳转回到首页的链接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
  
  <LinkTo @route="about" class="button">About</LinkTo>
  {{!-- 增加一个跳转回到首页的链接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

在about和contact两个页面添加了两个跳转按钮，一个是about和contact页面的相互跳转，一个是跳转回首页的按钮。

about3.png

contact4.png

通过前面的这三个页面，相信你很容易就可以掌握<LinkTo>组件的使用。其中@route属性指定的是你定义的路由名字，这个路由的名字要和router.js里面的定义的完全一致，否则会找不到。另外需要注意的是@route属性的值一定是路由的名字而不是URL的名字，比如contact路由，这个路由的路由名是contact而不是访问的getting-in-touch。

另外在<LinkTo>组件上可以使用普通的HTML属性，比如上面使用的class属性，这个class属性就是普通HTML属性，用于指定CSS样式的。在Ember应用中，通过@符号区别是普通的HTML属性还是Ember提供的属性，比如上面使用的@route就是Ember提供的属性。

在底层，<LinkTo>组件会为我们生成一个常规的<a>标签，并带有针对特定路由的href。通过Ember生成的这个<a>标签对于用户来说非常友好，无需页面刷新就可以实现跳转。简单讲，当单击这些特殊链接之一时，Ember将拦截该单击，呈现新页面的内容，并更新URL（所有这些操作均在本地执行，而无需等待服务器），从而避免刷新整个页面。

在线咨询

上一篇：爬虫之Jsoup学习
下一篇：「Django框架」-模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「HTML」从零开始学网页制作-04

什么是HTML？

HTML 标签

HTML 元素

HTML 头部元素

HTML <HEAD> 元素

HTML <TITLE> 元素

HTML <BASE> 元素

HTML <LINK> 元素

HTML <STYLE> 元素

HTML <META> 元素

<META> 标签- 使用实例

HTML <SCRIPT> 元素

HTML 元素

元素语法

注释标签

标签定义及使用说明

HTML 段落与文字

标题

段落

文本格式化

区块

HTML字符实体

定义路由

使用路由模板

自定义路由URL

使用<LinkTo>组件在不同模板之间跳转

您的项目需求