python走起之第十四话

时间  2019-11-16
标签 python 走起 第十四 栏目 Python 繁體版
原文   原文链接

HTML 标题

HTML 标题（Heading）是经过<h1> - <h6> 标签来定义的.css

实例

<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>

HTML 连接

HTML 连接是经过标签 <a> 来定义的.html

实例

<a href="http://www.runoob.com">这是一个连接</a>

HTML 图像

HTML 图像是经过标签 <img> 来定义的.浏览器

实例

<img src="w3cschool.png" width="104" height="142">

 

HTML 元素

HTML 文档由 HTML 元素定义。编辑器

HTML 元素

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

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。工具

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具备空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。布局

嵌套的 HTML 元素

<p大多数 html="" 元素能够嵌套（能够包含其余="" 元素）。<="" p="">学习

HTML 文档由嵌套的 HTML 元素构成。字体

HTML 文档实例

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

以上实例包含了三个 HTML 元素。url

HTML 实例解析

<p> 元素:spa

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: This is my first paragraph.

<body> 元素:

<body>
<p>这是第一个段落。</p>
</body>

The <body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另外一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

The <html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另外一个 HTML 元素（body 元素）。

不要忘记结束标签

即便您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示，由于关闭标签是可选的。

但不要依赖这种作法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签订义换行）。

在 XHTML、XML 以及将来版本的 HTML 中，全部元素都必须被关闭。

在开始标签中添加斜杠，好比 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即便 <br> 在全部浏览器中都是有效的，但使用 <br /> 实际上是更长远的保障。

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

  • HTML 元素能够设置属性
  • 属性能够在元素中添加附加信息
  • 属性通常描述于开始标签
  • 属性老是以名称/值对的形式出现，好比：name="value"。

属性实例

HTML 连接由 <a> 标签订义。连接的地址在 href 属性中指定：

实例

<a href="http://www.runoob.com">这是一个连接</a>

HTML 属性经常使用引用属性值

属性值应该始终被包括在引号内。

双引号是最经常使用的，不过使用单引号也没有问题。

Remark提示: 在某些个别的状况下，好比属性值自己就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册。

下面列出了适用于大多数 HTML 元素的属性：

属性 描述
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的惟一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (做为工具条使用)

更多标准属性说明： HTML 标准属性参考手册.

什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式一般存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表能够极大提升工做效率
  • 外部样式表一般存储在 CSS 文件中
  • 多个样式定义可层叠为一

CSS 实例

一个HTML文档能够显示不一样的样式: 查看CSS是如何工做的

样式解决了一个很大的问题

HTML 标签本来被设计为用于定义文档内容，以下实例：

<h1>这是一个标题</h1>

<p>这是一个段落.</p>

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的做用那样。样式一般保存在外部的 .css 文件中。经过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中全部页面的布局和外观。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 以外创造出样式（Style）。

当代浏览器都支持 CSS .

CSS 样式表极大地提升了工做效率

样式表定义如何显示 HTML 元素

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的做用那样。样式一般保存在外部的 .css 文件中。经过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中全部页面的布局和外观。

CSS 实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器一般是您须要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您但愿设置的样式属性（style attribute）。每一个属性有一个值。属性和值被冒号分开。

CSS 实例

CSS声明老是以分号(;)结束，声明组以大括号({})括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，你能够每行只描述一个属性:

实例

p
{
color:red;
text-align:center;
}
 

CSS 注释

注释是用来解释你的代码，而且能够随意编辑它，浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例以下:

/*这是个注释*/
p
{
text-align:center;
/*这是另外一个注释*/
color:black;
font-family:arial;
}
 

CSS Id 和 Class

id 和 class 选择器

若是你要在HTML元素中设置CSS样式，你须要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器能够为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

如下的样式规则应用于元素属性 id="para1":

实例

#para1
{
text-align:center;
color:red;
}
 

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class能够在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在如下的例子中，全部拥有 center 类的 HTML 元素均为居中。

实例

.center {text-align:center;}

你也能够指定特定的HTML元素使用class。

在如下实例中, 全部的 p 元素使用 class="center" 让该元素的文本居中:

实例

p.center {text-align:center;}
 

CSS 建立

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

如何插入样式表

插入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

当样式须要应用于不少页面时，外部样式表将是理想的选择。在使用外部样式表的状况下，你能够经过改变一个文件来改变整个站点的外观。每一个页面使用 <link> 标签连接到样式表。 <link> 标签在（文档的）头部：

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表能够在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

Remark 不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，可是在 Mozilla/Firefox 或 Netscape 中却没法正常工做。

内部样式表

当单个文档须要特殊的样式时，就应该使用内部样式表。你可使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

因为要将表现和内容混杂在一块儿，内联样式会损失掉样式表的许多优点。请慎用这种方法，例如当样式仅须要在一个元素上应用一次时。

要使用内联样式，你须要在相关的标签内使用样式（style）属性。Style 属性能够包含任何 CSS 属性。本例展现如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

多重样式

若是某些属性在不一样的样式表中被一样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
color:red;
text-align:left;
font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
text-align:right;
font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表连接，那么 h3 获得的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式将层叠为一个

样式表容许以多种方式规定样式信息。样式能够规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至能够在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪一个样式呢？

通常而言，全部的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

所以，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于如下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程