一、什么是前端

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

二、web服务

(一)流程

  1. 向指定的服务器发送请求
  2. 服务端接受请求,并处理
  3. 返回相应的响应
  4. 浏览器接受响应并渲染出页面

(二)请求方式

(1)get请求

向服务器获取资源,比如域名

(2)post请求

向服务器提交数据,比如登录功能

三、HTTP协议

(一)什么是HTTP协议

超文本传输协议,规定了服务端和浏览器传输的数据格式

(二)四大特性

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

  2. 基于请求响应

    一次请求对应一次响应

  3. 无状态

    不保存客户端状态,所以才有了cookies和session

  4. 无连接

    相反的长连接,比如基于websocket实现的聊天室功能

(三)数据格式

(1)请求格式

注意:请求头和请求体之间的换行(\r\n)是不能省略的

请求首行(请求方式 协议版本)
请求头 (一堆k:v键值对)

请求体(敏感信息 密码 身份证号)

(2)响应格式

同请求格式

响应首行(响应方式 协议版本)
响应头(一堆k:v键值对)

请求体(给用户看的数据)

(四)响应状态码

用数字表示要返回的信息

  1. 1xx:服务端成功接收了请求,正在处理,可以继续提交其他数据
  2. 2xx:服务端成功响应了相应的数据(200)
  3. 3xx:重定向
  4. 4xx
    1. 404:请求资源不存在
    2. 403:用户当前不符合一些条件,无法正常访问
  5. 5xx:服务器内部错误(500)

四、HTML

(一)什么是HTML

超文本标记语言,一种标示性的语言,它不是一种编程语言,本质上是浏览器可识别的规则,包括一系列标签,统一网络上的文档格式

(二)注释

<!--注释内容-->

搭建页面时可以用注释来划分区域

(三)文档结构

<!DOCTYPE html>  # 声明是html5文档
<html lang='zh-CN'> # 开始标签
    <head></head> # 头部、给浏览器看的
    <body></body> # 主题、给人看的代码
</html> # 结束标签

(四)标签的分类

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

  1. 双标签

    head标签中:title,style,script

    body标签中:h,p,s,b,u,i,div,span,a,列表标签、表格标签

  2. 自闭和标签

    head标签中:link,meta

    body标签中:br,hr,img

(2)块级标签和行内标签

只针对于body标签

  1. 块级标签 h1~h6、p、br、hr、div、a、列表标签、表格标签

    独占一行

    1. 块级把标签可以嵌套其他块级标签和行内标签
    2. p标签虽然是块级标签,但是不能嵌套其他块级标签,只能嵌套行级标签
  2. 行内标签 s、b、u、i、span、img

    1. 内部文本多大,就占多大
    2. 行内不能嵌套行内和块级标签

(五)head标签

(1) title

<title>标题</title>,定义网页标题

(2) style

<style></style>,内部支持写css代码

<style>
    h1 {
        color: green;
    }
</style>

(3) link

<link>,引入外部css样式文件

<link rel="stylesheet" href="03%20我的第一个css文件.css">

(4)script

<script></script>,内部可以直接写js代码,也可以引入外部js文件

<!--直接定义js代码-->
<script>
        alert('hello baby')
</script>

<!--外部引入js代码-->
<script src="04%20我的第一个js文件.js"></script>

(5)meta

<meta>,定义网页源信息,针对搜索引擎和更新频度的描述和关键字

<meta name="keywords" content="百度搜索的关键字">
<meta name="description" content="百度搜索后网页的描述">

(六)body内常用标签

(1)常用标签

1. h1~h6

<h1>标题1</h1>,标题标签

2. p

<p>文本内容</p>,段落标签,一个标签就是一行

3. s

<s>删除线</s>,删除线

4. b

<b>加粗</b>,加粗

5. u

<u>下划线</u>,下划线

6. i

<i>斜体</i>,斜体

7. br

<br>,换行

8. hr

<hr>,一条分割线

(2)body内特殊符号

特殊符号 含义
&nbsp; 空格
&amp; &
&yen; ¥
&gt; >
&lt; <
&copy; ©,版权
&reg; ®,注册

(3)body内重要标签

1. div 块级元素

定义一块区域,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

2. span 行内元素

定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

3. a 超链接标签

    <a href="http://www.oldboyedu.com" target="_blank" >点我</a>
  1. href

    可以指向绝对URL、相对URL(本地中某个htm文件)和锚URL(href = '#top',指向页面中的锚,id值)

    <a href="" id="a1">文章开头</a>
             <div style="background-color: red;height: 1000px"></div>
             <div style="background-color: green;height: 1000px"></div>
             <div style="background-color: orange;height: 1000px"></div>
             <a href="" id="a2">文章中部</a>
             <div style="background-color: black;height: 1000px"></div>
             <div style="background-color: green;height: 1000px"></div>
             <div style="background-color: orange;height: 1000px"></div>
             <a href="#a1">回到顶部</a>
             <a href="#a2">回到中部</a>
  2. target

    • __blank:表示新标签页中打开目标网页
    • __self:表示当前标签中打开目标网页

4. img 图片标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
  1. src

    1. 本地图片地址
    2. URL,会自动向该网址发送get请求,获取图片
  2. alt

    当图片加载不出来的时候,展示的提示信息

  3. title

    鼠标悬浮时展示的提示信息

  4. width和height

    宽度和高度,如果只设置一个,会等比例缩放

5. 列表标签

  1. 无序列表

    <ul type="disc">
      <li>第一项</li>
      <li>第二项</li>
    </ul>

    type属性:

    1. disc:实心圆点,默认值
    2. circle:空心圆圈
    3. square:实心方块
    4. none:无样式
  2. 有序列表

    <ol type="1" start="2">
      <li>第一项</li>
      <li>第二项</li>
    </ol>

    type属性:

    1. 1:数字列表、默认值
    2. A:大写字符
    3. a:小写字母
    4. I:大写罗马
    5. i:小写罗马
  3. 标题列表

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

6. 表格标签

展示数据

<table>
    <thead>
        <tr>
            <th>username</th>  字段
            <th>password</th>  字段
            <th>hobby</th>     字段
            <th>is_delete</th> 字段
        </tr>  一个tr就表示一行
    </thead>
    <tbody>
        <tr>
            <td>jason</td>  表数据
            <td>123</td>    表数据
            <td>study</td>  表数据
            <td>0</td>      表数据
        </tr>
    </tbody>
</table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格)

(day44)前端、HTTP、HTML的更多相关文章

  1. day44前端开发2之css基础

    web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head>  ...

  2. day44前端开发1之html基础

    web前端开发1一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签:由< ...

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

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

  4. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

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

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

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

  6. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  7. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  8. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  9. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

随机推荐

  1. 42 在Raspberry Pi上安装dlib表情识别

    https://www.jianshu.com/p/848014d8dea9 https://www.pyimagesearch.com/2017/05/01/install-dlib-raspber ...

  2. flask-windows部署

    由于supervisor不支持windows,但要防止程序异常中断,所以需要采取措施 通过pywin32,使得flask以服务的方式运行 创建pythonservice.py import win32 ...

  3. jdbc工具类是多例的

    一直以为他 是单例的, 以为创建个工具类就是为了单例, 节省效率 , 其实 是为了封装代码, 简洁 ! 还有重要一点  :  所欲工具类里面不要抛异常 要捕捉异常  !

  4. win10 去除快捷方式小箭头

    @echo off color 2 reg delete HKCR\lnkfile /v IsShortcut /f reg delete HKCR\piffile /v IsShortcut /f ...

  5. jenkins配置自动部署java程序

    任务背景 该项目包含4个程序包:a.jar,b.jar,c.jar,d.jar,每次启动前需要修改程序中的配置文件(修改数据源配置),然后按照先后顺序启动. 任务目标 1.利用jenkins拉取代码, ...

  6. 解决Warning: Permanently added ' 192.168.1.230'(RSA) to the list of known hosts.

    前提 当我在刚安装的Red Hat Linux5.x系统中进行ssh 192.168.1.230 远程时,出现以下错误: Warning: Permanently added ' 192.168.1. ...

  7. LeetCode 2:两数相加 Add Two Numbers

    ​给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...

  8. GitFirstRemote

    1.$ git ls-remote From git@github.com:Smoothfu/WPFITEMSSOURCEPRODUCTCOLLECTION.git9a6669a2e2c9e22b30 ...

  9. [翻译]微软 Build 2019 正式宣布 .NET 5

    原文: Introducing .NET 5 今天,我们宣布 .NET Core 3.0 之后的下一个版本将是 .NET 5 .这将是 .NET 系列的下一个重要版本. 将来只会有一个 .NET ,您 ...

  10. php 除10取整,取十位数前面一个数字,百位前两个数字

    需求:php 除10取整,取十位数前面一个数字,百位前两个数字,并把大于2的加红显示 例:0-9,10-19,20-29,30-39,110-119对应为:0 1 2 3 11 实现主要方法:$num ...