文章目录
- 前端简介
- 1. 什么是网页
- 2. 网页的组成
- 3. 网页的优势
- 4. 前端三剑客
- 5. 编写步骤
- 6. HTTP协议
- HTML5
- 1. HTML介绍
- 2. 元素
- 3. 使用
- 4. 基本结构解析
- 5. 常用标签
- 文本标签
- 容器标签
- 列表标签
- 表格标签
- 表单标签
- 对于文件数据的提交需要满足以下两个条件：
- 6. 标签分类
前端简介
1. 什么是网页
网页是基于浏览器的应用程序，是数据展示的载体.
典型程序的结构：
1、C/S :
C：Client 客户端 S：Server 服务器
2、B/S :
B：Browser 浏览器 S：Server 服务器
2. 网页的组成
- 浏览器
- 向服务器发送用户请求指令
- 接收并解析数据展示给用户
- 服务器
- 存储数据
- 处理并响应请求
- 协议
- 规范数据在传输过程中的打包方式
3. 网页的优势
- 即时响应
- 更新服务端页面即完成更新
- 客户端重新加载即兑现内容
- 无需安装和更新
- 无需安装任何应用软件
- 只需要一个浏览器执行即可
4. 前端三剑客
- HTML 网页的骨架，只是负责显示一些内容，但是内容不好看，没样式
- CSS 对网页内容进行优化，使得页面更加的美化，漂亮。
- JavaScript HTML和css是不能动的静态的，而 js可以让网页动起来，变得更加的美观。
关于前端学习的框架：bootstrap,jQuery，vue，react，angular.js
5. 编写步骤
- 编写服务器
- 浏览器可以作为我们的客户端
- 浏览器无法正常显示是因为没有按照浏览器的规则（协议）去编写
- http协议最主要的内容就是规定了浏览器与服务器之间的数据交互的方式
需要遵守http协议，否则浏览器无法识别
6. HTTP协议
请求响应：客户端发送请求，服务端响应请求，服务端不会主动给客户端发消息，除非使用其他网络协议。
基于TC，ip作用于应用层之上的协议，该协议属于应用层。
无状态：服务端不会保存客户端的状态（ cookie、session、token、jwt等保存的，他们才是真正的保存用户数据的）
无（短）连接：客户端与服务端不会长久保持连接（两者请求响应之后立刻断绝关系）
请求数据：
请求首行（请求方式，协议，版本号）
请求头（一堆k：v键值对)
响应数据
响应首行（响应状态码）
1xx: 代表的是请求数据成功，但是这个时候还可以继续往服务端提交数据
2xx: 200 OK 代表的是请求成功
3xx：301 302 代表的是重定向
4xx: 404 Not Found 代表的是资源找不到
5xx：500 502 服务器内部错误(出现网页打不开的情况)
响应头(一大堆的k:v的键值对)
换行符/r/n
请求方式：
get：当朝服务端索要数据的时候，一般使用get请求方式
post：
当朝服务端提交数据的时候，一般采用post请求
HTML5
1. HTML介绍
超文本标记语言浏览器能够识别和解析的语言，通过元素的形式构建页面结构和填充内容
2. 元素
元素也称为标记或标签，用于在网页中标记内容
-
语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示
-
分类：
- 双标签：成对出现，包含开始标签和结束标签。例：
<html></html>- 单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：
<br> <br/> -
标签属性：
- 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示（<标记 属性名=‘属性值’ 属性名=‘属性值’ …>内容</标记>）。例：
<img src="imgs/img01.jpg">- 同一个标签中可以添加若干组标签属性，使用空格间隔。例：
<img src="imgs/img01.jpg" width="200px" height="200px">
3. 使用
-
创建网页文件，使用.html或.htm作为文件后缀。
-
添加网页的基本结构：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页标题</title> </head> <body> 网页主体内容 </body> </html> -
标签嵌套
在双标签中书写其他的标签，称为标签的嵌套。
- 嵌套结构中，外层元素称为父元素，内层元素称为子元素。
- 多层嵌套结构中，所有外层元素称为祖先元素，内层元素称为后代元素。
- 平级结构互为兄弟元素。
-
HTML语法规范
- 标签名不区分大小写，建议使用小写。
- 注释语法：
<!-- 此处为注释 -->关键代码需要注释（在上面设置）
4. 基本结构解析
<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html>
<!-- HTML文档开始的标志 -->
<html>
<!-- 头部设置，可在head中设置网页标题，引入外部的资源文件 -->
<head>
<!-- 设置网页字符编码 -->
<meta charset="utf-8">
<!-- 移动端配置：width表示移动端的宽度，inital-scale表示初始的缩放比例，maximum-scale表示用户缩放的最大比例，user-scalable表示可以手动缩放的比例 -->
<meta name='viewport' content='width=device-width, inital-scale=1.0 maximum-scale=1.0 user-scalable=no'>
<!-- http-equiv表示网页的兼容性模式设置，content表示使用ie的edge来 渲染页面 -->
<meta http-equiv='X-UA-Compatiable' content="ie-edge">
<!-- 设置网页标题，显示在网页选项卡上方 -->
<title>网页标题</title>
</head>
<!-- 网页主体部分，显示网页主要内容 -->
<body>
网页主体内容
</body>
</html><!-- 文档结束-->
5. 常用标签
-
文本标签
- 标题标签：自带加粗效果，从h1到h6字体大小逐级递减
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>- 段落标签：
<p>段落文本</p> 属性：align='left/center/right'- 普通文本标签：
<b>加粗标签</b> <strong>强调标签，效果同b标签</strong> <i>斜体标签</i> <u>下划线标签</u> <s>删除线标签</s> <sup>上标</sup> <sub>下标</sub> <span>行分区标签，设置同一行文本的不用样式</span> <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>- 换行标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。
<br>- 水平线标签，在页面中插入一条水平分割线
<hr>- 字符实体：
某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。
例：
使用 < 在页面中呈现 "<" 使用 > 在页面中呈现 ">" 使用 在页面中呈现一个空格 使用 © 在页面中呈现版权符号"©" 使用 ¥ 在页面中呈现人民币符号"￥"-
元素分组
-
<!-- 将表单内的相关元素分组，将表单的部分打包，生成一组相关表单字段 --> <fieldset> <legend>定义标题</legend> </fieldset>
-
容器标签
-
常用于页面结构划分，结合CSS实现 div+css 网页布局
-
div 标签
<div id="top">页面顶部区域</div> <div id="main">页面主体区域</div> <div id="bottom">页面底部区域</div> 属性：align='left/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 href="http://www.taobao.com" target="_self">淘宝</a> <!--当前页打开--> <a href="http://www.baidu.com" target="_blank">百度</a> <!--新的页打开--> <!-- 点击图片跳转 --> <a href="http://www.baidu.com" target="_blank"> <img src='img/tags.jpg'> </a> <!-- 跳转至锚点位置 --> <a href="#锚点位置" target="_blank"> <img src='img/tags.jpg'> </a>
-
-
内联元素与块元素
- 块元素
- 单独占一行，多个块元素会各自新起一行。默认情况下，块元素宽度会自动填充满其父元素的宽度。可设置width、height属性仍占用一行。
- 标签：
<div>、<p>、<h1~h6>、<ol>、<ul>、<li>、<dt>、<dd>。
- 标签：
- 单独占一行，多个块元素会各自新起一行。默认情况下，块元素宽度会自动填充满其父元素的宽度。可设置width、height属性仍占用一行。
- 内联元素（行内元素）
- 多个相邻的行内元素会排列成一行，直到排不下则会新换一行
- 标签：
<span> <i> <b> <s> <u> <sup> <sub> <a> <img>。
- 标签：
- 多个相邻的行内元素会排列成一行，直到排不下则会新换一行
- 块元素
列表标签
- 无序列表
默认用实心圆点标识列表项
<ul>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ul>
<!-- 快捷输入：ul>li*3 -->
<ul type='disc'>
<!-- type:disc（实心圆点）/circle（空心圆点）/square（实心方块）/none（不显示任何标识） -->
- 有序列表
默认使使用阿拉伯数字标识每条数据，可以使用start属性设置起始的值，默认为1
<ol>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ol>
<!-- 快捷输入：ol>li*3 -->
<ol start='B' type='A' reversed>
<!-- type:1/A/a/I/i -->
- 列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单
<ol>
<li>
西游记
<ul>
<li>孙悟空</li>
<li>孙悟空</li>
<li>孙悟空</li>
</ul>
</li>
</ol>
表格标签
- 表格由行和单元格组成，常用于直接的数据展示或辅助排版，基本结构如下：
<!-- 创建表格标签 -->
<table>
<!-- 创建行标签 -->
<tr>
<!-- 行中创建单元格以显示数据 -->
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>一(1)班</td>
</tr>
</table>
<!-- 快捷输入：table>tr*2>td*3 【2行3列】-->
-
表格（table）属性
-
属性 含义 border 指定表格的边框宽度，以px为单位(px可省略) width 指定表格的宽度，以px为单位(px可省略) height 指定表格的高度，以px为单位(px可省略) align 指定表格在父元素中的水平对齐方式，取值：left、right、center cellpadding 表格内边距，表示内容与单元格边框之间的距离 cellspacing 单元格外边距，表示单元格与单元格之间的距离
-
-
行（tr）属性
-
属性 含义 align 控制当前行的内容的水平方式，取值：left、right、center valign 控制当前行的内容的垂直对齐方式，取值：top、middle、bottom bgcolor 控制当前行内容的背景颜色
-
-
列（td）属性
-
属性 含义 width 指定单元格的宽度，以px为单位(px可省略) height 指定单元格的高度，以px为单位(px可省略) align 指定单元格的水平对齐方式，取值：left、right、center valign 控制当前单元格(列)的内容的垂直对齐方式，取值：top、middle、bottom bgcolor 控制当前单元格(列)内容的背景颜色 colspan 跨列 / 合并列【纵向向下合并（包含自己）】 rowspan 跨行 / 合并行【横向向右合并（包含自己）】
-
-
行分组
-
将若干行划分为一组，方便统一管理。
标签 含义 <thead></thead>表头行分组 <tbody></tbody>表主体行分组 <tfoot></tfoot>表尾行分组
-
表单标签
表单用于采集用户的信息并提交给服务器，由表单标签和表单控件组成。表单标签form负责提交数据给服务器，表单控件负责收集数据。
-
<form method='' action=''></form> method：设置数据的提交方式，默认为get方式，可以设置为post get:提交至地址栏，安全性较低，数据大小限制在2KB post:隐式提交，安全性高，无数据大小限制 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="#" form="infos"> <p> <label for="name" form="infos">Names</label> <input type="text" placeholder='请输入姓名' class="names" maxlength="10"> </p> </form>
-
-
单选项按钮 & 复选框
-
单选按钮：<input type=’radio’> 选中无法取消 复选框：<input type=’checkbox’> 选中可取消 name：为控件定义名称。除了定义名称之外，属性也起到了分组的作用，一组单选按钮和复选框，名称必须一致 value：定义控件的值。提前定义，当用户选中控件时，则将控件的值提交给服务器 checked：设置预选中，该属性无值 -
<p> 性别：/ <input type="radio" name='gender' value='0' checked>帅锅 <input type="radio" name='gender' value='1'>美女 </p> <p> 爱好： <input type="checkbox" name='hobby' value='0'>吃 <input type="checkbox" name='hobby' value='1'>喝 </p>
-
-
隐藏域 & 文件选择框
-
隐藏域 作用：想提交给服务器但不想给用户看的数据要放在隐藏域中 语法：<input type=’’hidden”> 属性：name：控件的名称 value：控件的值 -
文件选择框 语法：<input type=’file’> 属性：name：控件名称 注意：1、表单的method属性必须为post 2、表单的enctype属性必须为multipart/form-data -
<form action="#" method="post" enctype="multipart/form-data"> <p> <input type="file" name="imgs" id="imgs"> <input type="submit" value="提交"> </p> </form>
对于文件数据的提交需要满足以下两个条件：
-
-
- 请求方式必须是post
- 数据编码方式：
1. application/x-www-form-urlencoded
2. multipart/form-data
3. json- 编码方式必须是multipart/form-data才能提交问价
- urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据
- urlencoded形式的数据长什么样子：
username=&password=&date=&hidden=123&myfile=&city=- form-data编码格式的数据：
username=&password=&date=&hidden=123&myfile=&city=
boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
文件数据
“”“对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据”“”- form表单不能够提交json数据
- 如果想提交json格式的数据：Ajax技术、第三方的api工具postman
-
多行文本域
-
标记：<textarea><textarea> 属性： 1、name：定义控件名称 2、cols：指定义文本域的列数(一行中最多能显示多少个英文字符，中文减半) 3、rows：定义文本显示的行数(超出行数则会出现滚动条) -
<span>自我介绍:</span><br> <textarea name="intro" cols="30" rows="10"></textarea>
-
-
下拉选项框
-
语法： <select name=’’> <option value=’值1’>显示内容1</option> <option value=’值2’>显示内容2</option> </select>
-
// multiple: 表示可同时选择多个选项
~~~
-
<p> 所在地址： <select name="addr"> <option value="1" selected>北京市</option> <option value="2">天津市</option> <option value="3">重庆市</option> <option value="4">上海市</option> </select> </p> -
按钮
-
1、提交按钮：<input type='submit'> 作用：将表单提交给服务器 实例：<input type="submit" value='提交数据'> 2、重置按钮：<input type='reset'> 作用：将表单恢复到初始化的状态 实例：<input type="reset" value='重填'> 3、普通按钮：<input type='button'> 作用：允许通过js自定义功能 说明：<button>按钮上的名称</button> type：sumit / reset / button 属性：value：控制按钮上的文字
-
-
label 标签
-
作用：为input元素定义标注（标记） 格式：<label for="" form=""></label> 属性： for: 关联控件的id form: 所属表单的id 实例：<label for="name" form="infos">用户名</label>
-
6. 标签分类
-
块标签
独占一行,不与标签共行;可以手动设置宽高,默认宽度与与父标签保持一致
例 : 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 type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
