HTML & CSS 系列--第一篇:概述

简介: HTML & CSS 系列

HTML & CSS 到底是什么?有什么用?

HTML 和 CSS 是两门语言。
语言是什么呢?语言是沟通的工具
人与人之间沟通的语言:自然语言
人与计算机之间沟通的语言:计算机语言。可以理解为,人通过计算机语言与计算机进行“沟通”,并通过一些指令或者任务,让计算机完成人想要计算机完成的事情。
HTML: Hyper Text Markup Language 超文本标记语言。可以简单的理解为:定义网页中有什么
CSS: Cascading Style Sheets 层叠样式表。可以简单的理解为:定义网页中的东西长什么样子
目前,可以广义的理解为:HTML + CSS + JavaScript = 网页。即 HTML,CSS,JavaScript是开发网页的三大基础语言。

一些需要了解的标准术语

web

web是什么?
web可以称为万维网,下面是对万维网的简单介绍,也可以称之为是对web的简单介绍:
万维网(英语:World Wide Web)亦作WWWWeb全球广域网,是一个透过互联网访问的,由许多互相链接的超文本组成的信息系统。英国科学家蒂姆·伯纳斯-李于1989年发明了万维网。
万维网是信息时代发展的核心,也是数十亿人在互联网上进行交互和浏览器的主要工具。网页主要是文本文件格式化和超文本置标语言(HTML)。除了格式化文字之外,网页还可能包含图片、视频、声音和软件组件,这些组件会在用户的网页浏览器中呈现为多媒体内容的连贯页面。

注意⚠️:
万维网并不等同互联网,万维网只是互联网所能提供的服务其中之一,是靠着互联网运行的一项服务。
如果想对互联网做进一步了解,可以通过以下链接查看:https://zh.m.wikipedia.org/wiki/%E4%BA%92%E8%81%94%E7%BD%91

w3c

万维网联盟,一个非营利性组织,是万维网的主要国际标准组织,为半自治非政府组织

扩展:
w3c官网:https://www.w3.org/

XML

可扩展的标记语言:extension markup language,用于定义文档结构的。

什么是HTML

HTML是W3C组织定义的语言标准:HTML是用于描述页面结构的语言。
HTML:Hyper Text Markup Language,超文本标记语言。
书写一个一级标题:

<h1>这是一个1级标题</h1>

扩展:
HTML 参考官方文档:https://html.spec.whatwg.org/multipage/(全英版)
推荐MDN的官方文档,可以选择中文语言:https://developer.mozilla.org/zh-CN/docs/Web/HTML

什么是CSS

CSS是W3C定义的语言标准:CSS是用于描述页面展示的语言。
简单点来说,CSS决定了页面长什么样子。

CSS 参考官方文档:https://www.w3.org/TR/css-2021/(全英版本-最新版)
推荐MDN的官方文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS

浏览器执行HTML、CSS

HTML、CSS -> 浏览器内核 -> 页面

浏览器的组成:

  1. shell: 外壳
  2. core: 内核(js执行引擎、渲染引擎)

市场上主流的浏览器及其内核:

IE: Trident(IE已经被微软宣布不在支持——2022年6月15日,微软宣布不再支持Internet Explorer)
Firfox: Gecko
Chrome: Webkit / Blink
Safari: Webkit
Opera: Presto / Blink

版本和兼容性:

HTML5、CSS3
HTML5:2014年
CSS3:目前还没有制定完成(CSS3标准已部分公布,但仍未全部制订完毕,还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展——CSS3发展过程报告)。
XHTML:可以认为是HTML的一种一个版本,完全符合XML的规范。

推荐使用开发工具和记录笔记工具

编辑器

  1. Visual Studio Code(vs code): https://code.visualstudio.com/,微软出品的通用编辑器,支持大量插件扩展,支持自定义化等等(推荐)
  2. WebStorm: https://www.jetbrains.com/zh-cn/webstorm/, jetbrains出品,很好用但略显笨重
  3. Sublime: https://www.sublimetext.com/,曾经的前端开发主流工具,现在仍有大量开发人员使用,好用而且极其轻量

浏览器

  1. Google Chrome: https://www.google.com/chrome/, Google出品的浏览器,对前端开发者有极其友好的调试工具,而且完全支持W3C标准。(推荐)
  2. Edge:https://www.microsoft.com/en-us/edge?form=MA13FJ,微软出品的浏览器
  3. ......

记录笔记工具(文档编写器)

  1. typora: https://typora.io/,支持markdown语法,而且轻量好用,页面美观等(推荐)
  2. 语雀: https://www.yuque.com/,支持markdown语法,支持知识库设置等(推荐)

扩展:

MDN:Mozilla Development Network,Mozilla开发者社区。
MDN里面的文档基本都是直接从W3C的官方文档翻译过来的,对应的中文字体基本没有错误,只有某些地方存在翻译错误
Markdown: 是一种轻量级标记语言,创始人为约翰·格鲁伯。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。这种语言吸收了很多在电邮中已有的纯文本标记的特性。由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Discord、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被用来撰写电子书。(简单的说,markdown语法不仅简单好用,而且使文档编写者不再花费大量时间关注样式,主要关注内容)

目录
相关文章
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
987 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
891 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1278 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
320 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
701 33
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
402 2
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
883 7
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
423 6
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17819 24

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    579
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    440
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    440
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    289
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    555
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    732
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1424
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    318
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1174
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    512