HTML

作者: Snackk | 来源:发表于2018-10-25 22:31 被阅读0次

遵循的htt协议

HTTP/1.1 200 OK\r\n\r\n

在浏览器端输入 URl：127.0.0.1:9090进行访问

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',9090))
sk.listen()

while 1:
    conn,addr = sk.accept()
    ret = conn.recv(1024)
    print(ret)
    # 或conn.send(b'HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n')
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n ")
    with open(r'C:\Users\Administrator\PycharmProjects\Snack\Python\PY练习\练习.py','rb') as f:
        conn.send(f.read())
    conn.close()

sk.close()

URL：统一资源定位符
URL地址由4部分组成

第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

HTML

超文本标记语言
浏览器可识别的规则，标记语言（兼容性问题）
网页文件的扩展名：.html或.htm
HTML是一种标记语言（markup language），它不是一种编程语言。

    1. CS   -->  BS架构
    2. Web的原理
        浏览器地址栏输入URL
            --> 浏览器往服务端发消息 
                --> 服务端接收消息
                    --> 服务端回消息（从文件中读取数据）
                        --> 浏览器收到消息(按照一个约定好的规则展示出来)

HTML文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

1.<!DOCTYPE html>声明为HTML5文档
2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素
3.<head>、</head>定义了HTML文档的开头部分。包含了文档的元（meta）数据。
4.<title>、</title>定义了网页标题，在浏览器标题栏显示。
5.<body>、</body>之间的文本是可见的网页主体内容。
6.中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

html标签格式

1.尖括号包围的关键字
2.HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。
3.部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
4.标签里面可以有若干属性，也可以不带属性。

标签的语法：

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

HTML注释：

<!--注释内容-->

<!DOCTYPE> 标签：

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

head内常用标签：

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

Meta标签介绍：

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

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

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

<head>
    <meta lang="zh-CN">
    <title>骑士计划！改变世界，从西丽开始！</title>
    <!--指定文档的编码类型-->
    <meta http-equiv="content-Type" charset="UTF8">
    <!--告诉IE以最高级模式渲染文档-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--刷新2秒后跳转到指定网站，没有URl就是两秒刷新一次-->
    <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
    <!--搜素引擎优化-->
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> # 关键字搜素 
    <meta name="description" content="老男孩教育Python学院"> # 描述网站信息
</head>

body内常用标签：

id：html文档中唯一
a:链接可点击href="URL"

<body>
    <!-- 这就是注释 -->
    <h1 s1="hao" style="color: red">Hello world!</h1>
    <a id="a1" href="https://www.luffycity.com">路飞学城</a> 
    <a id="a2" href="https://www.jd.com">jd.com</a>
    <!--<a href="https://www.sogo.com">sogo.com</a>-->
</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>

特殊字符

空格  &nbsp;
HTML中把连续的空格和换行都解析成一个空格，不存在缩进的问题
>   &gt;
<   &lt;
&   &amp;
¥   &yen;
版权  &copy;
注册  &reg;

div标签和span标签
div: 独占一行，块级标签
块级标签：

span：不换行，行内标签
行内标签（内联标签）：

                默认都在一行显示！
                b、i、u、s
                span

1.div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
2.span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含p标签。

标签支持嵌套

    1. 块级标签可以包含内联标签
    2. p标签不能包含p标签和div标签

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签：超链接标签

从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址可以有几种类型：

1.绝对URL - 指向另一个站点（比如 href="http://www.jd.com）

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

2.相对URL - 指当前站点中确切的路径（href="index.htm"）
3.锚URL - 指向页面中的锚（href="#top"）

<a href="#p1">点我</a>


<div style="height: 1000px"></div>
<p id="p1">大海啊，全是水。</p>
<div style="height: 1000px"></div>

target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

列表

1.无序列表

type属性：

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

代码

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

2.有序列表
type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
start：从哪个位置开始，默认从第一个

代码

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

3.标题列表
dt：标题
dd：内容-缩进

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

属性:

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

代码

<body>

<table border="1" cellpadding="10" cellspacing="5">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td colspan="2">金老板</td>

        </tr>
        <tr>
            <td>2</td>
            <td>景女神</td>
            <td rowspan="2">喝茶</td>
        </tr>
        <tr>
            <td>3</td>
            <td>娜扎</td>

        </tr>
    </tbody>
</table>
</body>

form标签

1. 展示给用户看的标签
2. 获取用户输入的标签
        form标签（表单标签）
        
3.表单还可以包含textarea、select、fieldset和 label标签。

表单属性

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

input

    1. 根据type类型划分
        1. text
        2. password
        3. email
        4. date

        5. radio      --> 单选
        6. checkbox   --> 多选

        7. button     --> 普通按钮，多用于使用JS代码绑定事件
        8. submit     --> 提交
        9. reset      --> 重置    

        10. file      --> 上传文件

属性说明:

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

select标签

1. select标签内部包含的是option，需要配置value属性
    默认选中：selected="selected"
2. 多选
    multiple

属性说明：

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>

label标签
定义：<label> 标签为 input 元素定义标注（标记）。
1.label 元素不会向用户呈现任何特殊效果。
2.<label> 标签的 for 属性值应当与相关元素的 id 属性值相同

代码

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

属性说明：

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

代码

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

总代码：

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

<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
    <p>
        <label for="i1">用户名：</label>
      <input id="i1" type="text" name="username">
    </p>
    <p>
        <label>密码：
            <input type="password" name="pwd">
        </label>
    </p>
    <p>
        邮箱：
        <input disabled type="email" name="email">
    </p>
    <p>出生日期：
        <input type="date" name="birthday">
    </p>
    <p>
        头像：
        <input type="file" name="avatar">
    </p>
    <p>
        隐藏的输入框：
        <input type="hidden">
    </p>
    <p>性别：
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
    </p>
    <p>
        爱好：
        <input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="doublecolorball">双色球
    </p>
    <label for="s1">城市</label>
    <select id="s1" name="city1">
        <option value="010">北京</option>
        <option value="021">上海</option>
        <option value="020">广州</option>
        <option value="0755" selected="selected">深圳</option>
    </select>
     <select name="city2" multiple="multiple">
            <option value="010">北京</option>
        <option value="021">上海</option>
        <option value="020">广州</option>
        <option value="0755" selected="selected">深圳</option>
    </select>
    <p>
        个人简介：
        <textarea name="info"  cols="60" rows="40">

        </textarea>
    </p>

    
    <input type="button" value="按钮">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

{"name属性的值": 用户填写的内容}

</body>
</html>

注意事项：

1. 所有放在form标签中获取用户输入的标签，必须要有name属性
2. form标签有action属性和method属性
        1. action：控制往哪里提交数据
        2. method：控制用什么方式提交
        3. 上传文件需要额外配置enctype="multipart/form-data"
3. form要提交数据必须要有submit按钮

HTML

HTML

html标签格式

标签的语法：

列表

表格

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读