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

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. react rem

    1 :安装 postcss-px2rem 2 在webpack.config.js 中添加  引入 const px2rem = require('postcss-px2rem');   找到: lo ...

  2. linux查看硬件详细信息dmidecode

    [root@zabbix_server src]# dmidecode|more # dmidecode 2.12 SMBIOS 2.7 present. structures occupying b ...

  3. python中list操作方法

    1,创建一个列表 只要把逗号分隔的不同的数据项使用方括号括起来即可.如下所示:复制代码 代码如下:list1 = ['physics', 'chemistry', 1997, 2000];list2 ...

  4. Linux - Linux 终端命令格式

    Linux 终端命令格式 目标 了解终端命令格式 知道如何查阅终端命令帮助信息 01. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相应 ...

  5. Python设计模式 - UML - 定时图(Timing Diagram)

    简介 定时图也是一种交互图,用来描述对象或实体随时间变化的状态或值,及其相应的时间或期限约束.定时图应用较广,并不局限于软件工程领域. 定时图侧重与时间线相关的值或状态的改变,这些改变可能来自于收到消 ...

  6. MMU二级页表

    https://blog.csdn.net/forDreamYue/article/details/78887035

  7. XACT_ABORT选项

    XACT_ABORT选项用于指定当SQL语句出现运行时错误时,SQL Server是否自动回滚到当前事务.其语法格式如下所示: SET XACT_ABORT{ON|OFF} 当SET XACT_ABO ...

  8. JMETER java.net.SocketTimeoutException: Read timed out

    将JMETER脚本里的请求超时时间由1000ms 修改为 10000ms,该错误不再出现.

  9. CentOS7+CDH5.14.0安装全流程记录，图文详解全程实测-总目录

    CentOS7+CDH5.14.0安装全流程记录,图文详解全程实测-总目录: 0.Windows 10本机下载Xshell,以方便往Linux主机上上传大文件 1.CentOS7+CDH5.14.0安 ...

  10. java_29打印流

    1打印流 PrintStream 和PrintWriter 不负责数据源  只负责数据目的 2.方法 public class Demo {    public static void main(St ...