HTML02

HTML学习前期认识

 1 #/usr/bin/env python3
 2 #_*_ coding:utf-8 _*_
 3 
 4 import socket
 5 
 6 def handle_request(client):
 7     buf = client.recv(1024)
 8     client.send(b"HTTP/1.1 200 ok\r\n\r\n")
 9     f = open('test.log')
10     data = f.read()
11     f.close()
12     client.send(data.encode('utf-8'))
13     client.send(b"<h1 style='color:red;'>12345<h1>")
14 
15 def main():
16     sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
17     sock.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
18     sock.bind(('localhost',8005))
19     sock.listen(5)
20 
21     while True:
22         connection,address = sock.accept()
23         handle_request(connection)
24         connection.close()
25 
26 if __name__ == '__main__':
27     main()
socket 创建并访问HTML

 

HTML 规则（类型）：<!DOCTYPE html>

 

1.<head>信息</head>

包含：字符集设置，页面编码，自动刷新，刷新并跳转，关键字，标题，还可以写入 css，js 文件等。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  <!--页面编码(告诉浏览器是什么编码)-->
    <!--<meta http-equiv="Refresh" content="5">   -->
    <meta http-equiv="Refresh" content="5;Url=http://www.baidu.com">   <!--刷新并跳转-->
    <title>Python学习</title>
    <link rel="shortcut icon" href="favicon.ico">  title前面的图片
</head>
View Code

 

 2.<body>信息</body>

 块级标签：占据整行

内联标签：只占据字体所在的位置。

HTML常用特殊字符：

<body>
<h1 style="background-color: red;">python（块级标签）</h1>
<a style="background-color: greenyellow;color: red;">汽车之家（内联标签）</a>
&lt;h1&gt;&#60;
</body>
块级以及内联标签

 

3.body 常用标签 

 p 和 br

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

   br：表示换行

 a 标签表示一个连接；连接用 href ：href="http://www.baidu.com" style="color: red;" 

target="_blank"表示在新标签中打开连接

<a target="_blank" href="http://www.baidu.com" style="color: red;">百度</a>
a）href属性：链接的地址，链接的地址可以是一个网页，也可以是一个视频，图片，音乐
b）target属性：
            1.作用：定义超链接的打开方式
            2.属性值：
                @）_bank ：在一个新的窗口中打开链接
                @）_seif(默认值)：在当前窗口中打开链接
                @）_parent:在父窗口中打开页面（框架中使用较多）
                @）_top: 在顶层窗口中打开文件（框架中使用较多）

 

 

a 标签还可以在内部进行跳转：

跳转到指定的id 号，html内部默认，标签不能重复。

<a href="#a2">书签</a>   
<div id="a1"style="height: 1200px">first</div>
<div id="a2"style="height: 400px">twice</div>

 H 标签：总共6个标签{h1,h2,h3,h4,h5,h6}

 select 标签： 下拉框选择（selected 放在哪个option里面，那么刷新的时候它就是对应的默认选着）

第一个是下拉框选着
<select>
    <option value="1" selected="selected">上海</option>
    <option value="2">北京</option>
    <option value="3">广州</option>
</select>
这个也表示下拉框选着，只是size表示在框里面最多显示多少个，并且只能单选
<select size="3">
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3">广州</option>
</select>
这个也表示下拉框选着，只是size表示在框里面最多显示多少个，按住control可以进行多选
<select multiple="multiple" size="3">
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3">广州</option>
</select>
<select>
    <optgroup label="上海">
        <option>浦东</option>
        <option>浦西</option>
    </optgroup>
    <optgroup label="贵州">
        <option>贵阳</option>
        <option>遵义</option>
    </optgroup>
</select>
View Code

 

 

      分组：

 

 

input标签系列

 checkbox：  复选框

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/> 默认选中

radio: 圆圈类型的选中框

<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr />
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
 类型为radio的，如果name 相同，选择框互斥，也就是只能单选

 

text/passwd:

<input type="text" />
<input type="password" />
<input type="text"  value="123"/>  默认值123

 

 button/submit: 提交

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

 

file :选着文件，上传。

<input type="file">

 

 多行写入：

<textarea >多行输入</textarea>

 

4.form 标签

<form></form>定义表单的开始位置和结束位置，表单提交时的内容就是<form>表单中的内容
基本格式：<form action="服务器端地址（接受表单内容地址）" name="表单名称" method="psot|get"></form>
常用属性：1.name 表单名称
        2.method 传送数据的方式，分为post和get两种方式
                              get方式 不具有保密性
                              post方式 把内容一起封装到http协议里面发送到服务器处理

        3.action 如果URL地址为空则使用当前文档的URL地址，如果表单中不需要使用action属性也要知道属性为no
        4.enctype 设置表单的资料的编码方式
        5.target 和超链接的属于类似，用来指定目标窗口

 

 

文本域和密码 <input>标记 : <input> 标记没有结束标记 一般写成为<input  />

1.基本语法：<input type="" name="" value="" size="" maxlength="">
        2. 属性介绍：
            1.type属性：type属性有两个值
                    1.text 当type="text"时， <input>表示一个文本输入域
                    2.password 当type="password"时，<input> 表示一个密码输入域
            2.name属性  定义控件的名称
            3.value 属性 初始化值，打开浏览器时，文本框中的内容
            4.size属性 设置控件的长度
            5.maxlength属性： 输入框中最大允许输入的字符数
        3.提交，重置，普通按钮
            1.提交按钮 ：当<input type="submit"> 时，为提交按钮
            2.重置按钮 ：当<input type="reset" > 时，为重置按钮
            3.普通按钮 ：当<input type="button"> 时，为普通按钮
        4.单选框和复选框 
            1.单选按钮： 当<input type="radio" > 时，为单选按钮
            2.复选框： 当<input type="checkbox"> 时，为复选框
            3.注意：单选框和复选框都可以使用"cheked" 属性来设置默认选中项
        5.隐藏域 ： 当<input type="hidden" > 时， 为隐藏表单域
        6.多行文本域：
            1.用法，使用<textarea>标记可以实现一个，能够输入多行文本的区域
            2.语法格式：<textarea name="name" rows="value" cols="value" value="value">...</textarea>
            3.rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数

        7.菜单下拉列表域  <select></select>标记
            1.语法标记：
                <select name="opt" size="" multiple="">
                    <option value="1" >选项1</option>
                    <option value="2" selected="">选项2</option></select>
            2.属性
            3.option标记
                <option>标记用来指定列表中的一个选项，需要放在<select></select>之间
                值：
                    1.value 给选项赋值，指定传送到服务器上面的值
                    2. select 指定默认的选项

 

 

5 常用标签2

label标签：

点击汉字就可以直接到对应的文本框或者 选项框进行输入选择

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

<label for="marry2">
    婚否：
    <input id="marry2" type="checkbox"/>
</label>

 

ul，ol，dl：序号，分组

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<ol>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ol>
<dl>
    <dt>上海</dt>
    <dd>浦东</dd>
    <dd>浦西</dd>
    <dt>贵州</dt>
    <dd>贵阳</dd>
    <dd>遵义</dd>
</dl>
View Code

 

 

 table 标签：

<table border="1">
    <thead>
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td colspan="3">1</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
        <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
View Code

 

 

fieldset 标签：

<fieldset>
    <legend>登录</legend>
    <p>用户：</p>
    <p>密码：</p>
</fieldset>
View Code

 

posted @ 2017-07-04 12:54  Nice_keep-going  阅读(93)  评论(0)    收藏  举报