初始前端
程序员文章站
2022-06-22 15:56:53
初始前端 一、夺命三问 理论知识 二、HTTP协议 四大特性 数据格式 响应状态码 三、HTML 超文本标记语言 html注释 第一个HTML代码 四、head内常用的标签 常用标签 五、body内常用标签 常用标签 body类常用标签 常用标签1 常用标签2 六、列表标签 列表标签 列表标签 七、 ......
初始前端
一、夺命三问
- 理论知识
一、什么是前端? 任何与用户直接打交道的界面都可以称之为是一个前端 比如: - 电脑显示界面 - 手机界面 - ipad 二、为什么要学前端? 技多不压身 软件开发架构 cs bs(bs本质就是cs) web服务的本质 浏览器窗口输入一个网址然后敲回车键发生了那些事 1、朝着指定的服务端发送请求 2、服务端接收相应的请求 3、服务端返回相应的响应 4、浏览器接收响应 按照特定的规则渲染页面展示给用户看
二、http协议
- 四大特性
1、四大特性 1、基于请求响应 一次请求对应一次响应 2、基于tcp/ip作用于应用层之上的协议 3、无状态 不保留客户端的状态 无论你来多少次 我都待你如初见 cookie session token... 4、无连接 长连接 websocket(类似于http协议的大补丁) 比如:聊天室相关
- 数据格式
请求格式 请求首行(请求方式,协议版本) 请求头(一大推k,v键值对) 请求方式: 1、get请求 朝服务端要资源(获取数据) 类似于浏览器窗口输入www.baidu.com获取百度首页 2、post请求 朝服务端提交数据(提交数据) 类似于登录注册功能 请求体(携带的数据 并不是一直都有 有时候可能是空的 取决于你的请求方式) 响应格式 响应首行 响应头(一大推k,v键值对) 响应体(浏览器展示给用户看的数据)
- 响应状态码
用数字来表示一大推展示信息 1xx:服务端已经成功接收到客户端的数据正在处理 你也可以继续提交 2xx:200请求成功 服务端已经返回了你想要的数据 3xx:重定向(原本想访问a, 但是内部自动给你传到了转到b上面) 4xx:404请求资源不存在,403资源存在但是当前你不具备请求该资源的条件 5xx:500服务端内部错误 可能机房着火了,也可能机房死机了, 或爆炸了 公司内部可以自己定制自己的响应状态码
三、html
- 超文本标记语言
在学习html的时候 你只需要记住每一个标签是什么意思就可以了 如果你想让你的页面能够被浏览器识别并且展示出好看的样子 你就必须要写html代码 浏览器能够识别的语言非常少 html/xml css js 扩展知识点:xml也可以书写前端页面 主要用于odoo框架中 书写企业内部管理软软件(erp)
- html注释
html注释 注释是代码之母 单行注释:<!--单行--> 多行注释:<!-- 多行注释1 多行注释2 --> 补充:由于html页面结构比较复杂 内容比较多 不便于后期的维护 修改 通常在写页面的时候 习惯于 用下面的方式来人为的 划分代码区域 <!--顶部导航样式开始--> <!--顶部导航样式结束--> <!--左侧导航样式开始--> <!--左侧导航样式开始--> html文档结构 <html> <head></head>: head内放的内容不是给用户看的,是给浏览器去识别相应操作的 <body></body>:body内存放的内容就是浏览器展示给用户看到的花里胡哨的页面 </html> html文档打开方式 1、pycharm自动调用浏览器打开(推荐) 2、手动查找路径之后选择浏览器打开 标签的分类1: 1、双标签 2、自闭和标签
- 第一个html代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>亚洲最大的xxx网站</title> <meta http-equiv="refresh" content="5;url=https://www.oldboyedu.com"> </head> <body> <h1> hello big big baby~ </h1> <a href="https://www.mzitu.com">click me</a> <img src="https://i.meizitu.net/thumbs/2019/12/216914_23b13_236.jpg" alt=""> </body> </html>
四、head内常用的标签
- 常用标签
title:定义网页标题 style:内部支持直接写css代码 link:引入外部的css文件 script: 1、内部可以直接编写js 2、可以通过src属性引用外部js代码 meta: name属性 keywords description 什么是url? url:统一资源定位符
五、body内常用标签
- 常用标签
你所看到的花里胡哨的页面 其实内部都是html代码 很丑很乱 基本标签 h1~h6:标题标签 s:删除线 b:加粗 u:下划线 i:斜体 p:独占一行 br:换行 hr:分隔符 特殊符号 空格 <h1>001</h1> # 1级标题 <h2>002</h2> # 2级标题 <h3>003</h3> # 3级标题 <h4>004</h4> # 4级标题 <h5>005</h5> # 5级标题 <h6>006</h6> # 6级标题 我是普通文本 <s>我是s</s> # s删除线 <u>我是u</u> # u下划线 <b>我是b</b> # b 加粗 <i>我是i</i> # i 斜体 <p>天生我才必有用 莫使金樽空对月</p> # 空格符一个代表空一格 <br> # 换行符 <p>天生我才必有用 莫使金樽空对月</p> <hr> # 分隔符 <p>天生我才必有用 莫使金樽空对月</p> <p>天生我才必有用 莫使金樽空对月</p> <p>a 大于 b a > b</p> # a > b <p>a 小于 b a < b</p> # a < b <p>a&b a & b</p> # a 交 b <p>人民币 ¥ 1000000000</p> # ¥ <p>版权标识 ©</p> <p>注册商标 ®</p> 常用标签 div 块儿级标签 span 行内标签 注:这两个标签本身没有任何特殊意义,但是这两个标签确实用的最多的 因为这两个标签是用来做前期的页面布局的 img 图片标签 src 1、可以写一个网站图片地址 2、还可以写本地的图片地址 3、url(自动朝该url发送get请求要数据) alt 当图片加载不出来的时候 默认展示的提示信息 title 当鼠标悬浮在图片上的时候 展示的提示信息 width,height 修改一个 另一个会自动等比例缩放 若两个都修改图片就会失真 a 链接标签 href 1、放一个url 点击就会跳到该url所对应的资源 target 控制是否在当前页跳转 默认是在当前页跳转 _self 新建页跳转 _blank 错点功能 href不单单是可以写url 也可以写另外一个a标签的id值 点击就会跳转到该id值所对应的a标签所在的位置 标签应该具备的属性 1、id属性:类似于身份证号 用来唯一标识当前html页面的某一个标签 在同一个html页面中 id值不能重复 2、class属性:类似于面向对象的继承 直接引用别的类的方式
- body类常用标签
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <h1>001</h1> # 1级标题 <h2>002</h2> # 2级标题 <h3>003</h3> # 3级标题 <h4>004</h4> # 4级标题 <h5>005</h5> # 5级标题 <h6>006</h6> # 6级标题 我是普通文本 <s>我是s</s> # s删除线 <u>我是u</u> # u下划线 <b>我是b</b> # b 加粗 <i>我是i</i> # i 斜体 <p>天生我才必有用 莫使金樽空对月</p> # 空格符一个代表空一格 <br> # 换行符 <p>天生我才必有用 莫使金樽空对月</p> <hr> # 分隔符 <p>天生我才必有用 莫使金樽空对月</p> <p>天生我才必有用 莫使金樽空对月</p> <p>a 大于 b a > b</p> # a > b <p>a 小于 b a < b</p> # a < b <p>a&b a & b</p> # a 交 b <p>人民币 ¥ 1000000000</p> # ¥ <p>版权标识 ©</p> <p>注册商标 ®</p> </body> </html>
- 常用标签1
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <div> <div> <div> <p> <a href=""></a> <s></s> </p> </div> </div> </div> <p> 我是p <a href="">alshfkaak</a> </p> <a href="">111 <a href=""></a> </a> </body> </html>
- 常用标签2
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <img src="https://i.meizitu.net/thumbs/2019/12/201498_05a05_236.jpg" alt="这是一张美女图片" width="150px"> <img src="download.jpg" alt="这是个葫芦娃专门收妖精" width="200px"> <a href="https://www.mzitu.com/" target="_self" id="" class="">点我有你好看的哦</a> <a href="https://www.mzitu.com/" target="_blank">点我有你好看的哦</a> <a href="" id="d1">页首</a> <div style="height: 150px;background-color: red"></div> <a href="" id="d2">中间</a> <div style="height: 150px;background-color: green"></div> <a href="#d1">回到顶部</a> # 点击可以回到页首 <a href="#d2">回到中间</a> # 点击可以回到中间 </body> </html>
六、列表标签
- 列表标签
无序列表(较多) ul li 只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现 有序列表 ol li 标题列表 dl dt标题 dd内容
- 列表标签
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <p>无序列表</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <p>有序列表</p> <ol type="1"> <li>哈哈哈</li> <li>呵呵呵</li> <li>嘿嘿嘿</li> </ol> <p>标题列表</p> <dl> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题3</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd> </dl> </body> </html>
七、表格标签
- 演示
展示网站数据的时候 一盘情况下可以使用表格标签 <table> <thead> <tr> <th></th> <tr> </thead> <tbody> <tr> <td></td> <tr> </tbody> </table> 先写表格标签 在写结构 然后写数据 一个str 就是一行 th和td的区别 一个加粗 一个不加粗 通常情况下表头用th 表单内容用td
- 表格标签
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <table border="5"> # 设置边框的尺寸 <thead> <tr> # 一个tr就是一行 <th>用户名</th> # 表头用th加粗 <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>yafeng</td> # 表内容用td不加粗 <td>18</td> <td>study</td> </tr> <tr> <td rowspan="2">jason</td> # rowspan行宽为2,所以总共就2行 <td>73</td> <td colspan="2">dbj</td> </tr> <tr> <td>tank</td> <td>84</td> <td>piao</td> </tr> </tbody> </table> </body> </html>
八、表单标签
- 演示
form标签 获取用户输入(输入 选择 上传文件....)并且将数据打包发送给后端 action参数: 用来控制数据提交的路径(到底是哪个后端服务器提交数据) 三种写法: 1、不写 默认就是朝着当前页面所在的地址提交数据 2、全路径比如(http://www.baidu.com) 3、只写路径后缀(/index/) 获取用户输入的 input标签 该标签是一个行内标签 input类似于前端的变形金刚 type属性 text 普通文本 password 密文 date 日期 radio 多选一 checkbox 多选多 默认选种 checked="checked" 当标签的属性名和属性值相同的时候 可以只写属性名 女<input type="radio" name="gender" checked="checked"> 简写 女<input type="radio" name="gender" checked> reset 重置 button 普通按钮 submit 触发form表单提交动作 file 获取文件 select标签 下拉框 一个个选项就是一个个option标签 默认是单选的 可以加一个multiple该成多选 <select name="" id="" multiple> <option value="" selected="selected">新恒结衣</option> <option value="">三上悠亚</option> <option value="" selected>三上悠亚</option> <option value="">波老师</option> <option value="">苍老师</option> </select> 如何让option标签默认选中 加selected="selected"也可简写selected <select name="" id="" multiple> <option value="" selected="selected">新恒结衣</option> <option value="">三上悠亚</option> <option value="" selected>三上悠亚</option> <option value="">波老师</option> <option value="">苍老师</option> </select> textarea标签 获取大段文本 label 通常是配合input一起使用的 for用来填写对应的input标签id值 点击label标签的内容 会自动让对应的input标签聚焦 能耐触发form表单提交数据的按钮 <input type='submit'> 可以通过value属性来指定按钮文本内容 <input type='submit' value='注册'> <button>点我</button> input获取到的用户输入就类似于是字典中的value input中的name属性就类似于是字典中的key
- form表单
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <p>注册功能</p> <form action=""> <p> <label for="d1">用户名:<input type="text" id="d1" name="username"></label> </p> <p>密码:<input type="password" name="password"></p> <p>生日:<input type="date"></p> <p>性别: 男<input type="radio" name="gender" checked> 女<input type="radio" name="gender"> # radio多选一 其他<input type="radio" name="gender"> </p> <p>爱好: 篮球<input type="checkbox" name="hobby" checked> 足球<input type="checkbox" name="hobby"> # checkbox多选多 双色球<input type="checkbox" name="hobby"> 肉球<input type="checkbox" name="hobby" checked> </p> <p>省份: <select name="province" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> </select> </p> <p>前女友: <select name="" id="" multiple> # multiple多选 <option value="" selected="selected">新恒结衣</option> <option value="">三上悠亚</option> <option value="" selected>三上悠亚</option> #社默认值 <option value="">波老师</option> <option value="">苍老师</option> </select> </p> <p>个人简介: <textarea name="" id="" cols="30" rows="10"></textarea> </p> <p>个人简历: <input type="file"> </p> <p> <input type="submit" value="注册"> <input type="reset" value="重置"> <input type="button" value="按钮"> <button>点我</button> </p> </form> </body> </html>
九、标签的分类2
- 演示
标签的分类2 1.块儿级标签 独占一行 h1~h6 p br hr div 1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签 2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签 如果嵌套了 没有问题 知识不符合html语法规范 2.行内标签 u s i b span 自身文本多大 就占多大 行内标签内部不能嵌套块儿级标签和行内标签 书写标签的时候 你只需要写标签的名字 之后tab键就可以自动补全 emmet插件
下一篇: c# EnumHelper枚举常用操作类