内容概要

  • 前端简介
  • HTTP简介
  • HTTP协议
  • HTML简介
  • head内常见标签
  • body内基本标签
  • body内特殊符号
  • body内常见标签
  • 列表标签
  • 表格标签

内容详情

前端简介 

# 1.什么是前端 什么是后端

    前端

    任何与用户直接打交道的界面都可以称之为前端

    eg:淘宝页面 游戏页面 操作页面

    后端

    不直接与用户打交道的用于执行真正业务逻辑的代码

    eg:python代码 java代码 c++代码

# 2.前端的学习路径

    声明:

    真正的前端工程师也需要培训六个月左右 我们作为python全栈工程师只需要掌握前端最核心的知识点即可 做到能看懂前端代码并且将来有能力去钻研前端即可

    我们学习前端的时间不会超过七天(作为后端程序员足矣!!!)

    知识脉络:

    HTML CSS JavaScript jQuery(框架) Bootstrap(框架)

    只要学习前端肯定要学'前端三剑客'>>>:HTML CSS JavaScript

    比喻说明:

    HTML:网页的骨架

    	蜡笔小新不穿衣服 赤裸裸的(难看)

    CSS:网页的样式

    	穿上衣服 化好妆(好看)

    JavaScript:网页的动态效果

        扭起来 跳起来 动起来(生动)

HTTP简介 

# 可以充当客户端的有哪些?

  1.自己写的python代码(TCP客户端)

  2.别人写的浏览器

  '''cs架构与bs架构:bs本质也是cs'''

# 问题

  我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据

# 推导

  不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理

  最佳的解决措施是统一规定一个标准>>>:HTTP协议

# HTTP协议

  规定了服务端与浏览器之间的数据交互格式及其他事项

  """

  如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容

  如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端

  如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app)

  """

HTTP协议 

# 1.四大特性

    1.基于请求、响应

      服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应

    2.基于TCP/IP作用于应用层之上的协议

      应用层协议:HTTP HTTPS FTP ...

    3.无状态

      服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)

    4.短连接

      不保持客户端与服务端之间的链接导通

    	  补充:websocket(长连接) 主要用于加好友聊天等业务

# 2.数据格式

    请求格式:客户端给服务端发送消息应该遵循的数据格式

    1.请求首行(请求方法 协议版本)

    2.请求头(一大堆k:v键值对)

    3.(换行不能省略)

    4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有

    响应格式:服务端给客户端发送消息应该遵循的数据格式

    1.响应首行(响应状态码 协议版本)

    2.响应头(一大堆k:v键值对)

    3.(换行不能省略)

    4.响应体(给浏览器展示给用户看的页面内容)

# 3.响应状态码

    用数字来表示一串中文意思(简化理解)

    1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送

    2XX:200 OK  表示请求成功 服务端给出了响应

    3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)

    4XX:403请求不合法(权限不够)	404请求资源不存在

    5XX:都是服务端错误  与客户端无关(代码bug、机房炸了...)

    在工作中还会自定义状态码(因为默认的不够)

  	自定义状态码一般都是从10000开始

    	# 以后我们进公司写后端也需要给前端提供一个手册

      	eg:聚合数据

HTML简介 

<h1>hello big baby</h1>

<a href="https://www.sogo.com">click me</a>

<img src="111.jpg"/>

# 上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)

1.存放HTML代码的文件后缀名一般都是.html

2.HTML:超文本标记语言

  它没有任何的逻辑 固定搭配 """所见即所得"""

3.HTML文档结构

  <html>

  <head>给浏览器看的数据</head>

  <body>给用户看的数据</body>

  </html>

4.HTML标签的分类

  1.双标签:有头有尾    内容写在中间

    <h1></h1>        <html></html>

  2.自闭合标签:单标签

    <img/>           一般有特殊功能

5.HTML注释语法

  <!--单行注释-->

  <!--

  多行注释

  -->

  '''html由于标签非常的多 所以可以通过注释区分页面区域'''

# 补充

1.如何打开html标签

  1.查找并右键选择打开方式

  2.pycharm快捷方式(重要)

        html文件内容区右上方浏览器图标

2.html标签其实没有缩进的概念

      之所以缩进是因为我们习惯了 更加美观

3.在pycharm中的html文件内

      编写标签只需要写标签名称即可 按tab键自动补全

4.在pycharm中的html文件内

      注释的快捷键也是ctrl+?

head内常见标签 

# head标签内编写的标签一般都是给浏览器看的

  title标签             控制网页小标题

  style标签             内部支持编写css代码

  link标签              引入外部css文件

  script标签            内部支持编写js代码 也可以通过src属性引入外部js文件

  meta标签              功能非常多(定义页面源信息)

                        keywords:搜索引擎查询关键字

                        description:用于展示页面搜索结果的文本描述

"""正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合"""

body内基本标签 

"""相同的样式可能存在多种标签 区别在于语义不一样(后面再说)"""

1.标题系列

  h1~h6(1到6级标题)

2.字体系列

  <i>斜体</i>

  <b>加粗</b>

  <u>下划线</u>

  <s>删除线</s>

3.文本段落

  <p></p>

4.其他

  hr	水平分割线

  br	换行符

body内特殊符号 

&nbsp;		空格

&gt;            大于号

&lt;            小于号

&amp;           &符号

&yen;           羊角符

&copy;		版权

&reg;           商标

body内常见标签 

"""

标签的类别

    块儿级标签:h1~h6 p div

        默认独占浏览器一行内

    行内标签:s i u b span

	自身内部文本多大就占多大

标签之间支持嵌套(最好是布局类相关标签参与)

    块儿级标签可以嵌套任意标签

        不属于布局标签的块儿级标签不建议嵌套块儿级标签

    行内标签只能嵌套行内标签

"""

1.布局标签

  div

  span

  # 页面的编写首先就是先用布局标签占位 之后填充内容即可

  ps:课下随便找几个网站查看一些div的使用

2.图片标签

  img

    src         图片路径

    title       鼠标悬浮自动展示提示信息

    alt	  	当图片无法正常展示自动提示的信息

    height 	自定义图片高度

    width       自定义图片宽度

    # height和width调整一个另外一个自适应调节 单位是px(像素)

3.链接标签

  a

    href      点击跳转到位置

    	          可以写网址

      		      <a href='网址'></a>

      		  也可以写标签id值

          	      <a href='页面上某个标签id值'></a>

    target    控制是否当前页跳转

    		  默认_self当前页

      		  设置_blank新建页

# 标签的两大重要参数

  1.id

    类似于身份证号 同一个html页面上标签的id值不允许重复

    用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)

  2.class

    类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

列表标签 

# 无序列表

  <ul>

    <li>001</li>

    <li>002</li>

    <li>003</li>

    <li>004</li>

    <li>005</li>

  </ul>

"""

无序列表是使用频率最高的列表标签

    页面上只有是有规则排列的横向或者竖向内容 几乎使用的都是无序列表

"""

表格标签 

<table >

    <thead>

        <tr>  <!--tr表示一行-->

            <th>编号</th>  <!--th加粗文本-->

            <th>姓名</th>

            <th>年龄</th>

        </tr>

    </thead>  <!--表头字段-->

    <tbody>

        <tr>

            <td>1</td>  <!--td普通文本-->

            <td>jason</td>

            <td>18</td>

        </tr>

        <tr>

            <td>2</td>

            <td>tony</td>

            <td>28</td>

        </tr>

        <tr>

            <td>3</td>

            <td>kevin</td>

            <td>38</td>

        </tr>

    </tbody>  <!--表单数据-->

</table>

前端1HTML的更多相关文章

  1. 前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱)

    前端1-----HTML了解,内联标签(图片,超链接锚点,超链接邮箱) 一丶自定制B/S # -*-coding:utf-8-*- # Author:Ds import socket IP_PORT= ...

  2. 前端规范1-HTML规范

    HTML规范 1代码风格(参1,) 使用Tab字符(四个空格长度) 层级关系太多时尽量写在一行,但保证每行代码不宜过长  例,代码不宜过长 例,尽量写在一行 2命名(参1,) class必须使用小写, ...

  3. 《编写高质量代码——Web前端开发修炼之道》读后随笔

    结构样式行为的分离 结构标准包括XML标准.XHTML标准.HTML标准:样式标准有CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 通常的项目会按照如上的方式进行分离,但自己曾今做 ...

  4. 想转行做web前端工程师，必学这6大技能

    web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业.大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.网虫.大学其他专业.策划.编辑等等. 要学 ...

  5. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...

  6. 前端(4)BOM与DOM

    前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...

  7. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  8. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. flex布局控制最后一个元素右浮动

    可以在最后一个元素添加css属性 margin-left: auto; 例如我一排排列的元素 ,子元素并没有完全排列撑开父元素的宽度,这时候要使最后一个元素想最右 可以让最后一个元素的 margin- ...

  2. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  3. 在 M1 Mac 上开发 .NET MAUI (iOS)

    在 M1 Mac 上开始使用 .NET MAUI 开发 (iOS) 的最简单方法. .NET 多平台应用程序 UI (.NET MAUI) 是一个跨平台框架,用于使用 C# 和 XAML 创建本机移动 ...

  4. 什么是机器学习的分类算法？【K-近邻算法(KNN)、交叉验证、朴素贝叶斯算法、决策树、随机森林】

    1.K-近邻算法(KNN) 1.1 定义 (KNN,K-NearestNeighbor) 如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类 ...

  5. numpy教程06---ndarray的进阶操作

    欢迎关注公众号[Python开发实战], 获取更多内容! 工具-numpy numpy是使用Python进行数据科学的基础库.numpy以一个强大的N维数组对象为中心,它还包含有用的线性代数,傅里叶变 ...

  6. 基于Nginx实现反向代理

    一.nginx的简介 Nginx 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务 其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服 ...

  7. SpringBoot其他框架-JPA-Hibernate-Swagger

    SpringBoot其他框架 通过了解其他的SpringBoot框架,我们就可以在我们自己的Web服务器上实现更多更高级的功能. 邮件发送:Mail 我们在注册很多的网站时,都会遇到邮件或是手机号验证 ...

  8. Visual Studio 安装 MFC

    **Visual Studio 安装 MFC 库**   打开 Visual Studio Installer //程序   选择对应的版本 (本人 VS2022)->修改   [点击]单个组件 ...

  9. IOH和MCH(北桥芯片的变化)

    IOH位置架构图示意图 北桥芯片-MCH和北桥芯片-IOH区别 1.MCH是内存控制器中心的英文缩写,负责连接CPU,AGP总线和内存, 目前Intel的CPU已经把内存控制器(北桥芯片-MCH)总线 ...

  10. Java学习day3

    今天跟着b站up的视频学习了方法定义调用与重载,以及类的封装. Java中的方法与c++当中的函数类似,只是定义格式为: public static void 方法名(){ 方法体 } 上完课做实验的 ...