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…

彩虹易支付搭建教程

服务器环境 推荐使用宝塔、AMH、XP等面板一键部署服务器环境。 PHP版本&#xff1a;>7.1&#xff0c;推荐7.4或8.0 MySQL版本&#xff1a;5.6或5.7 伪静态配置 直接上传后访问即可完成安装&#xff01;创建好网站之后&#xff0c;需要配置伪静态才能正常发起支付。以下分…

Linux——gdb

gdb调试 (1)debug版本: 在编译阶段会加入某些调试信息; 调试信息是在编译的过程中加入到中间文件.o文件的; gcc -c main.c -g:生成包含调试信息的中间文件 gcc -o main main.o 一步执行:gcc -o main main.c -g (1) (2)release版本: 发行版本,没有调试信息; gcc默认生成relea…

C++ 【桥接模式】

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

psutil库(获取系统资源信息)

1、功能简介 psutil库是Python的一个第三方模块&#xff0c;它提供了丰富的接口来获取操作系统和系统硬件的信息。以下是psutil的一些主要功能&#xff1a; CPU信息获取&#xff1a;可以使用psutil来获取CPU的逻辑数量和物理核心数量。这有助于了解系统的处理能力。磁盘使用情…

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

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

Go语言中测试和性能

1. 测试:软件开发最重要的方面 测试软件程序可能是软件开发人员能够做的最重要的事情。通过测试代码的功能,开发人员能够在很大程度上确定程序是有效的。另外,每次修改代码后,开发人员都可运行测试,确认没有引入Bug和衰退。通过测试软件,还能够让软件工程师确认程序按期望…

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

低价服务&#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.…

9.手写JavaScript大数相加问题

一、核心思想 找到两个字符串中最长的长度&#xff0c;对两个字符串在头位置补0达到相等的长度&#xff0c;相加时注意进位和类型转换&#xff0c;特别考虑当相加到第一位是如果仍然有进位不要忽略。此外&#xff0c;js中允许使用的最大的数字为 console.log("最大数&qu…

2024 蓝桥打卡Day35

20240407蓝桥杯备赛 1、学习蓝桥云课省赛冲刺课 【3-搜索算法】【4-枚举与尺度法】2、学习蓝桥云课Java省赛无忧班 【1-语言基础】3、代码练习数字反转数字反转优化算法sort排序相关String字符串相关StringBuilder字符串相关HashSet相关 1、学习蓝桥云课省赛冲刺课 【3-搜索算法…

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

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

【C++风云录】C++数据处理与分析:融汇技术与智慧,塑造数据的瑰丽图景

C数据处理与分析&#xff1a;释放数据的潜力&#xff0c;驾驭无限可能 前言 C作为一种通用而强大的编程语言&#xff0c;为数据处理与分析提供了丰富的工具和库。本文将介绍一些常用的C库&#xff0c;它们涵盖了算法、线性代数、图像处理、机器学习等领域。通过这些库&#x…

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

目录 前言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…