【2020Python修炼记】前端开发之 前端基础和HTML入门
<blockquote><h3>【目录】</h3>
<h3><span style="text-decoration-style: initial; text-decoration-color: initial">一、前端开发工具简介</span> </h3>
<h3>二、前端基础</h3>
<h3>1、什么是前端</h3>
<h3>2、前端学习历程</h3>
<h3>3、HTTP协议</h3>
<h3>三、HTML</h3>
<h3>1、HTML简介</h3>
<h3>2、<span class="md-plain md-expand">HTML文档结构</span></h3>
<h3><span class="md-plain md-expand">3、HTML标签分类（一）</span></h3>
<h3><span class="md-plain md-expand">4、HTML标签分类（二）</span><span class="md-plain md-expand"> </span></h3>
<h3><span class="md-plain md-expand">5、特殊符号</span></h3>
<h3><span class="md-plain md-expand">6、其他常用标签</span></h3>
</blockquote>
<p> </p>
<h1>一、前端开发工具简介</h1>
<p>参考阅读：</p>
<p> https://www.cnblogs.com/xiaoyuanqujing/articles/11669889.html</p>
<p>https://www.cnblogs.com/xiaoyuanqujing/articles/11669962.html</p>
<p> </p>
<p><img src="https://img2020.cnblogs.com/i1/1641822/202005/1641822-20200511184308314-1561920870.png" alt="" width="994" height="110"></p>
<h3>还推荐微软的 VScode，也是一款强大且免费的软件，亦支持前端开发。</h3>
<p> </p>
<h1>二、前端基础</h1>
<h2>1、什么是前端——所见即所得</h2>
<blockquote>
<h3>任何与用户直接打交道的操作界面都可以称之为前端<br>比如:电脑界面 手机界面 平板界面</h3>
<h3>什么是后端<br> 后端类似于幕后操作者(一堆让人头皮发麻的代码)<br> 不直接跟用户打交道</h3>
</blockquote>
<h2>2、前端学习历程</h2>
<blockquote>
<h3><span style="color: rgba(153, 204, 0, 1)">HTML</span>:网页的骨架 没有任何的样式 <br><span style="color: rgba(153, 204, 0, 1)">CSS</span>:给骨架添加各种样式 变得好看<br><span style="color: rgba(153, 204, 0, 1)">Java Script</span>:控制网页的动态效果</h3>
<h3><span style="color: rgba(153, 204, 0, 1)">前端框架</span>:BOOTSTRAP、JQuery、Vue<br> 提前给你封装好了很多操作 你只需要按照固定的语法调用即可</h3>
</blockquote>
<h2>3、HTTP协议</h2>
<blockquote>
<h3 class="md-end-block md-heading md-focus"><span class="md-plain md-expand"># 浏览器窗口输入网址回车发生了几件事:</span></h3>
<h3>"""<br>1 浏览器朝服务端发送请求<br>2 服务端接受请求 (eg:请求百度首页)<br>3 服务端返回相应的响应 (eg:返回一个百度首页)<br>4 浏览器接收响应 根据特定的规则渲染页面展示给用户看<br>"""</h3>
<h3># 浏览器可以充当很多服务端的客户端<br> 百度 腾讯视频 优酷视频....<br> <br># 如何做到浏览器能够跟多个不同的客户端之间进行数据交互？<br> 1.浏览器很牛逼 能够自动识别不同服务端做不同处理<br>2.制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互<br>那么你就必须要遵循一些规则——因此诞生了 HTTP协议</h3>
</blockquote>
<blockquote>
<h3>"""</h3>
<h3><span style="color: rgba(153, 204, 0, 1)">HTTP协议，即 超文本传输协议 用来规定 服务端和浏览器之间的<span style="color: rgba(255, 153, 0, 1)">数据交互的格式</span></span>...</h3>
<h3>该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩<br>你就自己写客户端 用户想要使用 就下载你专门的app即可<br>"""<br><span style="color: rgba(153, 204, 0, 1)"># 四大特性</span><br> <span style="color: rgba(255, 102, 0, 1)">1.基于请求响应</span><br><span style="color: rgba(255, 102, 0, 1)">2.基于TCP/IP 作用于应用层之上的协议</span><br><span style="color: rgba(255, 102, 0, 1)">3.无状态——不保存用户的信息</span><br> eg:一个人来了一千次 你都记不住 每次都当他如初见<br> 由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术<br> cookie、session、token...<br><span style="color: rgba(255, 102, 0, 1)">4.无/短链接</span><br> 请求来一次我响应一次 之后我们两个就没有任何链接和关系了<br> 长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)</h3>
<h3> <br><span style="color: rgba(153, 204, 0, 1)"># 请求数据格式 <span style="color: rgba(255, 102, 0, 1)">（请求头 和 请求体 之间，是有一行空行的）</span></span><br> 请求首行 \r\n (标识HTTP协议版本，当前请求方式)<br>请求头 \r\n (一大堆k,v键值对)<br>\r\n<br>请求体 \r\n (并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)</h3>
<h3><br><span style="color: rgba(153, 204, 0, 1)"># 响应数据格式</span><span style="color: rgba(255, 102, 0, 1)">（响应头 和 响应体 之间，是有一行空行的）</span></h3>
<h3> 响应首行 \r\n (标识HTTP协议版本，响应状态码)<br>响应头 \r\n (一大堆k,v键值对)<br>\r\n<br>响应体 \r\n (返回给浏览器展示给用户看的数据)<br> <br><span style="color: rgba(153, 204, 0, 1)"># 响应状态码</span><br> 用一串简单的数字来表示一些复杂的状态或者描述性信息 ：</h3>
<h3>1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据<br>2XX:服务端成功响应了你想要的数据(200 OK请求成功)<br>3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)<br>4XX:请求错误<br> 404:请求资源不存在<br> 403:当前请求不合法或者不符合访问资源的条件<br>5XX:服务器内部错误(500)<br></h3>
<h3><span style="color: rgba(153, 204, 0, 1)"># 请求方式</span><br> 1.get请求<br> 朝服务端要数据<br> eg:输入网址获取对应的内容</h3>
<h3><br>2.post请求<br> 朝服务端提交数据<br> eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验</h3>
<h3><span style="color: rgba(153, 204, 0, 1)"># url</span>:统一资源定位符(大白话 网址)</h3>
</blockquote>
<h1>三、HTML</h1>
<h2>1、HTML简介</h2>
<blockquote>
<h3 class="md-end-block md-p"><span class="md-plain">超文本标记语言——HTML （Hypertext Markup Language）</span></h3>
<h3 class="md-end-block md-p"><span class="md-plain md-expand">如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法</span></h3>
<h3 class="md-end-block md-p md-focus"><span class="md-plain">我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)</span></h3>
<h3 class="md-end-block md-p md-focus"><span class="md-plain">HTML就是书写网页的一套标准</span></h3>
</blockquote>
<blockquote>
<h3><span style="color: rgba(153, 204, 0, 1)"># 注释:注释是代码之母</span><br><!--单行注释--></h3>
<h3><br><!--<br>多行注释1<br>多行注释2<br>多行注释3<br>--></h3>
<h3><br>由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的<span style="color: rgba(153, 204, 0, 1)">用注释来划定区域</span>方便后续的查找：<br><!--导航条开始--><br>导航条所有的html代码<br><!--导航条结束--><br><!--左侧菜单栏开始--><br>左侧菜单栏的HTMl代码<br><!--左侧菜单栏结束--></h3>
</blockquote>
<h2>2、<span class="md-plain md-expand">HTML文档结构</span></h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
</span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<blockquote>
<h3 class="md-end-block md-p md-focus"><span class="md-plain">PS:文件的后缀名其实是给用户看到的，只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能</span></h3>
<h3 class="md-end-block md-p"><span class="md-plain md-expand">注意:</span></h3>
<h3 class="md-end-block md-p"><span class="md-plain md-expand">HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码</span></h3>
<h3 class="md-end-block md-p"><span class="md-plain md-expand">在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全</span></h3>
<p><span class="md-plain md-expand"> </span></p>
<h3 class="md-end-block md-heading"><span class="md-plain" style="color: rgba(153, 204, 0, 1)">两种打开HTML文件的方式</span></h3>
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
<h3 class="md-end-block md-p"><span class="md-plain">找到文件所在的位置右键选择浏览器打开</span></h3>
</li>
<li class="md-list-item md-focus-container">
<h3 class="md-end-block md-p md-focus"><span class="md-plain">在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器</span></h3>
</li>
</ul>
</blockquote>
<h2><span class="md-plain md-expand">3、HTML标签分类（一）——单标签 和 双标签</span></h2>
<h2><span class="md-plain md-expand">（1）分类</span></h2>
<blockquote>
<h3>1 双标签</h3>
<h3><h1></h1><br><a href="https://www.mzitu.com/"></a></h3>
<h3>2单标签(自闭和标签)</h3>
<h3><img /></h3>
<h3><br /></h3>
</blockquote>
<h2><span class="md-plain md-expand">4、HTML标签分类（二）——块级标签 & 行内标签<span class="md-plain md-expand"><br></span></span></h2>
<blockquote>
<h3><span style="color: rgba(153, 204, 0, 1)"># 1 块儿级标签:独占一行</span><br> h1~h6 p div<br> 1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化<br> 2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签<br> 但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签<br> 如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)<br> <br> 总结:<br> 只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签<br> 但是p标签只能嵌套行内标签（HTML书写规范）</h3>
<h3><br><span style="color: rgba(153, 204, 0, 1)"># 2 行内标签:自身文本多大就占多大</span><br> i u s b span<br> 行内标签不能嵌套块儿级标签 可以嵌套行内标签</h3>
</blockquote>
<p> </p>
<h2>HTML 常用标签汇总：</h2>
<p>https://www.cnblogs.com/bigorangecc/p/12874484.html</p>
<p> </p>
<p>参考阅读：</p>
<p>https://www.cnblogs.com/xiaoyuanqujing/articles/11669913.html</p>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
🐱不负韶华，只争朝夕🍚<br><br>
来源：https://www.cnblogs.com/bigorangecc/p/12867024.html
頁:
[1]