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

第一部分 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这些进阶知识在本书中已经梳理得比较完善了,学习中可以来回翻一番,想当年我们连“翻”的份都没有,因为压根儿就没有这样的一个系统化的学习教程。

时间: 2024-08-29 03:38:22

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

《Web前端开发精品课 HTML与CSS进阶教程》——导读

前言 近年来,Web前端技术飞速发展,作用也日趋重要.在Web前端技术中,HTML和CSS是最基础的知识.当前市面上同类书籍很多,但大部分都是介绍基础性的HTML标签和CSS属性,缺乏一本真正体现前端开发水平的书籍. 本书是<Web前端开发精品课HTML和CSS基础教程>的姊妹篇,对于基础知识,不再进行详细介绍.HTML和CSS知识多而杂,因此入门容易精通难.本书对高级部分的内容进行深加工,使其更加完善.为了避免大家多走弯路,笔者把前端碎片化的知识系统化,提供给学习者一个流畅的学习思路. 本书

《Web前端开发精品课 HTML与CSS进阶教程》——1.2 HTML、XHTML和HTML5

1.2 HTML.XHTML和HTML5 很多新手往往分不清HTML.XHTML和HTML5,这一节给大家详细讲解一下这三者的关系和区别. 1.2.1 HTML和XHTML HTML,全称HyperText Mark-up Language(超文本标记语言),是构成网页文档的主要语言.我们常说的HTML指的是HTML 4.01. XHTML,全称EXtensible HyperText Mark-up Language(扩展的超文本标记语言),它是XML风格的HTML 4.01,我们可以称之为更

《Web前端开发精品课 HTML与CSS进阶教程》——2.4 表格语义化

2.4 表格语义化 不少初学者看了<Web前端开发精品课HTML和CSS基础教程>(本书的姊妹篇)跑来问:"不是说表格布局已经被抛弃了吗?为什么还要在书里讲解表格呢?这不是多此一举吗?"其实不然,在实际开发中,我们不建议使用表格布局,应该使用浮动布局或者定位布局.虽然表格拿来做布局的方式被抛弃了,但是这并没有说明表格就一无是处了. 问大家一个问题:如图2-5所示的这种表格数据的展示,应该怎么实现呢?不少得了"table恐惧症"的小伙伴可能会想到使用div

《Web前端开发精品课 HTML与CSS进阶教程》——第02章 语义化2.1 语义化简介

第02章 语义化 2.1 语义化简介 由于HTML简单,很多初学者对它存在一种偏见,觉得它没多少东西,因此在学习的过程中随便对待.其实,学习HTML的重点不在于掌握了多少标签,而是在于掌握标签的语义以及如何编写一个语义结构良好的页面. 在实际开发过程中,很多人由于对标签语义不熟悉,常常用某一个标签代替另外一个标签来实现某些效果. 举例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <

《Web前端开发精品课 HTML与CSS进阶教程》——2.2 标题语义化

2.2 标题语义化 h1-h6是标题标签,h表示"header".h1-h6在HTML语义化中占有极其重要的地位.h1-h6按照标题的重要性依次递减,其中h1重要性最高,h6重要性最低. 相对于其他语义化标签,h1-h6在搜索引擎优化(即SEO)中占有相当重要的地位.在一个页面中,h1-h6这6个标签,我们不需要全部都用上,都是根据需要才用的.对于h1-h6,一般情况下我们只会用到h1.h2.h3和h4,很少再会去用h5和h6,因为一个页面不可能用到那么多级的标题.并且从搜索引擎优化的

《Web前端开发精品课 HTML与CSS进阶教程》——2.7 语义化验证

2.7 语义化验证 前面这几节,我们介绍了页面语义化需要注意的各个地方.那么平常有什么好的办法来判断一个页面是否语义良好呢?一个很简单的办法就是:去掉CSS样式,然后看页面是否还具有很好的可读性. 我们都知道,很多HTML标签都有一定的默认样式,例如p标签有上下边距.strong标签对字体加粗.ul标签有缩进效果,等等. 在前面我们接触过,我们可以使用一个标签来代替另外一个标签,并且使用CSS修饰来实现相同的效果.也就是说,不同的HTML标签可以通过不同的CSS来实现相同的效果.但是"一个语义良

《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节

第2章 直线图形 2.1 直线图形简介 在Canvas中,基本图形有两种:①直线图形:②曲线图形.Canvas常见的直线图形有三种,分另是直线.矩形.多边形. 这一章我们先来学习Canvas中的直线图形. 2.2 直线 2.2.1 Canvas坐标系 在学习Canvas之前,我们先来介绍一下Canvas中的坐标系是如何使用的.了解Canvas使用的坐标系是学习Canvas的最基本的前提. 我们经常见到的坐标系是数学坐标系,而Canvas使用的坐标系是W3C坐标系,这两种坐标系唯一的区别在于y轴正

《Web前端开发精品课 HTML与CSS进阶教程》——2.6 其他语义化

2.6 其他语义化 2.6.1 换行符< br /> 很多新手会使用< br />标签来换行,或者使用多个< br />标签来实现元素之间的上下间距. 举例1: <div> <span>标题</span><br/><br/> <span>第1部分内容</span><br/> <span>第2部分内容</span><br/> <span

《Web前端开发精品课 HTML与CSS进阶教程》——1.4 id和class

1.4 id和class id和class是HTML元素中两个最基本的公共属性.一般情况下,id和class都用来选择元素,以便进行CSS操作或者JavaScript操作.但是很多新手对id和class这两个属性感到很迷茫,不知道什么时候用id,什么时候用class,甚至随便使用. 1.4.1 id属性id属性具有唯一性,也就是说在一个页面中相同的id只允许出现一次.W3C建议,对于页面关键的结构或者大结构,我们才使用id.所谓的关键结构,指的是诸如LOGO.导航.主体内容.底部信息栏等结构.对