您的位置: 首页  >  文章  >  Python自动化运维 - day12 - HTML基础

Python自动化运维 - day12 - HTML基础

分类: 文章 • 2025-01-24 12:15:52

Python自动化运维 - day12 - HTML基础

前奏

分析socket请求模式,这里创建简单的socket服务器，使用浏览器来充当客户端来进行访问

import socket

sock = socket.socket()

sock.bind(('127.0.0.1',8080))

sock.listen(5)

while 1:
    conn,addr = sock.accept()

    while 1:
        data = conn.recv(1024)    # 使用浏览器访问,获取浏览器发过来信息
        print('data:',data) # 浏览器发送的http报文信息
        f = open('index.html')   # 由于html的内容可能不是简单的几行，所以写到文件中来读取
        re_data = f.read()
        conn.send(bytes("HTTP/1.1 201 OK\r\n\r\n%s" % re_data,"utf8"))  # 构建HTTP应答报文,并发送数据

分析浏览器发送的http报文信息如下

GET / HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: zh-CN,zh;q=0.8

格式如下：

'请求行'
'请求头'  # 可以有多行
'请求空行'  # 必须有空行开分割
'请求主体'

HTML基础

通过标签来组合各个元素，严格来说html不是一种编程语言，而是一种标记语言(markup language)，使用标记标签来描述网页，没有逻辑控制语句的概念。

  • 渲染顺序：从上到下,从左到右进行渲染
  • 静态网页的扩展名一般为：html和htm
  • 兼容性：不同的浏览器对同一标签可能会有完全不同的解释器(一般最少要适配:Chrome,firefox)

基础结构

基本的html结构如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = 'utf-8' />
        <title> Title </title>
    </head>
    <body>
        页面主体
    </body>
</html>

各字段含义如下：

  • <!DOCTYPE html>: 告诉浏览器使用什么样的html或者xhtml来解析html文档。
  • <html></html>：文档的开始标记和结束标记。告诉浏览器自身是一个html文档，在它之间是文档的头部<head>和<body>。
  • <head></head>：和<body>同级，不会在页面中显示，主要用来对网页的标题，或者全局进行定义。
  • <body></body>：定义网页主体内容

 æ ‡ç­¾æ ¼å¼

html语言遵循的标签格式如下：

1、由尖括号包围的关键词
　　1、闭合标签(需要明确的指定闭合)
　　2、自闭和标签(不需要明确的指定闭合)

<body>
    <img src="index.jpg1" alt="跑车">  <!-- 自闭合标签 -->     
    <p>hello world </p>  <!-- 闭合标签 -->
</body>

2、标签不区分大小写
3、标签可以有若干个属性，也可以不带属性，
　　通过在标签内的关键字后面 使用"空格属性=值"来给标签添加属性
　　1、方便在页面内寻找
　　2、部分功能通过属性名和属性值来完成
　　分为：
　　　　1、自带属性(浏览器可以自动识别)
　　　　2、自定义属性
4、标签可以嵌套,但是不能交叉嵌套
　　文档树：通过嵌套实现(树形结构:父包含子)

PS：自闭和标签在标签后面加上/,是依旧生效的，建议加上，因为如果我不知道某个标签的含义，我可能会继续向后看寻找它的闭合处，如果我用了/,则直接就能分辨。比如 <br />，<hr /> 等等

常用标签

<!DOCTYPE>标签

<!DOCTYPE> 位于html文档中最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

浏览器兼容模式：

  1. BackCompat：怪异模式，浏览器使用自己的怪异模式(自己定义的规则)解析渲染页面。
  2. CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode(兼容模式)默认就是BackCompat

<head>标签

主要用于存放网页头部或者全局定义等相关参数

<meta>标签

提供有关页面的元信息（meta-information），针对搜索引擎提供关键字表述或者介绍等功能

meta标签共有两个属性，它们分别是http-equiv属性和name 属性：

name='keywords' content="IT" : 关键字属性，content用来标识自己网页的关键字(比如在百度上搜索关键字，来查找网页，百度竞价排名)
name='description' content='介绍'： 描述属性，content表示搜索出来的时，显示的网页介绍
以http-equiv 开头的一定和http头部有关系，可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容
    http-equiv='content-Type' charset='UTF8':内容属性，告诉浏览器使用什么格式进行解码
    http-equiv='refresh' content='2;www.baidu.com'：刷新属性，'2;www.baidu.com':标识两秒之后刷新到后面的网页

 éž<meta>标签

<title></title>   <!-- 网页的title信息  -->
<link rel = 'icon' href='url'>   <!-- 则表示连接一个图表，后面表示图标的地址(title的图标) -->
<link rel="stylesheet" href="css.css">  <!--  通过css对标签进行控制,css格式来自css.css文件  -->
<script src="hello.js"></script>　  <!-- 通过js对标签按进行控制,js格式来自hello.js文件 -->


<!--  针对于 使用link 指定网页图标时，还有如下rel值可以使用  -->
<link rel = 'shortcut icon' href='image/favion.icon'>   <!-- 特指浏览器中地址栏左侧显示的图标，一般大小为16x16，后缀名为.icon； -->

 <body>标签

前提：body中支持部分特殊图标，当我们要输出多个空格的时候，手动敲入多个空格的话，HTML只会识别成一个，如果要显示<a>这种特殊符号时，又可能会和a标签冲突，所以，当需要输入多个空格时，需要使用&nbsp；多个的话，直接复制即可，而<，则表示&lt；，>使用&gt；进行表示，其他的特殊符号请参阅百度。

body标签的分类主要有两类：

    • 块级标签：自己独占一行
    • 内联标签：取决于内容(多个空格会被合并) ，不会独占一行，多个内连标签公用一行

基本标签

闭合标签：
<hn>：n的取值范围是1-6；从大到小。
<p>:段落，段落之间会有间隙。
<b>: 给内容加粗。
<strong>: 同样是给内容加粗。
<i>: 倾斜/斜体。
<strike>: 内容中间加横线。
<sub>或者<sup>:上角标和下角标。
<pre>:保留空格和换行，很适合显示计算机中的代码。


自闭和标签：
<br>：表示换行,没错仅仅是换行 
<hr>: 表示一条分割线


块级标签：
<div>:并无实际的意义。主要通过CSS样式或js为其赋予不同的表现. 

内连标签：	
<span>:和<div>相同，只不过<span>是一个内联标签

注意：
　　1、特殊符号需要使用特殊符号来指定，否则浏览器不识别，比如加多个空格的时候可以使用 &nbsp; (参考html符号对照表，自己百度)

　　2、块级标签可以嵌套块级标签或者内联标签

　　3、内联标签只能嵌套内联标签,嵌套块级标签时,块级标签会独占一行.

Python自动化运维 - day12 - HTML基础

 å›¾å½¢æ ‡ç­¾

<img> 内联标签、自闭合标签，只是调用没有实际意义，需要结合自身属性来使用。

PS：默认img标签是有个1px的边框的，只不过chrome一般不会显示，当你用IE的时候，就会发现了，这时，可以设置img的border为0即可。

主要属性如下：

    • src = '美女.jpg'　　 # 图片的来源，可以是本地文件，也可以是一个URL
    • alt = '美女'　　  # 图片加载失败时，图片位置显示的文字提示信息
    • title = ‘title' ã€€ã€€# 鼠标悬浮在图片上，显示的名称
    • width = '200px' height = '100px'      # 调节图片的长和宽，注意一般不会直接使用这两个参数，一般是使用css来统一进行控制
<body>
    <img src="index.jpg" alt="跑车" title = '跑车' width = '200px' height="100px ">
    <p>hello world </p>
</body>

实例显示：

 Python自动化运维 - day12 - HTML基础

超链接标签

<a> 内联标签、闭合标签，点击某个图片，文字等对象可以帮我们跳转(对象可以是链接、也可以是图片，邮箱等)

主要功能分为两类：超链接跳转，锚。

作为超链接跳转时主要属性如下：

    • href = 'https://www.baidu.com'        # 表示要跳转的地址，也可以是本地的某个文件。
    • target = '_blank'       # 指定该属性后，所有跳转的链接将会重新打开一个窗口进行显示，否则在原页面上显示

PS：针对图片点击图片进行跳转的功能，其实也就是用a标签嵌套图片标签而已。

<a href="https://www.baidu.com" target="_blank">
    <img src="index.jpg" alt="跑车">
</a>

锚：很像word的目录，点击目录名字，跳转到对应的内容。

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id="i1" style="height: 600px;">第一章内容</div>
<div id="i2" style="height: 600px;">第二章内容</div>
<div id="i3" style="height: 600px;">第三章内容</div>
<div id="i4" style="height: 600px;">第四章内容</div>

PS：通过a标签的href属性，关联对应内容的id即可。注意，id在文档内是唯一的，并且关联时必须要用#id，而当作为锚使用时，target属性失效。

 åˆ—表标签

列表标签主要有三种即：ul(无序列表)、ol(有序列表)、dl(定义列表)

// ul,unorder list,无序列表,一般配合li来使用
格式：
<ul>
    <li>111</li> # 列项，前面自带小圆点,并自带页边距
</ul> 
注释：表示一个无序列表，它的项目由li构成


// ol，order list ,有序列表
格式：
<ol> 
    <li>123</li> # 列项，但是前面会加上***
</ol>


// dl,define list,定义列表
<dl> 
    <dt> 河北省 </dt>  # define title 定义标题
    <dd> 保定 </dd>  # define data 最小单元项，缩进显示
</dl>

例子：

<body>
<p>下面是列表</p>

    <ol>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <dl>
        <dt>河南省</dt>
        <dd>三门峡</dd>
        <dd>郑州市</dd>
    </dl>
</body>

实例显示：

Python自动化运维 - day12 - HTML基础

表格标签

表格是一个二维数据空间，一个表格由若干个行组成，一个行又有若干个单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本等格式。

<!-- 格式  -->

<table>
    <thead>    <!-- 表头 -->
	<tr>     <!-- 表示一行  --> 
	    <th> </th>   <!-- 表头的一列 -->
	</tr>
    </thead>
    <tbody>    <!-- 表格内容体 -->
        <tr>
            <td> </td>   <!-- 内容的一列 -->
    </tbody>
</table>

PS：其中thead/tbody可以不写，浏览器能识别并且会格式化。

 table的属性：

    • border = '1'   # 边框的宽度，不加的话边框默认为0，是不会显示的
    • cellpadding = '10px'    # 文本与边框的间距
    • cellspacing = '5px'     # 文本框与外边框的间距
    • width,height     # 调节宽度和高度，一般使用css统一控制

td的属性：

    • rowspan = '1'   # 单元格独占几行
    • colspan = '1'   # 单元格独占几列

例子：

<p>下面是表格</p>
<table border="1" cellpadding="5" cellspacing="1">
    <tr>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
        <th>grade</th>
    </tr>
    <tr>
        <td>daxin</td>
        <td rowspan="2">18</td>
        <td>male</td>
        <td>Python</td>
    </tr>
    <tr>
        <td>xiaoxin</td>
        <td>male</td>
        <td>Linux</td>
    </tr>
</table>

 å®žä¾‹æ˜¾ç¤ºï¼š

Python自动化运维 - day12 - HTML基础

表单标签<form>

用于向服务器传送数据，实现的是用户与web服务器的交互
表单能够包含：input系列，比如文本字段、复选框、单选框、提交按钮等等。
还包含：textarea、select、fieldset和 lable标签

基本格式：
<form action=''>
</form>

 form表单属性：

    • action = 'https://www.baidu.com/login'     # è¡¨å•æäº¤åˆ°å“ª.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理。
    • method = 'GET':发送数据的方式(主要有get/post),默认是get
    • novalidate : å¦‚果使用该属性，则浏览器提交表单时不进行验证。

method扩展：

　　GET(没有请求体)：会把你想发送的数据，在url上用&隔开后，把参数进行填充在后面，然后发送给服务端。
　　POST请求头中的Connection字段表示连接模式，主要有两种方式
　　　　　　1、获取数据后立即断开
　　　　　　2、keep-alive 延时断开，3s中无发送数据后自动断开。
　　　　注意：查询类的一般会用GET。
　　POST(有请求体)：会把你想发送的数据,放在请求体中进行发送。

子标签之input系列

<input> 属于内联标签，可以被块级别、内联标签进行嵌套

主要属性：

type = 'text'                         # 表示文本输入框 
type = 'password'                     # 表示密文输入框
type = 'checkbox'                     # 复选框，选择的框为：☑️  
type = 'radio'                        # 单用的话，效果和复选框相同，只不过选择的框为：⭕️  ，仅当多个radio标签的name属性的值相同时，将会互斥(只能选中1个)
type = 'submit'                       # 对于一个form 表单，该标签是必须的，否则不能提交(看起来很像一个butten，但是附加的有其他功能)
type = 'butten'                       # 构造一个按钮
type = 'file'                         # 构建一个文件上传功能按钮
type = 'reset'                        # 构建一个重置按钮，可以重置input的框已经输入的内容
name = 'username'                     # 表单提交项的键(key)，用于提交时对input中输入的值进行标记。
value = ''                            # 表单提交项的值，针对不同的输入类型，value的属性含义也不同，具体显示含义如下：
    针对于butten、reset、submit ：      # 定义按钮上显示的问题
    针对于text、password、hidden ：     # 定义输入框的默认值
    针对于checkbox、radio、image：      # 定义输入相关联的值，用于构建key=value进行回传　

其他属性：

    • checked：对于checkbox 和 radio 来说，表示某个选项默认被选中
    • readonly：对于text和password来说，表示只读
    • placeholder：输入框默认的值(同时具有onfocus/onblur的特点)，新版本浏览器支持
    • disabled：对于text/password来说，表示禁止修改的意思，标签默认是携带enabled属性，表示可以修改。

注意：name value属性，如果要向服务端发送数据，就需要使用name/value来构建键值对了。

<p>下面是表单</p>
  <form action="">
      <p>
          用户名：
      <input type="text" name="username" value="user">
      </p>
      <p>
          河南
         <input type="checkbox" name="province" id="province">
     </p>
     <p>
         男
         <input type="radio" name="sex" id="sex">
     </p>
     <p>
         <input type="button" name="butten" id="butten" value="butten">
     </p>
     <p>
         <input type="file" name="fileupload" id="fileupload" value="upload">
     </p>
     <p>
         <input type="reset" name="reset" id="reset" value="reset">
     </p>
 </form>

　　

　　

 å®žä¾‹æ˜¾ç¤ºï¼š

Python自动化运维 - day12 - HTML基础

注意：

  1. 如果要把checkbox、radio的信息进行回传，那么必须为其指定name／value参数用来构建key value
  2. checkbox时，指定name，value时，当name相同时，value是多选的，那么多选的value回传的时候会组成list
  3. radio时，指定name，value时，当name相同时，value是互斥的，即只能选择一个
  4. 当向服务端提交文件的时候，form必须使用post方式，并且需要添加 enctype="multipart/form-data" 才行。
Python自动化运维 - day12 - HTML基础Python自动化运维 - day12 - HTML基础
1 <form action="" method="post" enctype="multipart/form-data">
2     <input type="file" name="upload">
3 </form>
上传文件时form参数 
<p>
    篮球
    <input type="checkbox" name ='hobby' value="basketball">
    足球
    <input type="checkbox" name="hobby" value="football">
</p>

<p>
    男
    <input type="radio" name = 'sex' value="male">
</p>
<p>
    女
    <input type="radio" name="sex" value="woman">
</p>

 å®žä¾‹æ˜¾ç¤ºï¼š

Python自动化运维 - day12 - HTML基础

子标签之select系列

<select> 主要功能为下拉框，以供选择，主要配合<option>标签来使用,分开使用<option>没有任何效果。

基本格式：
<select name='province' id = ''>
    <option value='henan'>河南</option>
    <option value='hedong'>河东</option>
    <option value='hebei'>河北</option>
</select>

 ä¸»è¦å±žæ€§ï¼š

  • name ： 构建用于回传的key。
  • value：构建用于回传的value，作用在option上
  • size = 3：下拉框同时显示的条目，默认是1个
  • multiple = 'multiple' ：下拉框是否可以多选（按住shift进行多选)，如果属性名和属性值相同，那么就可以只写属性名，作用在select上
  • selected = 'selected' ：默认值，表示默认情况下选中的值，作用在option上 
 <p>
            <select name="province" id="" size="6" multiple>
                <option value="henan">河南</option>
                <option selected value="hebei">河北</option>
                <option value="hedong">河东</option>
                <option value="hexi">河西</option>
                <option value="heshang">河上</option>
            </select>
 </p>

实例显示：

Python自动化运维 - day12 - HTML基础

Python自动化运维 - day12 - HTML基础Python自动化运维 - day12 - HTML基础
 1     <select name="province" id="">  <!-- 分组显示 -->
 2         <optgroup label="河南">    <!-- 不能选择，只是提示作用 --> 
 3             <option value="zhengzhou">郑州</option>
 4             <option value="smx">三门峡</option>
 5         </optgroup>
 6 
 7         <optgroup label="河北">
 8             <option value="zhengzhou">石家庄</option>
 9             <option value="smx">廊坊</option>
10         </optgroup>
11     </select>
select之分组显示

textarea、label、filedset标签

<textarea> 多行文本框，是个内联标签

格式：
<textarea cols = '3' rows = '10' name = 'person'>
</textarea>

属性如下：

  • cols = ‘3’  ï¼š 文本框有多少列
  • rows = '4' ：文本框有多少行

<label> 功能和p相同，内联标签，如果配合input使用，那么必须通过id进行绑定才可以

<label for="username">姓名：</label>
<input type="text" id="username">

 å±žæ€§ï¼š

  • for = '绑定的id'    ï¼šfor表示label绑定的标签的id，如果文字添加label标签，并绑定了id，那么在页面上点击label的value，那么就会跳转到对应的id的input标签。

PS：标签的id属性，是为了(js/css)能快速的寻找到该标签，注意id类似与身份证号是页面内唯一的。 

<fieldset> 更花的文本输入框，块级标签

格式：
<p>
    <fieldset>
        <legend>登陆把</legend>
        <input type="text">
    </fieldset>
</p>

 é…åˆlegend：对酷炫的边框添加title说明性文字。

textarea:
        <textarea name="userinput" id="" cols="30" rows="10"></textarea>

label:        
        <label for="username">姓名：</label>
        <input type="text" id="username">

fieldset:
        <p>
            <fieldset>
                <legend>登陆把</legend>
                <input type="text">
            </fieldset>
        </p>

 å®žä¾‹æ˜¾ç¤ºï¼š

Python自动化运维 - day12 - HTML基础

 

练习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8                 <form action="" method="">
 9                     <h1>欢迎注册</h1>
10                     <p>
11                         <label for="user">姓名：</label>
12                         <input type="text" id = 'user'>
13                     </p>
14                     <p>
15                         <label for="pass">密码：</label>
16                         <input type="password"  id = 'pass'>
17                     </p>
18                     <p>
19                         爱好：
20                         <input type="checkbox" name="ball" value="basketball"> 篮球
21                         <input type="checkbox" name="ball" value="football"> 足球
22                         <input type="checkbox" name="ball" value="bingpangqiu"> 乒乓球
23 
24                     </p>
25                     <p>
26                         性别：
27                         <input type="radio" name="sex"> 男
28                         <input type="radio" name="sex"> 女
29                     </p>
30                     <p>
31                         <label for="province">籍贯：</label>
32                         <select name="province" id="province" >
33                             <option value="henan">河南</option>
34                             <option value="hubei">湖北</option>
35                             <option value="hunan">湖南</option>
36                             <option value="xianggang">香港</option>
37                         </select>
38                     </p>
39                 </form>
40 
41             </body>
42 </html>

Python自动化运维 - day12 - HTML基础

posted @ 2017-07-16 21:24 Dahlhin 阅读(...) 评论(...)  ç¼–辑 收藏

相关推荐