前端基础：HTML标签(上)

前端基础：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\r\n\r\n %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>:水平线

特殊字符：

      &lt; &gt；&quot；&copy;&reg;

常用标签练习如下：

<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: 鼠标悬浮时的提示信息.

width: 图片的宽

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：单元格横跨多少列（即合并单元格）