---恢复内容开始---

web服务本质

import socket

sock=socket.socket()

sock.bind(('127.0.0.1',))

sock.listen()

where True:

    conn.addr=sock.accept()

    data=conn.recv()

    print(data.decode('utf8'))

    with open('index.html'.'r') as f:

        data=f.read()

    conn.send(('HTTP/1.1 200 ok\r\n\r\n %s'%data).encode('utf8'))

    conn.close()

HTTP/1.1 201 ok\r\n\r\n 是需要改善的内容：为也给浏览器看的

html

定义

　　超文本标记语言。是通过标签语言来标记要显示的网页中的各个部分。一套浏览器认识的规则。

结构

　　1.<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个HTML文档

在它们之间是文档的头部<head>和主体<body>.

　　2.它们之间的内容不会在浏览器的文档窗口显示，但是期间的元素有特殊重要的意义。

　　3.<title></title> 定义网页标题，在浏览器标题栏显示 

　　4.<body></body> 之间的文本是可见的网页主体内容　

html标签格式

　　1.由尖括号包围的关键词

　　2.通常是成对出现的（双边标记），比如<div>和</div>　

　　3.标签不区分大小写　

　　4.标签分为开始和结束两部分标签之间的内容我们叫做标签体<a> </a>。有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签。<br/><hr/><img/>

　　5.标签可以嵌套但是不能交叉嵌套；

标签的语法

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

　　<标签名 属性1=‘属性值1’属性2=‘属性值2’……/>

常用标签

1.<!DOCTYPE>标签 h5格式

　　声明位于文档中的最前面的位置，处于<html> 标签之前。此标签可告知浏览器文档使用哪种 HTML或XHTML规范

　　1.BackCompat:怪异模式，浏览器使用自己的怪异模式解析渲染页面。

　　2.CSS1Compat: 标准模式，浏览器使用W3C的标准解析渲染页面

2.<head>内常用标签 头部

　　　　<meta>标签位于文档的头部，不包含任何内容，提供的信息是用户不可见的

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

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

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">

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


<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

<meta http-equiv="content-Type" charset=UTF8">

<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 
 

3.<body>内常用标签  主体

　　　　<hn>: n 的取值范围是1-6 ; 从大到小。用来表示标题

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

　　　　<b> <strong> :加粗标签

　　　　<em>: 文字变成斜体

　　　　<sup> 和 <sub> ：上角标 和 下角标

　　　　<br> : 换行

　　　　<hr> : 水平线

　　　　特殊字符：&lt; &gt; &quot; &copy; &reg;

a

　　　　　　　　　　

4.<div>和<span>

　　　<div></div> 只是一个块级元素，并无实际意义 主要通过CSS 样式为其赋予不同的表现

　　　　　　块级标签（block）有：h系列  div  p  br  hr   table   tr

　　　<span></span> 为内联行（行内元素），同上。

　　　　　　内敛标签（inline）有：b   strong   strike   em  sup   sub   img   a   span    td   th

5.<img> 属性

　　　　src: 要显示图片的路径

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

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

　　　　width : 图片的宽

　　　　height ：图片的高

列表标签

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

<ul>

  <li>咖啡</li>

  <li>茶</li>

  <li>牛奶</li>

</ul>
<ol>

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

<ol start="">

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol>

　　有序列表<ol>

　　<li> :列表中的每一项

　　<dl> :定义列表

　　<dt> : 列表标题

　　<dd> : 列表项

<dl>

   <dt>计算机</dt>

   <dd>用来计算的仪器 ... ...</dd>

   <dt>显示器</dt>

   <dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

 

表格标签

<table>

         <tr>

                <td>标题</td>

                <td>标题</td>

         </tr>

         <tr>

                <td>内容</td>

                <td>内容</td>

         </tr>

</table>

　<tr> :table row

　<th> :table head cell

　<td>: table data cell

　　border :表格边框

　　cellpadding : 内边距

　　cellspacing: 外边距

　　width :像素百分比。

　　rowspan :单元格竖跨多少行

　　colspan : 单元格横跨多少列（即合并单元格）　　

---恢复内容结束---

前端基础之 html的更多相关文章

  1. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  2. html css 前端基础 学习方法及经验分享

    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...

  3. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  4. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  5. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  6. tableview前端基础设计（初级版）

    tableView前端基础设计 实现的最终效果 操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...

  7. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  8. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  9. 前端基础进阶（五）：全方位解读this

    https://segmentfault.com/a/1190000012646488  https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...

  10. 前端基础之BOM和DOM day52

    前端基础之BOM和DOM   前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...

随机推荐

  1. WebMvcConfigure

    https://www.cnblogs.com/cl-rr/p/9632886.html

  2. springboot+dubbo提示超时

    在消费方工程的application.properties里面加上dubbo.consumer.timeout=30000.

  3. grep -iq 与grep -qi 意思

    就是有的时候你不需要直接打印出结果,比如在shell脚本中,你只需要知道grep有没有找到指定的字符串,而不需要满屏幕打印出来,因为那样会很难看.这只可以加-q选项,执行结果是:如果找到了,会返回0, ...

  4. 大数据实操2 - hadoop集群访问——Hadoop客户端访问、Java API访问

    上一篇中介绍了hadoop集群搭建方式,本文介绍集群的访问.集群的访问方式有两种:hadoop客户端访问,Java API访问. 一.集群客户端访问 Hadoop采用C/S架构,可以通过客户端对集群进 ...

  5. layer弹出层不居中解决方案（转）

    @感谢参考文章 原文内容: 一.问题描述 用layer做操作结果提示时,发现如果页面超出屏幕的高度时,弹出的提示不是屏幕居中,而是在页面高度的中间,如果一个页面的高度比较大,就看不到提示了. 还有一种 ...

  6. Spring常用注解总结(3)

    @Configuration 表示该类为"配置类",可替换xml配置文件.与@Component不同的是,@Configuration会生成CGLIB代理class. @Targe ...

  7. 在vscode中使用eslint

    一.vs中安装eslint插件 二.npm 全局安装 eslint   sudo npm i -g eslint 三.vs终端运行eslint --init 四.在vscode的setting中设置 ...

  8. 《AlwaysRun!》第一次作业：团队亮相

    项目 内容 这个作业属于哪个课程 2016级软件工程(西北师范大学) 这个作业的要求在哪里 实验五  团队作业1:软件研发团队组建 团队名称 Always Run! 作业学习目标 熟悉软件的开发流程与 ...

  9. Git冲突标记介绍

    <<<<<<< head 是指你本地的分支的 <<<<<<< HEADb789=======b45678910> ...

  10. UNIX 系统下退出 git commit 编辑器

    如果是 Emacs 编辑器,输入 Ctrl X + Ctrl S(保存),再输入Ctrl X + Ctrl C(退出) 如果是VIM编辑器,输入 ESC + :wq UNIX 系统默认打开的是 Ema ...