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）

　　　　　　- 符号标签：&nbsp--->空格; &gt--->右侧尖括号; &lt---->左侧尖括号标签;

　　　　　　- 换行标签：<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：块得阴影；