当前位置: 首页 > news >正文

java程序员学前端-HTML篇

HTML 与 CSS

HTML 是什么:即 HyperText Markup language 超文本标记语言,咱们熟知的网页就是用它编写的,HTML 的作用是定义网页的内容和结构。

  • HyperText 是指用超链接的方式组织网页,把网页联系起来
  • Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

CSS 是什么:即 Cascading Style Sheets 级联(层叠)样式表,它描述了网页的表现与展示效果

1. HTML 元素

HTML 由一系列元素 elements 组成,例如

<p>Hello, world!</p>
  • 整体称之为元素

  • <p></p> 分别称为起始和结束标签

  • 标签包围起来的 Hello, world 称之为内容

  • p 是预先定义好的 html 标签,作用是将内容作为一个单独的段落

元素还可以有属性,如

<p id="p1">Hello, world!</p>
  • 属性一般是预先定义好的,这里的 id 属性是给元素一个唯一的标识

元素之间可以嵌套,如

<p>HTML 是一门非常<b>强大</b>的语言</p>

错误嵌套写法:

<p>HTML 是一门非常<b>强大的语言</p></b>

不包含内容的元素称之为空元素,如

<img src="1.png">
<img src="1.png"/>
  • img 作用是用来展示图片
  • src 属性用来指明图片路径

2. HTML 页面

前面介绍的只是单独的 HTML 元素,它们可以充当一份完整的 HTML 页面的组成部分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试页面</title></head><body><p id="p1">Hello, world!</p><img src="1.png"></body>
</html>
  • html 元素囊括了页面中所有其它元素,整个页面只需一个,称为根元素
  • head 元素包含的是那些不用于展现内容的元素,如 titlelinkmeta
  • body 元素包含了对用户展现内容的元素,例如后面会学到的用于展示文本、图片、视频、音频的各种元素

3. 常见元素

1) 文本

Heading

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

Paragraph

<p>段落</p>

List

无序列表 unordered list

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>

有序列表

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>

多级列表

<ul><li>北京市<ul><li>海淀区</li><li>朝阳区</li><li>昌平区</li></ul></li><li>河北省<ul><li>石家庄</li><li>保定</li></ul></li>
</ul>

Anchor

锚,超链接

<a href="网页地址">超链接文本</a>

2) 多媒体

Image

<img src="文件路径">

src 格式有 3 种

  • 文件地址

  • data URL,格式如下

    data:媒体类型;base64,数据
    
  • object URL,需要配合 javascript 使用

Video

<video src="文件路径"></video>

Audio

<audio src="文件路径"></audio>

3) 表单

作用与语法

表单的作用:收集用户填入的数据,并将这些数据提交给服务器

表单的语法

<form action="服务器地址" method="请求方式" enctype="数据格式"><!-- 表单项 --><input type="submit" value="提交按钮">
</form>
  • method 请求方式有
    • get (默认)提交时,数据跟在 URL 地址之后
    • post 提交时,数据在请求体内
  • enctype 在 post 请求时,指定请求体的数据格式
    • application/x-www-form-urlencoded(默认)
    • multipart/form-data
  • 其中表单项提供多种收集数据的方式
    • 有 name 属性的表单项数据,才会被发送给服务器

常见的表单项

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

单选

<input type="radio" name="sex" value="" checked>
<input type="radio" name="sex" value="">

多选

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

文件上传

<input type="file" name="avatar">

4. HTTP 请求

1) 请求组成

请求由三部分组成

  1. 请求行
  2. 请求头
  3. 请求体

可以用 telnet 程序测试

2) 请求方式与数据格式

get 请求示例

GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost
  • %E5%BC%A0 是【张】经过 URL 编码后的结果

post 请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21name=%E5%BC%A0&age=18

application/x-www-form-urlencoed 格式细节:

  • 参数分成名字和值,中间用 = 分隔
  • 多个参数使用 & 进行分隔
  • 【张】等特殊字符需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送

json 请求示例

POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25{"name":"zhang","age":18}

json 对象格式

{"属性名":属性值}

其中属性值可以是

  • 字符串 “”
  • 数字
  • true, false
  • null
  • 对象
  • 数组

json 数组格式

[元素1, 元素2, ...]

multipart 请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125--123
Content-Disposition: form-data; name="name"lisi
--123
Content-Disposition: form-data; name="age"30
--123--
  • boundary=123 用来定义分隔符
  • 起始分隔符是 --分隔符
  • 结束分隔符是 --分隔符--

数据格式小结

客户端发送

  • 编码
    • application/x-www-form-urlencoded :url 编码
    • application/json:utf-8 编码
    • multipart/form-data:每部分编码可以不同
  • 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
  • 文件上传需要用 multipart/form-data 格式
  • js 代码可以支持任意格式发送数据

服务端接收

  • 对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据,Spring 接收方式是统一的,只需要用 java bean 的属性名对应请求参数名即可
  • 对于 applicaiton/json 格式的数据,Spring 接收需要使用 @RequestBody 注解 + java bean 的方式

3) session 原理

Http 无状态,有会话

  • 无状态是指,请求之间相互独立,第一次请求的数据,第二次请求不能重用
  • 有会话是指,客户端和服务端都有相应的技术,可以暂存数据,让数据在请求间共享

服务端使用了 session 技术来暂存数据

GET /s1?name=zhang HTTP/1.1
Host: localhost

GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D

session 技术实现身份验证

ClientLoginControllerLoginInterceptorSession登录请求检查用户名,密码,验证通过存入用户名登录成功其它请求获取用户名用户名存在,放行ClientLoginControllerLoginInterceptorSession

4) jwt 原理

jwt 技术实现身份验证

ClientLoginControllerLoginInterceptor登录请求检查用户名,密码,验证通过登录成功,返回token其它请求,携带token校验token,校验无误,放行ClientLoginControllerLoginInterceptor

生成 token

GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost

校验 token

GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

5. CSS

即 Cascading Style Sheets,它描述了网页的表现与展示效果

1) 选择器

  • type 选择器 - 根据标签名进行匹配(元素选择器)

  • class 选择器 - 根据元素的 class 属性进行匹配

  • id 选择器 - 根据元素的 id 属性进行匹配

2) 属性和值

  • background-color : red;
  • display

3) 布局

与布局相关的 html 元素

  • div
  • template

相关文章:

java程序员学前端-HTML篇

HTML 与 CSS HTML 是什么&#xff1a;即 HyperText Markup language 超文本标记语言&#xff0c;咱们熟知的网页就是用它编写的&#xff0c;HTML 的作用是定义网页的内容和结构。 HyperText 是指用超链接的方式组织网页&#xff0c;把网页联系起来Markup 是指用 <标签>…...

【云原生|Docker】03-docker的基础操作

目录 前言 查询相关 容器相关 1. 容器启动 2. 容器关闭 3. 重启容器 4. 暂停容器 5. 删除容器 6. docker run参数汇总 镜像相关 1. 镜像推送至仓库 2. docker image load使用 3. docker image import使用 4. dokcer image参数汇总 前言 容器的命…...

vue2+高德地图web端开发使用

创建vue2项目我们创建一个vue2项目&#xff0c;创建vue2项目就不用再多说了吧&#xff0c;使用“vue create 项目名 ”创建即可注册高德地图高德地图官网地址&#xff1a;https://lbs.amap.com/如果是第一次使用&#xff0c;点击注册然后进入我们的控制台注册完之后进入控制台&…...

01背包问题c++

问题 问题介绍 有 N 种物品和一个容量是 V 的背包&#xff0c;每种物品都有无限件可用。 第 i 种物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第…...

ZYNQ硬件调试-------day2

ZYNQ硬件调试-------day2 1.ILA&#xff08;Integrated Logic Analyzer &#xff09; 监控逻辑内部信号和端口信号;可以理解为输出。可单独使用 2.VIO&#xff08;Virtual Input/Output &#xff09; 实时监控和驱动逻辑内部信号和端口信号&#xff0c;可以理解为触发输入。不可…...

JavaScript中Promise的简单使用及其原理

Promise是ES6最重要的特性之一&#xff0c;今天来系统且细致的研究一下Promise的用法以及原理。 按照我往常的理解&#xff0c;Promise是一个构造函数&#xff0c;有all、resolve、reject、then、catch等几个方法&#xff0c;一般情况下&#xff0c;在涉及到异步操作时才会用到…...

SpringBoot RabbitMQ 延时队列取消订单【SpringBoot系列14】

SpringCloud 大型系列课程正在制作中&#xff0c;欢迎大家关注与提意见。 程序员每天的CV 与 板砖&#xff0c;也要知其所以然&#xff0c;本系列课程可以帮助初学者学习 SpringBooot 项目开发 与 SpringCloud 微服务系列项目开发 1 项目准备 SpringBoot 雪花算法生成商品订单…...

【论文阅读 WWW‘23】Zero-shot Clarifying Question Generation for Conversational Search

文章目录前言MotivationContributionsMethodFacet-constrained Question GenerationMultiform Question Prompting and RankingExperimentsDatasetResultAuto-metric evaluationHuman evaluationKnowledge前言 最近对一些之前的文章进行了重读&#xff0c;因此整理了之前的笔记…...

ouc 网络安全实验 格式化字符串漏洞

文章目录要求lab1lab2lab3lab4结语因为当时自己做实验的时候出现了很多疑问不会解决&#xff0c;在网上看到了一位大佬 王森ouc 的专栏文章解决了很多问题&#xff0c;也学到了很多知识和解决问题的方法&#xff0c;现在把我的实验解决方法也发上来&#xff0c;希望有不会的同…...

PMSM矢量控制笔记(1.1)——电机的机械结构与运行原理

前言&#xff1a;重新整理以前的知识和文章发现&#xff0c;仍然有许多地方没有学得明白&#xff0c;懵懵懂懂含含糊糊的地方多如牛毛&#xff0c;尤其是到了真正实际写东西或者做项目时&#xff0c;如果不是系统的学习了知识&#xff0c;很容易遇到问题就卡壳&#xff0c;也想…...

2022年全国职业院校技能大赛(中职组)网络安全竞赛试题——中间人攻击渗透测试解析(详细)

B-4任务四:中间人攻击渗透测试 *任务说明:仅能获取Server4的IP地址 *任务说明:仅能获取Server11的IP地址 1.通过上题渗透后得到控制权限的服务器场景Server4进行查看本地的arp缓存表的操作,并将该操作所使用的命令作为Flag值提交; 2.通过上题渗透后得到控制权限的服务…...

MySQL必知必会 | 安全、维护、性能

全球化和本地化 关于MySQL处理不同字符集和语言 字符集和校对顺序 数据库被用来存储和检索数据&#xff0c;不同的语言和字符集需要以不同的方式存储和检索&#xff0c;因此&#xff0c;MySQL需要适应不同的字符集&#xff0c;适应不同的排序方式 一些术语&#xff1a; 字符…...

MaaS Model as a Service 模型即服务

大模型是人工智能的发展趋势和未来。大模型是“大算力强算法” 结合的产物。目前&#xff0c;大模型生态已初具规模。大模型能够实现 AI 从“手工作坊”到“工厂模式”的转变&#xff0c;大模型通常是在大规模无标注 数据上进行训练&#xff0c;学习出一种特征和规则&#xf…...

【编程基础】027.C语言中函数在解题中的应用(三)

文章目录C语言中函数的应用1、自定义函数实现二维数组的转置2、自定义函数之整数处理3、自定义函数之数字后移4、自定义函数之字符串拷贝C语言中函数的应用 1、自定义函数实现二维数组的转置 题目描述 写一个函数&#xff0c;使给定的一个二维数组&#xff08;&#xff13;&a…...

echart图表之highcharts

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、HighCharts是什么&#xff1f;二、使用步骤1.引入库2.前端代码3.展现结果4.后台自动截图总结前言 提示&#xff1a;这里可以添加本文要记录的大概内容&…...

关于.Net和Java的看法——我见过最牛的一个小实习生经历

1、背景 笔者&#xff08;小方同学在学习&#xff09;是一个专科院校的一名普通学生&#xff0c;目前就职于某三线城市的WEB方面.Net开发实习生&#xff0c;在找实习期间和就业期间的一些看法&#xff0c;发表此文&#xff0c;纯个人想法&#xff0c;欢迎讨论&#xff0c;指正…...

基于springboot+vue的“智慧食堂”程序设计实现【毕业论文,源码】

系统登录界面系统架构开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven浏览器&#xf…...

学计算机选择什么编程语言好一些?

工资水平的话&#xff0c;目前人工智能、大数据和云计算等领域的工资相对较高&#xff0c;但是要求也高&#xff0c;学历&#xff0c;学习能力什么的。然后是后端开发&#xff0c;Python、Java、C等编程语言的工资普遍较高。 不用开发语言的优势 ​Java&#xff1a;Java是一种…...

持续集成 在 Linux 上搭建 Jenkins,自动构建接口测试

本篇把从 0 开始搭建 Jenkins 的过程分享给大家&#xff0c;希望对小伙伴们有所帮助。 文章目录 在 Linux 上安装 Jenkins在 Linux 上安装 Git在 Linux 上安装 Python在 Linux 上安装 Allure配置 Jenkinsjenkins 赋能 - 使用邮箱发送测试报告jenkins 赋能 - 优化测试报告内容…...

MySQL学习笔记(总结)

1. 数据库服务器操作命令 启动数据库&#xff1a;net start mysql80 &#xff08;注释&#xff1a;windows命令&#xff09; 停止数据库&#xff1a;net stop mysql80 &#xff08;注释&#xff1a;windows命令&#xff09; 重启数据库&#xff1a;systemctl restart mysql;…...

Android开发 Layout布局 ScrollView

1.LinearLayout 属性 orientation&#xff1a;内部组件排列方式&#xff0c;可选vertical、horizontal&#xff0c;默认horizontal layout_weight: 与平级组件长宽比例&#xff0c;需要将layout_width、layout_height其中一个设置为0dp&#xff0c;表明长或宽与平级组件的长…...

手撕数据结构与算法——树(三指针描述一棵树)

&#x1f3c6;作者主页&#xff1a;king&南星 &#x1f384;专栏链接&#xff1a;数据结构 &#x1f3c5;文章目录&#x1f331;树一、&#x1f332;概念与定义二、&#x1f333;定义与预备三、&#x1f334;创建结点函数四、&#x1f340;查找五、&#x1f341;插入六、&a…...

字节跳动Java后端开发实习面经

最近在和同学一起找实习&#xff0c;投了b站、字节和miHoYo的后端开发。b站二月底就投了&#xff0c;但现在也还没回复&#xff1b;miHoYo也还没回复&#xff0c;估计是只面向24届了&#xff1b;感谢字节&#xff0c;给了我面试的机会。字节真的处理好快&#xff0c;不到一周官…...

STM32实战项目-触摸按键

前言&#xff1a; 通过触摸按键控制LED灯以及继电器&#xff0c;具体实现功能如下&#xff1a; 1、触摸按键1单击与长按&#xff0c;控制LED1&#xff1b; 2、触摸按键2单击与长按&#xff0c;控制LED2; 3、触摸按键3单击与长按&#xff0c;控制LED3; 4、触摸按键4单击与长…...

安全行业-术语(万字)

肉鸡 所谓“肉鸡”说一种很形象的比喻&#xff0c;比喻那些可以任意被我们控制的电脑&#xff0c;对方可以是Windows系统&#xff0c;也可以说UNIX/linux系统&#xff0c;可以说普通的个人电脑&#xff0c;也可以是大型的服务器&#xff0c;我们可以像操作自己的电脑那样来操控…...

P1113 杂务(拓扑排序 or 记忆回溯)

题目描述 John的农场在给奶牛挤奶前有很多杂务要完成&#xff0c;每一项杂务都需要一定的时间来完成它。比如&#xff1a;他们要将奶牛集合起来&#xff0c;将他们赶进牛棚&#xff0c;为奶牛清洗乳房以及一些其它工作。尽早将所有杂务完成是必要的&#xff0c;因为这样才有更…...

Web3中文|政策影响下的新加坡Web3步伐喜忧参半

如果说“亚洲四小龙”是新加坡曾经的荣耀&#xff0c;那么当时代进入21世纪的第二个十年&#xff0c;用新加坡经济协会&#xff08;SEE&#xff09;副主席、新加坡新跃社科大学教授李国权的话来说&#xff0c;新加坡现在的“荣耀”是全球金融的主要“节点”或区块链行业发展的关…...

Java数据库高阶面试题,好程序员学员分享百度Java面试流程

小源下面分享一位好程序员的学员去百度Java面试流程&#xff01;百度技术一面(20分钟)1、自我介绍很流畅捡重点介绍2、数据结构算法好不好挺好的(其实心还是有点虚&#xff0c;不过最近刷了很多好程序员出的题感觉没问题&#xff01;)3、找到单链表的三等分点&#xff0c;如果单…...

栈和队列习题精选(持续更新中)

第一题&#xff08;括号匹配&#xff09;给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。有效字符串需满足&#xff1a;1.左括号必须用相同类型的右括号闭合。2.左括号必须以正确的顺序闭合。…...

大数据开发 - Java入门6

目录标题do-while循环练习1&#xff1a;从键盘输入单词&#xff0c;讲输入的单词输出到控制台&#xff0c;输入是exit时退出循环练习2&#xff1a;键盘输入密码和确认密码&#xff0c;两次密码一致就退出循环打印注册成功&#xff0c;两次密码不一致就循环输入两次密码死循环fo…...

佛山做网站哪家公司好/网站模板价格

本质是依赖添加没有成功 1. 解决方案一&#xff1a;修改Maven镜像 在Maven的conf目录下的setting.xml配置阿里云镜像:<mirror> <id>alimaven</id> <name>aliyun maven</name> <url>https://maven.aliyun.com/nexus/content/groups/public/…...

有哪些网站或者公司招募做视频的/老王搜索引擎入口

转自https://longfeizheng.github.io/2018/03/10/%E7%94%A8Java%E5%88%9B%E5%BB%BA%E4%BD%A0%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8C%BA%E5%9D%97%E9%93%BE-part1/#前言 区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制…...

用word做网站/香港百度广告

1.struct成员默认访问方式是public,而 class默认访问方式是private&#xff01; 2.exit函数终止程序执行会调用析构函数 ,abort函数终止程序不会调用析构函数&#xff01; 3.静态局部变量直到程序终止时才退出&#xff01; 4.通过public 函数返回 private成员的引用有可能会破坏…...

新余建设银行招聘网站/灰色关键词快速排名

首先你需要安装redigo go get github.com/garyburd/redigo/redis 使用go的&#xff08;interface&#xff09;接口实现&#xff0c; 话不多说&#xff0c;直接上代码。 package mainimport ("github.com/garyburd/redigo/redis" ) var client redis.Conn var err…...

有cms布局的wordpress主题/上海关键词排名优化公司

实时视频rtmp 背景: 由于经常接触实时视频, 对实时视频略有了解. 实时视频是将视频流实时上传到服务器端进行解析, 由RTMP服务器处理. RTMP 服务器 自己动手搭建一个rtmp, 本文在 Linux环境中搭建 去git上clone 一个下来https://github.com/arut/nginx-rtmp-module 如何安…...

wordpress 引用菜单/自己做网络推广怎么做

1&#xff0c;锁定数组的长度(只读模式)[ Array.join() ] var a [1,2,3] //定义一个数组 Object.defineProperty(a,"length",{writable:false}) //将a数组的长度属性设为只读 a.length 0 //将a的长度改为0 console.log(a.length); //打印a数组的长度&#xff…...