我的HTML印象-HTML基础Plus.docx

我的HTML印象-HTML基础Plus网页使用的html代码，那么为什么要把xml和html放在一起讨论呢？嗯，这是个问题。第一个原因就是xml更容易理解，第二个原因就是html是基于xml标准的。XML入门Xml是一种标记语言，现在最简单最直观的介绍xml语言如下。1. xml是一种标记语言，标记语言是指所有的内容总是放在成对的标记之内，对于xml，它使用尖括号表示一个标记，如或，标记的名称推荐为小写且建议区分大小写字母；其首字应为字母，并由字母数字和下划线组成；使用开始标记并使用表示该标记的结束，也允许使用的简略方式表示一个无内容的标记。一般，我们将一对标记成为xml的节点，也有人喜欢叫元素，都一个意思。Xml是严格区分大小写字母的，同时我们希望开发人员不论何时都应该假设工作对象是严格区分大小写且避免使用非ASCII标准字符。2. xml要求所有的内容必须写在一对标记之间，且一篇xml文档必须包含且只能包含一个根节点，例如如下的xml文档是正确的：1. 2. 文本内容3. 而以下的文档是错误的：1. 2. 文本内容也就是说，xml文档是具有树形结构的文档。3. 每个标记允许有任意数量的属性，属性的命名规范与标记的命名规范一致。例如，属性的值必须写在一对儿引号之间。4. 一般在纯粹的xml文档的首行会声明其遵守的协议，例如，也有其它的协议，等你用到的时候自然会明白。以上就是对xml的基本介绍了，我想现在你可以很轻松地写出一个xml文档了。Xml文档的注释编写方式为。想了解更多？下载本站提供的手册吧。这些手册都是平时收集来的，给了我很多帮助。其版权属于原作者，本站仅进行转载。CSS层叠样式表简介CSS层叠样式表是Cascading Style Sheet的简写，可以帮助我们把页面的内容变得更加绚丽，结合JavaScript还能实现一些动画效果哦。CSS搭配XML(HTML)使用，用来指定元素的显示特性，这些特性根据作用对象可以简单分为两类，一类是用来说明元素之间的关系，另一类则是说明元素本身的特征。例如，margin属性，当一个元素被指定margin属性时，该元素和相邻元素之间的距离会被改变；而font-size属性则是说明元素本身的文字大小与相邻元素无关。同时，CSS属性又可以按照继承方式分为继承和非继承两种，例如上面提到的margin属性就是非继承的，只对当前元素生效，而font-size是继承的，对当前元素及当前元素下的所有子节点均有效。CSS最基本的使用方式就是使用文本编辑器创建扩展名为.css的文件，然后在需要的地方引用它就行了。当然，对于HTML来说，由于浏览器的支持，你也可以将其写在html文件中或以属性的方式直接定义到元素上。例如：3. 4. 5. 6. body font-size: 12px;7. 8. 9. 10. Hello CSS!11. 12. 其显示结果应该形如：Hello CSS!想了解更多？下载本站提供的手册吧。这些手册都是平时收集来的，给了我很多帮助。其版权属于原作者，本站仅进行转载。XML与CSS实战最基本的Xml文档只有一些规范，除注释外没有任何预定义的标记，所以，在xml文档中，使用标记并不会将其中的内容变成粗体哦。如果，我们希望用一个xml文档得到和上例相似的结果该怎么做呢？首先，我们需要一个css文件，就命名为demo.css好了，内容如下。13. charset “utf-8”14. root font-size: 12px;15. redContent color: red;16. 然后，编辑xml文件并引用以上的css，就叫demo.xml好了。17. 18. 19. 20. Hello CSS!21. OK，如果你在浏览器中打开这个xml的话，你现在能看到类似的结果了。你也可以删除掉xml中用于引用css文件的那一行，看看没有css的xml文档是什么样子。如果你很细心的话，你会发现这个xml和上面的html虽然文字的样式一致，但是页面的整体效果是有区别的，xml中的文字严丝合缝的显示在了页面的左上角，而那个html文件中显示的文字好像距离左上角还有点空白。很好，那我们来说说html吧。HTML，应该这样入门通过上面的例子，我们了解到xml+css可以模仿出与html相似的效果，那么是不是xml+css可以完全模仿出与html相同的效果呢？当然能啦。那为什么html页面的文字位置和xml版本的文字位置不一样呢？答案就是浏览器为特定的xml标记已经预先绑定了css样式，这样能够简化开发，降低学习HTML的门槛，更容易的制作出相对美观的页面。例如前例中的demo.css，我们再追加一行root margin: 6px;，刷新一下，一样了没？还是有点不一样？好吧，我承认我不知道应该把margin设为多少才能完全一样。不过，你现在是不是已经开始理解HTML的工作原理了呢？好的，原理知道了，下一步怎么学习呢？我的建议是自己亲手去写每一个标记，比较不同标记的效果，同时尝试使用css去模拟特定的html标记。不过说一下，下拉框、单选框、复选框、上传文件组件是由浏览器内部生成的，不完全属于xml+css范畴，这些组件的某些（不是全部哦）样式是无法修改的，如果你有一天需要做一个特殊效果的下拉框、单选框之类的，可以直接考虑使用其他方式替代，就不必费心去调整css了。如果对于常见的html标记你都能轻松使用xml+css方式模拟的话，恭喜你，你的HTML开发已经入门了。如何正确制作HTML页面如果你自认为还没有达到上面所说的入门标准，那么你可以使用Dreamweave之类的软件制作页面，否则还是具有html代码提示及补全功能的文本编辑器类软件会更好。我认为制作html页面需要考虑以下的问题：1 页面是否针对用户进行过优化：根据面向的用户不同，页面的侧重点也应该有所区别。例如面向普通用户的页面一定要容易操作，同时对用户的操作要有所相应，如果用户进行了某个操作却“看起来”什么都没发生，那实在不是好的体验。当然，你也许会想到还需要考虑页面美观、吸引人眼球之类的问题，如果你有能力的话请这样做，或者建议网页美工考虑这个问题。而对于管理员所使用的页面，他们更注重如何快速高效的完成工作。2 如果页面允许搜索引擎收录的话，那么页面的内容要对搜索引擎友好。例如，对于标题适当的使用之类的标记，而不是通过css使一段文字看上去象标题，记住搜索引擎只能识别代码；同样的原因，图片应该尽量的带有alt属性。3 尽可能的使代码简单，这更利于维护，也使页面可以加载的更快，虽然现在的网络速度有很大的提升，但是请不要挥霍。4 代码要符合相应的编码规范，并且这是应该培养的良好习惯。5 代码应该是有序且符合逻辑的，虽然一些怪异的写法可能让你少写几行并且看上去没什么不同，但是日后的维护会让你生出早知如此何必当初的感叹。尤其对于页面来说，这种变化是经常发生的，很少有网站会几年都不改变一下外观。为什么我不推荐使用所见即所得模式的编辑器来编写网页呢，很简单，它们的通病就是会产生垃圾样式（所谓垃圾样式就是写不写不影响最终效果的css代码）。千万不要忘记很多css样式是已继承的方式生效的，垃圾样式会破坏这种继承关系，因此使维护变得更困难。举几个常见的例子：1 经常我们会看到某些新手的html代码中有如下的内容： 这个时候最外层的div有可能是因为布局的关系需要指定宽度，img是为了加速渲染而指定高宽，那么其它的属性就是垃圾属性。它们可以不写，并不会影响页面的最终结果。唯一带来的影响就是，当你的图片尺寸变化时，相关的样式都要进行调整，否则就会造成显示不正确。以下代码就完全满足要求了。 现在你只要修改3个值就好了。2 字体是很常见的问题，很多人会写出类似的css文件：body font-size: 12px;h1 font-size: 36px;h2 font-size: 24px;实际上更好的做法是使用em的方式定义文字大小，例如：body font-size: 12px;h1 font-size: 3em;h2 font-size: 2em;这样可以更容易的修改页面整体的文字大小。当然它有时候也会带来问题，在你不是对页面了如指掌的情况下。因为的h1文字大小为body的文字大小*3，而如果你写了，那么很明显这个时候的h2不是body的文字大小*2，而是body的文字大小*h1的放大比例*h2的放大比例。其实要制作出规范的HTML页面也并不困难，以下的建议也许能帮助到你：1. 根据语义使用适当的标签，模拟标签只适合练习而不能真的应用到产品中；2. 将布局和细节分开制作，尤其是复杂的页面。现在一般都采用div+css布局，不建议事无巨细的一气呵成，而是应该培养模块的概念。先将所有的模块安排到正确的位置，即先进行排版，然后逐个模块的填充内容，如果模块里的内容的结构依然复杂，那么应该考虑再次细分成更小的模块，再次排版，再逐个填充。3. 仅仅添加必要的样式，充分利用元素固有的样式属性；要记得有50%以上的排版问题都是由于画蛇添足引起的。结语你是不是觉得我还没讲任何具体的内容啊？亲，实践出真知，而且这么简