HTML知识点总结[部分]

Web服务的本质(socket实例)

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'))

    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="width: 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; width: 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>

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; width: 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