Python学习总结【第十七篇】：HTML

HTML概述

　　HTML-Hyper Text Mark-up Language(超文本标记语言),它是一种制作网页的标准语言，相当于定义统一的一套规则，所有人都遵守他，这样就可以让浏览器根据标记语言的规则去解释它。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

#!/usr/bin/env python
# encoding: utf-8

"""
@version: v1.0
@author: 杩栋胜
@license: Apache Licence
@contact: 1455975151@qq.com
@site: http://madsstudy.blog.51cto.com/
@software: PyCharm
@file: html_server.py
@time: 2016/8/7 10:43
"""

import socket


def handle_request(client):
    """处理客户端请求"""
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n", encoding="utf-8"))
    f = open('index.html', 'rb')
    data = f.read()
    f.close()
    client.send(data)


def main():
    sk = socket.socket()
    sk.bind(("127.0.0.1", 80))
    sk.listen(5)

    while True:
        connection, address = sk.accept()
        handle_request(connection)
        connection.close()

if __name__ == "__main__":
    main()

html_server.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html学习</title>
</head>
<body>
杩栋胜
</body>
</html>

index.html

HTML文档树

网页组成

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

HTML(HTML-Hyper Text Mark-up Language)：负责描述网页的结构和内容（如标题，导航栏等）
CSS（Cascade Style Sheets）：负责网页的表现（外观）（如背景颜色，字体样式等）

<head>和</head>之间的内容，是元信息和网站的标题元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容，是浏览器呈现出来的，用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素

HTML实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

注：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

DOCTYPE 声明了文档类型，即告诉浏览器使用什么样的html或xhtml规范来解析html文档

DOCTYPE模式：

我们先了解一下DOCTYPE的模式

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

问题产生：

　　当Netscape4（译注：网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了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说明

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

1、页面编码
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta charset="UTF-8"> 

2、刷新和跳转

<meta http-equiv="refresh" content="5">  <!--指定每5秒刷新一次-->
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/madsnotes/" /> <!--指定1秒之后跳转页面至另一个网页-->

3、关键字
关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。
<meta name="keywords" content="我的学习Blog">

4、描述
例如cnblog里的就是一个描述：
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

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

title

定义HTML文档的标题

效果图：

Link

网页头部的图标

<link rel="shortcut icon" href="favicon.ico">

效果图：

<link rel="stylesheet" href="css/css_model.css">  # 导入css，类似导入Python模块

Style

两种方式引入CSS样式：

方法1：当前文件中定义CSS样式

方法2：在其他文件中写CSS样式，然后导入（类似Python模块导入）

Script

两种方式引入JS样式：

方法1：当前文件中定义JS样式

方法2：在其他文件中写JS样式，然后导入（类似Python模块导入）

body部分

基础知识

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

2、特殊符号特殊处理

举例来说<h1>是标题标签，如果我想输出<h1>这个字符串，而不是想获取<h1>的样式怎么办呢？
正常情况下如果直接在html文件里输入<h1>当有浏览器在读取的时候就会讲<h1>解释,页面将无法显示，所以特殊的标签需要特殊处理
所以特殊符号有自己的定义更多请看连接：网页特殊符号HTML代码大全

常用标签

1、<p></p>标签：段落标签

2、<br/>标签：换行标签

3、<a></a>标签：跳转和锚

跳转：

<a>mds Blog</a>    # 默认只显示文字
<a href="http://www.cnblogs.com/madsnotes/">mds Blog</a>   # 添加跳转，点击后在当前页打开指定链接
<a target="_blank" href="http://www.cnblogs.com/madsnotes/">mds Blog</a>   # 添加跳转，点击后在新的标签页打开制定了链接

锚点：

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

<a href="#a2">
        书签
    </a>
    <!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
    <!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
    <div id="a1" style="height:700px;">
        mark_1
    </div>

    <div id="a2" style="height:700px;">
        mark_2
    </div>

上面的代码中，如果点击了书签之后，那么就会跳转到id=a2的书签的位置！

<!--锚点-->
<a href="#i1">绝世武神 第一章<br /></a>
<a href="#i2">绝世武神 第二章<br /></a>
<a href="#i3">绝世武神 第三章<br /></a>


<div id="i1" style="height: 500px">第一章内容</div>
<div id="i2" style="height: 500px">第二章内容</div>
<div id="i3" style="height: 500px">第三章内容</div>

案例2：锚点书签

4、H标签

即标题标签，代码如下：

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

效果：

H标签默认从1-6依次减小，但是还可以通过css重新设置字体大小，例如：

5、select标签

效果1：

代码：

<select>
    <option value="1" selected="selected">上海</option>
    <option value="2">北京</option>
    <option value="3">广州</option>
    <!--这里默认是上海因为selected="selected" 这里设置了默认的！-->
</select>

效果2：

代码：

<select size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

效果3：可以进行多选

代码：

<select multiple="multiple" size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

效果4：可以进行分组

代码：

<select>
    <optgroup label="河北省">
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遥</option>
    </optgroup>
</select>

三级联动代码

籍贯：<select name="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">广州</option>
                <option value="4">河北</option>
            </select>
                <select name="quxian">
                <option value="1">海淀</option>
                <option value="2">昌平</option>
                <option value="3">平谷</option>
            </select>
                <select name="jiedao">
                <option value="1">上地街道</option>
                <option value="2">北下关街道</option>
                <option value="3">香山街道</option>
            </select>

效果：

6、input标签

input:checkbox标签-复选框

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--这里加一个标识checked="checked，为默认选择"-->

效果图：

input:radio标签-单选框

<!--第一中情况不互斥    -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>

效果图：

input:text & password 输入框

<!--标准的输入框-->
<input type="text"/>
<!--密码的输入框（输入的内容是保密的）-->
<input type="password"/>

效果图：

input:button & submit & reset 提交按钮

<input type="button" value="提交"/>
<input type="submit" value="提交"/> 
<input type="reset" value="重置"/>

效果图：

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

<input type="file"/>

效果图：

提交文件时添加enctype项：<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">

7、多行文本框

<textarea style="height: 100px;width: 100px;"></textarea>

效果图：

8、form表单

<form>
    <p>用户名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <input type="submit" value="提交"/>
    <input type="button" value="按钮"/>
    <!--这里按提交才有反映，submit是用来提交当前的表单的，当然可以有多个表单-->
    <!--但是，这个submit需要写入表单内，那么提交的时候是提交的当前表单-->
</form>

效果图：

<form action="www.baidu.com" method="get">
    <!--这里action是告诉html提交到那里-->
    <!--method是通过什么方法去action指定的地址-->
    <p>
        用户名:<input type="text" name="username"/>
        <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
        <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        密码:<input type="password" name="password"/>
                <!--这里的name="username" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
        <!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        部门:<select name="department">
                    <option value="1">CTO</option>
                    <option value="2">DBA</option>
        <!--这里在选择之后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
    </select>
    </p>
    <input type="submit" value="提交"/>

</form>

效果：

9、label标签

第一种：在不使用label标签的时候，我们只能点进框体里去，否则就不能输入或选择，这样用户体验不是很好

<div>
    <h1>Label标签</h1>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>

效果：

第二种：使用label标签，显示效果，这里我选择文字的时候也会进入到相应的框体，他类似一个跳转

<div>
    <label for="name_1">
        姓名:
        <input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>

效果（体验较好）：

10、列表 ul/ol/dl

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

<ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ul>

效果：

ol列表在前面自动加"数字"，代码如下：

<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

效果：

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

<dl>
    <dt>河北省</dt>
    <!--dt是标签，dd是标签里的内容-->
        <dd>石家庄</dd>
        <dd>衡水市</dd>
    <dt>山东省</dt>
    <!--dt是标签，dd是标签里的内容-->
        <dd>济南市</dd>
        <dd>烟台市</dd>
</dl>

效果：

11、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <!--border这里是加上边框-->
    <thead>  <!--表头信息-->
        <tr>
            <th>ID</th>           <!--th与td的区别：th会自动加粗-->
            <th>工单类型</th>
            <th>工单简介</th>
            <th>审批人</th>
            <th>执行人</th>
            <th>状态</th>
            <th>详情</th>
        </tr>
    </thead>
    <!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
    <tbody>    <!--表体信息-->
        <tr>
            <td>10074</td>
            <td>DNS需求</td>
            <td>神之翼安卓服支付回调域名申请</td>
            <td>张xx</td>
            <td>褚xx</td>
            <td>业务结束</td>
            <td>查看</td>
        </tr>
        <tr>
            <td>10043</td>
            <td>ACL需求</td>
            <td>神之翼研发访问版本测试服</td>
            <td>张xx</td>
            <td>褚xx</td>
            <td>业务结束</td>
            <td>查看</td>
        </tr>
        <tr>
            <td>10042</td>
            <td>ACL需求</td>
            <td>神之翼研发访问公司FTP服务器</td>
            <td>张xx</td>
            <td>褚xx</td>
            <td>业务结束</td>
            <td>查看</td>
        </tr>
    </tbody>
</table>
</body>
</html>

效果：

合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <!--border这里是加上边框-->
        <thead>
            <tr>
                <th colspan="6" align="center">运维值班组</th>
                <!--这里colspan，就告诉html解析的时候占3个格-->
            </tr>
        </thead>
        <tbody>
            <!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
            <!--如果想加多个行就加多个tr即可-->
            <tr>
                <td rowspan="4">标准工单</td>
                <td>工单名称</td>
                <td>审批人</td>
                <td>执行人</td>
                <td>执行时间</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>公网IP需求</td>
                <td>张xx </td>
                <td>栾xx </td>
                <td> 1 h </td>
                <td>申请 </td>
            </tr>
            <tr>
                <td>实体机申请</td>
                <td>张xx </td>
                <td>张xx </td>
                <td> 2 h </td>
                <td>申请 </td>
            </tr>
            <tr>
                <td>交换机申请</td>
                <td>张xx </td>
                <td>马xx </td>
                <td> 2 h </td>
                <td>申请 </td>
            </tr>
                <tr>
                <td rowspan="3">临时工单</td>
            </tr>
            <tr>
                <td>OS安装需求</td>
                <td>张xx </td>
                <td>栾xx </td>
                <td> 1 h </td>
                <td>申请 </td>
            </tr>
                <tr>
                <td>RAID操作需求</td>
                <td>张xx </td>
                <td>栾xx </td>
                <td> 1 h </td>
                <td>申请 </td>
            </tr>
        </tbody>
    </table>

</body>
</html>

效果：

12、fildset标签

<fieldset>
    <legend>协议</legend>
请仔细阅读协议内容：
</fieldset>

效果：

练习题1：

要求：
第一个页面：协议，选择【我同意】进入注册页面
第二个页面：用户名、密码、重复密码、省份（下拉菜单）、性别、爱好（多选），使用label来修饰。

对于路径：

/ 网站根目录
./ 当前目录(相当于什么也不加)
../ 父母路
../../ 父目录的父目录

资料：

HTML菜鸟教程：http://www.runoob.com/html/html-tutorial.html

posted @ 2016-07-09 16:01 每天进步一点点！！！阅读(413) 评论(0) 编辑收藏举报

刷新页面返回顶部

每天进步一点点！！！

Python学习总结【第十七篇】：HTML

HTML概述

HTML实例

head说明

body部分

公告