• 基础训练营
  • 技术训练营
  • 项目训练营
  • 企业训练营
  • 招聘

Web与HTTP1_聂浩

聂浩 2021-09-23 22:39:12

概述

1、今天主要在做任务3-1和任务3-2,任务3-3稍微做了一点点,时间不太够了,明天继续。

2、把on java第六章的内容看完了,

3、学了一下C1认证的内容。

工作记录

1、使用富文本编辑器

自己在编辑器里随便摸了一下,表格、标题什么的都做了一次。

给自己的小任务是做了一个按钮。

用button的on click属性,点击后出现文字。代码如下:

<script>
	function blueeyes(){ 
  		var x = "哦嘞诺普莱多,所洗爹哦嘞诺塔玛希,一碟哟,布鲁艾斯怀托多拉贡!";
		document.getElementById("demo").innerHTML= x;}
  
</script>
<button onclick="blueeyes()">点击召唤你的老婆</button>
<p id="demo"></p>

效果如图:

点击后成功召唤青眼白龙:

 

2、抓包任务

1、使用Charles抓包。

在这个界面添加一个额外字段:

2、右键-compose

3、添加一个字段:

4、输入字段内容 

5、点击执行

6、获取服务器返回数据,任务完成!

HTML

 

学习内容 

HTML标签

特点:

  1. 尖括号+关键词,如<div>。

  2. 通常成对出现,如<div>和</div>,前一个是开始标签,后一个是结束标签

  3. 偶尔也有单独呈现的标签,如<img src="你好"/>

  4. 成对标签,内容夹在两标签中间。单独标签,内容在标签属性内。

  5. 网页的内容需在<html>标签中,标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中,而网页需展示的内容需嵌套在<body>标签中。

FORM标签

form标签用于为用户输入创建 HTML 表单。

表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。

表单用于向服务器传输数据。

常用属性

属性描述
acceptMIME_typeHTML 5 中不支持。
accept-charsetcharset_list规定服务器可处理的表单数据字符集。
actionURL规定当提交表单时向何处发送表单数据。
autocompleteon、off规定是否启用表单的自动完成功能。
enctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain规定在发送表单数据之前如何对其进行编码。
methodget、post规定用于发送 form-data 的 HTTP 方法。
nameform_name规定表单的名称。
novalidatenovalidate如果使用该属性,则提交表单时不进行验证。
relexternal、help、license、next、nofollow、noopener、noreferrer、opener、prev、search规定链接资源和当前文档之间的关系。
target_blank、_self、_parent、_topframename规定在何处打开 action URL。

 

常用标签

p

作用:标记一个段落,会自动在在其前后创建一些空白。

 

a

作用:定义锚超链接,用于从一个页面链接到另一个页面。

该元素最重要的属性是 href 属性,它指定链接的目标。

例如:

 <a herf="baidu.com">百度</a>

效果如下

百度

 

div

作用:可定义文档中的分区或节(division/section)。可以把文档分割为独立的、不同的部分。

注意,div标签的内容会自动地开启一个新行。

 

img

作用:插入图片

特点:有两个必需的属性:

src属性:值为URL,作用是规定显示图像的URL。

alt属性:值为text,作用是规定图像的替代文本。

 

table

作用:定义HTML表格。

简单的表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

 

button

作用:定义一个按钮。

特点在 button 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button>与</button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

<button type="button">点我!</button>

效果如下:

<button type="button">点我!</button>(反正就是一个按钮,写了“点我!”)

常用属性:

属性作用
namebutton_name规定按钮的名称。
typebutton,reset,submit规定按钮的类型。
valuetext规定按钮的初始值。可由脚本进行修改。

 

title

作用:定义文档的标题。

特点:一般存在于head标签之中。

 

head

作用:定义文档的头部,它是所有头部元素的容器。

特点:<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:

base,link,meta,script,style,title。

其中,<title> 定义文档的标题,它是 head 部分中唯一必需的元素。应该把 head标签放在文档的开始处,紧跟在html后面,并处于body标签或frameset标签之前。

 

html

作用:告诉浏览器,自己是一个HTML文档。

 

body

作用:元素定义文档的主体。

特点:body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

 

input

作用:搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

 

script

用于给页面添加脚本。

 

style

用于给文档引入 CSS 样式信息,将样式表包含在 style 开始与结束标签之间.

 

CSS样式表

何谓CSS?

CSS(层叠样式表)定义了 HTML 元素在页面中的样式、布局以及整个页面的布局。CSS 遵循 W3C 规范,实现了跨浏览器的标准化。

引入方式

行内样式:直接用HTML元素的style属性印入。

内嵌样式:使用<style>标签引入。

外部样式:

​ 链接样式(最常用):

​ 在head标签中使用<link />标签链接外部CSS文件。

​ link 标签的 href 属性设置为目标链接的 CSS 文件路径,rel 属性设置为 "stylesheet"表示链接样式表,type 属性设置为"text/css"

​ 例:

  
  <link rel="stylesheet" href="style.css" type="text/css" />

​ 导入样式:

​ 使用@import()引入CSS文件

CSS背景属性

属性名格式:background-*

属性作用
color颜色值或transparent颜色
imageurl或none背景图像
size宽高、百分比宽高大小
repeatrepeat -x -y重复方式
postiontop left/ top center图片位置

 

CSS文本属性

color:用于设置颜色,可设置的值有:颜色名、16进制值、RGB值。

font-size:字体大小。绝对大小(单位为px),相对大小(单位为rem、em等)。

font-weight:文本粗细。normal,bold,bolder,lighter,数字(400相当于normal,700相当于bold)

font-family:文本字体或字体列表。(如果浏览器不支持第一个,则用第二个,以此类推。

text-align:设置文本的对齐方式。

line-height:设置行间距。值可以为:固定值(固定行距)、数字or百分比(当前字体大小的倍数)。

text-indent:首行缩进值。

letter-spacing:字间距。

word-spacing:单词之间的间距。

text-decoration-*:文本的装饰线。

​ line:装饰线类型。

​ 属性值:

​ none:无线条

​ overline:上划线

​ underline:下划线

​ line-through:删除线

​ color:颜色。

​ 属性值:颜色名、rgb、16进制颜色等。

​ sytle:装饰线样式。

​ 属性值:

​ solid:实线

​ double:双实线

​ dotted:点划线

​ dashed:虚线

​ wavy:波浪线

text-transform:设置文本大小写字母。

writing-mode:文本的水平或垂直

​ horizontal-tb:水平。

​ vertical-lr:文本流向垂直,文字方向水平,上至下,左至右。

​ sideways-lr:垂直,左至右。

​ sideways-rl:垂直,右至左。

white-space:设置文本的空格处理方式。

JavaScript

打印数据

JS不提供任何内建的打印或显示函数。

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据:

  • 使用 window.alert() 写入警告框

  • 使用 document.write() 写入 HTML 输出

  • 使用 innerHTML 写入 HTML 元素

  • 使用 console.log() 写入浏览器控制台

script 标签

在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。

 

语句构成

JavaScript 语句由以下构成:

值、运算符、表达式、关键词和注释。

 

变量声明

var+变量名

变量初始化:声明变量但不赋值,其值为undefined。

赋值后再次声明该变量,其值不变,仍是赋值给的值。

 

Undefined

变量初始化:声明变量但不赋值,其值为undefined。

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

 

null

JS中,null 是 "nothing"。它被看做不存在的事物,但null 的数据类型是对象。

可以通过设置值为 null 清空对象:

实例:

    var person = null;           // 值是 null,但是类型仍然是对象

 

类型运算符

typeof:返回变量的类型。

instanceof:返回true,如果对象是对象类型的实例。

typeof

原始数据

一种没有额外属性和方法的单一简单数据值。

typeof 运算符可返回以下原始类型之一:

  • string

  • number

  • boolean

  • undefined

实例

  typeof "Bill"              // 返回 "string"
  typeof 3.14                // 返回 "number"
  typeof true                // 返回 "boolean"
  typeof false               // 返回 "boolean"
  typeof x                   // 返回 "undefined" (假如 x 没有值)

复杂数据

typeof 运算符可返回以下两种类型之一:

  • function

  • object

typeof 运算符把对象、数组(在JS中,数组即对象)或 null 返回 object。

typeof 运算符不会把函数返回 object。

 

实例

  typeof {name:'Bill', age:62} // 返回 "object"
  typeof [1,2,3,4]             // 返回 "object" (并非 "array",参见下面的注释)
  typeof null                  // 返回 "object"
  typeof function myFunc(){}   // 返回 "function"

 

对象

用花括号

属性是name:value对,类似字典。

如:

 var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

注释、标识符、命名、四则运算、赋值运算符(+=)、字符串+、逻辑运算符、布尔值、数组、函数、局部变量、等规则与java基本相同。

 

HTTP协议

HTTP——超文本传输协议(Hyper Text Transfer Protocol,HTTP)是一个简单的请求-响应协议,它通常运行在 TCP 之上。

关注 HTTP 请求头和响应头(Request Headers 和 Response Headers)中的内容以及其中的作用

cookie与session

写出 Cookie 和 Session 的区别(有多少就写多少)

区别CookieSession
1 数据保存位置客户端服务器端
2 安全性一般较高
3 占用服务器性能良好访问增多时对服务器性能影响较大
4 存储对象只能String类型能存储任意的java对象
5 储存限制单个不超过4K,很多浏览器限制一个站点最多保存20个cookie大小限制跟服务器有关,一般限制较小

 

《On Java》

enum

可以理解为一个枚举类

 

明日计划

1、任务3-3,老师说估计要2天才能搞定,我不信!争取一天搞定!

2、有余力的话继续看onjava

...全文
75 1 收藏 回复
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复

还没有回复,快来抢沙发~

相关推荐
发帖
长沙软件人才实训基地
创建于2021-09-15

26

社区成员

长沙软件人才实训基地致力于培养高素质软件技术人才! 全程职场化任务式训练,达到工程化、交付级标准。
帖子事件
创建了帖子
2021-09-23 22:39
社区公告

培养高素质软件技术人才!