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

相关推荐
qq_4419960532 分钟前
Mybatis官方生成器使用示例
java·mybatis
Martin -Tang36 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发36 分钟前
解锁微前端的优秀库
前端
巨大八爪鱼38 分钟前
XP系统下用mod_jk 1.2.40整合apache2.2.16和tomcat 6.0.29,让apache可以同时访问php和jsp页面
java·tomcat·apache·mod_jk
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
我不当帕鲁谁当帕鲁2 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂2 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐3 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
码上一元3 小时前
SpringBoot自动装配原理解析
java·spring boot·后端
计算机-秋大田3 小时前
基于微信小程序的养老院管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue