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>音频文件等。整理结束,撒花!!!

相关推荐
Yeats_Liao3 分钟前
Spring缓存(二):解决缓存雪崩、击穿、穿透问题
java·spring·缓存
猿究院-赵晨鹤14 分钟前
String、StringBuffer 和 StringBuilder 的区别
java·开发语言
BillKu20 分钟前
Vue3应用执行流程详解
前端·javascript·vue.js
葵野寺24 分钟前
【RelayMQ】基于 Java 实现轻量级消息队列(九)
java·开发语言·rabbitmq·java-rabbitmq
Codebee35 分钟前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊38 分钟前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius38 分钟前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer40 分钟前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者40 分钟前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
代码不停42 分钟前
MySQL联合查询
java·数据库·mysql