HTML知识点总结[部分]

Web服务的本质(socket实例)

import socket


def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK

",encoding = 'utf-8'))
    client.send(bytes("welcome"))


def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost', 8000))
    sock.listen(5)

    while True:
        try:
            connection, address = sock.accept()
            handle_request(connection)
            connection.close()
        except:
            pass


if __name__ == '__main__':
    main()

Web Server

HTML文档树

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

</body>
</html>

HTML文件结构

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

<!DOCTYPE html>

标签分类

1. 自闭和标签

<title>Title</title>

2. 主动闭合标签

<meta />

所有标签可以分为两类

　　- 块级标签：div，H系列，p级标签... (特性，占整行内容，可以设置高度和宽度)

　　- 内联标签(行内标签)：span标签... (特性，有多少占多少，无法设置高度和宽度)

head部分

Meta(metadata information)

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

1. 页面编码（告诉浏览器使用什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”/>

2. 刷新和跳转

< meta http-equiv="Refresh" Content="30"/>

< meta http-equiv="Refresh" Content="5"; Url="http://www.autohome.com.cn"/>

3. 关键字(搜索引擎的爬虫就是根据这里写的关键字去寻找对用的页面)

<meta name="keywords" content="Html,css,社区,python"/>

4. 描述

<meta name="description" content="描述信息"/>

5. X-UA-Compatible

　　用来解决HTML代码与IE之间的兼容，更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

title

网页的标题

<title>Title</title>

link

1. 引入CSS文件

< link rel="stylesheet" type="text/css" href="css/common.css" >

2. 页面图标 icon

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

Style

在页面中写css样式

<style>
    .pg-head {
        height: 30px;
        background-color: green;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }
</style>

Script

1. 引入JS文件

< script type="text/javascript" src="js/gpt.js"> </script >

2. 写JS代码

< script type="text/javascript" > ... </script >

body

网页图片HTML代码大全

P和br标签

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

br 是换行

<p>段落内容</p>
<br/>

H标签

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

div和span标签

div是块级标签

span是行内标签

<div>hello world</div>
<span>hello world</span>

form表单

input标签和form标签的结合

<form action="http://localhost:8888/index" method="GET">
    <input type="text" name="user" />
    <input type="password" name="pwd" />
    <input type="submit" value="登录" />
</form>

action为提交的地址，method为提交的方式（GET：将提交的数据嵌套的URL上进行提交；POST：将提交的数据放在body中提交）

添加属性：disabled输入框将不可编辑

input type="text"　　- 普通文本输入框　　属性：name，values

input type="password" - 密文输入框　　 属性：name，values

<form action="http://www.spdir.top" method="POST">
    user: <input type="text" name="user" valuse="user" />
    password: <input type="password" name="pwd" values="password" />
</form>

<div style=" 600px; margin: 0 auto;">
   <input type="text" placeholder="请输入搜索内容" />
</div>

input type='submit'　　- 提交表单按钮，属性values
input type='button'　　- 普通按钮，没有实际意义(用于结合JS使用)，属性values
input type='reset' - 重置，属性values

<form action="http://www.spdir.top" method="POST">
    <input type="submit" value="提交"/>
    <input type="button" value="按钮"/>
　　<input type="reset" value="重置"/>
</form>

input type='radio' - 单选框，属性value，checked="checked"，name（name相同则互斥），checked="checked"设置默认值

<form action="http://www.spdir.top" method="POST">
    男: <input type="radio" name="gender" value="1"/>
    女: <input type="radio" name="gender" value="2" />
    保密: <input type="radio" name="gender" value="3" checked="checked" />
</form>

input type='checkbox' - 复选框属性value, checked="checked"，name属性（批量获取数据），checked="checked"设置默认值

<form action="http://www.spdir.top" method="POST">
    <p>爱好</p>
    篮球: <input type="checkbox" name="interest" value="1"/>
    足球: <input type="checkbox" name="interest" value="2"/>
    羽毛球: <input type="checkbox" name="interest" value="3"/>
    游泳: <input type="checkbox" name="interest" value="3"/>
    读书: <input type="checkbox" name="interest" value="4" checked="checked"/>       
    学习: <input type="checkbox" name="interest" value="5"/>
</form>

input type='file' - 上传文件，依赖form表单的一个属性 enctype="multipart/form-data"

<form action="http://www.spdir.top" enctype="multipart/form-data" method="POST">
    <input type="file" name="fname" />
</form>

form与select的结合

属性：selected="selected"用来设置默认值

<form action="http://www.spdir.top"  method="POST">
     city1:
            <select name="city1">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
                <option value="5">成都</option>
            </select>
</form>

在select标签中设置一个属性size指定显示的多少个值

<form action="http://www.spdir.top"  method="POST">
            city2:
            <select name="city2" size="6">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
                <option value="5">成都</option>
            </select>
</form>

在select标签中设置一个multiple="multiple"属性可以进行多选

<form action="http://www.spdir.top"  method="POST">
            city3:
            <select name="city3" multiple="multiple" size="5">
                <option value="1">北京</option>
                <option value="2" selected="selected">上海</option>
                <option value="3">广州</option>
                <option value="4">深圳</option>
                <option value="5">成都</option>
            </select>
</form>

进行分组，使用optgroup标签嵌套option标签

<form action="http://www.spdir.top"  method="POST">
            city4:
            <select name="city4">
                <optgroup label="河北省">
                    <option value="1">石家庄</option>
                    <option value="2">邯郸</option>
                </optgroup>
                <optgroup label="北京">
                    <option value="3" selected="selected">朝阳</option>
                    <option value="4">海淀</option>
                </optgroup>
            </select>
</form>

form与textarea的结合

textarea标签可以进行多行输入，而input的type="text"只能进行单行输入

<form action="http://www.spdir.top"  method="POST">
    <textarea name="word"></textarea>
</form>

a标签

- 跳转

<a href="http://wwww.baidu.com">当前页面打开</a>

<a href="http://www.baidu.com" target="_blank">新的页面打开</a>

- 锚

在跳转到的标签内使用id属性设置一个id，在a标签中使用href属性进行跳转

<!--锚-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>

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

img标签

用来引入图片

属性：src - 图片的地址

　　 title - 图片的标题

　　 alt - 当图片的地址找不到无法显示的时候，显示alt的内容

<img src="a.jpeg" title="头像" style="height: 300px;  200px;" alt="链接找不到显示"/>

列表标签

无序列表

使用ul嵌套li标签

<!--无序-->
<ul>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

有序列表

使用ol嵌套li标签

<!--有序-->
<ol>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ol>

分组列表

使用dl嵌套dt(分组的名)标签，dt标签嵌套dd标签

<!--分组列表-->
<dl>
    <dt>group 1</dt>
    <dd>body 1</dd>
    <dt>group 2</dt>
    <dd>body 2</dd>
</dl>

表格标签

写法：

1）简略写法

<table border="1">
        <tr>
            <th>主机名</th>
            <th>端口</th>
        </tr>
        <tr>
            <th>1.1.1.1</th>
            <th>80</th>
        </tr>
        <tr>
            <th>2.2.2.2</th>
            <th>443</th>
        </tr>
    </table>

2）标准写法(需要写出表头thead和内容tbody的标签)

<table border="1px">
    <thead>
        <tr>
            <th>主机名</th>
            <th>端口</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1.1.1.1</th>
            <th>80</th>
        </tr>
        <tr>
            <th>2.2.2.2</th>
            <th>443</th>
        </tr>
    </tbody>
</table>

合并单元格

colspan横向合并单元格，rowspan纵向合并单元格

    <table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th colspan="2" >1</th> <!-- 横向合并单元格 -->
                <th>1</th>
            </tr>
            <tr>
                <th rowspan="2">2</th>  <!-- 纵向合并单元格 -->
                <th>2</th>
                <th>2</th>
            </tr>
            <tr>
                <th>3</th>
                <th>3</th>
            </tr>
        </tbody>
    </table>

View Code

label标签

用于点击鼠标，使得关联的标签获取光标

<label for="username1">用户名：</label>
<input id="username1" type="text"/>

效果就是，点击用户名也可以在input框中进行输入

fieldest标签

<fieldset></fieldset>

可以实现一个这样的框框

嵌套 legend 标签可以实现

<fieldset>
    <legend>登录</legend>
 </fieldset>

那这个标签又有什么用呢，我们可以实现一个：如图的样子(样式虽然有些丑，但我们可以用css做修饰)

<fieldset>
     <legend>登录</legend>
     <label for="username2">用户名：</label>
     <input id="username2" type="text"/>
     <br/>
     <label for="pwd">密码：</label>
     <input id="pwd" type="password"/>
 </fieldset>

video视频

提供了播放、暂停和音量控件来控制视频

control 属性供添加播放、暂停和音量控件

<video style="height: 300px;  300px;" controls>
    <source src="a.mp4" type="video/mp4">
</video>

支持的视频格式：

MP4    video/mp4
WebM    video/webm
Ogg    video/ogg

audio音频

control 属性供添加播放、暂停和音量控件

<audio controls>
    <source src="王建房%20-%20在人间.mp3" type="audio/mpeg">
</audio>

hr分割线

<hr />

Font Awesome

IconFont