前端基础：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

 %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: 鼠标悬浮时的提示信息.
 图片的宽
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：单元格横跨多少列（即合并单元格）
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/love9527/p/9046037.html