前端开发简介与简单代码实现

前端开发前戏

前端与后端区别
- 前端
  - 前端其实就是网民在上网页的售后第一眼看到的页面或者是分支点信息页面等。或者是页面中的图片、文字、框架分配、视频、语音等整体布局都是web的前端
- 后端
  - 后端其实就是网民第一眼看不到的，一般只有部分专业人员才能大致看到。像语言编写、创建方法、改写或优化网站的方式这些操作则被称为web后端
前端学习的介绍
- 真正的前端工程师学习也需要很长的时间，我们作为后端只需要对前端做最基本的最核心的点了解即可，大致学习七天左右，前端工程师的工作职责分为三大部分，分别是传统web前端开发，移动端开发和大数据呈现端开发。web前端开发主要是针对pc端开发任务，移动端开发则包括Android开发、ios开发和各种小程序开发，在移动互联网迅速发展的带动下，移动端的开发任务量是比较大的。
前端学习的核心基础
- HTML协议
  - 全文是超文本标记语言，是一种标记语言。他包括一系列标签，通过这些标签可以将网络上的文档格式统一，是分散的interet资源，链接为一个逻辑整体，html命令组成的描述性文本，我们可以叫他为前端的骨架
- CSS
  - 层叠样式表（Cascading style Sheets）是一种用来表现html或xml等文件样式的计算机语言，css不仅可以静态地修改修饰网页，还可以配合各种脚本语言动态第对网页各元素进行格式化。
- JS（javascript）
  - 是一种就有函数有限的清零及，解释性或即时编译型的编程语言。虽然他是作为开发web也免得脚本语言而出名，但是他也被用到了很多非浏览器环境中，JS基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程规范。

超文本传输协议前戏

首先我们需要先创建一个服务端并且我们需要在服务端内具有一个发送的数据
然后我们就是用BS架构，使用浏览器充当我们的客户端
在浏览器输入我们的自己的地址和端口，发现无法展示我们刚刚需要发送的数据，无法响应
那么我们就发现我们是需要遵循浏览器的协议才可以继续使用，由于浏览器需要兼容很多服务端软件，为了实现无障碍沟通交流，就有了一些协议
- HTTP协议
- FTP协议
- HTTPS协议
- FILE协议
浏览器发送的请求数据格式很定没有问题，因为我们使用的是别人已经封装好的协议，问题就是我们自己写的服务端不符合浏览器的数据格式那么我们就需要使用HTTP协议来使用该客户端

HTTP协议

HTTP四大特性
- 基于请求响应，除了某些特殊的操作的话一般是只有你去理会HTTP的时候他才会回应你，不理会他那么他也不会主动理会你
- 基于TCP之上的作用于应用层的协议
- 无状态
  - 不保存用户的信息每次见面我们都是第一次相见，即使见一万次我也不会厌烦因为在我认为我们还是初见（《初恋五十次》）一部挺棒的电影，推荐看一下
- 无/短连接
  - 请求一次连接回应一次，然后断开连接
  - 长连接：双方建立连接后默认不断开，websocket
数据格式
- 请求数据格式
  - 请求首行（请求方式：请求数据的第一行，其中get表示请求方式，空格/表示请求资源路径，有很多种协议名称及版本）
  - 请求头（第二行开始，格式为key:value的格式）
  - 换行（必须要有）
  - 请求体（POST请求的最后一部分，存放请求参数，携带一些明恩德数据，不是所有的请求都有请求体）
- 响应数据格式
  - 响应首行（响应状态码）
  - 响应头（也是一大堆的k：v键值对）
  - 换行
  - 响应体（一般情况下就是浏览器要展示给用户看的数据）
响应状态码
- 利数字来表示一些复杂的情况说明用（类似于暗号）
  - 我们在公司中使用的状态码会有更多定义甚至还有我们自己定义的更多状态码，但是我们自己定义的状态码一般从10000开始

* 1.xx:信息

消息	描述
100 Continue	服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols	服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。

* 2.xx：信息

消息	描述
200 OK	请求成功（其后是对GET和POST请求的应答文档。）
201 Created	请求被创建完成，同时新的资源被创建。
202 Accepted	供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information	文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content	没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content	没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content	客户发送了一个带有Range头的GET请求，服务器完成了它。

3.xx：信息

消息	描述
300 Multiple Choices	多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently	所请求的页面已经转移至新的url。
302 Found	所请求的页面已经临时转移至新的url。
303 See Other	所请求的页面可在别的url下被找到。
304 Not Modified	未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy	客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused	此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect	被请求的页面已经临时移至新的url。

4.xx：信息

消息	描述
400 Bad Request	服务器未能理解请求。
401 Unauthorized	被请求的页面需要用户名和密码。
401.1	登录失败。
401.2	服务器配置导致登录失败。
401.3	由于ACL对资源的限制而未获得授权。
401.4	筛选器授权失败。
401.5	ISAPI/CGI应用程序授权失败。
401.7	访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS 6.0所专用。
402 Payment Required	此代码尚无法使用。
403 Forbidden	对被请求页面的访问被禁止。
403.1	执行访问被禁止。
403.2	读访问被禁止。
403.3	写访问被禁止。
403.4	要求SSL。
403.5	要求SSL 128。
403.6	IP地址被拒绝。
403.7	要求客户端证书。
403.8	站点访问被拒绝。
403.9	用户数过多。
403.10	配置无效。
403.11	密码更改。
403.12	拒绝访问映射表。
403.13	客户端证书被吊销。
403.14	拒绝目录列表。
403.15	超出客户端访问许可。
403.16	客户端证书不受信任或无效。
403.17	客户端证书已过期或尚未生效。
403.18	在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS 6.0所专用。
403.19	不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS 6.0所专用。
403.20	Passport登录失败。这个错误代码为IIS 6.0所专用。
404 Not Found	服务器无法找到被请求的页面。
404.0	（无）–没有找到文件或目录。
404.1	无法在所请求的端口上访问Web站点。
404.2	Web服务扩展锁定策略阻止本请求。
404.3	MIME映射策略阻止本请求。
405 Method Not Allowed	请求中指定的方法不被允许。
406 Not Acceptable	服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required	用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout	请求超出了服务器的等待时间。
409 Conflict	由于冲突，请求无法被完成。
410 Gone	被请求的页面不可用。
411 Length Required	"Content-Length"未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed	请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large	由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long	由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type	由于媒介类型不被支持，服务器不会接受请求。
416 Requested Range Not Satisfiable	服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed	执行失败。
423	锁定的错误。

5.xx：信息

消息	描述
500 Internal Server Error	请求未完成。服务器遇到不可预知的情况。
500.12	应用程序正忙于在Web服务器上重新启动。
500.13	Web服务器太忙。
500.15	不允许直接请求Global.asa。
500.16	UNC授权凭据不正确。这个错误代码为IIS 6.0所专用。
500.18	URL授权存储不能打开。这个错误代码为IIS 6.0所专用。
500.100	内部ASP错误。
501 Not Implemented	请求未完成。服务器不支持所请求的功能。
502 Bad Gateway	请求未完成。服务器从上游服务器收到一个无效的响应。
502.1	CGI应用程序超时。
502.2	CGI应用程序出错。
503 Service Unavailable	请求未完成。服务器临时过载或宕机。
504 Gateway Timeout	网关超时。
505 HTTP Version Not Supported	服务器不支持请求中指明的HTTP版本。

HTML简介

html超文本标记语言
- 是所有浏览器展示所必备的
- 浏览器展示的页面我们也称之为html页面，存储html语言的文件后缀一般为.html
- html几乎没有任何的逻辑，我们看到的就是他所表示的
HTML注释语法
HTML文件结构
- 所有的代码必须写在html标签内部才会被执行
  - <head></head> head内部的数据一般都是不给用户展示的
  - <body></body> body内的数据一般就是浏览器展示给用户看的数据
- 所有代码必须看到这个结束
HTML标签的分类
- 单标签（自闭和标签）
  - 图片
- 双标签
HTML代码是不讲究缩进的，我们只是习惯了python的锁进语法所以进行缩进，但是我们还是要使用缩进保持简洁

head内常见标签

标签	描述
	定义了文档的信息
	定义了文档的标题，控制标签页小标题
	定义了页面链接标签的默认链接地址
	定义了一个文档和外部资源之间的关系，引入外部CSS文件
	定义了HTML文档中的元数据，通过内部属性的不同可以有很多的功能
	定义了客户端的脚本文件，内部支持编写JS代码，还可以通过src属性引入外部JS文件
	定义了HTML文档的样式文件

body内常见标签

标签	描述
h1~h6	标题标签
p	段落标签
hr	水平分割线
br	换行符
u	下划线
i	斜体
s	删除线
b	加粗
font	改变文字大小颜色

块儿级标签与行内标签

标签	描述
h1~h6\p\hr\br	由于内部没有缩进概念所以这个标签就是一个标签就占一行
u\i\s\b	内部文本有多大那么自身就占用多大的位置

body内基本标签

查看内部代码直接点击实体代码区域即可查看

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
￡	镑	£	£
￥	人民币、日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

body内布局标签

div
- 块儿级标签
span
- 行内标签
块儿级标签是可以通过CSS调整为不独占一行的
标签之间很多时候可以进行嵌套
- 块儿级可以嵌套任何类型的标签
  - p这个块儿级标签虽然是块儿级的但是不能嵌套某些类型的标签
- 行内标签只能嵌套行内标签

body内常见标签

1.a标签<a></a>
	链接标签
		href		可以填写网址，点击自动跳转（假链接，在企业开发前期，其他页面都还没有写出来，那么我们不知道应该跳转到什么地方，所以只能使用假链接来代替）
		href='#' 假链接  会自动跳往网页的顶部
		href='javascript'  不会返回顶部
						href还可以填写其他标签的id值，实现锚点功能，想要通过a标签调到指定的位置，那就必须告诉a标签一个独一无二的身份编号，这样a标签才能在当前页面中找到需要跳转的目标位置
		target		可以控制是否新建页面进行转跳
						_self
						_blank

2.img标签
	图片标签
		src			填写图片信息(网络地址 本地地址)
		title		鼠标悬浮在图片上就会有提示信息，提示信心我们可以自己定义
		alt			图片加载失败后所提示的信息，我们也可以自己定义
		height		调整图片高度
		width		调整图片宽度
		如果没有指定图片的width和height则按照图片默认的盖度显示，如果指定图片的width和heright则可以使图片变形，如果有想要指定宽度和高度又不想让图片变形那么我们可以只指定两个值中的一个即可开，只要制定了一个值那么系统就会根据该值计算另一个值，并且都是等比拉伸的图片不会变形

标签两大重要特性

快速定位需要操作的标签
- id属性(一对一管理)
  - 类似身份证号，在同一个html页面上id值不能重复
- class属性(批量管理)
  - 类似于分组，多个标签可以拥有相同的calss值

列表标签

无序列表

1.作用
	制作导航条】、商品列表、新闻列表等
2.组合使用ul>li*n(n为需要的数量)
<ul>
	<li>秒杀</li>
	<li>优惠券</li>
	<li>PLUS会员</li>
	<li>闪购</li>
	<li>拍卖</li>
	<li>京东服饰</li>
	<li>京东超市</li>
	<li>生鲜</li>
	<li>全球购</li>
	<li>京东金融</li>
<ul>

3.ul标签的属性type（这属于列表的样式，所以了解即可）
type：列表保湿的类型
	disc:实心圆(默认值)
	circle:空心圆
	square:实心矩形
	none:不显示标识
可以通过CSS直接去掉小圆点
<style type="text/css">
    ul{
        list-style:none;
    }
</style>
4.注意
ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以使任意其他标签

有序列表

<h1>智商排名</h1>
	<ol>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ol>
	<!--有序列表能干的事完全可以用无序列表取代-->
	<h1>智商列表</h1>
		<ul style="list-style.none">
			<li>1.</li>
			<li>2.</li>
			<li>3.</li>
			<li>4.</li>
			<li>5.</li>
		</ul>

标题列表

<dl>
	<dt>标题1</dt>
		<dd>内容一</dd>
	<dt>标题二</dt>
		<dd>内容一</dd>
		<dd>内容二</dd>
</dl>

表格标签

记录一段数据为表格

1.作用
	表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来战士被认为是最清晰地
2.格式
	<table>	       
		<tr>
			<td></td>
		</tr>
</table>
tr代表表哥的一行数据
td表一行中的一个普通单元格th表示表头单元格
3.注意点
	表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0所以看不到边框

表格属性

1.宽度和高度
	可以给table和tb设置width和eight属性
    1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高
    1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度
 
#2、水平对齐和垂直对齐
    水平对齐align可以给table、tr、td标签设置
    垂直对齐valign只能给tr、td标签设置
    ========水平对齐===========
    取值
    align=“left”
    align=“center”
    align=“right”
    2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐
          强调：table只能设置水平方向
    2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
    2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准
    ========垂直对齐===========
    取值
    valign=“top”
    valign=“center”
    valign=“bottom”
    
    2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
    2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐
 
#3、外边距和内边距
    只能给table设置
    3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px
    3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"

三种方式细分表格

1、方式一
    在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现
<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
 
    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>
 
    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>
 
    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>
#2、方式二
 细线表格的制作方式：
        1、给table标签设置bgcolor
        2、给tr标签设置bgcolor
        3、给table标签设置cellspacing="1px"
 
 
      注意：
      table、tr、td标签都支持bgcolor属性
 
<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
 
    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>
 
    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>
 
    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>
 
#3、方式三（style="border-collapse: collapse;border: 1px solid red"）
<table border="1px" style="border-collapse: collapse;border: 1px solid red">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>egon</td>
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>alex</td>
        <td>female</td>
        <td>19</td>
    </tr>
</table>

单元格合并

1.水平向上的单元格colspan
	可以给td标签加一个colspan属性，来吧水平方向的单元格当做多个单元格来看待
	<td colspan='2'></td>
2.垂直向上的单元格rowspan
	可以给td标签设置一个rowspan属性，来把垂直方向的单元格的那个成多个去看待
3.由于某一个单元格当做了多个单元格来看待，所以就会多出一些单元格，所以需要删除一些单元格

表单标签

什么是表单
- 表单其实就是专门用来接收用户输入或者采集用户信息的

表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

元素会根据不同的 type 属性，变化为多种形态。

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框
date	日期输入框
checkbox	复选框
radio	单选框
submit	提交按钮
reset	重置按钮
button	普通按钮
hidden	隐藏输入框
file	文本选择框

表单的格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <from action="" method="post">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="datetime-local"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio" name="gender">生理男性
            <input type="radio" name="gender">生理女性
            <input type="radio" name="gender">生理男性心理女性
            <input type="radio" name="gender">生理女性心理男性
            <input type="radio" name="gender">性少数群体
            <input type="radio" name="gender">其他性别
        </p>
        <p>
            <input type="checkbox" name="hobby">唱
            <input type="checkbox" name="hobby">跳
            <input type="checkbox" name="hobby">rap
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">松果弹抖闪电鞭
            <input type="checkbox" name="hobby">耗子为止
            <input type="checkbox" name="hobby">偷袭
            <input type="checkbox" name="hobby">混元形意太极拳
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="id=">
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">苏州</option>
                <option value="">山西</option>
            </select>
        </p>
        <p>GF:
            <select name="id" multiple>
                <option value="">王路飞</option>
                <option value="">刘索隆</option>
                <option value="">焦山治</option>
                <option value="">蕾娜美</option>
            </select>
        <p>info:
            <textarea name="id" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="提交注册">
        <input type="reset" value="重新输入">
        <input type="button" value="普通按钮">
    </from>
</body>

posted @ 2022-08-22 21:24 Joseph-bright 阅读(464) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

joseph-bright

前端开发简介与简单代码实现

前端开发简介与简单代码实现

前端开发前戏

超文本传输协议前戏

HTTP协议

* 1.xx:信息

* 2.xx：信息

3.xx：信息

4.xx：信息

5.xx：信息

HTML简介

head内常见标签

body内常见标签

块儿级标签与行内标签

body内基本标签

查看内部代码直接点击实体代码区域即可查看

body内布局标签

body内常见标签

标签两大重要特性

列表标签

表格标签

表单标签

公告