HTML5+CSS3学习笔记

Posted Lucifer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5+CSS3学习笔记相关的知识,希望对你有一定的参考价值。

前段时间一直在学Python,不仅仅只是学Python的基础语法,还有科学计算,主要是Numpy和Matplotlib,爬虫,暂时还没有用到Scrapy那么高端的库,还停留在Python自带的urrllib模块,还有BeautifulSoup解析器,我发现,Web的问题,始终绕不过去。不得不承认的是,Web已经成为数据获取的主要渠道,所以有必要了解其机理性的一些规则,更何况,还有一点小私心,就是想做一个个人网站出来。总而言之,Web的知识是必须得学的,最直接的,自然就是html、CSS和javascript,这三者是有个递进关系的,据了解Javascript的功能也是极为强大,所以这段时间,先是重点学校HTML5+CSS3的有关知识。

学习的话,还是要讲究策略,方法得当,事半功倍。就我而言,我比较喜欢先有个宏观的把握,然后再具体而微的执着于细节。所以我就现在慕课网上找到了一个基础教程(http://www.imooc.com/learn/9),花了几天的时间,大致了解了html和css的语法和一些标签,当然都是很琐碎的,初步有了印象。在这里,值得一提的是,学IT方面的技术,慕课网真的很不错,但这仅适合入门,深入的话,还是要看书。所以我又从图书馆里找到了一本书,《HTML5与CSS3基础教程》,人民邮电出版社的书,这也是一家很良心的出版社,从这里,开始了细节上的询问。

书上的内容有很多,分别来说吧。

1、HTML看起来复杂,说到底也是文本文件,只不过这里的文本文件里会有一些特殊的字符,这些字符是格式化的,代表着不同的意思,意思虽有不同,但都很明确,专业点的说,就是"标签"。HTML英文全称HyperText Markup Language,直译"超文本标记语言","标签"是它最核心的东西。这也就引申出HTML编写时最重要的思想:语义化,这也是这本书里一而再强调的,HTML不过是对网页中的不同文本添加合适的标签,至于如何表现,那是CSS该做的事。尽管不同的标签在浏览器中会有特殊的格式,但这都只不过是浏览器提供的默认CSS做到的,都是可以随意变更的,和HTML没有关系,更不要因为想要表现某一种格式而去使用某个标签,这并非HTML的本意。

2、基本的HTML界面

<!--指示这是一个html5文件,应该始终位于第一行-->

<!DOCTYPE html>

<!--语言为英语-->

<html lang="en">

 

<head>

    <!--编码方式为utf-8,否则中文有可能出现乱码-->

    <meta charset="utf-8">

    <title></title>

</head>

 

<body>

    

</body>

 

</html>

3、一个网页包括这么三方面的内容:文本内容、对其他文件的引用和标记,而HTML里的标签又包括三个部分:元素、属性和值,各个标签的属性各有不同,在学习的时候应该主动记录下来。

4、文件和文件夹的命名规则:

在网页的内容,应该考虑到SEO(增强搜索引擎优化)的问题,所以在命名的时候,主要遵循三点规则:文件名尽量全部用小写、单词之间用短横线分隔(不是空格,也不是下划线)、使用正确的扩展名,前人总结的经验,即使不知为什么,也应该加以注意,养成良好的习惯。

5、URL(Uniform Resource Locator, 统一资源定位符),分为绝对URL和相对URL,字面意思很容易理解,下面看用法。绝对URL很简单,到哪都一样,就是我们日常接触到的最多的网址的样子,而相对URL则繁琐一些,分为几个不同的情况,比如:

引用同一目录下的文件——直接写文件名

引用子目录下的文件——文件夹名/文件名

引用上层的目录的文件——../上层文件夹名/文件名

根相对URL——/文件夹名/文件夹名/文件名 (这个比较好用)

6、文件的组织形式大致应该是这样的

 

总结:刚开始学习,发现HTML这种语言,和平常的那些不太一样,有自己的个性,也有自己处理事情的方式,很新鲜。要说最重要的,还是从书里学到了"语义化"这个概念,如果HTML都学完了还不懂,那才是白学了。感觉刚开始学就了解了这门语言最精髓的地方。

 

推荐书籍:《完美网页的视觉设计法则》、《Web设计实战》

以上是关于HTML5+CSS3学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

千峰HTML5+CSS3学习笔记

《HTML5与CSS3基础教程》学习笔记 ——补充

CSS3秘笈第三版涵盖HTML5学习笔记13~17章

html5+css3学习笔记|绘制一个安卓机器人

HTML5+CSS3学习笔记

前端学习笔记--16/5~22/5 jQuery,HTML5+CSS3+JS 简易微信贺卡开发