软件开发架构：

　　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. SpringCloud搭建分布式配置中心(基于git)

    1.简介 Spring Cloud Config.它用来为分布式系统中的基础设施和微服务提供集中化的外部配置支持,分为服务端和客户端两个部分. 其中服务端也称为分布式配置中心,他是独立的微服务应用,用 ...

  2. JS 根据今天的日期获取本周星期一与星期天的日期

    var now = new Date(); var nowTime = now.getTime() ; var day = now.getDay(); var oneDayTime = 24*60*6 ...

  3. iOS开发使用UIScrollView随笔

    1.scrollview滚动到固定偏移量contenOffset - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)anim ...

  4. 操作系统 Lab1（2)

    中断很久,一看发现又多了一些内容. 打算完成了 Lab1 challenge 1 中断像量表设置的时候我们需要设置一个用于系统调用的 trap门 也就是 利用中断切换特权级 To kernel 调用 ...

  5. LUOGU P3178 [HAOI2015]树上操作

    传送门 解题思路 树链剖分裸题,线段树维护. 代码 #include<iostream> #include<cstdio> #include<cstring> #d ...

  6. vue.js_11_路由的2中参数传递和路由的嵌套

    1.以?的形式传递参数   <router-link to="/login?id=10&name=zs">登录</router-link> 发送参数 ...

  7. Java SE、Java EE、Java ME三者的区别

    1. Java SE(Java Platform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程 ...

  8. 机器学习二 逻辑回归作业、逻辑回归（Logistic Regression）

    机器学习二 逻辑回归作业   作业在这,http://speech.ee.ntu.edu.tw/~tlkagk/courses/ML_2016/Lecture/hw2.pdf 是区分spam的. 57 ...

  9. R语言画图教程之盒形图

    R语言画图教程之盒形图 我们之前有分享过一系列的R语言画图代码(PCA图.Pathway图.火山图.RDA图.热图),今天再来补充一个盒形图(箱形图)的代码. 以下代码只是示例,不能直接搬来用哦,注意 ...

  10. CSS样式汇总（转载）

    1.字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: o ...