1.背景

1.CS架构和BS结构

CS模式：C/S就是Client/Server的缩写，是客户端和服务器架构；早期的软件系统多数是C/S结构的设计标准；

BS模式：B/S模式就是Browser/Server的缩写，是浏览器和服务器结构；B/S是随着Internet技术的兴起，对C/S结构的变化或者改进的结构；版智商B/S还是属于C/S结构范围，也就是B/S包含在C/S中，是特殊的C/S架构；浏览器就是B/S结构最主要的客户端，网站也是B/S结构的软件；

2.W3C标准

World Wide Web Consortium，简称“W3C”,中文翻译为万维网联盟，又称W3C理事会；1994年10月在马恒理工学院计算机科学实验室成立，建立者是万维网的发明者蒂姆·伯纳斯·李；万维网联盟是Web技术领域最具权威和影响力的国际中立性技术标准机构，创建和发展了W3C标准，致力于维护和发展web规范。W3C标准是网页开发的核心标准；那么什么是W3C标准呢？

W3C标准不是某一个标准，而是一系列标准的集合；网页主要由三部分组成：

结构（Structure）
表现（Presentation）
行为（Behavior）

对应的W3C标准也分成了三个方面，结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准语言主要包括对象模型（如W3C DOM），ECMS Script等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

前端基础总共分为三部分：html、css和js；

1.HTTP协议

1.1HTTP协议简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写，是用于万维网（WWW：World Wide Web）服务器和本地浏览器之间传输超文本的传送协议；HTTP是一个属于应用层的面向对象的协议，由于其简洁、快速的方式，是用于分布式超媒体信息系统；它于1990年提出，经过几年的使用与发展，得到不断的完善和扩展。HTTP协议工作与客户端-服务端架构为上；浏览器作为HTTP客户端通过HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求；Web服务器根据接收到的请求后，向客户端发送响应信息；

import socketsock = socket.socket()
sock.bind(('127.0.0.1', 8800))
sock.listen(5)while 1:print('server is working...')conn, addr = sock.accept()recv_data = conn.recv(1024)conn.send(b'HTTP/1.1 200 OK\r\nname:sxm\r\nwelcome to web world!')conn.close()sock.close()

1.2http协议特性

1.基于TCP/IP协议

http协议是基于TCP/IP协议之上的应用层协议；

2.基于请求-响应模式

HTTP协议规定，请求从客户端发出，最后服务器响应该请求并返回。换句话说，肯定是先从客户端开始建立通信的，服务端在没有接收请求之前不会发送响应；

3.无状态保存

HTTP是一种不保存状态，即无状态（stateless）协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别，协议对于发送过的请求或响应都不做持久化处理；

使用HTTP协议，每当有新的请求发送时，就会有对应的新响应产生。协议本身并不保留之前一切的请求或响应报文的信息；这是为了更快的处理大量事务，确保协议的可伸缩性，而特意把HTTP协议设计成如此简单的；

可是，随着Web的不断发展，因无状态而导致业务处理变得棘手的情况增多了；比如：用户登录到一家购物网站，即使他跳转到该站的其他网页后，也需要能保持登录状态；针对这个实例，网站为了能够掌握是谁发出的请求，HTTP1.1虽然是无状态协议，但为了实现期望的保持状态功能，于是引入了Cookie技术；有了Cookie再用HTTP协议通信，就可以管理状态了；

4.无连接

无连接的含义是限制每条连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接；餐用这种方式可以节省传输时间；

1.3http请求协议和响应协议

http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的请求协议。用于HTTP协议交互的信被称为HTTP报文；请求端（客户端）的HTTP报文做请求报文，响应端（服务器端）的做响应报文；HTTP报文本身是由多行数据构成的字文本；

1.请求协议

问：get与post的区别？

Get提交的数据会放在URL之后，以?分隔URL和传输数据，参数之间以&相连，如EditBook?name=test1&id=123456；POST方法是把提交的数据放在HTTP包的请求体中；
GET提交的数据大小有限制（因为浏览器对URL长度有限制），而POST方法提交的数据没有限制

2.响应协议

响应状态码：状态码的职责是当客户端向服务端发送请求时，返回的请求结果；借助状态码，用户可以知道服务区是正常处理了请求还是出现了异常；状态码如200 OK，以3位数字和原因组成；数字中的一位指定了响应类别；响应类别主要有如下五种：

2.HTML

了解了web相关基本概念以后，我们开始正式接触网页开发，网页开发的基础是HTML；

2.1HTML概述

HTML，即超文本标记语言（HyperText Markup Language），由SGML（标准通用标记语言）发展而来，也叫web页面；扩展名是.html或是.htm
HTML是一种用来制作网页的标准标记语言；超文本，指的是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、连接等元素
HTML不是一种编程语言，而是一种写给网页浏览器，具有描述性的标记语言；

自1990年以来，HTML就一直被用作WWW（World Wide Web的缩写，也可简称WEb，中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过网页浏览器显示出效果；用户在访问网页时，是把服务器的HTML文档下载到本地客户端设备中，然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果；

网页本身是一种文本文件，通过在文本文件中添加各种各样的标记标签，可以告诉浏览器如何显示标记中代表的内容；如：HTML中有的标签可以告诉浏览器要把字体放大，就像word一样，也有的标签可以告诉浏览器显示制定的图片，还有的标签可以告诉浏览器把内容居中或者倾斜等；

每一个HTML标签代表的意义不一样；同样，他们在浏览器中表现出来的外观也是不一样的；

2.2HTML结构和标签格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

<!DOCTYPE html>告诉浏览器使用什么样的html或者xhtml来解析html文档
<html></html>是文档的开始标记和结束标记；此元素告诉浏览器其自身是一个html文档，在它们之间的是头部<head>和主体<body>
元素出现在文档的开头部分；与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义
<title></title>定义网页标题，在浏览器标题栏显示
<body></body>之间的文本是可见的网页主体内容
<meta charset="UTF-8">声明编码方式用utf8
<head></head>中可以添加<link rel="icon" href="https://www.baidu.com/1.png">设置网页的图标icon

2.3标签的语法

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

html标签是由尖括号包围的特定关键词
标签分为闭合和自闭合两种标签
html不区分大小写
标签可以有若干个属性，也可以不带属性
标签可以嵌套，但是不可以交叉嵌套

在很早以前HTML4的时候，HTML的标签是大写的，但是在后面的发展中，人们发现HTML仍然存在很多不足，标签不区分大小写和标签可以胡乱嵌套都在其中，于是1998年语法更为完善的XML（The Extensible Markup Language 可扩展标记语言）称为推荐标准，意在替代HTML；和HTML一样，XML同样来源于SGML，但同时已有成千上万的站点，因此直接使用XML作为网页开发技术根本就不可能；因此，后面W3C就在HTML4.0的基础上，参照XML的语法规则对HTML进行扩展，形成了XHTML（The Extensib HyperText Markup Language 可扩展超文本标记语言）的1.0版本；

XHTML是实现HTML到XML的过渡；

2.4基本标签

1.标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

2.段落标签

<p>大家好，我是段落1。</p>
<p>大家好，我是段落2。</p>
<p>大家好，我是段落3。</p>

3.换行标签：break的缩写

<p>大家好，我是段落标签p。我按了enter一下
换行了</p><p>大家好，我是段落标签p。我按了enter一下<br/> 换行了</p>

4.文本格式化标签

HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字；如果在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化；

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />

5.特殊符号

&reg; &nbsp; &copy;

标签大致可以分为两类：
块级标签（block）：独占一行；可以设置长宽；
内联标签（inline）：按文本内容占行；不可以设置长宽；

6.div和span标签

<div>只是一个块级元素，并无实际的意义；主要通过css样式为其赋予不同的表现
<span>表现了内联行（行内元素），并无实际意义，主要通过css样式为其赋予不同的表现

块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行；如果单独在网页中插入这两个元素，不会对页面产生任何的影响；这两个元素是专门为定义css样式而产生的；

html渲染源码时，会将源码中的enter换行和空格渲染为空格的效果

2.5超链接标签

1.超链接基本使用

超链接的属性：

属性	值	描述
href	网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如：F:\html\index.html ]	规定链接的跳转目标
title	百度	链接的提示信息
target	_blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页]	与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过

href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是网络连接，也可以是本地链接
网络链接指的是依靠网络来进行关联的地址，一般在地址前面是http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标
本地连接指的是本地计算机的地址，一般在地址前面是以file:///开头或者以C:/、D:/、E:/开头的，不需要经过网络
如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面；href的值为#时，则点击不跳转

2.锚点应用

锚点（anchor）是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的连接跳转，运用相当普遍；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>锚点的使用</title><style>div{height:800px;background-color: #0a83a0;}</style>
</head>
<body><a href="#i1">第一章</a><a href="#i2">第二章</a><a href="#i3">第三章</a><div id="i1"><p>第一章内容</p></div><div id="i2"><p>第二章内容</p></div><div id="i3"><p> 第三章内容</p></div>
</body>
</html>

向服务器发送请求的方式：

浏览器地址栏：GET
超链接请求：默认为GET请求
form表单
Ajax

2.6img标签

在HTML中，图像由标签定义的，它可以用来加载图片到html网页中显示；网页开发过程中，有三种图片格式被广泛应用到web里，分别是jpg、png、gif；

img的属性：

属性	描述
src	指定图像的url地址，是英文source的缩写，表示引入资源； src的值可以是本地计算机存储的图片地址，也可以是网络上外部图片网站的图片地址；如果src的值不正确，那么浏览器就无法找到正确的图片，而是显示一张裂图；
alt	指定图像无法显示时的替换文本；当图像显示错误时，在图像位置上显示alt的值；alt属性一般作为SEO优化的手段之一，所以，使用了img标签就需要加上alt属性；
width	指定引入图片的显示宽度
height	指定引入图片的显示高度
border	指定引入图片的边框宽度，默认为0
title	悬浮图片上的提示文字

2.7列表标签

ul：无序列表：是unorder list的缩写
ol：有序列表：是order list的缩写
df：定义列表：是define list的缩写：自定义列表不仅仅是一列项目，而是项目及其注释的组合

	属性	值	说明
ul的属性	type	circle：空心圆	指无序列表的行开头图标样式
ul的属性	type	square：正方形
ol的属性	start	start=“100”	指的是有序列表的第一行的序号，默认为1

<ul type="circle"><li>item</li><li>item2</li><li>item3</li>
</ul><ol start="100"><li>item</li><li>item2</li><li>item3</li>
</ol><dl><dt>item</dt><dd>item2</dd><dt>item</dt><dd>item2</dd>
</dl>

2.8表格标签

tr：table row：表示一行的开始与结束
th：table header：表头
td：table ：表示一个单元格的开始与结束

	属性	值	说明
table属性	width	px、 %	规定表格的宽度
	height	px、 %	规定表格的高度
	align	left、center、right	规定表格相对周围元素的对齐方式
	bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定表格的背景颜色
	background	url	规定表格的背景图片
	border	px	规定表格边框的宽度，默认为0
	cellpadding	px、 %	规定单元格边框与其内容之间的空白
	cellspacing	px、 %	规定单元格之间的空隙
td属性	height	px、 %	规定单元格的高度
	width	px、 %	规定单元格的宽度
	align	left、center、right	规定单元格内容的对齐方式
	valign	top、middle、bottom	规定单元格内容的垂直对齐方式
	bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定单元格的背景颜色
	background	url	规定单元格的背景图片
	rowspan	number	规定单元格合并的行数
	colspan	number	规定单元格合并的列数

 <table border="1px"><tr><th>序号</th><th>姓名</th><th>昵称</th><th>年龄</th></tr><tr><td>1</td><td colspan="2" align="center">sxm</td>
<!--         <td>sxm</td>--><td rowspan="3">12</td></tr><tr><td>2</td><td>sxm1</td><td>sxm12</td>
<!--         <td>123</td>--></tr><tr><td>2</td><td>sxm1</td><td>sxm15</td>
<!--         <td>123</td>--></tr></table>

2.9表单标签

表单主要是用来手机客户端提供的相关信息，提供了用户数据录入的方式，有多选，单选，单选文本，下拉列表等输入框便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁；

一个表单元素有三个基本组成部分：

表单标签：包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息；
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件；
表单按钮：包括提交按钮，复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作；

submit按钮的事件：当点击submit时，浏览器会将当前form表单的所有有效表单域组成键值对按from表单的method属性提交到action属性对应的服务器；

在HTML中创建表单用form标签；每个表单都可以包含一个到多个表单域或按钮；from标签属性：

属性	值	说明
action	访问服务器地址	服务器端表单处理程序的URL地址
method	post，get[默认值]	表单数据的提交方法
target	参考超链接的target属性	表单数据提交时URL的打开方式
enctype	application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]	表单提交数据时的编码方式

<form action="https://www.baidu.com" method="POST">
<!--    表单域：-->
<!--    1.input系列--><p>姓名：<input type="text" name="user" placeholder="用户名"></p><p>密码：<input type="password" name="pwd"></p><p>爱好：篮球<input type="checkbox" name="hobby" value="basketball" checked="checked">足球<input type="checkbox" name="hobby" value="football" checked>羽毛球<input type="checkbox" name="hobby" value="badminton"></p><p>性别：男<input type="radio" name="gender" value="1">女<input type="radio" name="gender" value="2">保密<input type="radio" name="gender" value="3"></p><p>生日：<input type="date" name="birthday"></p>
<!--    2.select标签--><p>籍贯：<select name="province" id=""><option value="hebei">河北省</option><option value="henan">河南省</option><option value="beijing" selected>北京市</option></select></p><p>多选：<select name="pro" id="" multiple size="1"><option value="hebei">河北省</option><option value="henan">河南省</option><option value="beijing" selected>北京市</option></select></p>
<!--    3.textarea标签--><p>简介：<textarea name="introduce" id="" cols="30" rows="10" placeholder="简介"></textarea></p>
<!--    按钮类--><input type="button" value="按钮"><input type="reset" value="reset"><input type="submit" value="登录">
</form>

在前端html语言中，标签属性中键值相同的属性类似于checked="checked"也叫布尔属性，可以简写为checked
name属性为键
value属性为值

前端三剑客：HTML相关推荐

前段第44天------前端、前端三剑客、HTML
一.前端定义:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页. 前端技术:前端设计:一般可以理解为网站的视觉设计前端开发:网站的前台代码实现,包括基本的HTML和CSS以及 ...
【前端三剑客二】CSS手术刀剖析第二篇
文章目录一.CSS常用元素属性 1.字体属性 1.1.设置字体 1.2.字体大小 1.3.字体粗细 1.4.文字样式 2.文本属性 2.1.文本颜色 2.2.文本对齐 2.3.文本装饰 2.4.文本 ...
前端三剑客 HTML、CSS、JavaScript 入门到上手
前端三剑客 1. HTML基础使用 1.1 HTML 入门实例 1.2 HTML 常见标签 ① 注释标签 ② 标题标签 ③ 段落标签 ④ 换行标签 HTML转义字符 ⑤ 格式化标签 ⑥ 图片标签 ⑦ ...
前端 - 前端三剑客绘制一幅《圣诞节快乐》交互祝福效果
一.前言 2022年圣诞节到来啦,很高兴这次我们又能一起度过~ 这个想法也是之前一直想制作一个有交互性的圣诞快乐祝福网页,一直没有时间去实现,正好趁着这次活动来满足下自己的小小的愿望哈~ 利用前端三剑 ...
前端三剑客入门学习笔记之HTML
前言前端三剑客即指HTML.CSS.JavaScript. 它们之间搭配使用可以得到多种效果. HTML:决定网页结构和内容,相当于人的身体. CSS:决定网页呈现给用户的模样,相当于给人 ...
前端三剑客 - HTML
前言接下来的时间将会给大家带来前端的相关知识,主要是做到扫盲的效果,在后面我们自己做网页时会用到前端三剑客HTML,CSS,JavaScript对网页进行布局,美化.
总结前端三剑客之一（HTML基础）
今天我们来学习前端三剑客之一(HTML),在讲解HTML之前,我们需要先了解前端三剑客是什么,分别又有什么作用呢? 前端三剑客指的是HTML.CSS.JavaScript,这三门语言.目前大多数网站的 ...
前端三剑客之HTML
前端三剑客之HTML 1. 前言 2. HTML超文本标记语言 2.1 背景 2.2 常用编辑工具 2.3 来写第一个HelloWorld吧 2.4 必备标签.属性 2.5 常用标签 2.5.1 标题 ...
前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
文章目录前言后端 && 前端的部分历史 - java 关于网站搭建正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧浏览器的开发者工 ...
前端三剑客_HTML
前端三剑客一.软件的架构 1.C/S(客户端/服务器端) 一般我们使用的软件都是C/S架构: 比如系统中的QQ.360--: C表示客户端,通过客户端来使用软件: S表示服务器,服务器负责处理软件的 ...

前端三剑客：HTML