Day 50
今日内容概要
- 前端简介
- 前端与后端
- 前端的学习
- 前端核心基础
- HTTP超文本传输协议
- 四大特性
- 数据格式
- 响应状态码
- HTML简介
- 简介
- HTML注释语法
- HTML文件结构
- HTML标签分类1(单标签 和 双标签)
- head内常见标签
- body内基本标签
- HTML标签分类2(块儿级标签 和 行内标签)
- body内常见符号
- body内常见标签
- a标签—链接标签
- img标签—图片标签
- 标签两大重要属性
- 列表标签
- 表格标签
- 表单标签(重点)
今日内容详细
一.前端简介
1.前端与后端
【前端】：和用户直接打交道的操作界面都称为前端
【后端】：不直接和用户打交道的内部真正执行核心业务逻辑的代码程序
2.前端的学习
前端工程师的学习同样需要很长时间,这里我们仅学习前端的基础核心内容
3.前端核心基础
HTML 网页的骨架
CSS 网页的样式
JS(JavaScript) 网页的动态
二.HTTP超文本传输协议
前戏
1.手写一个服务端程序
2.使用浏览器充当客户端
3.发现客户端无法直接展示服务端的响应数据
4.由于浏览器需要兼容很多服务端软件，为了实现无障碍沟通有了一些协议:HTTP协议、FTP协议、HTTPS协议等
5.浏览器发送的请求数据格式肯定没问题,别人已经封装好了。发现是我们自己写的服务端的响应数据格式出现了问题
1.四大特性
①.基于请求、响应(基于HTTP的服务端永远不会主动给客户端发消息)
②.基于TCP/IP之上作用于应用层的协议
③.无状态(无论客户端来多少次都当他来的是第一次)
④.无/短链接(客户端朝服务端发请求,服务端给了响应后就没有任何链接了)
2.数据格式
①.请求数据格式：
1.请求首行(请求方式,协议名称及版本。有很多请求方式)
2.请求头(一大堆K:V键值对)
3.换行(必须要有)
4.请求体(携带一些敏感数据,如密码等.不是所有请求都有请求体,如GET请求)
②.响应数据格式：
1.响应首行(响应状态码)
2.响应头(一大堆K:V键值对)
3.换行(必须要有)
4.响应体(一般情况下就是浏览器要展示给用户看的数据)
3.响应状态码
利用数字来表示一些复杂的情况说明(类似暗号)
1XX：服务端已经接收到你的请求正在处理,你可以继续提交或等待
2XX：200 OK服务端给出了相应响应
3XX：301 302 重定向(本来要访问A页面结果被跳转到B页面)
4XX：403请求不符合条件(没资格访问) 404请求资源不存在
5XX：服务端内部出错
在公司中还会自己定义其他更多状态码，一般情况下是从10000开始。参考:聚合数据
三.HTML简介
1.简介：
HTML指的就是超文本标记语言，是所有浏览器展示页面必备的
浏览器展示界面也叫HTML页面 存储HTML语言的文件后缀一般是.html
HTML无任何逻辑,写什么就是什么所见即所得
HTML无缩进概念 人为缩进仅为了美观
2.HTML注释语法：
单行注释：
<!--注释内容-->
多行注释：
<!--
注释内容
-->
3.HTML文件结构：
<!DOCTYPE html> #文档类型的说明
<html lang="en"> #前端所有的代码都必须写在该标签内部 语言是英文
<head>里面的数据一般都不是给用户看的</head>
<body>里面的数据一般都是展示给用户看的</body>
</html>
4.HTML标签的分类1（单标签 和 双标签）
1.单标签(自闭和标签)
eg: <img/>
2.双标签
eg: <a></a>
四.head内常见标签
| 标签 | 意义 |
|---|---|
| title | 控制标签页小标题 |
| style | 内部支持编写CSS |
| link | 引入外部CSS文件 |
| script | 内部支持编写JS代码 还可以通过src属性引入外部JS文件 |
| meta | 通过内部属性的不同可以有很多功能 |
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="搜索某网站名字,右边填写一些网页的简介小字">
五.body内基本标签
| 标签 | 意义 |
|---|---|
| h1~h6 | 标题标签(一级标题~六级标题) |
| u、i、s、b | 下划线、斜体、删除线、粗体 |
| p | 段落标签 |
| hr | 水平分割线 |
| br | 换行符 |
注：相同的样式可能存在多种标签
1.标签的分类2（块儿级标签 和 行内标签）
| 标签的分类2 | 标签名 | 说明 |
|---|---|---|
| 块儿级标签 | h1~h6、p、hr、br | 一个标签独占一行 |
| 行内标签 | u、i、s、b | 内部文本多大自身就占多大 |
六.body内基本符号
空格
> >
< <
& &
￥ ¥
注册 ®
版权 ©
七.body内布局标签
div 块儿级标签（用最多）
span 行内标签
1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候是可以嵌套的
块儿级可以嵌套任何类型的标签(P标签(段落标签)虽然是块儿级标签,但是不能嵌套块儿级标签)
3.行内标签只能嵌套行内标签
八.body内常见标签
1.a标签(链接标签)
| 内容 | 说明 |
|---|---|
| href | 可以填写网址,点击自动跳转。 也可以填写其他标签的id值,实现锚点功能 |
| target | 可以控制是否新建页面跳转(默认当前页面) _self (当前页面) _blank(新建页面) |
2.img标签(图片标签)
| 内容 | 说明 |
|---|---|
| src | 填写图片地址(网络地址、本地地址) |
| title | 鼠标悬浮再图片上就会有提示信息 |
| alt | 图片加载失败提示的信息 |
| height | 调整图片的高度 |
| width | 调整图片的宽度 |
注：调整图片高度或宽度调一个就可以，是等比例缩放！一起改容易失真！
九.标签两大重要属性
主要用来快速定位需要操作的标签
1.id属性(一对一管理)
类似于身份证号，在同一个html页面上id值不能重复！！
2.class属性(批量管理)
类似于分组,多个标签可以拥有相同的class值
十.列表标签
1.无序列表(需掌握)
<body>
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
</body>
#页面上有规则排列的横向或竖向的多个元素几乎使用的都是无序列表
2.有序列表
<ol type="I" start="10">#可以修改序号格式,开始位置
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
十一.表格标签
<table> #表格
<thead> #表头
<tr> #表格行
<th>序号</th> #th和td的区别在于字体粗细
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody> #表单部分
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
十二.表单标签(重点)
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
'''
action属性
填写数据的提交地址(后端) 不写的话就是朝当前页面所在的地址提交
method属性
用于控制请求的方式(get\post)
'''
<form action="" method="post">
<p>username:<input type="text"></p> #文本格式
<p>password:<input type="password"></p> #密码格式
<p>birthday:<input type="date"></p> #日期格式
<p>email:<input type="email"></p> #邮件格式
<p>gender:
<input type="radio" name="gender">男 #单选框
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>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>
</select>
</p>
<p>GF:
<select name="" id="" multiple> #多选下拉框
<option value="">小明</option>
<option value="">小波</option>
<option value="">小冲</option>
<option value="">小黄</option>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"> </textarea> #简介框
</p>
<input type="submit" value="注册"> #把数据朝服务端发送
<input type="reset" value="重置"> #把写的东西重置
<input type="button" value="普通按钮"> #普通按钮,可加功能
</form>
作业
1.整理今日内容及博客
2.将课上所有的标签自己敲三遍
3.找一些网站查看网页源码 熟悉熟悉页面标签
4.预习明日内容
CSS操作