Html与CSS快速入门知识——进阶应用

　　这部分是html细节知识的学习。

 

　　快速入门系列--HTML-01简介

 

　　快速入门系列--HTML-02基础元素

 

　　快速入门系列--HTML-03高级元素和布局

 

　　快速入门系列--HTML-04进阶概念

 

　　之前介绍都是静态的HTML站点知识，这部分将简单介绍动态的web站点，通常来说，可以使用python,Ruby,Java,C#去快速构建相关站点，当然现在使用javascript（nodejs）也可以构建动态站点了。关于javascript的相关知识请见javascript快速入门（上篇）。

 

　　打印友好页面：在页面设计中，对于一部分可能需要打印的页面，比如地图，需要考虑其打印后的效果，因此有些背景色将显得并不合适，对于页面上的链接，也需要删除所有的下划线。而且页面打印时推荐使用衬线字体serif而不是无衬线字体sans serif。总的来说可以通过如下几种方式来实现打印友好的页面：如果页面有背景，就删除它，给页面提供一个白色的背景；将文本颜色设置为黑色；确保字体足够大；删除链接格式化效果；删除任何和所有不是必不可少的图像；添加页面作者信息。

 

　　之前介绍过CSS支持特定于媒体的样式表，这些媒体包括：all所有设备，aural语音合成器，braille盲人触觉反馈设备，handheld手持设备，print打印预览，screen彩色屏幕等，可以通过如下方式进行设置。

 

　　Tip：Windows对象方法

 

　　方法

 

　　描述

 

　　alert（）

 

　　显示带有一段消息和一个确认按钮的警告框。

 

　　blur（）

 

　　把键盘焦点从顶层窗口移开。

 

　　clearInterval（）

 

　　取消由 setInterval（） 设置的 timeout。

 

　　clearTimeout（）

 

　　取消由 setTimeout（） 方法设置的 timeout。

 

　　close（）

 

　　关闭浏览器窗口。

 

　　confirm（）

 

　　显示带有一段消息以及确认按钮和取消按钮的对话框。

 

　　createPopup（）

 

　　创建一个 pop-up 窗口。

 

　　focus（）

 

　　把键盘焦点给予一个窗口。

 

　　moveBy（）

 

　　可相对窗口的当前坐标把它移动指定的像素。

 

　　moveTo（）

 

　　把窗口的左上角移动到一个指定的坐标。

 

　　open（）

 

　　打开一个新的浏览器窗口或查找一个已命名的窗口。

 

　　print（）

 

　　打印当前窗口的内容。

 

　　prompt（）

 

　　显示可提示用户输入的对话框。

 

　　resizeBy（）

 

　　按照指定的像素调整窗口的大小。

 

　　resizeTo（）

 

　　把窗口的大小调整到指定的宽度和高度。

 

　　scroll（）

 

　　scrollBy（）

 

　　按照指定的像素值来滚动内容。

 

　　scrollTo（）

 

　　把内容滚动到指定的坐标。

 

　　setInterval（）

 

　　按照指定的周期（以毫秒计）来调用函数或计算表达式。

 

　　setTimeout（）

 

　　在指定的毫秒数后调用函数或计算表达式。

 

　　处理表单

 

　　对于html页面来说，表单是其用户交互的最重要的部分，它包含用户用于输入的区域，通常我们使用的form表单包括name,method,action属性，即使很多使用，我们会使用ajax提交，但常用的表单提交仍然非常重要。在使用input（textarea）时，注意autofocus，placeholder提示信息，required,size，pattern等验证属性的使用，注意标识每一个表单数据，可以使用fieldset组合表单元素，使用hidden保存一些不希望用户看到的数据项，此外还有单选、多选、列表（optgroup新标签）的使用，

 

　　当前来说，更倾向于使用单页类型的Web页面，这种简单高效网页慢慢回归，为了让用户可以使用简单几次单击就可有收集到所有信息，对于比较大的站点，导航元素显得非常重要，这部分内容多参考不同的站点即可，对于国人来说，与美式的审美还是有一些区别，常见的Html&CSS框架包括Bootstrap,Foundtion等。

 

　　SEO搜索引擎优化，简单来说就是网站通过技术手段，提供足够多的线索给搜索引擎，让网站的排名更靠前，这部分的根源是google的page rank算法，通常我们可以通过以下手段来进行SEO：在<title>标签和页面上的第一个标题中添加重要的搜索项；添加<meta name='keywords' content='xionger, object'>标签，提供描述和关键词；提高大字标题的价值；通过语义标签增加额外的含义；使用<img>的alt属性增加描述信息，使用"替代引号。此外，还可以：使用准确的标题；创建人性化的URL，创建反应了你的目录结构的URL;为导航使用文本;如果内容具有多级深度，可以使用浏览路径记录（breadcrumb trail）;适当使用语义元素和标题。