首页 > > 网页制作 > css >

【2020Python修炼记】前端开发之前端工具和HTML

2020-05-11 16:00:17来源：博客园阅读 ()

【目录】

一、前端开发工具简介

二、前端基础

1、什么是前端

2、前端学习历程

3、HTTP协议

三、HTML

1、HTML简介

2、HTML文档结构

3、HTML标签分类（一）

4、HTML标签分类（二）　

5、特殊符号

6、其他常用标签

一、前端开发工具简介

参考阅读：

https://www.cnblogs.com/xiaoyuanqujing/articles/11669889.html

https://www.cnblogs.com/xiaoyuanqujing/articles/11669962.html

还推荐微软的 VScode，也是一款强大且免费的软件，亦支持前端开发。

二、前端基础

1、什么是前端——所见即所得

任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面手机界面平板界面

什么是后端
后端类似于幕后操作者(一堆让人头皮发麻的代码)
不直接跟用户打交道

2、前端学习历程

HTML:网页的骨架没有任何的样式
CSS:给骨架添加各种样式变得好看
Java Script:控制网页的动态效果

前端框架:BOOTSTRAP、JQuery、Vue
　　　　提前给你封装好了很多操作你只需要按照固定的语法调用即可

3、HTTP协议

# 浏览器窗口输入网址回车发生了几件事:

"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页)
4 浏览器接收响应根据特定的规则渲染页面展示给用户看
"""

# 浏览器可以充当很多服务端的客户端
百度腾讯视频优酷视频....

# 如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
1.浏览器很牛逼能够自动识别不同服务端做不同处理
2.制定一个统一的标准如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
那么你就必须要遵循一些规则——因此诞生了 HTTP协议

"""

HTTP协议，即超文本传输协议用来规定服务端和浏览器之间的数据交互的格式...

该协议你可以不遵循但是你写的服务端就不能被浏览器正常访问你就自己跟自己玩
你就自己写客户端用户想要使用就下载你专门的app即可
"""
# 四大特性
1.基于请求响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态——不保存用户的信息
eg:一个人来了一千次你都记不住每次都当他如初见
由于HTTP协议是无状态的所以后续出现了一些专门用来记录用户状态的技术
cookie、session、token...
4.无/短链接
请求来一次我响应一次之后我们两个就没有任何链接和关系了
长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)

# 请求数据格式（请求头和请求体之间，是有一行空行的）
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k,v键值对)

请求体(并不是所有的请求方式都有get没有post有存放的是post请求提交的敏感数据)

# 响应数据格式（响应头和响应体之间，是有一行空行的）

响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k,v键值对)

响应体(返回给浏览器展示给用户看的数据)

# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息：

1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
2XX:服务端成功响应了你想要的数据(200 OK请求成功)
3XX:重定向(当你在访问一个需要登陆之后才能看的页面你会发现会自动跳转到登陆页面)
4XX:请求错误
404:请求资源不存在
403:当前请求不合法或者不符合访问资源的条件
5XX:服务器内部错误(500)

# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容

2.post请求
朝服务端提交数据
eg:用户登陆输入用户名和密码之后提交到服务端后端做身份校验

# url:统一资源定位符(大白话网址)

三、HTML

1、HTML简介

超文本标记语言——HTML

如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

HTML就是书写网页的一套标准

# 注释:注释是代码之母




由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：

导航条所有的html代码


左侧菜单栏的HTMl代码

2、HTML文档结构

<html>
  <head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
  <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>

PS:文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能

注意:

HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

在书写HTML代码的时候你只需要写标签名然后tab就能自动补全

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开

在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器

3、HTML标签分类（一）——单标签和双标签

（1）分类

<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img/>

1 双标签
2 单标签(自闭和标签)

（2）head内常用标签

<title>Title</title>  网页标题
<style>
        h1 {
            color: greenyellow;
        }
</style>  内部用来书写css代码

<script>
        alert(123)
</script>  内部用来书写js代码
<script src="myjs.js"></script>  还可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件


<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,
云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训">  

当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
网页的描述性信息

（3）body内常用标签

<h1>我是h1</h1>  标题标签 1～6级标题
<b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    <p>段落</p>
    <br>  换行
    <hr>  水平分割线

4、HTML标签分类（二）——块级标签 & 行内标签

# 1 块儿级标签:独占一行
h1~h6 p div
1 块儿级标签可以修改长宽行内标签不可以修改了也不会变化
2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿级标签但是它只能嵌套行内标签不能嵌套块儿级标签
如果你套了问题也不大因为浏览器会自动帮你解开(浏览器是直接面向用户的不会轻易的报错哪怕有报错用户也基本感觉不出来)

总结:
只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）

# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签可以嵌套行内标签

5、特殊符号

&nbsp;  空格
&gt;   大于号
&lt;   小于号
&amp;  & 
&yen;  ¥   人民币符号
&copy; ©   版权
&reg;  ®   商标

6、其他常用标签

（1）分块标签

div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的页面的布局一般先用div和span占位之后再去调整样式尤其是div使用非常的频繁
div你可以把它看成是一块区域也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签

（2）img 标签

# 图片标签
<img src="" alt="">

#【属性】

src
1.图片的路径可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据

alt="这是我的前女友"
当图片加载不出来的时候给图片的描述性信息

title="新垣结衣"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会等比例缩放
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

（3）a 标签

# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

#【属性】

href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank

# a标签的锚点功能
"""eg:点击一个文本标题页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

　【补充】

　标签默认具有的两个重要书写

1.id值
类似于标签的身份证号在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承一个标签可以继承多个class值

　　标签既可以有默认的书写也可以有自定义的书写

<p id="d1" class="c1" username="jason" password="123"></p>

（4）列表标签

无序列表(使用较多) —— 快捷语法 ul>li*4

<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签

有序列表(了解) —— 快捷语法 ol>li*3

<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

标题列表(了解)

<dl>
    <dt>标题1</dt> 
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
    <dt>标题3</dt>
    <dd>内容3</dd>
</dl>

原文链接:https://www.cnblogs.com/bigorangecc/p/12867024.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：HTML连载87-完善内容区域

下一篇：html post请求之a标签的两种用法举例

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

【2020Python修炼记】前端开发之 前端工具和HTML

【目录】

一、前端开发工具简介

二、前端基础

1、什么是前端

2、前端学习历程

3、HTTP协议

三、HTML

1、HTML简介

2、HTML文档结构

3、HTML标签分类（一）

4、HTML标签分类（二）

5、特殊符号

6、其他常用标签

一、前端开发工具简介

还推荐微软的 VScode，也是一款强大且免费的软件，亦支持前端开发。

二、前端基础

1、什么是前端——所见即所得

任何与用户直接打交道的操作界面都可以称之为前端比如:电脑界面 手机界面 平板界面

什么是后端 后端类似于幕后操作者(一堆让人头皮发麻的代码) 不直接跟用户打交道

2、前端学习历程

HTML:网页的骨架 没有任何的样式 CSS:给骨架添加各种样式 变得好看Java Script:控制网页的动态效果

前端框架:BOOTSTRAP、JQuery、Vue 提前给你封装好了很多操作 你只需要按照固定的语法调用即可

3、HTTP协议

# 浏览器窗口输入网址回车发生了几件事:

"""1 浏览器朝服务端发送请求2 服务端接受请求(eg:请求百度首页)3 服务端返回相应的响应(eg:返回一个百度首页)4 浏览器接收响应 根据特定的规则渲染页面展示给用户看"""

"""

HTTP协议，即 超文本传输协议 用来规定 服务端和浏览器之间的数据交互的格式...

# 请求数据格式 （请求头 和 请求体 之间，是有一行空行的） 请求首行(标识HTTP协议版本，当前请求方式) 请求头(一大堆k,v键值对) 请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)

# 响应数据格式（响应头 和 响应体 之间，是有一行空行的）

响应首行(标识HTTP协议版本，响应状态码) 响应头(一大堆k,v键值对) 响应体(返回给浏览器展示给用户看的数据) # 响应状态码 用一串简单的数字来表示一些复杂的状态或者描述性信息 ：

# 请求方式 1.get请求 朝服务端要数据 eg:输入网址获取对应的内容

2.post请求 朝服务端提交数据 eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

# url:统一资源定位符(大白话 网址)

三、HTML

1、HTML简介

超文本标记语言——HTML

如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

HTML就是书写网页的一套标准

# 注释:注释是代码之母

由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：导航条所有的html代码左侧菜单栏的HTMl代码

2、HTML文档结构

PS:文件的后缀名其实是给用户看到的，只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能

注意:

HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开

在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器

3、HTML标签分类（一）——单标签 和 双标签

（1）分类

<h1></h1><a href="https://www.mzitu.com/"></a><img/>

1 双标签2 单标签(自闭和标签)

（2）head内常用标签

（3）body内常用标签

4、HTML标签分类（二）——块级标签 & 行内标签

# 2 行内标签:自身文本多大就占多大 i u s b span 行内标签不能嵌套块儿级标签 可以嵌套行内标签

5、特殊符号

6、其他常用标签

（1）分块标签

（2）img 标签

# 图片标签<img src="" alt="">

#【属性】

src 1.图片的路径 可以是本地的也可以是网上的 2.url 自动朝该url发送get请求获取数据

alt="这是我的前女友" 当图片加载不出来的时候 给图片的描述性信息

title="新垣结衣" 当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" width=""

高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放 如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

（3）a 标签

# 链接标签<a href=""></a>"""当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色如果点击过了就会是紫色（浏览器给你记忆了）"""

#【属性】

href 1.放url，用户点击就会跳转到该url页面 2.放其他标签的id值 点击即可跳转到对应的标签位置

target 默认a标签是在当前页面完成跳转 _self 你也可以修改为新建页面跳转 _blank

【补充】

标签默认具有的两个重要书写

1.id值 类似于标签的身份证号 在同一个html页面上id值不能重复2.class值 该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

标签既可以有默认的书写也可以有自定义的书写

（4）列表标签

【2020Python修炼记】前端开发之前端工具和HTML

4、HTML标签分类（二）　

任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面手机界面平板界面

什么是后端
后端类似于幕后操作者(一堆让人头皮发麻的代码)
不直接跟用户打交道

HTML:网页的骨架没有任何的样式
CSS:给骨架添加各种样式变得好看
Java Script:控制网页的动态效果

前端框架:BOOTSTRAP、JQuery、Vue
　　　　提前给你封装好了很多操作你只需要按照固定的语法调用即可

"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页)
4 浏览器接收响应根据特定的规则渲染页面展示给用户看
"""

HTTP协议，即超文本传输协议用来规定服务端和浏览器之间的数据交互的格式...

# 请求数据格式（请求头和请求体之间，是有一行空行的）
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k,v键值对)

请求体(并不是所有的请求方式都有get没有post有存放的是post请求提交的敏感数据)

# 响应数据格式（响应头和响应体之间，是有一行空行的）

响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k,v键值对)

响应体(返回给浏览器展示给用户看的数据)

# 响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息：

# 请求方式
1.get请求
朝服务端要数据
eg:输入网址获取对应的内容

2.post请求
朝服务端提交数据
eg:用户登陆输入用户名和密码之后提交到服务端后端做身份校验

# url:统一资源定位符(大白话网址)

# 注释:注释是代码之母

由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找：

导航条所有的html代码


左侧菜单栏的HTMl代码

PS:文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能

在书写HTML代码的时候你只需要写标签名然后tab就能自动补全

3、HTML标签分类（一）——单标签和双标签

<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img/>

1 双标签
2 单标签(自闭和标签)

# 2 行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块儿级标签可以嵌套行内标签

# 图片标签
<img src="" alt="">

src
1.图片的路径可以是本地的也可以是网上的
2.url 自动朝该url发送get请求获取数据

alt="这是我的前女友"
当图片加载不出来的时候给图片的描述性信息

title="新垣结衣"
当鼠标悬浮到图片上之后自动展示的提示信息

height="800px"

width=""

高度和宽度当你只修改一个的时候另外一个参数会等比例缩放
如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真

# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值点击即可跳转到对应的标签位置

target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank

　【补充】

　标签默认具有的两个重要书写

1.id值
类似于标签的身份证号在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承一个标签可以继承多个class值

　　标签既可以有默认的书写也可以有自定义的书写