如何用html解释文件,HTML入门

博主在使用Flask过程，预在项目中使用中Jinja模板。学习Jinja模板离不开基础的HTML的知识。

本文是学习笔记性质的，主要为了形成对HTML的相对全面的认识和为日后复习备忘。

推荐学习的网站W3School的HTML教程，本文部分内容和例子来自学习的内容，但对其进行了整理、筛选和补充，并附上了自己的运行截图。

简介

什么是 HTML？

HTML 超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言 (markup language)， 使用标记标签描述网页。

HTML 标签--

HTML 标记标签通常被称为 HTML 标签 (HTML tag)，是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如 和 ，标签对中的第一个标签是开始标签，第二个标签是结束标签

HTML 文档 = 网页

HTML 文档包含 HTML 标签和纯文本，Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

我的第一个标题

我的第一个段落。

查看结果

解释:

与 之间的文本描述网页

与

之间的文本被显示为标题

与

之间的文本被显示为段落

常用标签介绍

一. 布局

HTML 标题--

…

HTML 标题(Heading)是通过

-

等标签进行定义的。

例子：

This is a heading

This is a heading

This is a heading

标题

HTML 段落--

…

由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的

HTML 段落是通过

标签进行定义的

例子：

This is a paragraph.

This is another paragraph.

段落

容器---

HTML的

元素是可用于组合其他 HTML 元素的容器，它没有特定的含义，浏览器会在其前后显示折行。

样式属性

如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性

文档布局

它取代了使用表格定义布局的老式方法

不应该使用

HTML+CSS

层叠样式表CSS(Cascading Style Sheets)，用来控制HTML里的所有元素如何展现

如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性

City Gallery

London

Paris

Tokyo

London

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.

Copyright W3School.com.cn

仅有HTML

#header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

#nav {

line-height:30px;

background-color:#eeeeee;

height:250px;

width:100px;

float:left;

padding:5px;

}

#section {

width:350px;

float:left;

padding:10px;

}

#footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

HTML+CSS

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：

HTML5

语义元素

header

定义文档或节的页眉

nav(navigation)

定义导航链接的容器

section

定义文档中的节

article

定义独立的自包含文章

aside

定义内容之外的内容(比如侧栏)

footer

定义文档或节的页脚

details

定义额外的细节

summary

定义 details 元素的标题

City Gallery

London

Paris

Tokyo

London

London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it Londinium.

Copyright W3School.com.cn

CSS代码也做了细微调整

header {

background-color:black;

color:white;

text-align:center;

padding:5px;

}

nav {

line-height:30px;

background-color:#eeeeee;

height:250px;

width:100px;

float:left;

padding:5px;

}

section {

width:350px;

float:left;

padding:10px;

}

footer {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

分隔线---

---

---

标签用于在页面上添加横线。

可以通过指定width和color属性来控制横线的长度和颜色。

例子：

---

---

分隔线

切换行---

希望在不产生一个新段落的情况下进行换行(新行)

使用空的段落标记

标签代替它

例子：

This is a
heading

切换行

注释---

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

例子：

This is a heading

注释

二. 外链

链接---desc

HTML 链接是通过 标签进行定义的。

实例：

This is a link

链接

在 href (Hypertext Reference)属性中指定链接的地址。

图像---

HTML 图像是通过标签进行定义的，图像的名称和尺寸等是以属性的形式提供的。

width：宽

height：高

实例

width="300" height="142" />

图像

替换文本属性---alt="des"

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

例子：

alt

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

三. 文本格式化标签

标签

描述

定义粗体文本

定义大号字

定义着重文字

定义斜体字

定义小号字

定义加重语气

定义下标字

定义上标字

定义插入字

定义删除字

四. 样式---style

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有三种方式来插入样式表

外部样式表---

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

内部样式表---

内部样式表

内联样式---

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

This is a paragraph

内联样式

五. 表格---

基本语法---

data

:每行被分割为若干单元格 字母 td 指表格数据(table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 row 1, cell 1 row 1, cell 2 row 1, cell 3 row 2, cell 1 row 2, cell 2 row 2, cell 3 表格 表格的表头---	Heading	:表头 大多数浏览器会把表头显示为粗体居中的文本： Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表头 表格中的空单元格---	\&nbsp

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容)，浏览器可能无法显示出这个单元格的边框。

为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

row 1, cell 1	row 1, cell 2
&nbsp	row 2, cell 2

空单元格

六. 列表

无序列表---

• …

无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于

• 标签。每个列表项始于
• 。
  • Coffee
  • Milk

  

  无序列表

  有序列表---

  1. …

  同样，有序列表也是一列项目，列表项目使用数字进行标记。

  有序列表始于

  1. 标签。每个列表项始于
  2. 标签。
     1. Coffee
     2. Milk

     

     有序列表

     自定义列表

     …

     …

     自定义列表不仅仅是一列项目，而是项目及其注释的组合。

     ：每个自定义列表项 开始

     ：每个自定义列表项的定义 开始

     Coffee

     Black hot drink

     Milk

     White cold drink

     

     自定义列表