Web前端开发:HTML、CSS

news2025/8/4 12:02:27

一. 前端开发介绍

  • 在介绍Web网站工作流程的时候提到,前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序,如下图所示:

1.  网页有哪些部分组成 ?
  • 文字、图片、音频、视频、超链接、表格等等。
2.  我们看到的网页,背后的本质是什么 ?
  • 程序员写的前端代码 (备注:在前后端分离的开发模式中,)
3. 前端的代码是如何转换成用户眼中的网页的 ?
  • 通过浏览器转化(解析和渲染)成用户看到的网页
  • 浏览器中对代码进行解析和渲染的部分,称为 浏览器内核

而市面上的浏览器非常多,比如:IE、火狐Firefox、苹果safari、欧朋、谷歌ChromeQQ浏览器、360浏览器等等。 而且我们电脑上安装的浏览器可能都不止一个,有很多。

但是呢,需要大家注意的是,不同的浏览器,内核不同,对于相同的前端代码解析的效果也会存在差异。那这就会造成一个问题,同一段前端程序,不同浏览器展示出来的效果是不一样的,这个用户体验就很差了。而我们想达到的效果则是,即使用户使用的是不同的浏览器,解析同一段前端代码,最终展示出来的效果都是相同的。

要想达成这样一个目标,我们就需要定义一个统一的标准,然后让各大浏览器厂商都参照这个标准来实 现即可。 而这套标准呢,其实早都已经定义好了,那就是我们接下来,要介绍的web 标准。
Web标准 也称为 网页标准 ,由一系列的标准组成,大部分由W3C ( World Wide Web Consortium,万维网联盟)负责制定。由三个组成部分(前端页面开发的三剑客):
  • HTML:负责网页的结构(页面元素和内容)。
  • CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
  • JavaScript:负责网页的动作和行为(交互效果)。
  • 前端网页开发除了这三项基础的核心技术之外,现在还有非常流行的一些高级技术,比如像前端现在开发非常流行的基于JS封装的高级框架Vue,还有基于Vue封装的桌面组件库Element UI,以及异步交互技术Ajax,以及Axios等技术,前端项目的部署服务器Nginx。

 二. HTML、CSS

HTML(HyperText Markup Language):超文本标记语言。

  • 超文本:超越了普通文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。像平时基于Windows当中的记事本这一类的工具所编写的一些文本都称之为普通文本。
  • 标记语言:由标签构成的语言。
  • HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<video>展示视频。XML就是一种标记语言,XML是可扩展的标记语言。
  • HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

  • 其中<html>是根标签,<head><body>是子标签,<head>中的字标签<title>是用来定义网页的标 题的,里面定义的内容会显示在浏览器网页的标题位置。
  • <body> 中编写的内容,就网页中显示的核心内容。
  • 学习HTML主要学习HTML当中的这些常用的标签,而我们学习CSS主要学习的就是CSS当中所定义的常见的样式。
  • h1标签它是一个标题标签,它是一级标题标签。
  • HTML文件通常来说它的后缀名都是.html,HTML结构标签最外层的html,浏览器在解析的时候一旦见到了html标签,那就知道要以HTML的格式来解析。
  • 在html的标签中还要定义两对子标签,一对是head代表头,一对是body代表体,那在head当中,我们需要通过title这个标签来定义HTML文件的标题,在body当中,我们就可以来编写HTML的页面内容了title标签控制的就是HTML文件的标题。
  • 当把后缀名改为.html之后,这个文件就马上被电脑的浏览器识别出来了,原因是因为在我们的操作系统当中,如果是.html后缀的文件,默认是被浏览器识别的。

 总结:

1. HTML 页面的基础结构标签
  •  <title>中定义标题显示在浏览器的标题位置
  • <body>中定义的内容会呈现在浏览器的内容区域
2. HTML 中的标签特点
  • HTML标签不区分大小写,在项目开发当中一般使用的都是小写
  • HTML标签的属性值,采用单引号、双引号都可以
  • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

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

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

相关文章

车企跨界背后,智能手机进入新增长时代

2022年中国智能手机销量首次跌破了3亿部大关&#xff0c;创下了十年来的最低水平。与此同时&#xff0c;以新能源车和XR为代表的新形态终端日渐成为新宠。在行业内外部多重因素影响之下&#xff0c;“唱衰”智能手机的声音也在甚嚣尘上&#xff0c;甚至有不少人认为智能机已进入…

笔记本电脑开不了机?3种解决方法

案例&#xff1a;笔记本电脑开不了机怎么办&#xff1f; 【我的笔记本电脑一直用得好好的&#xff0c;今天突然开不了机&#xff0c;尝试按了开机键很多次也没有解决。有人遇到过同样的问题吗&#xff1f;有没有解决的方法&#xff01;】 在日常生活中&#xff0c;我们经常会…

Vulnhub靶场DC1-2练习

目录0x00 准备0x01 信息收集0x02 漏洞利用与攻击0x03 思路总结0x00 准备 下载连接&#xff1a;https://download.vulnhub.com/dc/DC-2.zip 介绍&#xff1a;Just like with DC-1, there are five flags including the final flag.Please note that you will need to set the …

看完这篇文章你就彻底懂啦{保姆级讲解}-----(I.MX6U驱动LED灯《使用汇编语言编写》) 2023.4.17

目录前言STM32 知识回顾完整汇编代码最终编译验证结束语前言 首先我们在开发stm32的时候驱动LED灯会有两种方式&#xff0c;分别是寄存器和库函数版本。因为在实际的开发过程中&#xff0c;我们更愿意更习惯用库函数版本来驱动各种外设&#xff0c;但是对于底层的寄存器调用和…

Linux宝塔安装msyql服务,默认密码,允许远程登录问题解决

一、首先我在宝塔安装mysql服务是5.7 1.1MySQL数据库5.6之前&#xff08;不包括&#xff09;默认密码为空&#xff0c;用户不用输入密码&#xff0c;直接回车登陆 mysql -uroot -p password:(空) 1.2.MySQL数据库5.6之后&#xff08;包括&#xff09;默认密码是MySQL数据库随机…

Mybatis手动配置ORM,不用自动ORM等操作

一、解决mapper.xml存放在resources以外路径中的读取问题 在pom.xml文件最后追加< build >标签&#xff0c;以便可以将xml文件复制到classes中&#xff0c;并在程序运行时正确读取。 <build><!-- 如果不添加此节点src/main/java目录下的所有配置文件都会被漏掉…

【Android Audio】TimeCheck机制

TimeCheck机制&#xff08;Android R/S&#xff09; TimeCheck.cpp TimeCheck.h frameworks/av/media/utils/TimeCheck.cpp TimeCheck守护线程的作用&#xff1a; 当audioserver中IAudioFlinger&#xff0c;IAudioPolicyService&#xff0c;IEffect中的每一个binder函数调用时…

Web 攻防之业务安全:Callback自定义测试(触发XSS漏洞)

Web 攻防之业务安全&#xff1a;Callback自定义测试 业务安全是指保护业务系统免受安全威胁的措施或手段。广义的业务安全应包括业务运行的软硬件平台&#xff08;操作系统、数据库&#xff0c;中间件等&#xff09;、业务系统自身&#xff08;软件或设备&#xff09;、业务所提…

学习C语言十天了,我实现了仿真自由落体小球『C/C++图形库EasyX』

文章目录&#x1f490;专栏导读文章导读准备工作一、显示一个静止的小球二、显示多个小球使用#define美化代码三、小球下落动画四、利用while循环实现小球下落五、利用if语句实现小球重复下落六、实现小球落地反弹七、实现小球加速下落&#x1f490;专栏导读 &#x1f338;作者…

剪枝与重参第七课:YOLOv8剪枝

目录YOLOv8剪枝前言1.Overview2.Pretrain(option)3.Constrained Training4.Prune4.1 检查BN层的bias4.2 设置阈值和剪枝率4.3 最小剪枝Conv单元的TopConv4.4 最小剪枝Conv单元的BottomConv4.5 Seq剪枝4.6 Detect-FPN剪枝4.7 完整示例代码5.YOLOv8剪枝总结总结YOLOv8剪枝 前言 …

【三十天精通Vue 3】第八天 Vue 3 生命周期钩子详解

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: 三十天精通 Vue 3 文章目录引言一、Vue 3 生命周期钩子概述1.1 生命周期钩子的简介1.2 生命周…

mulesoft MCIA 破釜沉舟备考 2023.04.14.11

mulesoft MCIA 破釜沉舟备考 2023.04.14.111. To implement predictive maintenance on its machinery equipment, ACME Tractors has installed thousands of IoT sensors that will send data for each machinery asset as sequences of JMS messages, in near real-time, to…

惠普Probook455电脑开机突然卡住无法进入桌面

惠普Probook455电脑开机突然卡住无法进入桌面解决方法分享。最近有用户使用的惠普Probook455电脑在开机的时候&#xff0c;电脑一直卡在开机的界面上&#xff0c;无法进入到系统中。无论是重启还是安全模式都无法解决问题。那么遇到这个情况怎么去进行问题的解决&#xff0c;来…

C++---状态压缩dp---炮兵阵地(每日一道算法2023.4.16)

注意事项&#xff1a; 本题为"状态压缩dp—蒙德里安的梦想"和"状态压缩dp—小国王"和"状态压缩dp—玉米田"的近似题&#xff0c;建议先阅读这三篇文章并理解。 题目&#xff1a; 司令部的将军们打算在 NM 的网格地图上部署他们的炮兵部队。 一个…

GoogleTest+VS code编译和编写简单测试用例

目录前言一、安装gtest二、 编译gtest与运行单元测试第一种编译方式第二种编译方式前言 在B站看了非常多Gtest的教学视频&#xff0c;CSDN上gtest博客也特别多&#xff0c;但是都非常陈旧或者根本不是用vscode。本篇目的在于&#xff0c;说明如何在vscode上编写简单单元测试。…

day01_Java概述丶环境搭建

Java背景知识 Java概述 概述&#xff1a;计算机语言就是人与计算机之间进行信息交流沟通的一种特殊语言。所谓计算机编程语言&#xff0c;就是人们可以使用编程语言对计算机下达命令&#xff0c;让计算机完成人们需要的功能。 Java语言&#xff1a;是美国Sun公司&#xff08…

Siamese network

文章目录一、相似性度量1. 欧氏距离2. 马氏距离二、Siamese network1. Siamese network 基础架构2. 损失函数3. 不同的Siamese network3.1. 行人重识别3.2 其他应用场景一、相似性度量 相似性度量是机器学习中一个非常基础的概念&#xff0c;是评定两个事物之间相似程度的一种度…

E: 仓库 “http://mirrors.aliyun.com/ubuntu eoan Release” 没有 Release 文件 —— 解决方案

Ubuntu 20.04 更新的时候&#xff0c;遇到如下问题&#xff1a; 可以通过修改源&#xff0c;来进行修复&#xff1a; 1、登录如下网址&#xff1a;LUGs repo file generator 2、选择对应的 Ubuntu 版本&#xff0c;这里我是 Ubuntu 20.04 点击 Download&#xff0c;会下载一个 …

DUBBO注册中心

注册中心上保存四种类型的数据: providers: 服务提供者目录,记录着服务提供者的ip、端口等信息。 consumers: 服务消费者目录,记录服务消费者的元数据信息,服务提供者并不会用到服务消费者的信息,这里要记录消费者的信息,是给服务治理中心(dubbo-admin)使用的。 route…

五分钟排查Linux的健康状态

五分钟排查Linux的健康状态1. CPU1.1 top命令1.2 什么是负载1.3 vmstat2. 内存2.1 观测命令2.2 CPU缓存2.3 HugePage2.4 预先加载3. I/O3.1 观测命令3.2 零拷贝4. 网络参考&#xff1a;《Linux运维实战》、xjjdog 操作系统作为所有程序的载体&#xff0c;对应用的性能影响是非常…