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

相关推荐
大怪v4 小时前
AI抢饭?前端佬:我要验牌!
前端·人工智能·程序员
新酱爱学习4 小时前
字节外包一年,我的技术成长之路
前端·程序员·年终总结
皮皮林5514 小时前
拒绝写重复代码,试试这套开源的 SpringBoot 组件,效率翻倍~
java·spring boot
小兵张健5 小时前
开源 playwright-pool 会话池来了
前端·javascript·github
IT_陈寒7 小时前
Python开发者必知的5大性能陷阱:90%的人都踩过的坑!
前端·人工智能·后端
codingWhat8 小时前
介绍一个手势识别库——AlloyFinger
前端·javascript·vue.js
代码老中医8 小时前
2026年CSS彻底疯了:这6个新特性让我删掉了三分之一JS代码
前端
不会敲代码18 小时前
Zustand:轻量级状态管理,从入门到实践
前端·typescript
踩着两条虫8 小时前
VTJ.PRO 双向代码转换原理揭秘
前端·vue.js·人工智能
扉川川8 小时前
OpenClaw 架构解析:一个生产级 AI Agent 是如何设计的
前端·人工智能