代码收藏家 Python学习前导课程：前端基础HTML入门解析
Python预科学习 — 前端基础知识之HTML
HTML 超文本编辑语言
HTML 介绍
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由WEB的发明者 Tim Berners-Lee （蒂姆·伯纳斯·李）和同事 Daniel W. Connolly于1990年创立的一种标记语言， 它是标准通用化标记语言（SGML）的应用。用HTML编写的超文本文档称为HTML文档，它能独立于 各种操作系统平台(如 UNIX，Windows 等)。使用HTML，将所需要表达的信息按某种规则写成HTML 文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
就是进行网页内容填充的
网页三大件，HTML、CSS(为了让内容更美观)、JavaScript(实现动态数据的加载，比如天气、新闻等)
现代网页 -> 动静结合 -> 人机交互更好
全栈开发工程师：一份钱，三份工作
HTML 标记
对于刚刚接触超文本的同学来说，一些用 “<”、“>” 包括起来的句子可能很难被理解，它们被称 为标记，也叫标签，是用来划分网页元素的，以形成文本的布局、文字的格式。
标签分为单标签和双标签两大类：单标签指的是只存在一个标签的写法，如<meta>,<input>、 双标签指的是存在一对标签的写法，如<head></head>、<body></body>等
在双标签中第一个标签为起始标签，第二个标签为结束标签，结束标签需要在左尖括号后添加一个 关闭符 “/”
HTML 文档结构
一个HTML文档基本结构主要由文档声明<!DOCTYPE html>、HTML文档<head>、文档头部分<head>、和文档主体<Body>四部分组成。
<!DOCTYPE>
必须是HTML文档的第一行，位于<html>标签之前。<!DOCTYPE>声明不是 HTML标签，它用于向浏览器说明当前文档是属于哪种HTML或XHTML标准规范。必须在开头使用，为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将网页作为有效的 XHTML文档，并按照指定文档类型进行解析。
<html>
<html>标签位于<!DOCTYPE> 声明之后，作用相当于在告知浏览器这是一个HTML文档。
<html></html>标签限定了文档的开始和结束点，其中<html>表示网页的开始，</html>表示网页的结束，网页需要展示的所有内容都应该写到<html></html>标签的内部，<html>标签也被称为根标签，指最外层的意思。
<head>
<head></head>用于定义HTML文档的头部信息。在<html>标签之后，文档头内部的标签如下
| 标签 | 意义 |
|---|---|
<title> </title> |
定义网页标题 |
<style> </style> |
定义HTML文档的样式文件 |
<script> </script> |
定义JavaScript或脚本文件 |
<link/> |
定义了一个文档和外部资源之间的关系 |
<meta/> |
定义网页源信息 |
一个HTML文档只能有一对<head></head>标签，大部分的文档头部包含的标签数据不会真正作为内容显示在页面中。
示例：<meta charset="UTF-8">指定网页的编码方式为utf-8。utf-8是一种网页编码规范，可以同一显示中文简体，繁体及其它语言（如英语、日语、韩语），这样网页就不会出现乱码的情况，属于国际通用的编码方式。
<body>
<body></body>包含文档要展示的所有内容，也称为主体标签，网页中显示的文本、超链接、图片、表格和列表等信息，都必须在<body>内。（解释内容越少，事越大）
HTML 语言是不区分大小写的，但是建议文档声明采用大写方式，其它部分都采用小写方式。
HTML 注释
< !-- 注释内容 -- > 解释这里干了什么事
Pycharm 快捷注释： Ctrl + /
HTML 属性
<标签名字 属性1=“属性值1” 属性2=“属性值2”……>内容部分
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
一般会在 css 样式文件中编写，分文件编写，叫做“解耦”，提高效率
HTML 常用标签
Pycharm 快捷补全标签： 输入 标签名 ，按 Tab 补全
标题标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
<!-- 用法 -->
<hn 属性=“属性值”>标题内容</hn>
段落标签
<p> </p>
<!-- 用法 -->
<p 属性=“属性值”>段落文本</p>
文本格式化标签
<strong></strong> 强调加粗
<em></em> 强调斜体
<sub></sub> 下标文本
<sup></sup> 上标文本
<del></del> 加删除线方式
<ins></ins> 加下划线方式
<i></i> 斜体（不具备语义化强调作用，指显示斜体效果）
<b></b> 加粗（不具备语义化强调作用，指显示加粗效果）
水平线标签
<hr> 有时为了使文档结构清晰，层次分明，常常需要在网页文档中加一些水平线将段落与段落之间分开，HTML 中使用<hr>标签来创建水平线
特殊符号
在编写代码的时候，经常会遇到无法输入的字符如：商标注册、版权符等，在HTML中为这些特殊 的字符准备了专门的代码。如下所示：
| 特殊字符 | 含义 | 特殊符号代码 |
|---|---|---|
| 空格 |   |
|
| © | 版权 | © |
| ® | 注册商标 | reg |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| ° | 温度 | ° |
| ± | 正负号 | ± |
| 1 | 上标1 | ¹ |
| 2 | 下标2 | &sub2 |
| 345 | 上标3 数字4 下标5 | ³ 4 &sub5 |
图像标签
<!-- 用法 -->
<img src="图像URL"/>
链接标签
<!-- 用法 -->
<a href="链接页面的地址" target="链接打开方式">链接对象名称</a>
<!-- 链接打开方式 -->
_self 在当前窗口打开链接，默认方式
_blank 在新的窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层打开链接
列表标签
有序列表：
在HTML中用<ol></ol>标签表示有序列表，列表项目用<li></li>标签表示，列表项目有先后顺序之分，因此称为有序列表
无序列表：
在HTML中用<ul></ul>标签表示无序列表，列表项目用<li></li>标签表示，列表项目没有先后顺序之分，因此称为无序列表
<div> 和 <span>
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span 标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
HTML 表格
表格的基本结构
每个表格有三个必须的标签，<table>、<tr>和<td>
三个标签，用来创建表格，语法结构如下：
<table> <!-- <table></table>标签用于定义一个表格 -->
<caption> 表格名 </caption>
<tr> <!-- <tr>标签用于定义表格中的一行，必须嵌套在<table></table>中，表示该表格有几行 -->
<th></th> <!-- <th></th>标签用于定义一个表格的表头，位于表格的第一行或第一列 -->
<td> 单元格内容 </td> <!-- <td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，
一对<tr></tr>包含几对<td></td>，表示该行中有多少个单元格(列)-->
</tr>
</table>
Pycharm 快捷生成表格： 输入 tr>td*4 按 Tab 补全
表格行与列的合并
在HTML中，也需要用到“表格合并行”和“表格合并列”。
和并行使用标签的 rowspan 属性，而合并列则用到标签的 colspan 属性。
HTML表单
表单是网页中最为重要的一种数据标签，如登录注册页面上用户名和密码的输入，提交按钮等都是用表单相关的标签定义的。表单是HTML中获得用户输入的主要手段，它主要功能是收集用户输入的信息，并将这些信息发送给后台服务器，实现网页和用户的友好交互。
HTML中，一个完整的表单通常由表单元素，提示信息和表单域三个部分组成。
表单元素
| 表单元素 | 含义 |
|---|---|
<input> |
表单输入框（可定义多种表单项） |
<textarea> |
定义多行文本框 |
<select> |
定义一个下拉列表 |
<label> |
定义表单辅助项 |
<form> |
定义表单域 |
作者：EvanSun__
