前端编程之HTML

打开网址发生了什么

　　浏览器遵循http协议向服务端发送请求，服务端接受请求后找到对应的HTML文件后再返回给浏览器，浏览器就根据收到的HTML文件渲染页面

1.http协议

　　协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。

import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
    conn,addr=server.accept()
    data = conn.recv(1024)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    # conn.send(b'<h1>hello,world<h1>')
    with open('E:\Python7期学习材料\day41-day50\day48练习\zy.html','rb') as f:
        for line in f :
            conn.send(line)
    conn.close()

2.1HTML超文本标记语言

　　 HTML是一种标记语言，它不是一种编程语言。 HTML使用标签来描述网页。它本质上是一种浏览器可识别的规则，我们按照这个规则写网页，浏览器根据规则渲染网页，对于不同的浏览器，同一个标签可能会有不同的解释（兼容性问题）

HTML最基本的文档格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

注释：

1，<!DOCTYPE html>声明是HTML文档

2，<html> </html> 是文档的开始标记和结束标记，是html页面的根元素，在他们之间是文档的头部head和主体body

3，<head></head> 定义了文档的开头部分，它们之间的内容不会在浏览器的文档窗口显示。

4,<title></title>定义了网页标题，在浏览器标题栏显示。

5,<body>、</body>之间的文本是可见的网页主体内容。

2,2HTML常用标签

<head>常用标签

#<title></title>：定义网页的标题

#<style></style>：定义内部样式表，在内部直接写css代码

#<link/>：也是定义内部样式，不过它是引入外部css文件

#<script></script>：可以直接写js代码，也可以引入外部js文件

#<meta/>：定义网页原信息。meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

body内常用标签

基本标签

b加粗，i倾斜，

u下滑线，p段落，

u下划线，h1~h6标题标签字体依次变小，

br换行，hr分割线

除了br和hr是自闭和标签其他都是双标签

特殊字符

由于直接写特殊字符回将代码打乱，比如<>，所以特殊字符有对应的代码，并且连续的空格或空行浏览器也只会显示一个空格

常见的特殊字符有：

空格 &nbsp；

> &gt；

< &lt；

¥ &yen；等等

他们都是以&开头，以英文的；结尾，只要在Python里建的html文件里打出&就能出来很多的提示符号

更多符号》》》http://tool.chinaz.com/Tools/HtmlChar.aspx

标签分类：

双标签：h1~h6，p，a，ul，ol，table等等

自闭和标签：img，br，hr，meta等等

块级标签：h1，p，hr，div等等，块级标签可以设置长宽，可以嵌套块级标签和行内标签（p标签不能包含块级标签，p标签也不能包含p标签。）

行内标签：a，img，s，i，span，等等，不能设置长宽，自己有多大就占多大

块级元素与行内元素的区别：
　　所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

img标签：src后面指定url，可以来自网络，也可以来自本地

width设置图片的宽度，长度会自动等比例缩放，alt是图片加载失败时的提示信息，title是鼠标放在加载成功的图片上时的提示信息

a标签，超链接标签

href后接url，url是指定资源定位符，通俗的说就是网址。target默认参数是_self，指在当前页面跳转，改为_blank后悔另起一个页面打开，id就相当于mysql里的主键，用来查询的，id名不能重复。

a标签有一个锚属性，可以从一个a标签跳转到另一个a标签，只要在href后写上#和要跳转的a标签的id就可以了

列表标签

无序列表ul，type属性：disc（实心圆点，默认值） circle（空心圆圈）square（实心方块）none（无样式）

有序列表ol，type属性： 1 数字列表，默认值；A 大写字母； a 小写字母；Ⅰ大写罗马；ⅰ小写罗马

在il里面也可以设置type属性

表格标签

<table border="4"  cellpadding="11" cellspacing="0" width="82%">
    <thead>
    <tr>
        <th>name</th><th>age</th><th>hobby</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>小赵</td><td>24</td><th>学习</th>
    </tr>
    <tr>
        <td>小赵的猫</td><td>12</td><td>睡觉</td>
    </tr>
    </tbody>
</table>

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据

表格属性：

　border: 表格边框.
    cellpadding: 内边距
    cellspacing: 外边距.
    width: 像素百分比.（最好通过css来设置长宽）
    rowspan: 单元格竖跨多少行
    colspan: 单元格横跨多少列（即合并单元格）

form表单

功能：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

<!--form表单开始-->
<form method="post" enctype="multipart/form-data" >
    <label for="idpsd" >
    name<input  type="text" id="idname">
    <p>password<input name="username"   type="password" id="idpsd"></p>
</label>
    <p>birthday<input type="date" name="password"> </p>
    <p>性别:男<input type="radio" name="gender" value="0">
            女<input type="radio" name="gender" value="1">
        保密<input type="radio" name="gender" checked value="2">
    </p>
    
    <p>hobby
        <input type="checkbox" name="hobby"  checked value="篮球">篮球
        <input type="checkbox" name="hobby" value="足球">足球
    </p>

     <p>province默认单选:
        <select name="province" id="">
            <option value="beijin">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
    </p>
    <p>province多选:
        <select name="" id="" multiple>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>province1:
        <select name="" id="">
            <optgroup label="北京">
                <option value="">朝阳区</option>
                <option value="">海淀区</option>
                <option value="">昌平区</option>
            </optgroup>
            <optgroup label="上海">
                <option value="">浦东新区</option>
                <option value="">静安区</option>
                <option value="">徐汇区</option>
            </optgroup>
            <optgroup label="深圳">
                <option value="">南山区</option>
                <option value="">宝安区</option>
                <option value="">福田区</option>
            </optgroup>
        </select>

</form>
<!--form表单结束-->

input标签

<input> 元素会根据不同的 type 属性，变化为多种形态

text       普通文本
       password   密文
       date       日历
       radio       单选框
       checkbox   多选框
       file       获取文件
       submit       触发提交数据的行为
       button       普通的按钮
       reset       重置form表单内容