1.HTML基础

web服务本质

import socket
socker = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
socker.bind(('127.0.0.1',8000))
socker.listen(5)
conn,addr = socker.accept()
from_browser_msg = conn.recv(1024)
print(from_browser_msg)

conn.send(b'HTTP/1.1 200 ok \r\n\r\n')

with open('xxx.html','rb') as f:
    data = f.read()
    conn.send(data)

HTML是什么

HTML 是用来描述网页的一种语言

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

创建一个HTML文件

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

</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

网页跳转代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <a href="http://www.cnblogs.com/xiaoqianbook/">小钱</a>
</body>
</html>

注释

  <!--  注释的内容  -->

Mata标签

<meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

刷新页面

<meta http-equiv="Refresh" content="3"><!-默认3秒刷新页面->

刷新页面跳转

<meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com/xiaoqianbook/"><!-默认3秒刷新页面跳转->

关键词

<meta name="keyword" content="小钱,python">

图标

<link rel="shortcut icon" href="图标的地址">

IE兼容

head内常用标签

<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

标签分类:

自闭合标签
<meta charset="UTF-8">
主动闭合标签
<title>小钱</title>

所有标签分为：

块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）

行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin

标签之间可以嵌套

body标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

  空格

> < 添加特殊字符< 相当于 < ,> 相当于 >

& &

¥ ￥

® 注册

<a href="http://www.cnblogs.com/xiaoqianbook/">小钱&lt;a&gt;</a>

inport属性

input type='text' 文本
input type='password' 密码
input type='submit' 提交按钮
input type='button' 按钮
input type='radio' 单选框 checked="checked" 默认选中 name属性（name相同则互斥）
input type='checkbox' - 复选框 checked="checked"，name属性（批量获取数据）
input type='file' 上传文件依赖form表单的一个属性 enctype="multipart/form-data"
input type='rest' 重置

<textarea >默认值</textarea> 文本域

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <textarea name="meno" >asdfasdf</textarea>
            <select name="city" size="10" multiple="multiple">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
            </select>
            <input type="text" name="user" />
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1"  />
            女：<input type="radio" name="gender" value="2" checked="checked"/>
            Alex：<input type="radio" name="gender" value="3"/>
            <p>爱好</p>
            篮球：<input type="checkbox" name="favor"  value="1" />
            足球：<input type="checkbox" name="favor"  value="2" checked="checked" />
            皮球：<input type="checkbox" name="favor"  value="3" />
            台球：<input type="checkbox" name="favor"  value="4" checked="checked"/>
            网球：<input type="checkbox" name="favor"  value="5" />
            <p>技能</p>
            学习：<input type="checkbox" name="skill" checked="checked" />
            写字：<input type="checkbox" name="skill"/>
            <p>上传文件</p>
            <input type="file" name="fname"/>
        </div>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

View Code

a标签

跳转，锚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <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>
</body>
</html>

View Code

img 标签

src 图片地址
alt 无法加载显示
title 图片说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.cnblogs.com/xiaoqianbook/">
        <img src="1.png" alt="美女" title="大美女" height="100px" width="100px">
    </a>
</body>
</html>

View Code

列表

ul 无序列表
li
ol 有序列表
li
dl 列表分层
dt
dd

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <ul>
     <li>小猫</li>
     <li>小狗</li>
     <li>小猪</li>
 </ul>
<ol>
    <li>小猫</li>
     <li>小狗</li>
     <li>小猪</li>
</ol>
<dl>
    <dt>动物</dt>
    <dd>小猫</dd>
    <dt>植物</dt>
    <dd>小花</dd>
</dl>
</body>
</html>

View Code

表格

table标签
thead 表头
tr 行
th 列
tbody 表主体
tr 行
td 列
colspan 去行
rowspan 去列

属性:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="3">1</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
</body>
</html>

View Code

from

功能：

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

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

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

表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

select标签

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>

View Code

label标签

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

说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<fieldset>
    <legend>登陆</legend>
    <label for = "username">用户名：</label>
    <input id="username" type="text" name="user">
    <br>
    <label for = "pwd">用户名：</label>
    <input id="pwd" type="password" name="pwd">
</fieldset>
</body>
</html>

View Code

textarea多行文本

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用

textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

View Code

posted @ 2019-02-24 15:18 等待の喵阅读(405) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

1.HTML基础

web服务本质

HTML是什么

注释

Mata标签

刷新页面

刷新页面跳转

关键词

图标

IE兼容

head内常用标签

标签分类:

所有标签分为：

body标签

inport属性

a标签

img 标签

列表

表格

from

select标签

label标签

textarea多行文本

公告