软件开发架构：

　　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. Error configuring application listener of class [org.springframework.web.util.Log4jConfigListener]

    1.启动项目发现如下错误: 严重: Error configuring application listener of class [org.springframework.web.util.Log4 ...

  2. 第七章 Odoo 12开发之记录集 - 使用模型数据

    在上一篇文章中,我们概览了模型创建以及如何从模型中载入和导出数据.现在我们已有数据模型和相关数据,是时候学习如何编程与其进行交互 了.模型的 ORM(Object-Relational Mapping ...

  3. springboot与任务（定时任务）

    描述: 项目开发中经常需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息.Spring为我们提供了异步执行任务调度的方式,提供TaskExecutor .TaskScheduler ...

  4. JS Math.sin() 与 Math.cos() 用法 (含圆上每个点的坐标)

    Math.sin(x)      x 的正玄值.返回值在 -1.0 到 1.0 之间: Math.cos(x)    x 的余弦值.返回的是 -1.0 到 1.0 之间的数: 这两个函数中的X 都是指 ...

  5. LintCode_389 判断数独是否合法

    题目 请判定一个数独是否有效. 该数独可能只填充了部分数字,其中缺少的数字用 . 表示. 注意事项 一个合法的数独(仅部分填充)并不一定是可解的.我们仅需使填充的空格有效即可. 说明 什么是 数独? ...

  6. hibernate离线条件查询设置or关系

    detachedCriteria.add(Restrictions.or(Restrictions.isNull(""), Restrictions.isNull("&q ...

  7. 详解position定位与定位应用

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美.     定位的定义:    在CSS中关于 ...

  8. 01.Hibernate快速入门

    第一步:下载Hibernate5的运行环境 https://sourceforge.net/projects/hibernate/files/hibernate-orm/ 第二步:在数据库创建表 Cr ...

  9. odoo many2one

    在xml中使many2one字段  不可点击 不可跳转 options="{'no_open': True, 'no_create': True}"

  10. SQL有意思的面试题

    1.中软国际 SQL行转列  变成   --数据准备create table t_test( year int, month int, sale int, primary key (year, mon ...