《Web前端开发精品课 HTML与CSS进阶教程》——第一部分 HTML进阶第01章 HTML基础知识1.1 HTML和CSS进阶简介

简介:

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章,第1.1节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

第一部分 HTML进阶

第01章 HTML基础知识

1.1 HTML和CSS进阶简介

1.1.1 你真的精通HTML和CSS吗
我们都知道,前端技术最核心的三大技术是HTML、CSS和JavaScript。HTML定义网页的结构,CSS定义网页的外观,而JavaScript定义页面的行为。其中HTML和CSS是前端技术中最基础的东西。

HTML和CSS入门容易,精通却很难,特别是CSS。“什么?精通很难?我很确定我已经精通CSS了啊!”这种话往往是出自学习三两个月、技术刚入门的人之口。我就曾经碰到不少这样的人。对于HTML来说,确实没有多少东西可以深入的,但是CSS却不一样。

如果你认为自己精通HTML和CSS了,那你可以思考一下下面这些问题。

(1)什么是HTML语义化?对于标题、图片、表格、表单,如何更好地实现这些方面的语义化?

(2)什么是外边距叠加?出现外边距叠加的根本原因是什么?

(3)在CSS中,关于命名、书写以及注释都有哪些好的规范(便于团队开发和后期维护)?

(4)说一下display这几个属性值的区别:block、inline、inline-block、table-cell。

(5)你深入了解过text-indent、text-align、line-height以及vertical-align这几个属性么?它们都有哪些高级技巧。

(6)为什么overflow:hidden可以清除浮动?

(7)CSS都有哪些性能优化技巧?如何使用更高性能的选择器?

(8)如何使用CSS实现各种图形效果,例如三角形、圆、椭圆等?

(9)解释一下这几个概念:包含块、BFC和IFC、层叠上下文。

……

如果你有一半答不上来,说明你连“熟悉CSS”都算不上,更别说“精通CSS”了。因此大家不要学了几个标签就认为自己精通HTML,也不要学了几个属性就觉得自己精通CSS了。不管是哪门技术,自己都应该深入地去学习,自我满足只会让自己滞留不前。

1.1.2 进阶教程简介
HTML进阶的内容只针对HTML 4.01,而CSS进阶的内容只针对CSS 2.1。对于HTML 5和CSS 3的内容,可以关注绿叶学习网。

本书是《Web前端开发精品课HTML和CSS基础教程》的姊妹篇,两者具有很强的连贯性。本书并不适合没有基础的人学习,对于HTML和CSS入门的相关知识,可以参考本书的姊妹篇,不然在学习本书的过程中可能对有些东西无法理解。

本书虽然涉及的东西很多,但浓缩的都是精华。有一句话说得好:“干扰因素越少,越容易专注一件事”,因此对于书中的技巧我们也会以最简单的例子来讲解。笔者在编写本书的时候也是字斟句酌,该展开的会详细展开,没用的东西一定会一笔带过。希望大家在学习中不要跳跃性地学习。

此外,本书里很多东西比较复杂,一时半会儿可能消化不了,应该多回来翻几遍,并且结合自己的实践来理解。“书读百遍,其义自见。”古人有些话还是说得蛮好的。HTML和CSS这些进阶知识在本书中已经梳理得比较完善了,学习中可以来回翻一番,想当年我们连“翻”的份都没有,因为压根儿就没有这样的一个系统化的学习教程。

相关文章
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
30天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
33 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
86 5
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
221 1
|
3月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
73 3

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    50
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    139
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    118
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75