HTML入门

发表于 | 分类于

博主在使用Flask过程，预在项目中使用中Jinja模板。学习Jinja模板离不开基础的HTML的知识。
本文是学习笔记性质的，主要为了形成对HTML的相对全面的认识和为日后复习备忘。
推荐学习的网站W3School的HTML教程，本文部分内容和例子来自学习的内容，但对其进行了整理、筛选和补充，并附上了自己的运行截图。

简介

什么是 HTML？

  • HTML 超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)， 使用标记标签描述网页。

HTML 标签–

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

HTML 文档 = 网页

  • HTML 文档包含 HTML 标签和纯文本，Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
  • 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
1
2
3
4
5
6
7
8
9
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

查看结果

解释:
<html>与 </html>之间的文本描述网页
<body>与 </body>之间的文本是可见的页面内容
<h1>与 </h1> 之间的文本被显示为标题
<p> 与 </p>之间的文本被显示为段落

常用标签介绍

一. 布局

HTML 标题–<h1>…</h1>

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

例子：

1
2
3
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

标题

HTML 段落–<p>…</p>

  • 由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的
  • HTML 段落是通过<p> 标签进行定义的

例子：

1
2
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

段落

容器—<div>

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

  • 样式属性
    如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性
  • 文档布局
    它取代了使用表格定义布局的老式方法
    不应该使用<table> 元素进行文档布，<table> 元素的作用是显示表格化的数据

HTML+CSS

  • 层叠样式表CSS（Cascading Style Sheets），用来控制HTML里的所有元素如何展现
  • 如果与 CSS 一同使用，
    元素可用于对大的内容块设置样式属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
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.
</p>
<p>
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.
</p>
</div>

<div id="footer">
Copyright W3School.com.cn
</div>

</body>

仅有HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
#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; 
}
</style>

HTML+CSS

使用 HTML5 的网站布局

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

HTML5 语义元素
header 定义文档或节的页眉
nav(navigation) 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
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.
</p>
<p>
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.
</p>
</section>

<footer>
Copyright W3School.com.cn
</footer>

</body>

CSS代码也做了细微调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
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; 
}

分隔线—<hr>

  • <hr>标签用于在页面上添加横线。
  • 可以通过指定width和color属性来控制横线的长度和颜色。

例子：

1
2
<hr width="80%" color="yellow" />
<hr width="60%" color="red" />

分隔线

切换行—<br/>

  • 希望在不产生一个新段落的情况下进行换行（新行）
  • 使用空的段落标记 <p></p>去插入一个空行是个坏习惯。用<br />标签代替它

例子：

1
<h1>This is a <br/> heading</h1>

切换行

注释—<!-- 注释 -->

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

例子：

1
2
<h1>This is a heading</h1>
<!-- This is a comment -->

注释

二. 外链

链接—<a href="url">desc</a>

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

实例：

1
<a href="http://www.w3school.com.cn">This is a link</a>

链接

在 href （Hypertext Reference）属性中指定链接的地址。

图像—<img src="url" width=" " height=" " />

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

  • width：宽
  • height：高

实例

1
2
<img src="http://p7vxw6hv7.bkt.clouddn.com/18-6-27/12426781.jpg"
width="300" height="142" />

图像

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

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

例子：

1
2
<img src="random.gif" alt="Big Boat">
`

alt

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

三. 文本格式化标签

标签 描述
定义粗体文本
定义大号字
定义着重文字
定义斜体字
定义小号字
定义加重语气
\ 定义下标字
\ 定义上标字
定义插入字
定义删除字

四. 样式—style

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

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

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

内部样式表—<head> <style type

当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。

1
2
3
4
5
6
7
<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内部样式表

内联样式—<p style=

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

1
2
3
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

内联样式

五. 表格—<table>

基本语法—<tr> <td>data</td> </tr>

  • <table>:表格
  • <tr>:行
  • <td>:每行被分割为若干单元格
    字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
1
2
3
4
5
6
7
8
9
10
11
12
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

表格

表格的表头—<th>Heading</th>

<th> :表头

大多数浏览器会把表头显示为粗体居中的文本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>`
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table></pre>

表头

表格中的空单元格—\&nbsp

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

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

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp</td>
<td>row 2, cell 2</td>
</tr>
</table></pre>

空单元格

六. 列表

无序列表—<ul>…</ul>

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于<li>。

1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

无序列表

有序列表—<ol>…</ol>

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于<ol> 标签。每个列表项始于<li>标签。

1
2
3
4
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

有序列表

自定义列表<dl> <dt> …</dt> <dd> …</dd> </dl>

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

  • <dl> ：自定义列表开始
  • <dt>：每个自定义列表项 开始
  • <dd>：每个自定义列表项的定义 开始
1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

自定义列表

参考文章
W3School的HTML教程

> >