设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 975|回复: 0

[经验分享] Python学习总结【第十七篇】：HTML

[复制链接]
a13698822086

尚未签到
发表于 2017-6-22 07:43:05 | 显示全部楼层 |阅读模式
HTML概述
　　　HTML-Hyper Text Mark-up Language(超文本标记语言),它是一种制作网页的标准语言，相当于定义统一的一套规则，所有人都遵守他，这样就可以让浏览器根据标记语言的规则去解释它。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
　　 DSC0000.gif
DSC0001.gif






#!/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

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-386637-1-1.html 上篇帖子： 前端之HTML 下篇帖子： http 基础
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表