软件开发架构：

　　c/s架构

　　　　客户端

　　　　服务端

　　b/s架构

　　　　浏览器

　　　　服务端

　　本质：b/s架构也是c/s架构

HTTP协议

　　超文本传输协议：规定了客户端与服务端之间消息传输的格式

　　四个特性：

　　　　1、基于TCP/IP协议作用于应用层的协议

　　　　2、基于请求响应

　　　　3、无状态（服务端无法保存用户的状态，一个人来千万次我都记不住）

　　　　4、无连接（请求来一次响应一次之后就立刻断开连接，两者之间就没有任何关系了）

　　websocket是HTTP最大的一个补丁，它支持长连接

　　get请求：

　　　　朝服务端要资源

　　post请求：

　　　　朝服务端提交数据

　　数据格式之请求：

　　　　请求首行（标识HTTP协议的版本， 当前请求的方式 ）

　　　　请求头(一堆k,v键值对)

　　　　\r\n

　　　　请求体（post请求携带的数据）

　　请求数据之响应：

　　　　响应首行

　　　　响应头(一堆k,v键值对)

　　　　\r\n

　　　　响应体（post请求携带的数据）

　　响应状态码：

　　　　1xx:服务器已经成功接受到你的数据正在处理，你可以继续提交其他数据

　　　　2xx：请求成功 服务器已经成功将你请求的数据发给你了

　　　　3xx：重定向

　　　　4xx：请求资源不存在

　　　　5xx：服务器错误

Web服务的本质：

　　1、浏览器朝服务端发送请求

　　2、服务端接收到请求

　　3、服务端返回相应的内容

　　4、浏览器接受响应，根据特定的规则渲染页面展示给用户看

请求方式：

　　get请求

　　　　朝服务端要资源（比如浏览器窗口输入的www.baidu.com）

　　post请求

　　　　朝服务端提交数据（比如用户登陆的时候要提交的用户名和密码）

　　URL：统一资源定位

HTML：

　　超文本标记语言

　　浏览器只认识html、css、js

　　

HTML中的注释：

　　<!--单行注释-->

　　<!--

　　多行注释

　　多行注释

　　-->

HTML文档结构：

<html>
<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
<body></body>:body内的标签 就是浏览器展示给用户看的内容
</html>

头尾一定要对齐。方便理解

head中常用的标签：

　　title --> 定义网页的标题

　　style --> 定义内部样式表

　　script --> 定义JS代码或引入外部JS文件

　　link --> 引入外部样式表文件或网站图标

　　meta --> 定义网页原信息

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<meta name="description" content="老男孩教育Python学院">

<!--
name属性：主要用于描述网页，与之对应的属性值为content，content中的
内容主要是便于搜索引擎机器人查找信息和分类信息用的
-->

打开HTML页面的两种方式：

　　1、找到文件路径 选择浏览器打开

　　2、pycharm快速打开

HTML中的常用标签：

　　基本标签：

　　　　p标签：段落标签

　　　　h标签：标题标签

　　常用标签：

　　　　div

　　　　span

　　　　p

　　　　img　　

　　　　　　src存放的是图片的路径（这个路径可以是网上的）

　　　　　　　　1、可以是url（会自动请求该url获取相应的数据）

　　　　　　　　2、也可以直接放图片的二进制数据  会自动转成图片

　　　　　　alt是当图片加载不出来的时候 显示的是图片的信息

　　　　　　title是当鼠标悬浮在图片上 提示的信息

　　　　　　height，width：当你指定一个参数的时候 另外一个会等比例的缩放

　　　　a

　　　　　　href后面存放的是url的时候点击就会跳转到该url，这个链接如果没有被点过，那么这时候默认的是蓝色的，只要是点过一次，之后就都是紫色的了

　　　　　　target 默认是_self表示当前页面跳转 还有一个是_blank表示的是新建页面跳转

　　　　　　锚点功能（回到顶部）：href还可以写另一个a标签的id，点击就会跳到id值所对应的a标签

　　　　每一个标签都应该有三个比较重要的属性

　　　　　　1、id值  该值就类似于人的身份证 再用一个html文档id值应该保证唯一不能重复

　　　　　　2、class值  该值就类似于面向对象里面的那个继承，可以写多个

　　　　　　3、style 支持在标签内直接写css代码 属于行内样式 优先级最高

　　　　　　ps：任何标签都支持自定义属性！！！

　　列表标签：

　　　　表格标签：

　　　　　　　<table>

                <thead></thead>

                <tbody></tbody>

            </table>

            tr表示一行

            th和td都是文本

                建议在thead内用th

                tbody内用td

            colspan表示的水平方向

            rowspan表示的竖直方向
　　　　　　　合并的时候要删掉，否则会挤出去
　　　　　　　border:表格边框
　　　　　　　cellpadding：内边距
　　　　　　　sellspacing：外边距
　　　　　　　width：像素百分比（最好是通过css来设置长宽）
　　　　　　　

　　　　表单标签：

　　　　　　能够接受用户输入（输入  选择  上传）并将其发送给后端

　　　　　　form表单：

　　　　　　　　action控制数据提交的目的地

　　　　　　　　　　1、不写的情况下 默认提交到当前页面所在的路径

　　　　　　　　　　2、写全路径

　　　　　　　　　　3、路径后缀

　　　　　　　　input标签：

　　　　　　　　　　type：

　　　　　　　　　　　　text：普通文本

　　　　　　　　　　　　password：密文  不展示明文

　　　　　　　　　　　　date：日期

　　　　　　　　　　　　submit：触发提交的动作

　　　　　　　　　　　　button：普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作

　　　　　　　　　　　　reset：重置表单内容

　　　　　　　　　　　　radio：单选 可以通过checked控制默认选择（当属性值和属性名相同的时候可以简写只写一个）

　　　　　　　　　　　　checkbox：多选框，同上，可以设置默认值

　　　　　　　　　　　　file：获取用户上传的文件

　　　　　　　　　　　　hidden：隐藏输入框

　　　　　　　　select标签：

　　　　　　　　　　默认是单选的，但是可以通过multiple变成多选

　　　　　　　　　　默认选择使用selected

　　　　　　　　textarea标签：

　　　　　　　　　　name：名称

　　　　　　　　　　rows：行数

　　　　　　　　　　cols：列数

　　　　　　　　　　disabled：禁用

　　　　　　　　　　获取用户输入的大段的文本

　　　　　　　　form表单默认的是get请求 你需要使用method参数 换成post提交

　　　　　　　　form表单中要是想触发提交动作

　　　　　　　　　　1、input标签type指定submit

　　　　　　　　　　2、直接写button标签

　　　　　　　　　　ps：在获取用户输入、选择、上传的时候都必须有一个   属性，这个name属性就类似于字典的key值，而标签获取到的用户写入的值就类似于字典的value

　　　　　　　　form表单提交数据的时候需要指定enctype参数

特殊字符：

　　空格 --> &nbsp;

　　> --> &gt;

　　> --> &lt;

　　& --> &amp;

　　¥ --> &yen;

　　版权 --> &copy;

　　注册 --> &reg;

前端--HTML简介的更多相关文章

  1. 前端路由简介以及vue-router实现原理

    后端路由简介 路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口( ...

  2. 1、前端--HTML简介、head内常见标签、body内常见标签（特殊符号、div、span、a、img、列表、表格table、表单form）、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

  3. JavaWeb前端: JavaScript 简介

    JavaScript基本概念 什么是JavaScript JS是运行在浏览器里的解释性语言,能实现浏览器端和用户的直接交互(HTML输出/响应事件/改变HTML内容图像样式):除了变量不区分类型以外, ...

  4. 前端开发框架简介:angular和react

    作者:vienwu react是facebook推出一个用来构建用户界面的js库.官方介绍的三大特性如下: just the ui 把react只当作一个ui组件就好,等同于传统mvc中的view. ...

  5. 5大JavaScript前端框架简介

    译者按: 简要介绍五大前端框架特性 原文: Top 5 JavaScript Frameworks 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用 ...

  6. 前端 HTML 简介

    HTML HTML是一个网页的主体部分,也是一个网页的基础.因为一个网页可以没有样式,可以没有交互,但是必须要有网页需要呈现的内容.所以HTML部分是整个前端的基础. HTML,全称是超文本标记语言( ...

  7. Web前端 --- 前端基础简介

    目录 web端 HTTP协议 web端 1.前端,后端 什么是前端 任何与用户直接打交道的操作界面,都可以称之为前端, eg:电脑界面 手机界面 什么是后端 真正的幕后操作者 2.前端学习的历程 HT ...

  8. 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

    jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...

  9. 前端开发神器sublime Text

    实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少 ...

随机推荐

  1. IO流读取和写入文件

    package com.xmlmysql.demo.config; import java.io.BufferedReader; import java.io.BufferedWriter; impo ...

  2. css正則匹配、模糊匹配

    //所有class包含font-red的p标签 p[class~="font-red"] {color: red;} [abc^="def"] 选择 abc 属 ...

  3. 容器安全与EDR的异同

    以Docker为代表的容器技术,直接运行于宿主机操作系统内核,因此对于容器安全,很多人会有着这样的疑问:EDR(Endpoint Detection and Response)等主机安全方案,能否直接 ...

  4. html 按钮跳转问题（及其相关）

    1.点击一个按钮跳转到另一个页面 (网址)   两种写法: <button onclick="{location.href='location.html'}">获取现在 ...

  5. js中读取json数据

    1.JSON字符串转为JSON对象 var obj = eval('('+data+')');① var obj = data.praseJSON();② var obj = JSON.prase(d ...

  6. 03_Hibernate关系映射

    关系映射? Hibernate的主要目的就是JAVA程序员可以随心所欲的使用对象编程思维来操作数据库.一些数据库表的关系我们应该可以通过hibernate实现,比如数据库中用到的主外键关系,还有一些与 ...

  7. Python学习day25-面向对象之组合，多态和封装

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  8. ymfx

    一.APIView 入口 在路由层执行as_view()方法 rest-framework/views.py/class APIView/def as_view() 可以看到,APIView继承了Dj ...

  9. [Turn]C# 强制关闭当前程序进程（完全Kill掉不留痕迹）

    C#代码 /// <summary> /// 运行DOS命令 /// DOS关闭进程命令(ntsd -c q -p PID )PID为进程的ID /// </summary> ...

  10. 从一个prismWpfMVVM的例子中学到的

    整个程序如下,从博客园一个作者看到的例子,但是对这个例子做了点修改.我觉得这个更符合MVVM模式.这个用到了prism框架,在项目中要引用Microsoft.Practices.Prism.dll 按 ...