python3之HTML、CSS学习

一、HTML

什么是HTML?

HTML是一种用来描述网页的一种语言，是一套规则，被浏览器认识的规则
HTML指的是超文本标记语言（Hyper Text Markup Languag

对于开发者来说

　　学习HTML规则

　　开发后台程序：

　　　　-写HTML文件（充当模板的作用）

　　　　-把从数据库中获取的数据和HTML文件进行渲染（web框架）

编写HTML文件

　　 HTML标签分为

　　　　-自动闭合标签（也就是没有内容的标签如：<br />）

　　　　　　 <meta charset="UTF-8" /> 注意后面有没有斜杠"/"都是真正确的，但是在后面加上"/"为了拥有更长远的保障

　　　　-主动闭合标签

　　　　　　 <title>这是个标题</title>主动闭合标签没有"/"的我们叫做开始标签（开放标签）和后面有斜杠的"/"我们叫做结束标签（闭合标签）

　　 <!DOCTYPE>声明必须是HTML文档的第一行，它不属于HTML标签，它是告诉web浏览器关于页面使用哪个版本的HTML进行编写的指令

　　 HTML标签可以拥有属性，属性总是写在开始标签里面，属性总是以名称/值对的形式出现的，如name="value"。

标签的属性

写在head标签元素里面的一些标签

　　　　注意：<head>content</head> zaihe，说的属性一般都是写在开始标签里面<head name="value>

每一个标签都可以嵌套其他的标签

所有的标签可以分为：

　　块级标签：div标签, H系列标签， p标签

　　行内标签：span标签

块级标签就是不管写多少内容它都是占整整的一行。

行内标签就是写多少内容就占据这行多少位置。

后面会学到的可以把块级标签变为行内标签。

一些写在head标签元素里面的常用标签介绍

 　<meta />标签一般起到编码，跳转，刷新，关键字，描述，IE兼容等作用

　　　　　　刷新：<meta http-equiv="refresh" content="3"/>  #有这个就表示这个页面每三秒就刷新一次
　　　　　　跳转：<meta http-equiv="refresh" content="3; url=http://www.oldboyedu.com"/>  # 当访问到这个页面的时候三秒后跳转到后面url的网页
　　　　　　关键字：<meta name="keywords" content="LOL" />  # 搜寻关键词为LOL提供给搜索引擎等关键字
　　　　　　编码：<meta charset="UTF-8"/>  # 告诉浏览器这个页面使用的编码格式
　　　　　　IE兼容：<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />  # 兼容IE浏览器的版本这个表示兼容IE9，IE8

　　<title>标签就是打开一个网页的标签的名称
　　<link /> 标签定义文档与外部资源的关系
　　　　　 <link rel="shortcut icon" href="1.jpg">  # href就是你要显示图标的位置
　　　　　 <link rel="stylesheet" type="text/css" href="theme.css" />  # 最常见的用途是链接样式表

　　<style>标签就是用来定义css样式信息的地方

一些写在body标签元素里面的标签常用的标签介绍

　　图标：就是当我们需要空格大于号小于号的时候或这个多个空格的时候我们不能直接打空格键或者大小于号符号

　　　　　　  不断行的空白 > 大于号或显示标记 < 小于号或显示标记

　　　　　　记得后面有分割符号这个特殊字符可以到网上查找或http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

　　p标签：定义的是一个段落。会自动在其前后创建一个空白（块级标签、主动闭合标签）
　　br标签：表示的是换行（块级标签、自动闭和标签）
　　div标签：是一个白板（块级标签、主动闭合标签）
　　H标签：文字加大加粗  <hx><h>  x的取值范围是1-6 1表示的是最大一次类推6最小（块级标签、主动闭合标签）
　　span标签：白板（行内标签、主动闭合标签）
　　form标签是用于提交input标签里面的内容的
　　input系列标签：input标签里面的内容用于提交到后台的数据，（行内标签、自闭和标签）
　　input标签的一些属性使用：
　　　　输入框
　　　　　　　<input type="text" name="username" value="test"/>
　　　　　　　　　上面会显示一个输入框，同时name属性常用后台数据的提取，value属性表示这个输入框直接有默认值为test，这个可以在输入框中可以删除。
　　　　　　　<input type="password" >
　　　　　　　　　　这个是输入框不会显示你输入的值，就是我们登录网页是的输入密码一样输入值不可见，上面的属性在这里面也适用。
　　　　　　　还有一个属性就是placeholder这个只有在新版本的浏览器上才会有效，就是输入框中提示我们输入什么值，当我们输入的时候这个提示就没了。
　　　　　　　效果图：

　　　　表单提交按钮
　　　　　　<input type="submit" value="提交"/>
　　　　　　这个是用来提交表单中的数据是配合form标签把数据提交到后台。value属性是是在按钮上显示文字
　　　　　　效果图：

　　　　　　　　　　　　按钮

　　　　　　<input type="button" value="确认" />
　　　　　　　　这个就是一个按钮，value就是按钮显示的字
　　　　　　这个效果图和上面的一样只是功能不一样而已
　　　　单选框　　
　　　　　　<input type="radio" name="test" checked="checked" value='1'/>
　　　　　　上面就是我们有时候在网页上填写信息是有一个如性别的选项，当name值一样的时候表示这个选项是唯一选项，而checked属性表示的是默认选该项，如果都有cheched那么以最后一个为准。value是用来后来数据获取的
　　　　　　效果图：

　　　　复选框　
　　　　　　<input type="checkboox" name="test" checked="checked" value="1"/>　
　　　　　　这个就是我们选择兴趣一样可以有多个选项，checked也是表示默认这个选择，name属性可以批量获取数据。value和上面的一样
　　　　　　效果图：

　　　　文件上传
　　　　　　<input type="file" />
　　　　　　这个就上上传文件的时候使用的，要想上传form标签一定要有属性值enctype="multipart/form-data"
　　　　　　效果图：


　　　　重置按钮
　　　　　　<input type="reset" > 重置这个只会重置同一个form标签元素里面的值
　　文本框(这个是主动闭合标签，行内标签)
　　　　<textarea name="test">content<textarea>
　　　　这个标签就是我们在看博客的时候看到的评价框一样。其中content表示的是默认写的一些数据，name用于后台数据的获取
　　下拉框（主动闭合标签，行内标签）
　　　　<select name="test" multiple="multiple" size='2'>
　　　　　　<optgroup label="安徽">
　　　　　　　　<option selected="selected" value='1'>合肥</option>
　　　　</select>
　　　　select里面的属性中的name用于后台获取数据，multiple表示的这个下拉框可以多选，size表示的下拉框显示几个值
　　　　但是有的浏览器设置不一样所以size设置一样的值在有的浏览器上显示的也不一样
　　　　optgroup表示的是一个分组，这个是不可选的
　　　　option里面的selected表示的是默认选择这个，value是为了后台数据的提取。
　　　　效果图：

　　form标签（主动闭合标签）
　　　　<form action="url" method='post' enctype="multipart/form-data"></form>
　　　　这个标签主要是用于把input标签、select标签、文本框中的数据提交到后台的。action属性是把数据提交的地址，method是表示提交的方式，
　　　　enctype="multipart/form-data"这个主要是针对文件上传的，当没有这个的时候文件就不会上传到后台。
　　a标签()
　　　　1：跳转<a href="url" target="_blank"></a>
　　　　　　href表示的是要跳转的url，
　　　　　　target属性等于 "_blank"表示在新的页面打开这个url
　　　　2：锚 （就是网页上的目录点那一章节它就会跳到该页相应的位置）
　　　　　　<a href='#i1'>第一章</a>
　　　　　　<div id='i1'>content</div>
　　　　　　上面就是当我们给这个设置为#i1那么当我们点击这个的时候，就会跳转到id等于i1的那个标签
　　img标签
　　　　这个标签主要是页面插入图片
　　　　<img src='location' alt='content' title='content1'>　　　　
　　　　　　lsrc: location代表的是图片存放的位置
　　　　　　alt: content代表当我们到指定的位置没有找到图片显示的内容
　　　　　　title：content1当我们把鼠标移到插入的图片上的时候就会显示该信息
　　列表
　　　　<ul>
　　　　　　<li>content</li>
　　　　</ul>
　　　　<ol>
　　　　　　<li>content</li>
　　　　</ol>
　　　　上面的列表的不同之处是ul标签以点开头的列表，而ol标签是以数字开头的列表
　　　　效果图：

　　<dl>
　　　　<dt>水果</dt>
　　　　　　<dd>西瓜</dd>
　　　　　　<dd>草莓</dd>
　　　　<dt>蔬菜</dt>
　　　　　　<dd>青菜</dd>
　　　　　　<dd>西红柿</dd>
　　</dl>
　　效果图：

　　表格
　　　　table标签
　　　　<table border='1'>
　　　　　　<thead>  
　　　　　　<tr>
　　　　　　　　<th>content</th>
　　　　　　　　<th>content2</th>
　　　　　　</tr>
　　　　　　</thead>
　　　　　　<tbody>
　　　　　　<tr>　　
　　　　　　　　<td colspan='num'>content</td>
　　　　　　　　<td rowspan='num'>content</td>
　　　　　　</tr>
　　　　　　</tbody>
　　　　</table>
　　　　table标签里面的元素border表示给表格加上一个框框
　　　　thead表示的是表头
　　　　tbody表示的是表格的内容
　　　　colspan表示合并相邻的列数
　　　　rowspan表示合并相邻的行数
　　　　效果图：

　　label标签
　　　　该标签主要是和input标签一起使用点击该标签使之关联的input标签出现光标
　　　　<label for='username'>content</label>　　
　　　　<input id='username' type='text'/>
　　　　使label的for属性值和input的id属性值一样，就可以使之关联起来。
　　fieldset标签
　　　　<fieldset>
　　　　　　<legend>content</legend>　　
　　　　</fieldset>
　　　　上面显示出来的就是一个框框不过content就是镶嵌在框框的线上面内容　　
　　　　效果图：


　　上面就是一些日常能够用到的一些HTML标签

二、css

css是英文Cascading Style Sheets的缩写，称为层叠样式表，用来美化页面的

有三种存在方式：元素内联、页面嵌入和外部引入

在标签中使用style='key1:value1;key2:value2;...'
页面中嵌入<style type='text/css'></syule>
外部引入css文件

在标签上设置style属性：

　　background-color: #2459a2 这个是表示设置背景颜色

　　height: 48px；这个是表示设置高度

　　关于更多的style属性可以在网上查看相关的信息

编写css样式：

　　第一种是写在标签里面的style属性

　　第二种是在head元素里面的style标签中写样式

　　　　id选择区　　

<style>
    #i1{
        background-color: #2459a2;
        height: 48px;
    }
</style>

　　　　　　调用的方式为在标签的属性中写上id="i1"

　　　　class选择器

<style>
    .i1{
        background-color: #2459a2;
        height: 48px;
    }
</style>

　　　　　　调用的方式为在标签的属性中写上class="i1,这个在日常中推荐使用这种方式。

　　　　标签选择器

<style>
    div{
        background-color: #2459a2;
        height: 48px;
    }
</style>

　　　　　　这个表示给所有的div标签设置这个样式

　　　　层级选择器

<style>
    .c1 .c2 div{
        background-color: #2459a2;
        height: 48px;
    }
</style>

　　　　　　每一个都是通过空格来隔开，上面的表示给id='c1' 标签下面找 id='c2'标签，再从这个标签里面给div标签设置这个样式

　　　　组合选择器

<style>
    #c1,.c2,div{
        background-color: #2459a2;
        height: 48px;
    }
</style>

　　　　　　上面通过英文逗号(,)隔开。这个表示给class='c1',id='c2',div标签设置上这个样式

　　　　属性选择器

<style>
    .c1[name='test']{
        background-color: #2459a2;
        height: 48px;
    }
</style>

　　　　　　上面表示找id='c1'的标签，并且再找到属性name='test'的标签给这个标签设置这个样式

　　　　css样式的优先级为：

　　　　　　1、写在标签上的style优先

　　　　　　2、编写的顺序：就近原则(谁离得近就是谁生效)

　　　　css样式可以单独写在一个文件，这样通过调用其他的都能使用

　　　　　　调用的方式为：写在head标签里面的　　　　　　　　　　<link rel="stylesheet" href="commons.css" />

　　边框的设置：
　　　　- 宽度，样式，颜色 (border: 4px dotted red;)
　　　　# border(边框): 4px(边框的线条的宽度) dotted(边框为虚线 solid:为实线) red(边框的颜色)

　　　　下面是一些关于css里面写的一些样式

　　　　　　height：高度百分比
　　　　　　width：宽度像素，百分比
　　　　　　text-align:ceter：水平方向居中
　　　　　　line-height：垂直方向居中，根据标签高度
　　　　　　color：字体颜色
　　　　　　font-size：字体大小
　　　　　　font-weight：字体加粗

　　float属性（也叫浮动）

　　　　使设置的标签产生浮动的效果，脱离标签在页面原本的页面的标准输出

<div style=" 20%;background-color: red;float: left">1</div>
<div style=" 20%;background-color: black;float: right">2</div>

上面的效果

　　　　把原本的块级标签变为了行内标签，并设置了标签浮动的位置

　　display属性

　　　display: none; -- 让标签消失,也就是含有这个属性的标签让它没有效果。
　　　display: inline; 
　　　display: block;
　　　display: inline-block;
         具有inline,默认自己有多少占多少
         具有block，可以设置高度，宽度

　　　　行内标签：无法设置高度，宽度， 
　　　　块级标签：设置高度，宽度，
　　　　上面所说的行内标签和块级标签指的是原本标签的所属的属性，不是后面通过的display改变的