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
  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代码也做了细微调整

  内部样式表

  内联样式---

  当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 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 表头 表格中的空单元格---	\

  row 1, cell 1	row 1, cell 2
  	row 2, cell 2

  空单元格

  六. 列表

  无序列表---

  …

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

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

    
    Coffee
    Milk
    
    

    无序列表

    有序列表---

    …

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

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

       
       Coffee
       Milk
       
       

       有序列表

       自定义列表

       …

       …

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

       • ：自定义列表开始

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

       
       Coffee
       Black hot drink
       Milk
       White cold drink
       
       

       自定义列表

       参考文章
       W3School的HTML教程