HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器解释区别

  1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  2. CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

Doctype

Doctype  告诉浏览器使用什么样html或xhtml规范来解析html文档

这个属性被浏览器识别并使用，但是如果你页面没有Doctype声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

Meta(metadata  information)

提供有关页面元信息，例如：页面编码，刷新，跳转，针对搜索引擎和更新频度的描述的关键词

页面编码（告诉浏览器是什么编码）

< meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta charset="UTF-8">

刷新和跳转

< meta http-equiv="Refresh" Content="30">

< meta http-equiv="Refresh" Content="5; Url=http://www.autohome.com.cn" />

关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

<!DOCTYPE html>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta http-equiv="Refresh" content="5;Url=http://www.baidu.com"/>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hello</title>

</head>

<body>

<h1>hello world!!</h1>

</body>

</html>

 

备注：

<标签> </标签>    正常成对出现

<标签/>                这是闭包标签

html标签解释

网页头部信息

<title> </title>

imput 系统列标签type:

　　text

　　password

　　raddio      #多个单选择要实现点一个，另一个不生效。每一个 raddio在name属性 要设置一样值。

　　男<input type="radio" name="gender" value="1" />
　　女<input type="radio" name="gender" value="0"/>

　　checkbox

　　file

　　button 按钮

　　subimit 提交

　　reset 　重置

lable 标签可以 定义控件标注。如果您在label内点文本，就会触发些控件，浏览器会自动将焦点转到标签相关表单控件上。

select  下拉列表

<select>

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="opel">Opel</option>

  <option value="audi">Audi</option>

</select>
    <select>

                    <option>上海</option>

                    <option>北京</option>

                    <option>广州</option>

                </select>

                <select multiple size="10">

                    <option>上海</option>

                    <option>北京</option>

                    <option>广州</option>

                </select>

                <select>

                    <optgroup label="AAA">

                       <option>上海</option>

                        <option>北京</option>

                    </optgroup>

                    <optgroup label="BBB">

                       <option>广州</option>

                    </optgroup>

                </select>

            </p>

textarea 多行文本

form 要提交内容放置的form标签中 （每个标签都要有name属性才可以提交）

　　- action #输入提交网址 关键要记住 action中输入网址后面 要加一下 / 这样在提交表单时会有用

　　- methon  #get/post

　　- enctype ==> 上传文件添加  enctype="multipart/form-data"

select ,textarea 也可以提交数据

file 文件上传时 在 form 标签中要有 enctype="multipart/form-data"

ul /ol /dl 

ul 标签无序列表。

li 标签定义列表项，有序列表和无序列表中都 使用<li>

    <ul>

        <li>1dfsdfs</li>

        <li>2dfsdfsdf</li>

        <li>3dfsdfsf</li>

    </ul>

ol 有序列表

    <ol>

        <li>1dsfsdf</li>

        <li>2fdsfsdfsdf</li>

        <li>3dfsfsdfsdf</li>

    </ol>

dl , dt , dd

<dl>

   <dt>计算机</dt>

   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>

   <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

<dl>标签定义了定义列表

<dl>标签用于结合<dt>( 定义列表中项目）和 <dd>（描述列表中项目）

table

表格应用，及单元格合并

<body>

    <table border="1">

        <tr>

            <th colspan="3">标题一</th>

            <th>标题二</th>

        </tr>

        <tr>

            <td>内容一</td>

            <td>内容二</td>

            <td>内容二</td>

        </tr>

        <tr>

            <td>内容一</td>

            <td rowspan="2">内容二</td>

            <td>内容二</td>

        </tr>

        <tr>

            <td>内容一</td>

            <td>内容三</td>

            <td>内容四</td>

        </tr>

    </table>

iframe, filedset

div ,span

CSS 部分

　　存放位置 ：

　　　　单独css文件 低 

备注：通过链式引入html文件中    <link href="mystyle.css" rel="stylesheet" type="text/css"/>

　　　 html 头部 

　　　备注：在<head>

　　　　　　　　　　　<style>  写入CSS样式</style>

</head>

　　　　标签属性　　高


　　最牛的 color:red ! important;   设置样式中  ! important 后可以实现优先级不受影k响。

标签选择器 div {

}

ID选择器 #idname (使用少）

class 选择器 .classname

层叠选择器  .c2 div p a 或 .c2 div p .c3

组合选择器  .c2,.c3,.c4

属性选择器  ：标签中可以实现自定义属性 ，演示如下

.c1[alex='a']{

color:red;

}

<body>

<div class ="c1" alex='a'>1<div>

<body>

例子说明 ：

.c1 {

height :150px;

width:100%;

}

高度没有100%随内容增加增加。 宽度有100% 占满。

例子：表示内层占 500px 20% 和 80%

<div style="width:500px;">

    <div style="width:20%;"></div>

    <div style="width:80%;"></div>

</div>

备注：要利用width百分比，要在最外面，添加一个div定义一个固定宽度值（例如1024px） ,内层width

百分比在缩少时不会变形，造成内层压缩在一起。

——————————————————————————————

透明度：两种表示形式

1、opcity:0.6

从0 至 1

2、backround:rgba(0,0,0,.6)

————————————————————————————————

CSS中的ID选择器和类选择器区别及用法

其一：在同一个页面内，

不允许有相同名字的id对象出现，

ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次，不过就不符合

W3C标准了，那页面也就不是标准页面喽~，咱们的目的不就是为了做标准的页面么

，所以建议大家不要在同一个html页面中多个标签拥有共同的ID)，就像在你所处的

环境中，你只有一个ID(身份证)，不可能重复！相信大家也能看出来，ID选择器更

具有针对性

但是允许相同名字的class

这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同

的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举

花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢~呵呵，和

ID选择器的用法类似，只不过把id换做class

其二：当页面中用到js或者要动态调用对象的时候，要用到id

border 加边框 上右下左

display :none 表示不显示

边距：

margin 外边距 （ 本身不增加）

padding 内边距 （本身增加）

没有添加clear:both 时出现 子走出父

注意当父亲框没有设置高度时，在浮动时 让孩子不走出 父亲 要在最好 添加 一下 <div style="clear:both;"></div>

显示效果如下

position :

　　fixed : 固定位置 针对 窗口如果窗口移动，位置也固定不变 （top left right  bottom 来定）

　　absolute ： 定义位置：当滚动就移动

　　relative ：结合 absolute 时，absolute写在 relative 内就相对  relative  进行定位。

　　===》z-index 数字大，靠上。

　　===》页面布局 通过 fix 固定

————————————————————————————————————————————————————

子div 样式浮动后造成 超出父div 解决方法：

添加清除样式

        .clearfix:after{

            content: '.';

            clear: both;

            display: block;

            visibility: hidden;

            height: 0;

        }

完整例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .c1:hover{

            background-color: #2459a2;

        }

        .c2:before{

            content: '666';

        }

        .c2:after {

            content: '777';

        }

        .left{

            float: left;

        }

        .item{

            background-color: red;

        }

        .clearfix:after{

            content: '.';

            clear: both;

            display: block;

            visibility: hidden;

            height: 0;

        }

    </style>

</head>

<body>

    <div class="c1">ddd</div>

    <div class="c2">888</div>

    <div style="background-color: red" class="clearfix">

        <div class="left" style="height: 100px;background-color: green">1</div>

        <div class="left">2</div>

    </div>

</body>

</html>

Python 【第七章】：Html 和 CSS的更多相关文章

  1. 简学Python第七章__class面向对象高级用法与反射

    Python第七章__class面向对象高级用法与反射 欢迎加入Linux_Python学习群  群号:478616847 目录: Python中关于oop的常用术语 类的特殊方法 元类 反射 一.P ...

  2. <automate the boring stuff with python>---第七章 正则实例&正则贪心&匹配电话号码和邮箱

    第七章先通过字符串查找电话号码,比较了是否使用正则表达式程序的差异,明显正则写法更为简洁.易扩展.模式:3 个数字,一个短横线,3个数字,一个短横线,再是4 个数字.例如:415-555-4242 i ...

  3. 流畅的python第七章函数装饰器和闭包学习记录

    本章讨论的话题 python如何计算装饰器句法 python如何判断变量是不是局部的(通过函数内部是否给变量赋值过来判断是否是局部变量) 闭包存在的原因和工作原理(闭包是一种函数,它会保留定义函数时存 ...

  4. Python第七章（北理国家精品课 嵩天等）

    7.1文件的使用 1.1文本类型 文本文件:由单一特定编码组成的文件,如.txt 二进制文件:如.png,.avi 1.2文件的打开和关闭 打开-操作-关闭 <变量名> = open(&l ...

  5. python第七章：常用模块--小白博客

    yagmail模块 python标准库中发送电子邮件的模块比较复杂,因此,有许多开原的库提供了更加易用的接口来发送电子邮件,其中yagmail是一个使用比较广泛的开原项目,yagmail底层依然使用了 ...

  6. Python第七章-面向对象

    面向对象编程基础 一.面向对象概念 1.1 什么是面向过程 ​ 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了. ​ 生活中的的例子举例. 1.2 ...

  7. Python第七章-面向对象高级

    面向对象高级 一. 特性 特性是指的property. property这个词的翻译一直都有问题, 很多人把它翻译为属性, 其实是不恰当和不准确的. 在这里翻译成特性是为了和属性区别开来. 属性是指的 ...

  8. [Python学习笔记][第七章Python文件操作]

    2016/1/30学习内容 第七章 Python文件操作 文本文件 文本文件存储的是常规字符串,通常每行以换行符'\n'结尾. 二进制文件 二进制文件把对象内容以字节串(bytes)进行存储,无法用笔 ...

  9. 《python for data analysis》第七章，数据规整化

    <利用Python进行数据分析>第七章的代码. # -*- coding:utf-8 -*-# <python for data analysis>第七章, 数据规整化 imp ...

  10. CSS3秘笈：第七章

    第七章  margin.padding和border 1.盒模型:四个属性: (1)padding:内容与其边框线之间的空间. (2)border:盒子周围的直线 (3)background-colo ...

随机推荐

  1. mariadb 最新精简压缩版 win64 解压即用

    包含版本: mariadb-10.1.18-winx64 mariadb-5.5.53-winx64 32的没有压缩,估计用的人也比较少. 网盘链接: http://pan.baidu.com/s/1 ...

  2. cookie存储对象信息

    最近看到某公司某项目中用于保存多个城市信息到cookie中的方法,该方法的逻辑是按时间顺序记录最近访问过的三个城市的名字及id,逻辑包插入与含排重.插入与排重的代码如下: 1 2 3 4 5 6 7 ...

  3. ngrok

    为什么要使用ngrok?/ngrok 作为一个Web开发者,我们有时候会需要临时地将一个本地的Web网站部署到外网,以供它人体验评价或协助调试等等,通常我们会这么做: 找到一台运行于外网的Web服务器 ...

  4. VBA常用代码解析

    031 删除工作表中的空行 如果需要删除工作表中所有的空行,可以使用下面的代码. Sub DelBlankRow() DimrRow As Long DimLRow As Long Dimi As L ...

  5. Android中使用AsyncTask实现文件下载以及进度更新提示

    Android提供了一个工具类:AsyncTask,它使创建需要与用户界面交互的长时间运行的任务变得更简单.相对Handler来说AsyncTask更轻量级一些,适用于简单的异步处理,不需要借助线程和 ...

  6. Android 手机卫士--绑定sim卡序列号

    现在开始具体 处理每一个导航页面的逻辑,首先看第二个导航页 本文地址:http://www.cnblogs.com/wuyudong/p/5949775.html,转载请注明出处. 这里需要实现绑定s ...

  7. JSPatch来更新已上线的App中出现的BUG(超级详细)

    JSPatch的作用是什么呢? 简单来说:(后面有具体的操作步骤以及在操作过程中会出现的错误) 1.iOS应用程序上架到AppStore需要等待苹果公司的审核,一般审核时间需要1到2周.虽然程序在上架 ...

  8. Highchart基础教程－图表的主要组成

    一.Highchar图表的主要组成 1.图表标题(Title):图表包含标题和副表题(subTitle,可选). 2.坐标轴(Axis):包括x轴(xAxis)和y轴(yAxis).多个数据列可以共同 ...

  9. React Native之坑总结（持续更新）

    React Native之坑总结(持续更新) Genymotion安装与启动 之前我用的是蓝叠(BlueStack)模拟器,跑RN程序也遇到了一些问题,都通过搜索引擎解决了,不过没有记录. 但是Blu ...

  10. Centos 安装配置gerrit

    关闭selinux,不然nginx的反向代理会报错connect() to 127.0.0.1:8080 failed (13: Permission denied) while connecting ...