前端基础：THML
HTML初始
1.web服务本质
import socket
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(("localhost", 9001))
sock.listen(5)
while True:
print("waiting for connection...")
conn, addr = sock.accept()
data = conn.recv(1024)
print("receive data: ", data.decode("utf-8"))
with open("index.html", "r") as f:
response = f.read() # 可以把html放在一个文档中读出来
conn.send(("HTTP/1.1 201 OK
%s" % response).encode("uf-8"))
2.HTML是什么？不是什么？
-
html是什么？
超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。本质是一套规则，浏览器认识的规则；
浏览器按顺序渲染网页文件，然后根据标签解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不同的解释(兼容性--compatible)；
静态网页文件扩展名：.html； -
html不是什么？
html使用标签来描述网页，所以html不是一种编程语言，而是一种标记语言(markup language)
3.HTML结构
- 告诉浏览器使用什么样的html或xhtml来解析html文档；
- 是文档的开始标记和结束标记。该标签告诉浏览器其自身是一个HTML文档，在它们之间的是文档的头部和主体；
- 是文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但其间的元素有着特殊的重要意义；
-
网页标题部分，在浏览器标题栏显示； - 之间的文本是可见的网页主体；
4.html标签格式
标签语法格式如下：
<标签名 属性名1="属性值1" 属性名1="属性值1" .../>
<标签名 属性名1="属性值1" 属性名1="属性值1" ...>内容部分</标签名>
标签格式：
- 1.HTML标签是由尖括号包围的关键字，比如<html>；
- 2.HTML标签通常是承兑出现的(双边标记)，比如<div>和</div>；
- 3.标签不区分大小，<html>和<HTML>效果一样，推荐使用小写；
- 4.标签分为两部分：开始标签<a>和结束标签</a>，两个标签之间的部分称之为标签体，有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签。例如：<br />、<hr />、 <input />、<meta />等；
- 5.标签可以由若干个属性，也可以不带属性，如<head>标签就不带任何属性；
- 6.标签可以嵌套，但是不能交叉嵌套；
常用标签
1.<!DOCTYPE>标签
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可以告诉浏览器文档使用HTML或者XHTML规范。其作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
- 1.BackCompat：怪异模式，浏览器使用自己的怪异模式解析并渲染html页面；
- 2.CSS1Compat：标准模式，浏览器是用W3C的标准解析并渲染html页面；
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat模式。
2.<heade>标签内常用标签
- <meta>标签
1.标签介绍：
<meta>标签提供有关页面的元信息(meta-information)，针对搜索引擎和更新频度的描述或者关键词；
<meta>标签位于文档的头部，不包含任何内容；
<meta>标签提供的信息是用户不可见的；
2.<meta>标签的组成：
<meta>标签共有两个属性，分别是name和http-queiv属性，不同的属性又有不同的参数值，不同的参数值就实现了不同网页功能：
(1)name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息：
<meta name="keywords" content="北京汽车网，北京汽车报价，北京车市最新报价， 北京汽车报道，北京易车网，北京汽车团购服务">
<meta name="description" content="北京汽车网，北京汽车报价，北京车市最新报价，北京汽车报道，北京易车网，北京汽车团购服务">
(2)http-equiv属性：相当于http的头文件作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各参数的变量值：
<title>meta标签</title>
<meta charset="UTF-8">
<meta http-equiv="content-type" charset="utf8">和上面的是一样的，都是指定编码的
<meta http-equiv="refresh" content="2;url=http://www.baidu.com"> <!--两秒之后跳转到百度页面(注意后面的引号，分别在秒数的前面和网址的后面)-->
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <!--设定当前网页的兼容模式为IE7(哪怕你用其他版本的浏览器打开，它也是支持IE7版本的)-->
- 非<meta>标签
<link rel="icon" href="http://www.jd.com/favicon.ico"> <!--设置头部图标，，就像我们打开百度网址上会有百度的小图标-->
<link rel="stylesheet" href="css.css"> #加载css
<script src="hello.js"></script> #加载js
3.<body>标签内常用标签
基本标签：
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
特殊字符：
< >；"；©®
常用标签练习如下：
<body>
<h1 style="background-color: green;">世界，你好！</h1>
<h2>世界，你好！</h2>
<h3>世界，你好！</h3>
<h4>世界，你好！</h4>
<h5>世界，你好！</h5>
<h6>世界，你好！</h6>
<hr width="1000" color="red">
《悯农》<br>
锄禾日当午，汗滴禾下土。<br>
谁知盘中餐，粒粒皆辛苦。<br>
春种一粒粟，秋收万颗子。<br>
四海无闲田，农夫犹饿死。<br>
<hr width="1000" color="red">
<p style="background-color: forestgreen">《悯农》</p>
<p>锄禾日当午，汗滴禾下土。</p>
<p style="background-color: blueviolet">谁知盘中餐</p>
<p>粒粒皆辛苦。</p>
<hr width="1000" color="red">
<a href="http://www.baidu.com" style="background-color: bisque">点击百度</a>
<a href="http://www.baidu.com" style="background-color: bisque">神话</a>
</body>
解释如下：
标签分类一：
- 自闭合标签：单标签；
- 闭合标签：双标签；
标签分类二：
- 块级标签：独占一行，可以设置宽度、高度，如：div，p，h1-h6；
- 内联标签：按内容占位，高度和宽度是由自己的内容填充的，如：a，br，img；
判断块级标签和内联标签：
- 1.是否独占一行(可以通过设置背景颜色进行判断)；
- 2.是否可以单独为元素设置宽度和高度；
<div>和<span>标签
<div></div>：<div>是一个块级标签，并无实际的意义，如同白板，主要通过CSS样式为其赋予不同的表现；
<span></span>：<span>标签为内联标签，并无实际意义，如同白板，主要通过CSS样式为其赋予不同的表现；
这两个标签专门为定义CSS样式而产生的，如果在网页中插入这两个标签，不会对页面产生任何影响。
<img>图形标签
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
<a>超链接标签(锚标签)
所谓超链接，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、电子邮件、文件，甚至可以是一个应用程序；
<a href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
列表标签
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
<table>表格标签
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格可以包含文字、列表、图片、表单、数字符号、预置文本或者其它表格内容等。表格最重要的目的是显示表格数据，表格数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格基本结构：
<table>
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
其属性：
<tr>: 表行
<th>: 表头
<td>:表数据
属性:
border： 表格边框
cellpadding：内边距
cellspacing： 外边距
width：像素 百分比.（最好通过css来设置长宽）
rowspan：单元格竖跨多少行
colspan：单元格横跨多少列（即合并单元格）