标签的分类
——单标签
img br hr
——双标签
a h p div <a></a>
——按照标签属性分类
① 块儿级标签 ： 自己独自占一行
h1-h6 p div
②行内标签 ：文本多大 占多大
a span u i b s
div标签和span标签
——没有实际意义 用来‘布局’页面
div一般用于占位置布局
span一般用在占文本布局
标签的嵌套
标签之间是可以互相嵌套的
《对于前端，不会轻易报错，如果不对，没有对应的显示》
——块儿级 元素可以嵌套所有得标签
p标签不能嵌套块儿级元素；但可以嵌套行元素
行内元素只能嵌套 行内元素
img标签 （展示图片）
链接过长时：
当图片大小不适时 可调节，最好只设置一样，会按照1：1自动调试
复制图片地址到 src为 外部链接
当复制地址为错误地址时，在art内输入 错误原因
当添加 标题时 鼠标移动悬浮到该图片上方时 所出现的文字
除了外部链接，还有内存地图，
当放置在多层文件中 每一次的 ../ 即为上一次
总结：
src
内部的图片地址
写外连接的地址
title 鼠标悬浮的文字内容
width 图片的宽度
height 图片的高度
alt 当图片不存在时，显示的原因
当从链接中打开新的页面时
href属性指定目标网页地址。该地址可以有几种类型：
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
● 锚URL - 指向页面中的锚（href="#top"）
target：
● _blank表示在新标签页中打开目标网页
● _self表示在当前标签页中打开目标网页
标签的两个自带重要属性
id值：一个文档中 id值不可重复
class值 可以有多个， 一个标签可以有多个class值。
一个class值也可被多个标签拥有
<div id ='d1' class='c1 c2 c3'></div>
<div id ='d2' class=' c2 '></div>
<div id ='d3' class=' c3'></div>
<div id ='d3' class='c1 '></div>
要想使用 id值 必须使用 #开头
要想使用class值 必须使用 . 开头
1.无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
● disc（实心圆点，默认值）
● circle（空心圆圈）
● square（实心方块）
● none（无样式）
2.有序列表
3.标题列表
无序列表
有序
表格
属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）
表头 td改为 th时 颜色加深
border设置表格
去掉多余的删除那一行数据就可以了
这是竖向合并 rowspan
如果是横向合并 将 rowspan 改为 colspan
表单
将输入的密码 改为密文时
将 text 改为 password
若是让 密文变明文 删掉 type=’password‘ 即可
复选框：
name属性
单选框与提交
因各个浏览器兼容不同
所以登录 按钮的设置 最好加上 value=' '
注： botton按钮
——写在表单里头 有提交的功能
表单外 没有意义
该功能 hidden 不显示 但是会提交到后台
file 文本选择框
选择多项文件时 加上 multiple
验证 form表朝后端提交数据
<form action="">
action:
"""写朝后端提交的地址"""
这里你写什么地址就朝这个地址提交数据，应该填写后端的地址
1. 什么都不写：朝当前地址提交
2. 全写：http://127.0.0.1:5000/index/ 朝这个地址提交
3. 只写后缀
/index/-------->IP:PORT/index
"""form表单要想把数据提交到后端，每一个标签都要有一个name属性."""
name的属性值就是提交到后端数据的key值，用户输入的内容就是value值
针对于复选框、单选框标签都应该有一个value属性，用于区别前端用户选择的哪个选项
## 对于文件数据的提交需要满足以下两个条件：
1. 请求方式必须是post
2. 数据编码方式：
1. application/x-www-form-urlencoded
2. multipart/form-data
3. json
3. 编码方式必须是multipart/form-data才能提交问价
4. urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据
5. urlencoded形式的数据长什么样子：
username=&password=&date=&hidden=123&myfile=&city=
6. form-data编码格式的数据：
username=&password=&date=&hidden=123&myfile=&city=
boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
文件数据
"""对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据"""
7. form表单不能够提交json数据
8. 如果想提交json格式的数据：Ajax技术、第三方的api工具postman
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
"""CSS就是对HTML标签做样式的，让不好看的变得更加的好看"""
CSS语法：
选择器 {
属性名1:属性值;
属性名2:属性值;
属性名3:属性值;
属性名4:属性值;
属性名5:属性值;
}
CSS注释:
/*这是注释*/
HTML注释：
<!-- 这是注释 -->
注释符号的快捷键是：ctrl + ?
CSS的几种引入方式:
行内样式:
<p style="color: red">Hello world.</p>
内部样式：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: #2b99ff;
}
</style>
</head>
外部样式：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
1. 如何找到标签
2. 找到标签之后在进行属性操作
选择器种类非常之多，但是，大多数都是了解的，用的最多的也就几个，对我们来说，只需要掌握这几个就可以了
基本选择器：
ID选择器
类选择器
元素选择器
通用选择器
组合选择器
后代选择器
我们使用亲戚关系表示标签之间的关系
<div id="div1"> div是p的父亲，p是div 的儿子
<p class="c1"> p是a的父亲，a是p的儿子，a是div的孙子
<a href="">点我把</a>
<a href="">点我把</a>
<a href="">点我把</a>
</p>
div
<a href="">我会不会变颜色呢</a> a是p的兄弟
</div>
<p> p是div的兄弟
<a href="">哈哈哈哈</a>
</p>