web开发本质：    1、浏览器输入网址回车都发生了什么？        1、浏览器给服务端发送一个消息        2、服务端拿到消息        3、服务端返回消息        4、浏览器展示页面C/S架构----B/S架构客户端和服务端  消息的格式是约定好的HTTP协议：浏览器和服务器之间约定好的消息格式
import  socket
sk = socket.socket()
sk.bind(('127.0.0.1',8000))
sk.listen(5)
while 1:conn,addr = sk.accept()conn.recv(1024)conn.send(b'HTTP/1.1 200 OK\r\n\r\n')with open('data.txt','rb') as f:msg = f.read()conn.send(msg)# conn.send(b'<h1>hello s9)</h1>')conn.close()

HTML文件结构：<!--注释内容--><!DOCTYPE html>声明为HTML5文档。<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。<title>、</title>定义了网页标题，在浏览器标题栏显示。<body>、</body>之间的文本是可见的网页主体内容。<title></title>    定义网页标题<style></style>    定义内部样式表<script></script>  定义JS代码或引入外部JS文件<link/>    引入外部样式表文件<meta/>    定义网页原信息
<!DOCTYPE html>
<html lang="zh-CN">
<head><!--2秒后跳转到对应的网址，注意引号--><!--<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">--><!--指定文档的编码类型--><meta charset="UTF-8"><meta http-equiv="content-Type" charset=UTF8"><!--告诉IE以最高级模式渲染文档--><!--<meta http-equiv="x-ua-compatible" content="IE=edge">--><!--<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">--><!--<meta name="description" content="老男孩教育Python学院">--><title>我的第一个html页面</title><style>a {color:red;}</style><!--<script>--><!--alert('hello s9!')--><!--</script>-->
</head>
<body><h1>hello s99999)</h1><h2>hello s99999)</h2><h3>hello s99999)</h3><h4>hello s99999)</h4><h5>hello s99999)</h5><img src="https://ss0.bdstdddatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/udpload/news/image/20180316/20180316170729_222286383.jpg" alt="找不到了"><img src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg'><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552141263&di=bf0c6be6939bf48c5ad8279ec240be4c&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg" alt="新垣结衣" title="老婆"><a href='http://www.sogo.com'>搜狗</a><a href='http://www.luffycity.com' target="_blank">路费学车</a>
</body>
</html>

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s><p>段落标签</p><h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6><!--换行-->
<br><!--水平线--><hr>

空格    &nbsp;
>    &gt;
<    &lt;
&    &amp;
¥    &yen;
版权    &copy;
注册    &reg;

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><b>python9999</b>
<i>python9999</i>
<u>python9999</u>
<s>python9999</s>
<h1>海&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;燕</h1>
<p>苍茫的大海上，狂<br>风卷积<br>着乌云</p>
<p>苍茫的大海上，狂<br>风卷<br>积着乌云</p>
<p>苍茫的大海上，狂风卷积着乌云</p>
<hr>
<p>苍茫的大海上，狂风卷<br>积<br>着乌云</p>
<p>苍茫的大海上，狂风卷积着乌云</p>
<p>苍茫的大海上，狂风卷积着乌云</p>
&copy;&reg;
</body>
</html>

div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。默认占浏览器宽度，能设置长和宽span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。根据内容决定长度块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。注意：关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。p标签不能包含块级标签，p标签也不能包含p标签。
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<span>我是span标签</span>
<span>我是span标签</span>
<span>我是span标签</span>

列表

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul>
<ol><li>aaa</li><li>bbb</li><li>ccc</li></ol>
</body>
</html>

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

有序列表

<ol type="1" start="2"><li>第一项</li><li>第二项</li>
</ol>

type属性：

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul type="square"><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul>
<ol type="I" start="4"><li>aaa</li><li>bbb</li><li>ccc</li></ol>
</body>
</html>

标题列表

 
<dl><dt>标题</dt><dd>内容</dd><dt>标题</dt><dd>内容</dd></dl></ol>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body>
<table border="1" cellpadding="10" CELLSPACING="10" ><thead><tr><th>姓名</th><th>年龄</th><th>爱好</th></tr></thead><tbody><tr><td colspan="2">小强</td><td rowspan="2">戴帽子</td></tr><tr><td>tim</td><td>322</td></tr></tbody>
</table>
</body>
</html>

<!--h1*4>a{a标签$}-->
<h1><a href="">a标签1</a></h1>
<h1><a href="">a标签2</a></h1>
<h1><a href="">a标签3</a></h1>
<h1><a href="">a标签4</a></h1>
<!--h1*4>a.c1{a标签$}-->
<h1><a href="" class="c1">a标签1</a></h1>
<h1><a href="" class="c1">a标签2</a></h1>
<h1><a href="" class="c1">a标签3</a></h1>
<h1><a href="" class="c1">a标签4</a></h1>
<!--h1*4>a.c1[id=a$]{a标签$}-->
<h1><a href="" class="c1" id="a1">a标签1</a></h1>
<h1><a href="" class="c1" id="a2">a标签2</a></h1>
<h1><a href="" class="c1" id="a3">a标签3</a></h1>
<h1><a href="" class="c1" id="a4">a标签4</a></h1>

标签的嵌套规则：

　1.行内标签不能嵌套块级标签

　2.p标签不能嵌套块级标签

　

转载于:https://www.cnblogs.com/zhangtengccie/p/10503442.html

Python9-前端基础知识-day47相关推荐

  1. 前端基础知识整理汇总（中）

    前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...

  2. 前端基础知识整理汇总（上）

    前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...

  3. Web前端基础知识整理

    1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...

  4. day04-硅谷课堂-前端基础知识（二）

    硅谷课堂第四天-前端基础知识 文章目录 硅谷课堂第四天-前端基础知识 一.NPM 1.NPM简介 1.1.什么是NPM 1.2.NPM工具的安装位置 2.使用npm管理项目 2.1.创建文件夹npm ...

  5. （硅谷课堂项目）Java开发笔记4：前端基础知识（二）

    文章目录 (硅谷课堂项目)Java开发笔记4:前端基础知识(二) 一.NPM 1.NPM简介 1.1.什么是NPM 1.2.NPM工具的安装位置 2.使用npm管理项目 2.1.创建文件夹npm 2. ...

  6. 前端基础知识第四章---CSS

    前言 ❤️ 生活中总有一些惊喜值得期待,只要我们一直保持着热爱 ❤️ 前端基础知识第四章---CSS 一.CSS 第四章 (1)浮动(float) 1.1 传统网页布局的三种方式 1.2 标准流(普通 ...

  7. （Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器

    文章目录 一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式 二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器 总结 (2)复合选择器 ①:后 ...

  8. python前端基础知识总结 及部分练习题

    python前端基础知识总结 知识总结 认识Python 发展历史 版本选择 python2.7是python2的最后一个版本,到2020年将不再维护 python3.6是python3最新的版本,是 ...

  9. 性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）

    目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...

  10. 【前端基础知识笔记】 【项目导向型】（持续更新中）

    我在做项目的过程中,学习了一些前端基础知识.为了方便以后的查询,将这些知识集中在这篇博客中,方便以后的查询. 注意!这些知识是不成体系的,因为我只是按照遇到的先后顺序记载于此.这是为了方便结合项目开发 ...

最新文章

  1. IOS开发笔记1-写一个hello world!程序
  2. EXP-00091 正在导出有问题的统计信息 问题的解决(转)
  3. Python多重继承时属性的调用顺序
  4. mysql报904_EXP-00008:遇到ORACLE错误904问题
  5. 俄罗斯套娃（JOISC 2016 Day 1）
  6. Java集合(一、HashMap)
  7. 【Axure电商原型】电商APP高保真原型+移动端通用版电商app模板+用户中心+会员体系+内容推荐+社区体系+运营推广+订单流程+运营活动+订单管理+售后及服务+秒杀专区+特惠推荐+高保真移动端电商
  8. Javascript第六章基本包装类型第八课
  9. 群晖 root_群晖洗白简单教程
  10. Google广告优化与工具
  11. android界面设计中用的字体,APP界面设计必备!最全UI设计字体规范
  12. 工业级串口Modbus数据绘制曲线及上位机监控软件DotTrend
  13. 计算机冗余,计算机中的冗余是什么意思
  14. Telink zigbee射频和功耗测试的方法
  15. 自学成才秘籍！机器学习深度学习经典资料汇总
  16. 交中IB课程中心2022届早申阶段录取成果汇总
  17. 理工男，我感觉 win10 挺好用的，一点不卡，为什么有那么多人买Macbook 呢?
  18. 参加web前端培训，能找到工作吗？
  19. 最新计算机技术a类学校,计算机科技领域的23所院校排名，4所A类院校录取分数线达到A＋...
  20. mysql简化的审批流程表设计

热门文章

  1. [c语言]在程序中检测键盘按键
  2. Tensorflow入门之 Win10 运行 linux 子系统
  3. NVIDIA显卡架构
  4. html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
  5. Android 原生系统设置修改Preference样式
  6. Spring AOP tx:advice
  7. bytebuddy实现原理分析 源码分析 （三）- advice 详解
  8. Rust编译`Couldn‘t resolve host name (Could not resolve host: crates)` 错误的解决办法
  9. 在虚拟机Linux上写c语言代码
  10. C++统计一个文件的行数，大写字母数，小写字母数，数字数