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语法不仅简单好用,而且使文档编写者不再花费大量时间关注样式,主要关注内容)

目录
相关文章
|
3天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
57 33
|
2天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
15 2
|
25天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
103 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
93 7
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
66 5
|
5月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
56 6

热门文章

最新文章