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设计实战》

时间: 2024-12-25 21:36:54

HTML5+CSS3学习笔记(一)的相关文章

HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

HTML5+CSS3学习笔记(三)

打开一个网页,看源代码,会发现,html大部分的内容还是文本,何况html本身就是叫超文本标记语言,所以大部分的标签,针对的都是文本.这些标签非常的多,而且有些,我是感觉语义上界限比较模糊,咱们一个一个的来看. 添加段落 由于HTML会自动忽略你在文本编辑器里写的空格和换行,这里就需要用到<p>标签来标记新的段落,将每一段都放进一个<p></p>标签里,而不是用<br>标签,当然两者完全可以实现同样的排列样式,但不推荐使用<br>,它将表现样式带

html5+css3学习笔记-prefixfree前缀补全插件

虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插件可以自动补全前缀. 首先在页面任意地方(能生效的方)插入插件 <script src="prefixfree.min.js"></script> 然后打开页面可以看到html标签中加入class="-webkit"(或其他后缀-o-,-ms-,

html5+css3学习笔记音频和视频

格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 <video wi

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

html5 canvas 学习笔记(一)

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个

HTML5&amp;CSS3练习笔记(二)

HTML5&CSS3  练习CSS3伪选择器使用 1.first-line  格式:元素:first-line 说明:设置同一个标签下所有行内容的第一行的样式,例如: 1 <table style="float: left; font-size: 1.4em; width: 391px; height: 59px; border: none;"> 2 <tbody> 3 <tr> 4 <td style="border: no

HTML5&amp;CSS3练习笔记(一)

属性选择器的用法 格式:[属性/^/*/$=值] 1.[attr=val] 匹配指定值的元素 1 <div> 2 <div id="section1"> 3 完全匹配元素 4 </div> 5 </div> HTML代码 1 [id=section1] 2 { 3 background: #eee; 4 font-size: 20px; 5 color: Red; 6 } CSS代码 效果图如下: 完全匹配元素 2.[attr*=val]