小型网站的建设与开发,手机泉州网,怎么在网上卖东西教程,wordpress极简文章目录 前端简介1. 什么是网页2. 网页的组成3. 网页的优势4. 前端三剑客5. 编写步骤6. HTTP协议 HTML51. HTML介绍2. 元素3. 使用4. 基本结构解析5. 常用标签文本标签容器标签列表标签表格标签表单标签 对于文件数据的提交需要满足以下两个条件#xff1a;6. 标签分类 前端简… 文章目录 前端简介1. 什么是网页2. 网页的组成3. 网页的优势4. 前端三剑客5. 编写步骤6. HTTP协议 HTML51. HTML介绍2. 元素3. 使用4. 基本结构解析5. 常用标签文本标签容器标签列表标签表格标签表单标签 对于文件数据的提交需要满足以下两个条件6. 标签分类 前端简介
1. 什么是网页
网页是基于浏览器的应用程序是数据展示的载体.
典型程序的结构
1、C/S :
CClient 客户端 SServer 服务器
2、B/S :
BBrowser 浏览器 SServer 服务器
2. 网页的组成
浏览器 向服务器发送用户请求指令接收并解析数据展示给用户 服务器 存储数据处理并响应请求 协议 规范数据在传输过程中的打包方式
3. 网页的优势
即时响应 更新服务端页面即完成更新客户端重新加载即兑现内容 无需安装和更新 无需安装任何应用软件只需要一个浏览器执行即可
4. 前端三剑客 HTML 网页的骨架只是负责显示一些内容但是内容不好看没样式CSS 对网页内容进行优化使得页面更加的美化漂亮。JavaScript HTML和css是不能动的静态的而 js可以让网页动起来变得更加的美观。 关于前端学习的框架bootstrap,jQueryvuereactangular.js
5. 编写步骤 编写服务器浏览器可以作为我们的客户端浏览器无法正常显示是因为没有按照浏览器的规则协议去编写http协议最主要的内容就是规定了浏览器与服务器之间的数据交互的方式 需要遵守http协议否则浏览器无法识别 6. HTTP协议
请求响应客户端发送请求服务端响应请求服务端不会主动给客户端发消息除非使用其他网络协议。
基于TCip作用于应用层之上的协议该协议属于应用层。
无状态服务端不会保存客户端的状态 cookie、session、token、jwt等保存的他们才是真正的保存用户数据的
无短连接客户端与服务端不会长久保持连接两者请求响应之后立刻断绝关系
请求数据
请求首行请求方式协议版本号
请求头一堆kv键值对)
响应数据
响应首行响应状态码 1xx: 代表的是请求数据成功但是这个时候还可以继续往服务端提交数据 2xx: 200 OK 代表的是请求成功 3xx301 302 代表的是重定向 4xx: 404 Not Found 代表的是资源找不到 5xx500 502 服务器内部错误(出现网页打不开的情况)
响应头(一大堆的k:v的键值对)
换行符/r/n
请求方式
get当朝服务端索要数据的时候一般使用get请求方式
post 当朝服务端提交数据的时候一般采用post请求
HTML5
1. HTML介绍
超文本标记语言浏览器能够识别和解析的语言通过元素的形式构建页面结构和填充内容
2. 元素
元素也称为标记或标签用于在网页中标记内容 语法标签使用 为标志标签名不区分大小写推荐小写表示 分类 双标签成对出现包含开始标签和结束标签。例 html/html单标签只有开始标签没有结束标签可以手动添加“/”表示闭合。例 br
br/标签属性 标签属性书写在开始标签中使用空格与标签名隔开用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成属性值使用双引号表示标记 属性名‘属性值’ 属性名‘属性值’ …内容/标记。例 img srcimgs/img01.jpg同一个标签中可以添加若干组标签属性使用空格间隔。例 img srcimgs/img01.jpg width200px height200px3. 使用 创建网页文件使用.html或.htm作为文件后缀。 添加网页的基本结构 !doctype html
htmlheadmeta charsetutf-8title网页标题/title/headbody网页主体内容/body
/html标签嵌套 在双标签中书写其他的标签称为标签的嵌套。
嵌套结构中外层元素称为父元素内层元素称为子元素。 多层嵌套结构中所有外层元素称为祖先元素内层元素称为后代元素。平级结构互为兄弟元素。 HTML语法规范 标签名不区分大小写建议使用小写。注释语法 !-- 此处为注释 --关键代码需要注释在上面设置
4. 基本结构解析
!-- 文档类型声明便于浏览器正确解析标签及渲染样式 --
!doctype html
!-- HTML文档开始的标志 --
html !-- 头部设置可在head中设置网页标题引入外部的资源文件 --head!-- 设置网页字符编码 --meta charsetutf-8 !-- 移动端配置width表示移动端的宽度inital-scale表示初始的缩放比例maximum-scale表示用户缩放的最大比例user-scalable表示可以手动缩放的比例 --meta nameviewport contentwidthdevice-width, inital-scale1.0 maximum-scale1.0 user-scalableno!-- http-equiv表示网页的兼容性模式设置content表示使用ie的edge来 渲染页面 --meta http-equivX-UA-Compatiable contentie-edge!-- 设置网页标题显示在网页选项卡上方 --title网页标题/title/head!-- 网页主体部分显示网页主要内容 --body 网页主体内容/body
/html!-- 文档结束--5. 常用标签 文本标签 标题标签自带加粗效果从h1到h6字体大小逐级递减 h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6段落标签 p段落文本/p属性alignleft/center/right普通文本标签 b加粗标签/bstrong强调标签效果同b标签/strongi斜体标签/iu下划线标签/us删除线标签/ssup上标/supsub下标/subspan行分区标签设置同一行文本的不用样式/spanlabel普通文本标签常与表单控件结合实现文本与控件的绑定/label换行标签 浏览器会忽略代码中的换行和空格只显示为一个空格。想要实现页面中的换行需要借助于换行标签。 br水平线标签在页面中插入一条水平分割线 hr字符实体 某些情况下浏览器会将一些特殊字符按照 HTML 的方式解析影响显示结果。此时需要将这类字符转换为其他的形式书写。 例 使用 lt; 在页面中呈现 使用 gt; 在页面中呈现 使用 nbsp; 在页面中呈现一个空格使用 copy; 在页面中呈现版权符号©使用 yen; 在页面中呈现人民币符号元素分组 !-- 将表单内的相关元素分组将表单的部分打包生成一组相关表单字段 --fieldsetlegend定义标题/legend
/fieldset容器标签 常用于页面结构划分结合CSS实现 divcss 网页布局 div 标签 div idtop页面顶部区域/div
div idmain页面主体区域/div
div idbottom页面底部区域/div属性alignleft/center/right作用实现网页内容的布局特点独占一行 img 标签 img src width height title alt
!-- 用于在网页中插入一张图片 --src表示图片的地址URL或本地路径。
width/height用于设置图片长宽尺寸取像素值px默认按照图片的原始尺寸显示。
title用于设置图片标题鼠标悬停在图片上时显示
alt用于设置图片加载失败后的提示文本a 标签 a href target
!-- 实现跳转至其他页面 --href用于设置目标文件的URL
target用于设置目标文件的打开方式默认在当前窗口打开。可以设置新建窗口打开目标文本(取_blank) a hrefhttp://www.taobao.com target_self淘宝/a !--当前页打开--
a hrefhttp://www.baidu.com target_blank百度/a !--新的页打开--!-- 点击图片跳转 --
a hrefhttp://www.baidu.com target_blankimg srcimg/tags.jpg
/a!-- 跳转至锚点位置 --
a href#锚点位置 target_blankimg srcimg/tags.jpg
/a内联元素与块元素 块元素 单独占一行多个块元素会各自新起一行。默认情况下块元素宽度会自动填充满其父元素的宽度。可设置width、height属性仍占用一行。 标签div、p、h1~h6、ol、ul、li、dt、dd。 内联元素行内元素 多个相邻的行内元素会排列成一行直到排不下则会新换一行 标签span i b s u sup sub a img。
列表标签
无序列表 默认用实心圆点标识列表项
ullilist item 列表项/li lilist item 列表项/lililist item 列表项/li
/ul!-- 快捷输入ulli*3 --ul typedisc !-- type:disc实心圆点/circle空心圆点/square实心方块/none不显示任何标识 --有序列表 默认使使用阿拉伯数字标识每条数据可以使用start属性设置起始的值默认为1 ollilist item 列表项/li lilist item 列表项/lililist item 列表项/li
/ol!-- 快捷输入olli*3 --ol startB typeA reversed
!-- type:1/A/a/I/i --列表嵌套 在已有列表中嵌套添加另一个列表常见于下拉菜单
olli西游记ulli孙悟空/lili孙悟空/lili孙悟空/li/ul/li
/ol表格标签
表格由行和单元格组成常用于直接的数据展示或辅助排版基本结构如下
!-- 创建表格标签 --
table!-- 创建行标签 --tr!-- 行中创建单元格以显示数据 --td姓名/tdtd年龄/tdtd班级/td/trtrtd张三/tdtd20/tdtd一(1)班/td/tr
/table!-- 快捷输入tabletr*2td*3 【2行3列】-- 表格table属性 属性含义border指定表格的边框宽度以px为单位(px可省略)width指定表格的宽度以px为单位(px可省略)height指定表格的高度以px为单位(px可省略)align指定表格在父元素中的水平对齐方式取值left、right、centercellpadding表格内边距表示内容与单元格边框之间的距离cellspacing单元格外边距表示单元格与单元格之间的距离 行tr属性 属性含义align控制当前行的内容的水平方式取值left、right、centervalign控制当前行的内容的垂直对齐方式取值top、middle、bottombgcolor控制当前行内容的背景颜色 列td属性 属性含义width指定单元格的宽度以px为单位(px可省略)height指定单元格的高度以px为单位(px可省略)align指定单元格的水平对齐方式取值left、right、centervalign控制当前单元格(列)的内容的垂直对齐方式取值top、middle、bottombgcolor控制当前单元格(列)内容的背景颜色colspan跨列 / 合并列【纵向向下合并包含自己】rowspan跨行 / 合并行【横向向右合并包含自己】 行分组 将若干行划分为一组方便统一管理。 标签含义thead/thead表头行分组tbody/tbody表主体行分组tfoot/tfoot表尾行分组
表单标签
表单用于采集用户的信息并提交给服务器由表单标签和表单控件组成。表单标签form负责提交数据给服务器表单控件负责收集数据。 form method action/formmethod设置数据的提交方式默认为get方式可以设置为postget:提交至地址栏安全性较低数据大小限制在2KBpost:隐式提交安全性高无数据大小限制
action设置数据的提交地址
enctype指定表单数据进行编码的方式即允许将什么样的数据提交给服务器application/x-www-form-urlencoded默认值允许将所有的文本数据提交给服务器multipart/form-data允许将文件提交给服务器text/plain只允许将普通文本字符提交给服务器特殊字符则不可以表单控件 文本框 密码框 文本框input type’text’
密码框input type’password’name定义控件的名称若不声明则无法提交
value值控件上显示的值
maxlength限制输入的最大字符数
readonly只读该属性允许不设置值
placeholder提示占位符form action# forminfosplabel forname forminfosNames/labelinput typetext placeholder请输入姓名 classnames maxlength10/p
/form单选项按钮 复选框 单选按钮input type’radio’ 选中无法取消
复选框input type’checkbox’ 选中可取消name为控件定义名称。除了定义名称之外属性也起到了分组的作用一组单选按钮和复选框名称必须一致
value定义控件的值。提前定义当用户选中控件时则将控件的值提交给服务器
checked设置预选中该属性无值p性别/input typeradio namegender value0 checked帅锅input typeradio namegender value1美女
/p
p爱好input typecheckbox namehobby value0吃input typecheckbox namehobby value1喝
/p隐藏域 文件选择框 隐藏域作用想提交给服务器但不想给用户看的数据要放在隐藏域中语法input type’’hidden”属性name控件的名称value控件的值文件选择框语法input type’file’属性name控件名称注意1、表单的method属性必须为post2、表单的enctype属性必须为multipart/form-dataform action# methodpost enctypemultipart/form-datapinput typefile nameimgs idimgsinput typesubmit value提交/p
/form对于文件数据的提交需要满足以下两个条件 请求方式必须是post数据编码方式 1. application/x-www-form-urlencoded 2. multipart/form-data 3. json编码方式必须是multipart/form-data才能提交问价urlencoded只能够提交不是文件的数据form-data是可以提交普通数据和文件数据urlencoded形式的数据长什么样子 usernamepassworddatehidden123myfilecityform-data编码格式的数据 usernamepassworddatehidden123myfilecity boundary----WebKitFormBoundaryhwrBD6WMC3rBJXOy 文件数据 “”“对于form-data提交的数据后端还是在form里面去普通数据而在files里面去文件数据”“”form表单不能够提交json数据如果想提交json格式的数据Ajax技术、第三方的api工具postman 多行文本域 标记textareatextarea
属性1、name定义控件名称2、cols指定义文本域的列数(一行中最多能显示多少个英文字符中文减半)3、rows定义文本显示的行数(超出行数则会出现滚动条)span自我介绍:/spanbr
textarea nameintro cols30 rows10/textarea下拉选项框 语法select name’’option value’值1’显示内容1/optionoption value’值2’显示内容2/option/select
// multiple: 表示可同时选择多个选项 ~~~ p所在地址select nameaddroption value1 selected北京市/optionoption value2天津市/optionoption value3重庆市/optionoption value4上海市/option/select
/p按钮 1、提交按钮input typesubmit作用将表单提交给服务器实例input typesubmit value提交数据2、重置按钮input typereset作用将表单恢复到初始化的状态实例input typereset value重填3、普通按钮input typebutton作用允许通过js自定义功能说明button按钮上的名称/buttontypesumit / reset / button属性value控制按钮上的文字label 标签 作用为input元素定义标注标记
格式label for form/label
属性for: 关联控件的idform: 所属表单的id
实例label forname forminfos用户名/label6. 标签分类 块标签 独占一行,不与标签共行;可以手动设置宽高,默认宽度与与父标签保持一致 例 : body div h1~h6 p ul ol li form table(默认尺寸由内容决定) 行内标签 可以与其他标签共行显示;不能手动设置宽高,尺寸由内容决定 例 : span label b strong i s u sub sup a 行内块标签 可以与其他标签共行显示,又能手动调整宽高 例 : img input button (表单控件)
type属性值表现形式对应代码text单行输入文本input typetext /password密码输入框input typepassword /date日期输入框input typedate /checkbox复选框input typecheckbox checkedchecked /radio单选框input typeradio /submit提交按钮input typesubmit value提交 /reset重置按钮input typereset value重置 /button普通按钮input typebutton value普通按钮 /hidden隐藏输入框input typehidden /file文本选择框input typefile /
