python之路——web基础（html+css）
HTML
1、概念
2、标签
浏览器通过解析标签来获取html内容，标签包括属性、内容，标签可以嵌套标签；
标签分类：
1、按闭合分类：自闭合标签（<meta charset="UTF-8">、<img src="" />）
主动闭合标签（<title>老男孩</title>）
2、按标签自有属性分类：块级标签------>独自占有一行（<div> <p> <h1-h6> <form> <menu> <pre> <table>）
行内标签----- >根据内容占空间，没有（margin属性）（<span> <a> <lable> <img> <textarea> <strong> <input> <select>）
htm标签结构：
1、html标签（<html> ... </html>）页面有且只能有一个，包含<head> <body>标签。
2、head标签（<head> ... </head>）
- <meta -> 编码，跳转，刷新，关键字，描述，IE兼容
- <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
- <link /> 导入css、jq等文件内容标签
- <style />css属性标签
- <script> javascript代码标签
3、body标签（<body> ... </body）
- 符号标签： --->空格; >--->右侧尖括号; <---->左侧尖括号标签;
- 换行标签：<br />
- 标题标签：<h1></h1> ------> <h6> </h6>
- 块级白板标签：<div> </div> ---->页面布局
- 行内白板标签：<span> </span>
- 表单标签：<form> </from>----> 嵌套input系列标签，input 标签属性：placeholder--->文本框默认显示，文本框还有email、url、tel、range（进度条）等制格式type属性
- input标签： input type='text' - name属性，value="赵凡" 【文本框】
input type='password' - name属性，value="赵凡" 【密码文本框】
input type='submit' - value='提交' 提交按钮，表单 【提交表单信息按钮】
input type='button' - value='登录' 按钮 【登陆按钮】
input type='radio' - 单选框 value，checked="checked"，name属性（name相同则互斥）【单选】
input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）【多选】
input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data" 【上传文件】
input type='rest' - 重置 【重置按钮】
<textarea >默认值</textarea> - name属性 【文本框】
select标签 - name,内部option value, 提交到后台，size，multiple 【下拉选择】
- a标签：- 跳转
- 锚 href='#某个标签的ID' 标签的ID不允许重复
- img图片标签<img />：src---> 图片路径，alt ---> ,title----> ；默认有一个border=1px的边框
- audio音频标签<audio src="" controls="controls" autoplay="autoplay"> </audio> 属性依次为：音频地址，控制，自动播放
- video视频标签<video src="" controls="controls" autoplay="autoplay" loop="3"> </video> 属性依次为：音频地址，控制，自动播放，循环播放3次；
- 有序列表标签<ol type=""></ol>，嵌套<li>您好</li> <li>您好</li> 默认顺序是123....，可以根据type来定义
<ol> <li>你好</li> <li>你好</li> </ol>
- 无序列表标签<ul type=""></ul>，嵌套<li>您好</li> <li>您好</li> 默认顺序是.，可以根据type来定义，例："disc"[实心圆点] "circle"[空心圆点] "square"[方形实心点]
- 定义列表（问答形式）标签
<dl> <dt>你是谁？</dt> <dd>我是xxx</dd> </dl>
- 表格标签<table> </table>：属性border--->边框；cellpadding--->间距；cellspacing--->边框间距；colspan--->合并（列）；rowspan--->合并（行）
<table border='1' width="400px"> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> <th>状态</th> </tr> <tr> <td><input type="checkbox"></td> <td>192.168.136.130</td> <td>3021</td> <td>在线</td> </tr> </table>
- lable标签：用于点击文件，使得关联的标签获取光标，例：<label for="username">用户名：</label> --->> <input id="username" type="text" name="user" />
- 缩写标签<abbr title="你好可怜啊啊啊啊啊">a</abbr>，显示a，鼠标放上去会显示title里的内容
- 进度条标签<progress value="1" max="10"></progress>，当前显示占1/10 ，一格进度
- 高亮显示标签<mark>...</mark>
- 时间<time>...</time>
css
1、概念
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2、编写css样式
a、在标签的style属性中写；
b、写在head里面 <style></style>标签中写样式
c、写在单独的css文件，在head里用<link href="css文件路径" type="text/css" rel="stylesheet" />引入
3、css选择器
（1）基本选择方式及优先级
div{ } 等级c（标签共用）
class=”c1“ .c1{ } 等级b （class可重复）
id=”i1“ #i1{ } 等级a （class可重复）
优先级按照abc的顺序排列，另标签上style优先，编写顺序，就近原则
（2）其他选择器
- .c1 .c2 div{ } ---> class="c1"标签下子标签class="c2"标签下的div子标签；
- .c1+p{ } ----> c1标签下一个p标签
- .c1~p{ } ----> c1后面同级p标签
- div>p{ } ----> div标签的子标签p标签
- a[title]{ } ----> 有title的a标签
- .c1[n='alex']{ } ----> 对选择到的c1标签再通过属性再进行一次筛选
4、字体样式
- font-size：字体大小
- font-family：字体格式
- font-weight：加粗
- text-decoration：none 去下划线
- color：颜色
5、div块级标签样式
- height：高度
- width：宽度
- text-align:ceter, 内容水平方向居中
- line-height，内容垂直方向根据标签高度
- background-image：url（） 以图片作为背景
- background-repeat：no-repeat；图片不堆砌
- background-position：图片的位子，可以background-position-x，-y来移动图片
- background-attachment：fixed；固定图片位置
- background-coror：颜色
- overflow：auto（滚动条）；hiden（超出部分隐藏）
- visibilty：hiden，块得隐藏
- display：inline；块---->行
- display：block；行---->块
- display：inline-block；块&行
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
6、div块级标签位置
- float：left&right 让标签浪起来，块级标签也可以堆叠；父标签管不住：<div style="clear: both;"></div>
- position
a、fixed；脱离文档流，固定在页面的某个位置，可以用top、left、right、bottom来调整位置
b、relative；
c、absolute；如果父标签做了定位，就相对于父元素定位，脱离文档流
盒子
1、盒子模型用于基础的网页布局
2、需要用到的一些属性：
- padding：1px(上) 2px(右) 3px(下) 4px(左)；或者（只有两个值1px 2px）[上下、左右]、（三个值1px 2px 3px）[上、左右、下]。用于调整块内内容与块的内边距。
- margin：调整块与块之间的距离，数值方法与padding一样。
- z-index：决定覆盖关系
- display：none；隐藏块
- opcity：0.5；透明度
- font-shadow：10px 10px 10px #ccc；文字阴影
- text-indent：10px；缩进
- border-radius：10px；边框圆角
- background-size：cover；背景铺满
- box-shadow：块得阴影；
