前端基础学习之HTML

前端学习总结之HTML

在之前的技术学习中，总是喜欢把自己看到过的，觉的蛮重要的知识点记录在纸上，一般是一个星期整理一次桌面，那个时候桌面会堆有很多很多记录蛮技术点和草稿的纸张。现在要改变策略了，准备在记录在博客上。前端学习，步步为营。

1.HTML简介

能够在网络上凑集到的知识点，我这里就不再重复了，只想写在自己看这些知识的心得体会。web编程主要分为客户端和服务器端。

客户端的开发，也就是目前的前端开发，主要用到的是html，css，javascript，ajax等等，客户端的开发主要作用是呈现数据，传达信息，以及与用户交互。

服务器端的开发，分为web服务器开发和应用服务器开发，前者主要使用asp(avtive server page)，asp.net，jsp(java server page)，PHP，python等等，后者就可以用C/C++,C#，Java等其他语言来开发。服务器端主要就是对数据库的访问和操作以及其他的一些应用后台服务。

具体到前端的技术上，整个web呈现结构有三层，结构层，样式层，交互层，分别有html，css，javsscript来实现。html负责搭起整体的内容框架，css则负责细化每一个标签的呈现方式，javascript则是架起用户和网页之间的桥梁，达到沟通交互的效果，彷佛自己可以控制这个网页一样。这只是我的自己的一点点看法，欢迎大家沟通交流。

2.HTML学习

在这里推荐一个非常不错的学习网站，W3C在线教程。上一个星期，我基本上就是按照上面的学习流程走了一片，这个网站上示例代码丰富，讲解详细，实在是一本不可多得的在线教程。第一次看的时候，不要期望可以全部记下这么多标签和相关的属性，先过一片，有个大体的印象。以后分析到具体网页时，看到不懂的再去查阅，这样要比死记那些标签的概念和用法要强。对于以后学习的知识点，教程过一片，自己敲一片，就差不多了。以后又不是封闭式开发，没必要给自己这么大的记忆负担，知道到哪里去找就可以了。

一个html文件，主要就有html，head，body三个部分组成，其中大部分标签都是要配对使用的，有了就一定要有。这个就像C语言中的大括号一样，把需要的内容都给包括进去。整个页面就像一个人一样，有头部，有身体，头部主要是负责”控制“整个身体的行为的，一般的载入外部样式表和载入必须的js脚本都是在这里添加的。对于用户来说，我们看到的就只是页面的body部分，里面从上到下，你在html里面写什么，页面就从上到下输出什么，很是受规矩。为了让页面的组织合理，高校，html引入了标签，常用的也就那么些标签，这些标签就像是人身体的一部分，同样是四肢，有左上肢，右上肢，左下肢，右下肢。因此，标签也要分类，同样是p标签，给标签加个id，那以后访问这个标签，就可以通过id来访问了。同一个页面中的id值是绝不能够相同的，和id值想对于的有class标签，这个同id的功效差不多，只不过class可以在同一页面内使用多次，而id最多只能使用一次罢了。

外国人写代码也懒，因此就有了很多英文缩写。自己的英文底子还行，所以，看到一个标签，就自然而然的去联想它的英文全称，就像记单词一样，天天看着单词，想着全称，意思自然就差不多多少了。

3.HTML语法

这里写到html的语法，我只介绍几个重点的，其他的到w3c一查，就会明白的了。现代的web前端已经很模块化了，内容和形式分离，交互也要分离，自然而然，代码，能不挤在一起，就不挤在一起写。想写嵌入式代码时，那么多的include文件可不是白白include的，为了模块化，为了便于维护和开发，在web端，还有一个好处，就是节省带宽，加快显示速度。反正，软件模块化，这是大势所趋的，在html里面也少不了的。

包含css文件，主要有三种方式

1. 直接在标签内部添加style属性，这样的设置就仅仅能改变着一个标签的样式。

   abc

2. 在head标签内嵌入内部样式表，通过来实现。这样也只能控制这一个页面某个特定元素的样式
3. 在head标签内嵌入外部样式表，通过，其中，mystyle.css是需要加载的外部样式表

为了便于控制整体网页的样式和提高代码的复用性，多是采用第三种方式，对于一些特殊的需要，采用第一种方式也是可以的。不同样式的引入对于同一个标签的效果是不一样的，一般来说，优先级有如下的关系，内嵌style属性>head标签内嵌内部样式表>内嵌外部样式表。

还有一种import导入外部样式表的方式，采用这种方式加载的样式表，需要等到整个页面都下载完毕后才会加载需要的样式文件，因此，给用户的视觉效果不好，用到的很少了。

包含javascript文件的话，就有动态加载和静态链接的方式，这里面区别可大了，在下下篇文章里面再详细讲解吧！

html中常用的块标签是p(paragraph)，div(division)，h1-h6(标题的等级)，form(表单，ul(unorderd list),li(list item))等等为块标签，块标签所表示的内容总是在新行上开始，高度，行高以及顶和底边距都可以控制，除非设定一个宽度，块标签的宽度缺省是它的容器的100%，

      ,,,,,,等等是行内元素的例子，行内元素和其他元素都在一行内，高，行高及顶和底边距不可改变，宽度就是它的文字或者图片的宽度，除非指定宽度，否则原样显示。

	<标签 属性1=“属性值1” 属性2=“属性值2”> 需要显示的内容 ，属性值一定要加双引号挂起来，每个标签可以用id，也可以用class来定位。
	特别有用的标签有click here!!*的内容可以是网络上的URL，本机上的其他页面，也可以是本页面内的某个地方(用name属性声明定位)
	不需要的标签有 
注释的写法：html中是 
		    CSS中的 /* 注释的内容 */
		javascript 中的和C语言一样，单行注释//，多行注释/*注释内容*/

今天就写到这里吧，不知不觉又十一点半了，早点休息，明天还要上班，多总结，多实践。

加油，浩天之家！