JavaWeb入门——Web前端概述及HTML,CSS语言基本使用

前言:

java基础已经学完,开始学习javaWeb相关的内容,整理下笔记,打好基础,daydayup!!!

Web

Web:全球广域网,也称万维网(www World Wide Web),能够通过浏览器访问的网站。

Web网站的工作流程

用户通过浏览器请求前端服务器后,前端服务器将请求转向后端服务器,后端服务器随即向数据库服务器进行请求,最后再一次把数据响应给用户。 

Web开发

Web开发就是基于浏览器的应用程序开发,根据功能不同,将分为前端Web开发,和后端Web开发。前端web开发需要掌握的知识有HTML,CSS,JavaScript,Vue,Element,Nginx等。后端Web开发需要掌握的知识有Maven,SpringBoot,MySQL等

Web前端  

浏览器浏览的网页的本质是什么

本质为编写出的代码

浏览器浏览的网页主要有哪些成分

文字,图片,音频,超链接

 前端代码如何成为用户浏览到的网页的 

通过浏览器内在共功能转化和解析;但不同厂商所生产的浏览器内核并不相同,为了使代码在不同的浏览器中打开都是同样的效果,则需要制定Web标准 

Web标准

Web标准也称为网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定。提出了一个网页由三个部分组成:网页的结构,网页的表现,网页的行为。这三个组成由三个不同的语言来负责,HTML负责页面元素及内容(网页的结构);CSS负责元素的外观,位置等页面样式,如:颜色,大小等(网页的表现);JavaScript负责交互效果(网页的行为)

 HTML

HTML:HyperTextMarkupLanguage的缩写,为超文本标记语言

超文本:超越了文本的限制,比普通文本更强大,除了文字信息,还可以定义图片,音频,视频等内容。

标记语言:由标签构成的语言;HTML标签是预定义的,在浏览器中运行,浏览器自动解析

 例:简单的网页编写

在记事本中编写如下代码,并设置html后缀,并在浏览器中打开,就可以得到一个网页

<html>是一个整体标签,其中包含<head>(头部),<body>(身体)两个标签 。头部标签中可以设置<title>标签来进行抬头的声明。<body>标签中可以设置网页的内容。<h1>到<h6>为标题标签,大小依次递减。可可以声明<img>标签为网页添加图片

示例如下:

CSS

CSS:Cascading Style Sheet的缩写,层叠样式表,用于控制页面的表现

CSS的引入方式

 css引入方式有三种:

        1,行内样式;如:<h1 styles"...">..</h1>

        2,内嵌样式:如:<style>..</style>

        3,外联样式:如:xxx.css <link href="..">

 1,行内样式:通过在标签内指定styles,示例如下:

2,内嵌样式:在<style> 标签内指定样式,示例如下:

3,外联样式: 在外部创建一个css文件,并在网页编辑器中使用<link>标签进行引用,示例如下:

CSS选择器 

用来选取需要设置的元素,常用的有三种:1,元素选择器;2,id选择器;3,类选择器

1,元素选择器:

通过元素名称指定样式。如下所示:(通过元素名称进行指定)

2,id选择器:通过#指定名称,并在标签中指定该名称。如下所示

3,类选择器:通过.指定名称,并在标签中指定该名称。如下所示

 注:三个选择器的优先级为:id选择器>类选择器>元素选择器

 基础概念差不多就是这些,其他就是熟悉HTML中各个标签的使用例如<a>超链接;<video>视频;<dudio>音频文件等。整理结束,撒花!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/797572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hadoop MapReduce

MapReduce分为两个阶段&#xff0c;分为Map阶段和Reduce阶段&#xff0c;可以自定义map函数和reduce函数&#xff0c; map函数的输入是行在文件的字节偏移量&#xff0c;value是文件的一行数据。 reduce函数的输入是key和对应key的value组&#xff0c;然后reduce函数可以对这…

加州大学欧文分校英语基础语法专项课程01:Word Forms and Simple Present Tense 学习笔记

Word Forms and Simple Present Tense Course Certificate 本文是学习Coursera上 Word Forms and Simple Present Tense 这门课程的学习笔记。 文章目录 Word Forms and Simple Present TenseWeek 01: Introduction & BE VerbLearning Objectives Word FormsWord Forms (P…

C++ 【桥接模式】

简单介绍 桥接模式属于 结构型模式 | 可将一个大类或一系列紧密相关的类拆分 为抽象和实现两个独立的层次结构&#xff0c; 从而能在开发时分别使用。 聚合关系&#xff1a;两个类处于不同的层次&#xff0c;强调了一个整体/局部的关系,当汽车对象销毁时&#xff0c;轮胎对象…

基于单片机光伏太阳能跟踪系统设计

**单片机设计介绍&#xff0c;基于单片机光伏太阳能跟踪系统设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机光伏太阳能跟踪系统的设计&#xff0c;旨在通过单片机技术实现对光伏太阳能设备的自动跟踪&#xff0c;以提高太阳…

寄快递便宜啦!德邦、韵达、京东、圆通等八大品牌快递五折起!

低价服务&#xff0c;为你的快递需求保驾护航。 一、与全网主流快递合作&#xff0c;信赖与质量的共同见证 是一家整合快递、物流、及国际快递资源的综合快递服务平台&#xff0c;通过人工智能比价系统&#xff0c;为个人及企业客户提供市面上优惠的快递价格&#xff0c;目前…

Android视角看鸿蒙第十一课-鸿蒙的布局之层叠布局Stack

Android视角看鸿蒙第十一课-鸿蒙的布局之层叠布局 导读 在Android中我个人认为&#xff0c;最离不开的就是LinearLayout和FrameLayout了&#xff0c;RelativeLayout我都基本不用的。 所以我把层叠布局排在了第二位。 官方描述 如何定义层叠布局 Stack组件为容器组件&#x…

【正点原子探索者STM32F4】TFTLCD实验学习记录

【正点原子探索者STM32】LCD实验学习记录 硬件硬件连接软件设计变量类型定义LCD参数结构体LCD地址结构体 函数定义读写命令和数据简介6个基本函数坐标设置函数画点函数读点函数字符显示函数LCD初始化 小结参考 硬件 STM32F407、4.3寸LCD屏 硬件连接 LCD_BL(背光控制)对应 PB1…

OCP Java17 SE Developers 复习题11

答案 A, C, D, E. A method that declares an exception isnt required to throw one, making option A correct. Unchecked exceptions can be thrown in any method, making options C and E correct. Option D matches the exception type declared, so its also correct…

漂亮易用且功能强大的最酷的开源在线海报图片设计器:Poster-Design

Poster-Design&#xff1a;最酷的开源在线海报图片设计器&#xff0c;让您轻松创作&#xff0c;尽享设计之美与强大功能的完美结合&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 Poster-Design 是一款高度评价的在线设计工具&#xff0c;专为用户提供便捷而高效的海…

C++:类与对象(一)

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;类与对象&#xff08;一&#xff09;》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 面向对象和面向过程的区别1.类的引入2.…

C++从入门到精通——类对象模型

类对象模型 前言一、如何计算类对象的大小问题 二、类对象的存储方式猜测对象中包含类的各个成员代码只保存一份&#xff0c;在对象中保存存放代码的地址只保存成员变量&#xff0c;成员函数存放在公共的代码段问题总结 三、结构体内存对齐规则四、例题结构体怎么对齐&#xff…

知识图谱基本概念:数据、信息和知识

目录 前言1 数据&#xff1a;信息的基础1.1 数据的定义1.2 数据的重要性1.3 数据的例子1.4 数据的处理1.5 数据分析 2 信息&#xff1a;知识的基础2.1 信息的本质2.2 信息的转化过程2.3 信息的特点2.4 信息的示例 3 知识&#xff1a;智慧的体现3.1 知识的本质3.2 知识的形成过程…

【数据结构】红黑树详解

目录 前言&#xff1a; 红黑树的概念&#xff1a; 红黑树的性质: 红黑树节点的定义&#xff1a; 红黑树的插入&#xff1a; 情况1&#xff1a;cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红 情况2&#xff1a;cur为红&#xff0c;p为红&#xff0c…

C++从入门到精通——类的作用域及类的实例化

类的作用域及类的实例化 前言一、类的作用域二、类的实例化引例类是对对象进行描述的示例 一个类可以实例化出多个对象示例 示例 前言 类的作用域是指类中定义的变量和方法的可见性和可访问性范围。在类的内部&#xff0c;所有成员&#xff08;包括属性和方法&#xff09;都具…

GIT版本管理使用示例

一、创建好远程代码仓库后&#xff0c;复制远程仓库的地址 二、新建一个文件夹&#xff0c;在文件夹里打开Git Bash Here 三、输入git clone 远程仓库地址&#xff0c;仓库就初始化完成了 四、新建一个文本文件&#xff0c;假设这是我们开发的代码 五、打开文本&#xff0c;假设…

小秦网站部署上线

叮&#xff5e;您有一份消息&#xff0c;请注意查收&#xff01; 小秦个人网站终于上线了&#xff1a; 网站主要有&#xff1a;免费听歌、看小姐姐、AI女友、留言板等功能&#xff0c;建议收藏、收藏、再收藏、重要事情说三遍&#xff01;&#xff01;&#xff01; 网站&#x…

java实现运行脚本文件

在最近的项目中&#xff0c;有一个需求是前端传给我一个脚本文件&#xff0c;然后我需要运行脚本文件后将结果进行返回&#xff0c;那接下来就让我们看看是怎么做的吧&#xff01; public R runScripts(Integer id) {ScriptsInfo scriptsInfo this.baseMapper.selectById(id);…

工业4g路由器联网后迅速掉线是什么原因?

工业4G路由器连接上网后迅速掉线可能是由多种因素造成的。以下是一些建议的检查和解决步骤&#xff1a; 1、信号问题&#xff1a; 信号强度&#xff1a;检查工业路由器信号强度指示灯&#xff0c;如果信号弱&#xff0c;尝试移动路由器位置或添加外部天线来增强信号。 网络拥…

求m和n的最大公约数(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int remainder 1;int m 0;int n 0;int middle 0;//提示用户&#xff1b;printf("请输入整数m和n的值&#xff…

基于 OpenHarmony compress 三方件使用说明

关于 提供了一个轻量级的图像压缩库。将允许您将大照片压缩成小 尺寸的照片&#xff0c;图像质量损失或可以忽略不计 compress 的依赖添加 为你的应用添加 compress-debug.har。将 compress-debug.har 复制到 entry\libs 目录下即可&#xff08;由于 build.gradle 中已经依赖…