python自定义html_Python 第十二篇：HTML基础

一：基础知识：

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

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！

#超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。

网页的组成：

一个网页一般由两部分组成即：

HTML(Hypertext Markup Language)

和CSS(Cascade Style Sheets)。

HTML负责描述网页的结构和内容(如标题，导航栏等) CSS则负责网页的表现(外观)(如背景颜色，字体样式等)。

HTML文档：

是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。

和|和

二：html的head部分：

#表示是一种规则，支持的浏览器，这是html5的写法

#可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译(如果设置了自动翻译的话)

#定义文档语言编码格式

#自定义页面的刷新时间，即多少秒以后自动刷新

#定义一定时间之后自动访问别的网站

第一个 #标题，用浏览器打开后在浏览器上方显示的

#引用一个图标，在打开后浏览器会显示

#关键字，用于爬虫搜索关键字

#网站描述，包含在网站头部内容里面

#兼容IE浏览器，这是兼容IE7

color:#3c763d;

background-color: red;

}#在页面中写样式，然后在body中可以调用样式

#Script

#引进文件

#写js代码

#这是head部分的结束

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

HTML语言需要一个标准，当我们在第一行指定了的时候，当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。

为什么要使用这个去告诉浏览器呢？？？？？？？？：

DOCTYPE模式：

我们先了解一下DOCTYPE的模式

BackCompat：标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

CSS1Compat：标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

问题产生：

当Netscape4(译注：网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE5修复了IE4 许多的问题(bugs)，但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。

为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时(译注：微软和网景之间的一段竞争)所产生的混乱。

解决方案：

允许网站开发者能够选择他们所熟知的模式。

依然使用旧式规则显示陈旧的网站。

换句话说，所有的浏览器需要提供两种模式：怪异模式(即兼容模式)服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器，而 “DOCTYP切换” 则用于此目的。依照标准：任何一个(X)HTML文档必须拥有一个DOCTYPE(译注：DTD(文档类型定义)是一组机器可读的规则，它们指示 (X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格

产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式：既依据旧式的CSS规则渲染网页。

相反，如果开发者明确知道包含DOCTYPE，他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式：即依据标准的CSS规则渲染网页。

任何新的或未知的DOCTYPE将触发严格模式。

一些页面依据怪异模式而写，但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式，参照下面的浏览器比较图表 。

head部分内容详细：

1、Meta(metadata information)

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

2、页面编码

#指定编码类型为UTF-8

3、刷新和跳转

#指定每5秒刷新一次

#指定1秒之后跳转页面至另一个网页

4、关键字

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

5、描述

例如cnblog里的就是一个描述：

6、X-UA-Compatible

X-UA-Compatible  这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。

7、title：

网页头部信息，如下图所示：

8、link:

网页头部的图标

效果图如下：

9、Style：

1、在当前文件中写Css样式

2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

10、Script：

1、在当前文件中写JS

2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

2、内联标签和块级标签：

三:html的body部分

基础知识

1、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小如下图：

内联标签：a、span、select 等

块级标签：div、h1、p 、h1-->h6等

xxx

#块级标签，占用了一整行

xxx #内联标签，有多少内容占用多少位置

如下:

注：块级标签可以通过 style="display: inline" 设置为内联标签，而内联标签则可以通过style="display: block"变为块级标签

如：

块级标签#h2从块级标签变为内联标签sssss#a从内联标签变为块级标签

2、各种特殊符号:

例如注册符号：

®

3、 

p表示段落，默认段落之间是有间隔的！

4月4日，广州再次遭遇强雷雨袭击，当日下午15时，广州白云机场启动了今年以来第三次航班大面积延误橙色预警，延误1小时以上出港航班最多达106班。截至18：00，天气有所好转，白云机场全力放行航班，总体保障正常有序。

受强雷雨天气影响，4日13时30分白云机场启动了航班大面积延误蓝色预警，15时升级为橙色。截至18:00，延误一小时以上出港航班74班，取消出港航班41班、取消进港航班32班，备降桂林、厦门等地14班。

4、br：表示要换行了

4月4日，广州再次遭遇强雷雨袭击，当日下午15时，广州白云机场启动了今年以来第三次航班大面积延误橙色预警，
延误1小时以上出港航班最多达106班。截至18：00，天气有所好转，白云机场全力放行航班，总体保障正常有序。

5、a标签：

< a href="http://www.autohome.com.cn">

1、target属性，_black表示在新的页面打开

2、锚：锚的作用是类似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置

百度

看第一章 #锚

看第二章 #锚

#id的值对应 看第二章，#是保留的值，#后面是id的值

5英寸夏普/JDI 高色彩饱和度显示屏,1920 x 1080 像素分辨率，441 PPI,高灵敏触摸屏,升级至95% NTSC色域,2015年前销售版本为84%NTSC色域

第二章

#id的值对应 看第二章，#是保留的值，#后面是id的值

hello!

文件链接 #链接到一个内部文件input.html

#显示一个图片

3、H标签：标题字体的大小，h1最大，h6最小

H1

H2

H3

H4

H5

H6

显示效果如下：

H1

H2

H3

H4

H5

H6

4、select 标签：选择的标签，有多选、单选等几种格式，如下:

单选格式的select标签，并设置默认选择的深圳：

北京

上海

广州

深圳

如下：

多显示单选择按钮select标签：

北京

上海

广州

深圳

结果如下：

多显示多选择按钮select标签:

北京

上海

广州

深圳

可以按住ctrl键多选：

可分组select标签：

北京

上海

广州

深圳

泰国

新加坡

马来西亚

结果如下：

四：input系列标签

1、input:checkbox标签-复选框

#设置默认就选择了

结果如下：

2、input:radio标签-单选框，即只能单选，常用语性别选择等场景：

女:

结果如下：

3、input:text & password 输入框：

结果如下：

4、input:button & submit 提交按钮：

#不能在form里将表单提交#和form结合，提交当前的form数据表单到后台

结果如下：

5、file标签-用来提交文件时使用：

6、多行文本框：

结果如下：

7、form表单：

#将form表单以什么方法提交到什么地址，需要使用action指定地址，对象接收到的将是下面的name为区分的列表

主机:

端口:

类型:

用户:

8、label标签：

较好的体验，在点击lable的字体的时候，即可选中与其对应的输入框或选择框：

姓名:

婚否:

结果如下：

9、列表 ul/ol/dl

ul列表在前面自动加“点”，代码如下：

• 111
• 222
• 333

结果如下：

10、ol列表在前面自动加“数字”，代码如下：

1. 111
2. 222
3. 333

结果如下：

11、dl列表自动分组，代码如下：

标题

内容1

内容1

标题2

内容2

内容2

结果如下：

12、表格：

123123123

结果如下：

13、合并单元格：

第一列第二列第三列

h1,h2

h3

a1,b1

a2a3b2b3

结果如下：

14、fieldset标签：

协议请仔细阅读协议内容：签字即认为已经完全阅读本协议

结果如下：

五：CSS基本使用

Title

}#idselect{background-color:olivedrab;color:#3a87ad}#所有id是idselect的将会应用此效果

div{background-color:tan}#所有div都会应用此效果

导入的css样式