猿创征文|我的前端——【HTML5】基础成长学习之路

news2025/2/23 13:39:00

文章目录

前言

一、网页的基本组成

1.什么是网页

2.什么是HTML

3.网页的形成

 二、常用的浏览器

1.常用的浏览器

2.浏览器内核

三、Web标准

1.为什么需要web标准

2.Web标准的构成


前言

在一次机缘巧合之下了解并接触到CSDN,从此开启了我IT学习之路,我的目前是希望成为全栈型技术开发人员,也许这个目前实现起来对于一个零基础,没有系统学习的人难之又难,但是只要我不放弃,努力是奇迹的别名。也许我就是那种什么都想学,但是也怕最后什么都学不好学不精,我自己本身在大学的专业跟前端、Java,C语言这块是不太对称的,可谓是天差地别,也许我天生对黑客莫名的有些喜欢,以至于在未来很长一段时间找工作换工作学习找不到方向,当时我对于自己的爱好喜欢比较模糊,浪费了在大学学习的时间,出社会才发现对工作的喜欢热爱是那么的重要。在不断地换工作尝试中,终于找到最初的起点初心,当初在大学里有幸因为自己喜爱所以选修了一门Java的选修课,但是时间有限不是本专业老师也是局限在实战实现代码的基础上完成一趟课程,我并不知道原理如何,为什么这么写,种种情况下,还是选择从Python,前端慢慢开始学起来。活到老,学到老。不甘心于此。

一、网页的基本组成

1.什么是网页

网站是在英特网上根据一定的规则,使用html等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”,通常是HTML格式的文件,它要通过浏览器来阅读。

网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其称为HTML文件。

2.什么是HTML

HTML超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。html不是一种编程语言,而是一种标记语言(Markup language)。标记语言是一套标记标签(Markup tag)。 

 超文本的两层含义:

(1)它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。

(2)它还可以从一个文件跳转到另外一个文件,与世界各地主机的文件链接(超级链接文本)。

3.网页的形成

网页是由页面元素组成的,这些元素是利用html标签描述出来的,然后通过浏览器解析来显示给用户的。

 二、常用的浏览器

网页是通过浏览器来展示的,关于浏览器有以下两点需要注意:

1.常用的浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。平时称为五大浏览器。

2.浏览器内核

浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

浏览器   内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
Firefoxgecko火狐浏览器内核
Safariwebkit苹果浏览器
Chrome/OperablinkChrome/Opera浏览器内核。blink其实是webkit的分支

三、Web标准

Web标准是由W3c组织和其他标准化组织制定的一系列标准的集合。W3c(万维网联盟)是国际最著名的标准化组织。

1.为什么需要web标准

因为浏览器不同,它们显示页面或者排版就有些许差异化。比如:网页字体大小、颜色等等。由于不同的浏览器解析出来的效果可能不一致,会导致开发者需要话大量的时间去为多个版本的开发而耗费时间。

当遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外。还有以下优点:

  • 让Web的发展前景更广阔
  • 内容能被更广泛的设备访问使用
  • 更容易被搜寻引擎搜索
  • 降低网站流量费用
  • 使网站更易于维护
  • 提高网页浏览速度

2.Web标准的构成

主要包括结构(structure)表现(presentation)行为(behavior)三方面。

标准说明
结构 结构用于对网页元素进行整理和分类,现阶段主要学的是HTML。
表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为行为是指网页模型的定义及交互的编写,现阶段主要学的是JavaScript

Web标准提出的是最佳体验方案:结构、样式、行为相分离。简单来说,将结构写入HTML文件当中,表现写到CSS文件中,行为写到JavaScript文件中。注意:在三者当中相比较而言,结构是最重要的。

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

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

相关文章

API 低代码开发:接口大师,一套开发、管理和提供接口的产品框架

目录 一、简介 二、“器”有所用 三、“三大”平台/系统使用手册 ⭐️1、API接口系统手册⭐️ 访问在线接口 在线接口文档列表 接口文档详情页 搜索接口 ⭐️2、Platform开放平台手册⭐️ 访问开放平台 注册并登录开发者账号 创建应用 查看接口权限 调用开发接口 获…

uniCloud使用

uni-app 是是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 1 创建uni-app项…

前端获取mac地址

1.通过getMac库获取mac地址 通过getMac库来获取:getmac - npmGet the MAC address of the current machine you are on.. Latest version: 5.20.0, last published: a year ago. Start using getmac in your project by running npm i getmac. There are 201 other…

CSS 如何实现文字渐变色 ?

CSS 实现文字渐变色 CSS 实现文字渐变&#xff0c;有两种方法&#xff1a; 1. background 属性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><style>.text-gradient {background-image: linear-gradien…

【微信小程序】WXSS和全局、页面配置

&#x1f352;观众老爷们好呀&#xff0c;小程序系列更新&#xff0c;上文我们讲解了小程序中WXML 中的条件渲染和列表渲染&#xff0c;那么接下来&#xff0c;就让我们走进微信小程序的WXSS以及小程序配置吧&#xff01; &#x1f352;今天的内容也是非常重要&#xff0c;赶紧…

8种css居中实现的详细实现方式了

这是一篇关于居中对齐方式的总结 开篇之前&#xff0c;先问一下大家都知道几种居中的实现方式&#xff1f; 面试时答出来两三个就不错了&#xff0c;就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。使用flex 时也能通过给子项设置margin: au…

VUE-CLI/VUE-ROUTER

个人简介 > &#x1f4e6;个人主页&#xff1a;是Lay的主页 > &#x1f3c6;学习方向&#xff1a;JAVA后端开发 > &#x1f4e3;种一棵树最好的时间是十年前&#xff0c;其次是现在&#xff01; > ⏰往期文章&#xff1a;【Java基础】面向对象进阶(二) > &…

前端向后端传值的几种方式总结

一、HTML的标签form表单提交&#xff08;常用&#xff09; from表单把所有属于表单中的内容提交给后台&#xff0c;例如输入框&#xff0c;单选框&#xff0c;多选框&#xff0c;文本域&#xff0c;文件域等。 在后台可通过对应的name属性获取相应的值。from表单中的action属性…

vue踩坑--background-image路径问题

在前端开发中&#xff0c;background-image属性非常常见&#xff0c;有很多时候需要使用内联样式来绑定此属性&#xff0c;但是在vue项目中&#xff0c;如果如下面代码填写路径会找不到图片 项目中图片都放在src/img文件夹&#xff0c;img和background-image引用都用相对路径&a…

农业病虫害数据集与算法——调研整理

整理自博客 农业病虫害研究图库 陈雷&#xff1b;袁媛.农业病虫害研究图库.(V1).中国科学院合肥物质科学研究院[创建机构],2021-10-27.国家基础学科公共科学数据中心[发布机构],CSTR:16666.11.nbsdc.feoakuia;http://resolve.pid21.cn/CSTR:16666.11.nbsdc.feoakuia 下载链接&…

火狐浏览器谷歌浏览器Edge浏览器修改默认UA(User-Agent)

1.火狐浏览器&#xff08;Firefox) 1.1 使用浏览器设置进行修改 1&#xff09;在火狐浏览器地址栏输入“about:config”&#xff0c;按下回车进入设置菜单 2&#xff09;输入并找到“general.useragent.override”&#xff0c;选择”字符串“选项&#xff0c;再点击右侧的➕…

Openlayers 快速上手教程

&#x1f4e2;欢迎点赞&#x1f44d;/ 收藏⭐/ 留言&#x1f4dd;如有错误敬请指正&#xff01; 1. Openlayers简介 Openlayers 是开源的前端地图框架&#xff0c;官网地址&#xff1a;https://openlayers.org/ 它的作用主要是用于展现数据并且提供相应的地图操作工具。 1.1 …

SpringCloud 分布式微服务架构

SpringCloud 分布式架构前言SpringCloud微服务单体架构和微服务分布式架构单体架构分析微服务分布式架构分析服务拆分和远程调用服务拆分 案例需求准备远程调用初步Eureka注册中心服务注册与负载均衡服务注册Ribbon负载均衡指定负载均衡规则Nocas 注册中心环境配置启动服务注册…

vue3+动态路由

动态路由&#xff0c;也就是不是写死的路由&#xff0c;根据自己的需求加载不同的页面&#xff1b;现在很多的后台管理项目就是根据用户角色的不同分配不同的功能菜单&#xff08;页面&#xff09;&#xff1b; 根据用户登录的角色返回可以访问的页面路由&#xff0c;前端将路由…

JSON parse error: Cannot deserialize value of type `java.util.Date` from String

DateTimePicker DateTimeFormat("yyyy-MM-dd HH:mm:ss")日期格式转换异常 最近在学习,练习一个项目使用的日期格式是yyyy-MM-dd HH:mm:ss格式的,在后端Java与MySQL这边的转换中一开始格式没有统一间歇性的就会报异常,后面采用了一个DateTimeFormat("yyyy-MM-d…

vue组件的动态加载

​ 平常的vue项目开发&#xff0c;已经很难遇见一千行&#xff0c;甚至几千行代码的页面了&#xff0c;毕竟大家都会去拆分组件。但如果一个页面需要通过十几个组件或者几十个组件中的某几个组件去排列组合渲染&#xff0c;此时用动态加载就很有必要了。 ​ 我自己在开发过程中…

v-if与v-for为什么不建议一起使用?

1、作用 v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。 v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法&#xff0c;其中items是源数据数组或者对象&#xff0c;而item则是被迭代的数组元素的…

JS-获取DOM元素的五种方法

介绍 本文主要介绍通过JS获取DOM元素的5种方法&#xff1a; 根据id名获取元素&#xff1a;getElementById;根据标签名获取元素&#xff1a;getElementsByTagName&#xff0c;返回一个数组&#xff1b;根据类名获取元素&#xff1a;getElementsByClassName&#xff0c;返回一个…

当后端给我返回了302状态码

本文首发于&#xff1a;https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 前言 前段时间接手了一个项目&#xff0c;在代码中看到了这样的一段代码&#xff1a; if (isHTML(data) &&response.request.responseURL?.indexOf(CAS_PREFIX) > -1) {window.l…

cesium简介

文章目录1.什么是Cesium&#xff1f;2.Cesium能做什么&#xff1f;3.Cesium的依赖性4.Cesium学习参考Cesium实战系列文章总目录&#xff1a; 传送门1.什么是Cesium&#xff1f; Cesium是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库&#xf…