HTTP协议

超文本传输协议HyperText Transfer Protocol

四大特性：

1、HTTP是一个简单的请求-响应协议。　

2、基于TCP协议，作用于应用层上。　　

3、无状态：HTTP是一种无状态协议，即服务器不保留与客户交易时的任何状态。　　

4、无连接：客户与服务器之间的HTTP连接是一种一次性连接，它限制每次连接只处理一个请求，当服务器返回本次请求的应答后便立即关闭连接，下次请求再重新建立连接。

数据格式：

1、请求格式（4行）     请求首行（请求方式、协议版本） 请求头（key--value键值对） 空行     请求体（携带的数据此处有可能为空，要视请求方式而定）

请求方式：

get请求（向服务端索要数据，例如打开网址）　　　　post请求（向服务端提交数据，例如登录功能）

2、响应格式（4行）  响应首行（响应状态码）   响应头（key--value键值对）  空行    响应体（浏览器展示给用户看的数据）

响应状态码：

1xx 表示服务端已经收到客户端的数据，正在处理，可以继续提交数据。   2xx:其中200表示请求成功服务端已返回请求的数据。 3xx: 重定向（本来访问的是A，结果转到了B）。4xx :其中403表示不具备请求的条件，没资格访问； 404：表示请求的资源不存在。5xx 其中500表示服务器内部错误

HTML

超文本标记语言（HyperText Markup Language）

浏览器能识别的语言  html、xml、css、javascript

xml也可以书写前端页面，主要运用于odoo框架，常用于编写企业内部的管理软件（ERP）

html中要写注释，<!-- 这里是注释，可以写多行  -->

由于HTML写法复杂，一般都要以注释来分隔代码块,如

<!-- 左侧菜单栏样式开始  -->

<!-- 左侧菜单栏样式结束  -->

HTML文档结构

<html>

<head></head>    head里面的参数，是给浏览器识别并做相应操作的

<body></body>　　 body里面的参数，是展示给用户的花里胡哨的页面数据

</html>

　　

标签分类：双标签  和  自闭合标签

标签分类2：块标签 和行内标签

块标签（h、p、br、hr、div）可以嵌套块标签和行内标签，但是块标签<p>最好不要嵌套块标签，不推荐。

行内标签(u、i、s、b、span)什么都不能嵌套，自身文本多大就占多大。

 

<head> </head>中常见的标签

title 、style 、link、 script 、meta

title 定义网页标题 。　　style支持在标签中直接写css代码。　　link 支持引入css文件。　　script可以在标签中写js代码，也可以通过src属性引入js文件。　　meta，通过name属性定义keywords和description。

 

URL：（Uniform Resource Locator）统一资源定位符

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。

<body></body>中常见的标签

基本标签

h1--h6:标题标签

s:删除线　　u:下划线 　　i:斜体　　b:加粗　　p独占一行　　br换行　　hr分割线

其中br和hr单独使用。

特殊符号

空格&nbsp;　　大于号 &gt;　　小于号&lt;　　&符号&amp;　　人民币符号&yen;　　版权标识符号&copy;　　注册商标&reg;

常用标签

块级标签<div></div> 　　行内标签<span></span> 多用于页面布局

图片标签　　<img>标签  单独使用，不成对

src参数：可以写入一个网站图片地址、本地图片地址、或url连接（向url发送请求，索要数据）

alt: 当图片加载不出来的时候，显示alt后面的信息

title：鼠标悬浮在图片上时，显示的信息

width和height：如果只修改一个值，另一个值会等比例缩放，如果两个值都改，图片可能会失真

链接标签　　<a></a>

href属性：跳转到url所对应的资源

target属性：‘_blank’是新打开一个窗口访问，如果不写，默认的是‘_self’。

此外，<a>标签还有锚点功能，配合id一起使用

标签应具备的属性：

id属性和class属性，id属性在一个页面中要保证唯一。class属性可直接引用别的类的样式。

列表标签

无序列表

 ul中也可以设置 type="None"，去掉无序列表开头的小黑点

有序列表

标题列表

表格标签

固定写法（<th>加粗，常用于<thead>表头；<td>不加粗，常用于<tbody>表体；一个<tr></tr>表示一行）

<table border="1">

    <thead>

    <tr>

        <th>这里是标题1</th>

        <th>这里是标题2</th>

        <th>这里是标题3</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>这里是内容1</td>

        <td>这里是内容2</td>

        <td>这里是内容3</td>

    </tr>

    <tr>

        <td>this 1</td>

        <td>this 2</td>

        <td>this 3</td>

    </tr>

    </tbody>

</table>

如果要合并单元格， 跨行的合并用 ，即列方向的竖向合并，用rowspan，并且需要手工注释被合并的单元格

<table border="1">

    <thead>

    <tr>

        <th>这里是标题1</th>

        <th>这里是标题2</th>

        <th>这里是标题3</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td rowspan="2">这里是内容1</td>

        <td>这里是内容2</td>

        <td>这里是内容3</td>

    </tr>

    <tr>

<!--        <td>this 1</td>-->   被手工注释

        <td >this 2</td>

        <td>this 3</td>

    </tr>

    </tbody>

</table>

　　

如果要合并单元格， 跨列的合并用 ，即行方向的横向合并，用clospan，并且需要手工注释被合并的单元格，此时注释本行的单元格，在同一个<tr>中

<table border="1">

    <thead>

    <tr>

        <th>这里是标题1</th>

        <th>这里是标题2</th>

        <th>这里是标题3</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td rowspan="2">这里是内容1</td>

        <td colspan="2">这里是内容2</td>

<!--        <td>这里是内容3</td>-->

    </tr>

    <tr>

<!--        <td>this 1</td>-->

        <td >this 2</td>

        <td>this 3</td>

    </tr>

    </tbody>

</table>

　　

表单标签（很重要）

form标签

可以获取用户输入（包括获取输入内容、选择内容、上传的文件），并将其打包发送给后端。

action参数：用来控制参数提交的路径。

action参数有三种写法 1、如果action为空，默认提交数据到当前页面所在地址。　　2、写上准确的绝对路径。　　3、只写路径的后缀名/index/

method参数有 get 和 post 等。method = 'get' 时，会将输入的信息展示在浏览器的地址栏，不安全。method= ‘post’ 时，地址栏中不会出现输入信息。

ecctype参数是encode_type的简写，含义是  发送到服务器之前应该如何对表单数据进行编码，当表单中含有文件上传时，必须指定为 enctype='multipart/form-data'

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

label标签常常结合input标签一起使用，<label for=' ' ><input  type='  ' ></label>,  for用来表示input的id值。input外部加上lable后，点击label内的任意内容，都会跳转到input中去，即让input标签聚焦。

通过<input>标签来获取用户输入

input的type属性

text普通文本框

password界面看不到输入内容

date 日期插件

radio多选一，通过关键字checked来设置一个默认值

checkbox多选多，通过关键字checked来设置一个或多个默认值

file 打开文件上传

submit 出发form表单提交的动作, 通过value='XX'设置按钮的名字，注意：<input type='submit' value=’‘提交>  和<button>提交<button>效果是一样的。

reset 重置表单中的所有内容，通过value='XX'设置按钮的名字

button 一个没有任何功能的按钮，只起到占位的作用，通过value='XX'设置按钮的名字

通过select来获取用户选择的内容

<select><option></option></select>  option中的内容就是选项，

可以在select标签中加入multiple改成多选，可以在option标签中加selected进行默认

通过textarea设置大文本框

<textarea cols=' ', rows = ' '>  </textarea>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>login</title>

</head>

<body>

<p>登录界面</p>

<form action="">

    <p>

        <label for="d1">用户名 <input type="text" id="d1" name="username"></label>

    </p>

    <p><label for="d2">密码 <input type="password" name="password" id="d2"> </label></p>

    <p>

        <label>性别: <input type="radio" name="gender" checked>男

            <input type="radio" name="gender">女

            <input type="radio" name="gender">其他

        </label>

    </p>

    <p><label for="d4">爱好

        <input type="checkbox" name="hobby" checked>唱

        <input type="checkbox" name="hobby" checked>跳d

        <input type="checkbox" name="hobby" checked>rap

        <input type="checkbox" name="hobby" checked>篮球

    </label></p>

    <p><label for="d4">出生日期 <input type="date" id="d4" name="birthday"> </label></p>

    <p><label for="d89">选人 <select name="province" id="d89" multiple>

        <option value="" selected>张三</option>

        <option value="" selected>李四</option>

        <option value="">浙江</option>

        <option value="">广东</option>

    </select></label></p>

    <p><label for="06">附件 <input type="file" id="06"> </label></p>

    <p><label for="07">用户名 <input type="text" id="07"> </label></p>

    <p><label>省份 <select name="province" id="d8">

        <option value="">上海</option>

        <option value="" selected>江苏</option>

        <option value="">浙江</option>

        <option value="">广东</option>

    </select> </label></p>

    <p>

        <label for="009">简介<textarea name="简介" id="009" cols="30" rows="10"></textarea></label>

    </p>

    <p>

        <input type="submit" value="register">

        <input type="reset" value="chogngzhi">

        <!--    <input type="text" value="">-->

        <input type="button" value="闲置">

        <button>点我提交</button>

    </p>

</form>

</body>

</html>

　　

CSIC_716_20191225【HTML基础入门】的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. 「译」JUnit 5 系列：基础入门

    原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...

  3. .NET正则表达式基础入门

    这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...

  4. 从零3D基础入门XNA 4.0(2)——模型和BasicEffect

    [题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...

  5. 从零3D基础入门XNA 4.0(1)——3D开发基础

    [题外话] 最近要做一个3D动画演示的程序,由于比较熟悉C#语言,再加上XNA对模型的支持比较好,故选择了XNA平台.不过从网上找到很多XNA的入门文章,发现大都需要一些3D基础,而我之前并没有接触过 ...

  6. Shell编程菜鸟基础入门笔记

    Shell编程基础入门     1.shell格式:例 shell脚本开发习惯 1.指定解释器 #!/bin/bash 2.脚本开头加版权等信息如:#DATE:时间,#author(作者)#mail: ...

  7. [Spring框架]Spring AOP基础入门总结二:Spring基于AspectJ的AOP的开发.

    前言: 在上一篇中: [Spring框架]Spring AOP基础入门总结一. 中 我们已经知道了一个Spring AOP程序是如何开发的, 在这里呢我们将基于AspectJ来进行AOP 的总结和学习 ...

  8. [Spring框架]Spring AOP基础入门总结一.

    前言:前面已经有两篇文章讲了Spring IOC/DI 以及 使用xml和注解两种方法开发的案例, 下面就来梳理一下Spring的另一核心AOP. 一, 什么是AOP 在软件业,AOP为Aspect ...

  9. RobotFramework - 基础入门

    Robot Framework Wiki HomePage Robot Framework User Guide Robot Framework documentation Robot Framewo ...

  10. .NET ORM 的 “SOD蜜”--零基础入门篇

    PDF.NET SOD框架不仅仅是一个ORM,但是它的ORM功能是独具特色的,我在博客中已经多次介绍,但都是原理性的,可能不少初学的朋友还是觉得复杂,其实,SOD的ORM是很简单的.下面我们就采用流行 ...

随机推荐

  1. java命令-jstat/ javap

    jstat命令对应用程序资源和性能进行实时监控 常用参数列举如下: 1. jstat -class pid 显示加载class的数量.所占空间.所耗时间等信息 2.jstat -compiler pi ...

  2. Jmeter 将正则表达式提取的参数传给全局（跨线程组使用变量）

    一.使用正则表达式提取sessionId 1.在测试计划(跨线程组使用变量)--> 线程组(登录)--> 添加HTTP请求(登录接口) (1)创建测试计划: 勾选独立运行每个线程组(例如在 ...

  3. php结合Redis实现100万用户投票项目，并实时查看到投票情况的案例

    场景:某网站需要对其项目做一个投票系统,投票项目上线后一小时之内预计有100万用户进行投票,希望用户投票完就能看到实时的投票情况 这个场景可以使用redis+mysql冷热数据交换来解决. 何为冷热数 ...

  4. 04-树5 Root of AVL Tree（25 分）

    An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child sub ...

  5. Python基础(一)：程序输入输出、判断合法用户、编写判断成绩的程序

    一.程序输入输出 目标: 编写login.py脚本,实现以下目标: 提示用户输入用户名 将用户名保存在变量中 在屏幕上显示欢迎用户的信息 方案: 编写程序时,很多情况下都需要程序与用户交互.在pyth ...

  6. <Jmeter入门不放弃>之<1.认识jmeter>

    大家这里参考学习的时候,我就不在这里配截图了,因为需要你打开工具根据文档自己去找,,才有印象,大家一定要启动JMeter! 一.Jmeter是什么 由 Apache 组织开发,基于JAVA压力测试工具 ...

  7. Centos7安装部署SonarQube7.9.1教程

    0.参考文档 LTS 7.9.1 新特性:https://www.sonarqube.org/sonarqube-7-9-lts/ JDK11 下载地址: 链接:https://pan.baidu.c ...

  8. 4.Grafana展示监控数据

    Grafana是什么?我们知道Node_export监控服务器状态,但是没有具体的展示,简单来说,Grafana的主要作用就是对监控的数据进行图形化展示. docker部署 grafana我们这里采用 ...

  9. gentoo/funtoo 环境配置使用 valgrind

    设置需要的 use 与 FEATURES,重新编译 glibc 即可: # echo "sys-libs/glibc debug" > /etc/portage/packag ...

  10. Node.js、vue.js的使用

    Vue.js的使用 1.下载Node.js 2.打开cmd 3.执行命令 npm i 4.输入命令 npm run serve 5.浏览器打开  http://localhost:8080