初始HTML

扫码查看

前端之html

HTML介绍

1.1Web服务本质
import socket


sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b"<h1>Hello world!</h1>")
    conn.close()

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

2.2html简介
  • 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。一套规则,浏览器认识的规则
  • 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性)
  • 静态网页文件扩展名:.html 或 .htm
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
    HTML 使用标记标签来描述网页
2.3html结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
</head>
<body>

</body>
</html>

HTML常用标签

定义网页标题
定义内部样式表
定义JS代码或引入外部JS文件
引入外部样式表文件或网站图标
定义网页原信息

标签

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

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

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

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"><meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑">

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

标签

标题内容

<title>hantao</title>

内标签

基本标签

: n的取值范围是1~6; 从大到小. 用来表示标题.

: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

: 加粗标签.

: 为文字加上一条中线.

: 文字变成斜体.

和: 上角标 和 下角表.


:换行.


:水平线

标签和标签

只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

标签

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

标签

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

​ 绝对 URL - 指向另一个站点(比如 href="http://www.jd.com
​ 相对 URL - 指当前站点中确切的路径(href="index.htm")
​ 锚 URL - 指向页面中的锚(href="#top")

列表标签

    : 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

      : 有序列表

    1. :列表中的每一项.

      定义列表

      列表标题
      列表项

      标签

        标题

        表头

        表主体

        表尾

      <table border="2" cellspacing="10" cellpadding="20">
              <tr>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>班级</th>
                  <th>薪水</th>
              </tr>
              <tr>
                  <td colspan="2" style="text-align: center">hantao</td>
                  <td>s19</td>
                  <td>100</td>
              </tr>
              <tr>
                  <td>xiaoxiaojing</td>
                  <td>38</td>
                  <td>s19</td>
                  <td rowspan="2">1000000</td>
              </tr>
              <tr>
                  <td>miaomiao</td>
                  <td>1</td>
                  <td>s19</td>
              </tr>
          </table>

      : table row

      : table head cell

      : table data cell

      属性:

      ​ border: 表格边框.

      ​ cellpadding: 内边距

      ​ cellspacing: 外边距.

      ​ width: 像素 百分比.(最好通过css来设置长宽)

      ​ rowspan: 单元格竖跨多少行

      ​ colspan: 单元格横跨多少列(即合并单元格)

      标签

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

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

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

      02-13 01:25
      查看更多