HTML标签
HTML介绍
Htyper Text Markup Language 即超文本标记语言。
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染页面给用户看，这个规则就是HTML。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
html固定的文档结构组织，标准模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1. <!DOCTYPE html>声明为HTML5文档。
2. <html></html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。html的lang属性
可用于网页或部分网页的语言。通常用于搜索引擎和浏览器的统计分析,不定义也没什么影响根据W3C推荐标准，应该通过 <html>
标签中的lang属性对每张页面中的主要语言进行声明，比如：<html lang="en"></html>
3. <head></head>标签用于定义文档的头部，它是所有头部元素的容器。它们之间的内容不会在浏览器的文档窗口显示，
但是其间的元素有特殊重要的意义。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，
4. <title></title>定义了网页标题，在浏览器标题栏显示。
5. <body></body>之间的文本是可见的网页主体内容，最终会在浏览器窗口中显示出来。
注意：对于中文网页需要使用<meta charset="UTF-8">声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，
则你需要设置为<meta charset="gbk">
HTML标签
HTML标签格式：
- HTML标签是由尖括号包围的关键字通常是成对出现，比如：开始标签<div>和结束标签</div>，
结束标签会有个左斜杠。两个标签之间的部分我们叫做标签体
- 有一些标签是单独呈现的，这种标签叫做自闭和标签，比如：<br/>、<hr/>、<img src="1.jpg" />等。
- 标签里面可以有若干属性，也可以不带属性。
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写
- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
HTML标签的语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”…… >内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
HTML中标签分类：单从是否可以嵌套子标签的角度去分，标签分为两类
1、容器类标签：可以简单的理解为能嵌套其它所有标签的标签。
常见容器级的标签:
h系列
ul>li
ol>li
dl>dt+dd
div
2、文本类标签：对应容器级标签，只能嵌套文字/图片/超链接的标签。
常见文本级的标签:
p
span
strong
em
ins
del
HTML注释：
# 1.单行注释：
<!--单行注释-->
# 2.多行注释：
<!--
注释1
注释2
-->
一般情况下 html的注释都会按照下面的方式书写
<!--导航条样式开始-->
<!--导航条样式结束-->
HTML几个很重要的属性：
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）
Head内常用标签
<head>
head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的
</head>
常用标签
<title></title> 定义网页标题，在浏览器标题栏显示
<script></script> 定义JS代码或引入外部JS文件
<style></style> 定义内部样式，内部支持写CSS代码
<meta/> 定义网页原信息
<link/> 引入外部样式表文件或网站图标
Meta标签
# 1、指定字符集
<meta charset="UTF-8">
# 2、Description（搜索到网站后显示的网页内容描述）
<meta name="Description" content="具体描述。。。">
# 3、Keywords（搜索关键字，用于搜索引擎抓取信息的显示，有助于搜索引擎SEC优化）
<meta name="Keywords" content="网易，邮箱，游戏，新闻">
# 4、refresh（网页刷新，以秒为单位）3秒后自动跳转
<meta http-equiv="refresh" content="3,http://www.baidu.com">
# 5、三秒刷新
<meta http-equiv="refresh" content="3">
注：http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确
地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索
引擎查找信息和分类信息用的。
非meta标签
#1、标题
<title>百度一下，你就知道</title>
#2、网站的图标
<link rel="icon" href="https://www.baidu.com/favicon.ico">
#3、定义内部样式
<style></style>
#4、引入外部样式文件
<link rel="stylesheet" href="mystyle.css">
#5、定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script>
body内常用标签
body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的
基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--分隔线-->
<hr>
<!--修改文字大小，颜色-->
<font>
<font color="red" size="10px">我是哈哈哈</font>
特殊符号
空格 -----------------
> ----------------- >
< ----------------- <
& ----------------- &
¥ ----------------- ¥
版权 ----------------- ©
注册 ----------------- ®
div 块级标签
- 独占一行
- 块级标签能够嵌套块儿级标签和行内标签
- p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
- 块级标签能够设置长宽
<div>
内容
</div>
sqan 行内标签
-
自身内容有多的就占多大
-
行内标签不能设置长宽
注：块级标签可以设置长宽，行内标签不能设置长宽
<span>
内容
</span>
h标题标签
标记内容为一个标题，全称headline
p段落标签
- 段落标签. 标记内容为一个段落，包裹的内容被换行.并且也上下内容之间有一行空白.全称paragraph
style="text-indent: 2em" 可以设置样式为首行缩进两个字符。
<blockquote></blockquote> 可以用来设置整个段落的缩进。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<h2>egon赋</h2>
<p>论颜值，鹤立鸡群</p>
<p>论实力，天下无敌</p>
</body>
</html>
img标签
- 行级标签，用来显示图片，全称image
重要属性有：src、title、alt、width、height、align。
src 图片地址。指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，
但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的
title 鼠标悬浮在图片上的文字。
alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源，则不会显示要替换的文字。
如果使用的是本网站的资源（相对路径给出），则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。
align 图片周围文字的垂直对齐情况。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、
bottom（默认，与图片的底部对齐）。
width 图片的宽
height 图片的高 (宽高两个属性只用一个会自动等比缩放.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<br>
<img src="img/1.jpg" alt="">
<br>
<img src="img/2.jpg" alt="图片被怪物吃掉">
<br>
<img src="img/1.jpg" alt="" title="这是一个美女">
<br>
<img src="img/1.jpg" alt="" width="300px" height="100px" >
<br>
<img src="img/1.jpg" alt="" width="300px" >
<img src="img/1.jpg" alt="" height="300px" >
</body>
</html>
a标签
-
超链接标签(锚标签)，全称anchor
-
超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转
重要属性有三个：href、target、name
href 超链接地址：可以是Web上任意资源，包括图片，网页，样式，
脚本文件等。href="#"时，表示被链接页面就是当前页面。
target 文档打开时要显示的目标位置，属性值一般有：
_blank（新窗口中打开）、
_self（默认，在超链接所在的容器中打开）、
_parent（在超链接的父容器中打开）、
_top（整个容器中打开）、name（框架名称）。
name 锚记名称。作用：跳转到文档的某个地方。返回首页。
# 在当前页面跳转
<a href="http://www.baidu.com">点我跳百度</a>
# 在新页面跳转
<a href="http://www.baidu.com" target="_blank">点我跳百我跳百度</a>
# 点击图片跳转
<a href="http://www.baidu.com" target="_blank"><img src="img/1.jpg" alt=""></a>
# 鼠标悬浮内容
<a href="http://www.baidu.com" target="_blank" title="点击下载病毒">点我跳百我跳百度</a>
# 点击跳到首页
<a href="index.html" target="_blank" title="点击下载病毒">点我跳到首页</a>
# 假链接：就是点击之后不会跳转的链接，我们称之为假链接
# 会自动跳到网页的顶部
<a href="#" title="点击下载病毒">假连接</a>
# 不会返回顶部
<a href="javascript:" title="点击下载病毒">假连接</a>
页内锚点
(仅做参考，测试一定要多行演示)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>开头</h1>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p id="p1">位置1</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<p id="p2">位置2</p>
<p>哈哈哈哈</p>
<p>哈哈哈哈</p>
<h1>末尾</h1>
<a href="#p1">跳到位置1</a>
<a href="#p2">跳到位置2</a>
<a href="#">跳到开头</a>
<a href="">跳到开头</a>
</body>
</html>
列表标签
-
标记一堆数据是一个整体/列表
-
html中列表标签分为三种
<ul type="disc"> :无序列表标签（列表标签中使用最多的一种，非常重要）：unordered list
<li>:列表中的每一项
- type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
<ol> :有序列表标签(极少用到)
<li>:列表中的每一项.
<li>主要的属性有：type、value两个:
- type指明项目的类型，属性值有：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
- value表示序号值从几开始。
<dl> ：defination list，自定义列表
<dt> defination title，自定义标题
<dd> defination description，自定义列表项（描述）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.无序列表：ul-->
<ul type="square">
<li>秒杀</li>
<li>优惠券</li>
<li>PLUSH会员</li>
</ul>
<!--2.有序列表：ol-->
<ol type="1" start="2">
<li>秒杀</li>
<li>优惠券</li>
<li>PLUSH会员</li>
</ol>
<hr>
<!--3.自定义列表：dl-->
<dl>
<dt>蔬菜</dt>
<dd>茄子</dd>
<dd>黄瓜</dd>
<dd>芹菜</dd>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>草莓</dd>
</dl>
<hr>
<!--有序列表例子-->
<h1>智商排名</h1>
<ol>
<li>egon</li>
<li>lxx</li>
<li>hxx</li>
<li>yxx</li>
<li>wxx</li>
</ol>
<!--无序列表也可以达到有序列表的效果-->
<ul type="none">
<li>1.秒杀</li>
<li>2.优惠券</li>
<li>3.PLUSH会员</li>
</ul>
<hr>
<!--无序列表例子-->
<ul>
<li>
<h2>蔬菜</h2>
<ul>
<li>茄子</li>
<li>白菜</li>
<li>土豆</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>香蕉</li>
<li>火龙果</li>
<li>芒果</li>
</ul>
</li>
</ul>
</body>
</html>
table表格标签
-
标记一段数据为表格
-
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据
表的基本结构：
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>智商</th>
</tr>
<tr>
<td>alex</td>
<td>73</td>
<td>70</td>
</tr>
<tr >
<td>egon</td>
<td>18</td>
<td>200</td>
</tr>
</table>
表格标签：
<tr>：表格的数据行，table row
<td>：显示表格内容的单元格，table data cell
<th>：表头名称单元格,与<td>不同在于文字采用加粗居中的形式显示，table head cell
<caption>：表格的标题
<thead>：表格头部，使结构更加分明
<tbody>：表格主体部分，使结构更加分明
<tfoot>:表格尾部
表格属性:
- border: 表格边框.（默认情况下这个属性的值为0，所以看不到边框）
- cellpadding：内边距.
- cellspacing：外边距.
- width：像素 百分比.（最好通过css来设置长宽）
- rowspan：单元格竖跨多少行
- colspan：单元格横跨多少列（即合并单元格）
- align：水平对齐方式
- bgcolor：背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿西吧</title>
</head>
<body>
<!--细线表格
<table border="1px" width="500px" height="500px" align="center" cellspacing="0px" bgcolor="red">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>智商</th>
</tr>
<tr>
<td width="300px" height="300px">geng</td>
<td>73</td>
<td>70</td>
</tr>
<tr >
<td>yang</td>
<td align="center" valign="center">18</td>
<td>200</td>
</tr>
</table>
-->
<!--完整表结构-->
<table border="1px" width="500px" height="500px" style="border-collapse: collapse;border: 1px solid red">
<caption>课程表</caption>
<thead>
<tr>
<th>名字</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>geng</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>yang</td>
<td>男</td>
<td>19</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>sun</td>
<td>男</td>
<td>22</td>
</tr>
</tfoot>
</table>
</body>
</html>
练习:（原生的表格标签很丑，后续都是使用框架封装好的，很好看）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开饭啦</title>
</head>
<body>
<table border="1px" width="500px" height="500px" style="border-collapse: collapse;border: 1px solid red">
<tr>
<th colspan="3">星期一菜谱</th>
</tr>
<tr>
<th rowspan="2">素菜</th>
<td>情操茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小葱豆腐</td>
<td>炒白菜</td>
</tr>
<tr>
<th rowspan="2">荤菜</th>
<td>油焖大虾</td>
<td>海参鱼翅</td>
</tr>
<tr>
<td>
红烧肉
<img src="1.jpg" alt="" width="200px">
</td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
form表单标签
- 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
- 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
- 表单还可以包含textarea、select、fieldset和 label标签。
表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。
属性：action、method、enctype
action 表单要提交的后端路径地址，用于处理表单的内容（一般是提交字典到后台的一个接口，这个接口是java写成的，提交到这个接口后后端就知道如何处理这些数据了）。
method 提交数据的方法，默认是get方式提交。
get方式提交数据:
1.提交的键值对.放在地址栏中url后面.
2.安全性相对较差.
3.对提交内容的长度有限制.
post方式提交数据:
1.提交的键值对不在地址栏.
2.安全性相对较高.
3.对提交内容的长度理论上无限制.
enctype 对表单数据进行编码，默认都是要编码的。
表单元素
<input> type 属性：
# text 文本框输入（默认text文本框类型）。
autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，
off表示自动完成不可用，on表示自动完成可用）
disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容）
# password 密码框。（以下属性text和password共有）
size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，
对于其他元素，宽度以像素为单位）
maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击
readonly 只读.
placeholder 框内预置内容(灰色)，写上内容时才消失
# radio 单选按钮。属性：
name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
# checkbox 多选框。
name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
# file 文件域，上传文件（不同的浏览器表现形式不同）
# submit 提交按钮。用于提交表单。
# reset 重置按钮。清空表单的输入，恢复到表单默认的状态。
# button 普通按钮。一般结合javascript使用。
# image 图片按钮，用来提交表单，与submit是一样的效果。
src（图片路径）
# hidden 隐藏字段。
value（隐藏的内容）
# color 颜色标签。value指定颜色值（采用#十六进制数表示）。
# date 日期。value值指定默认的日期，格式为****-**-**（年月日）。
# datetime-local 显示本地时间，value值指定默认的时间，格式为2016-05-20T11:10:10（年月日T时分秒）。
# number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。
# range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。
# week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。
<textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。
name （表单提交项的key）
cols（设置文本域宽度）
rows（设置文本域高度，即行数）
<select> 下拉框标签。使用时要结合<option>子标签一起使用。
name:表单提交项的key
size：选项个数
multiple：多选
<option> 下拉选中的每一项
value（表单提交项的值）
selected（selected下拉选默认被选中）
<optgroup> 为每一项加上分组
<label> 把元素与文本结合起来
友好设计：不只是选中复选框才能选中并打钩，要求点击对应的文字也能选中该复选框。
这种情况下要用到<label>标签的for属性（设置或获取给定标签对象指定到的对象，值=另一个元素的id号即可）
<label for="name">姓名</label>
<input id="name" type="text">
<fieldset> 对表单中的相关元素进行分组
<fieldset>
<legend>温馨提示</legend>
<div align="middle">不要忘记点赞哦 ==</div>
</fieldset>
value: 表单提交项的值
针对用户选择的标签，用户不需要输入内容，但是你需要提前给标签添加内容value值
对于不同的输入类型，value 属性的用法也不同：
- type="button", "reset", "submit" - 定义按钮上的显示的文本
- type="text", "password", "hidden" - 定义输入字段的初始值
- type="checkbox", "radio", "image" - 定义与输入相关联的值
表单演示：（注册功能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="inp1">用户名:</label>
<input id="inp1" type="text" name="username" placeholder="请输入您的用户名">
</p>
<p>
密码:
<input type="password" name="password" value="123" disabled>
</p>
<p>
爱好：
<input type="checkbox" name="hobbies" value="打篮球">打篮球
<input type="checkbox" name="hobbies" value="踢足球" checked>踢足球
<input type="checkbox" name="hobbies" value="羽毛球" checked>羽毛球
</p>
<p>
性别：
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女" checked>女
<input type="radio" name="gender" value="保密">保密
</p>
<p>
出生日期：
<input type="date" name="bitrh">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
手机号
<input type="number" name="phone">
</p>
<p>
头像
<input type="file" name="myfile.png" multiple>
</p>
<p>
<textarea name="comment" id="" cols="50" rows="20" style="resize: none">
</textarea>
</p>
<p>
<select name="addr" size="5" multiple>
<optgroup label="一线城市">
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州" selected>广州</option>
</optgroup>
<optgroup label="二线城市">
<option value="宁波">宁波</option>
<option value="昆明">昆明</option>
<option value="厦门">厦门</option>
<option value="济南" selected>济南</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="注册">
<input type="button" value="按钮" onclick="alert(123)">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
验证form表单提交数据
# 后端框架初识，看下效果即可
IDE下载：pip3 install FLASK
# form表单默认提交数据的方式是get请求 数据是直接放在url后面的
http://127.0.0.1:5000/index/?username=dasda&gender=on
# 可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
form表单提交文件需要注意：
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 既可以支持提交文本数据，还可以支持提交文件数据
下面的代码无需掌握，只需了解form表单即可：
"""
# py实现后端文件
from flask import Flask,request
# 当前url既可以支持get请求也可以支持post请求，如果不写默认只能是get请求
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 获取form表单提交过来的非文件数据
print(request.files) # 获取文件数据
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name) # 保存拿到的文件
return 'OK'
app.run()
"""
[参考链接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911 ](
从来就没有正确的选择，我们只不过是要努力奋斗，使当初的选择变得正确。
