这部分是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彩色屏幕等,可以通过如下方式进行设置。

<link rel="stylesheet" type="text/css" href="standard.css" media="all">
<link rel="stylesheet" type="text/css" href="for_print.css" media="print">
@import url(standard.css) all;
@import url(for_print.css) print;

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属性增加描述信息,使用&quot;替代引号。此外,还可以:使用准确的标题;创建人性化的URL,创建反应了你的目录结构的URL;为导航使用文本;如果内容具有多级深度,可以使用浏览路径记录(breadcrumb trail);适当使用语义元素和标题。

参考资料:

  1. 梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.

Html与CSS快速入门04-进阶应用的更多相关文章

  1. python快速入门及进阶

    python快速入门及进阶 by 小强

  2. CSS快速入门(四)

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  3. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  4. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  5. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

  6. HTML/CSS快速入门

    Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...

  7. 【干货合集】Docker快速入门与进阶

    收录待用,修改转载已取得腾讯云授权 Docker 在众多技术中,绝对是当红炸子鸡.这年头,如果你不懂一点容器,不学一些Docker,还怎么出去跟人炫耀技术? Docker 也是云计算技术中较为热门的一 ...

  8. #001 CSS快速入门讲解

    CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...

  9. CSS快速入门例子

    CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. Java 用自带dom解析器遍历叶子节点内容

    一.XML文件config.xml,内容如下: <?xml version="1.0" encoding="UTF-8" standalone=" ...

  2. java嵌套类

    java有四种嵌套类: 静态内部类,成员内部类,局部内部类,匿名内部类 1)静态内部类: (1)类的申明加上staitc关键字.一般用public修饰 (2)只能访问外部类的静态变量和静态方法.不能访 ...

  3. Android addHeaderView和setAdapter的调用顺序后报错

    在4.4之前的系统,setAdapter后再设置addHeaderView会爆 ListView想要添加headerview的话,就要通过addHeaderView这个方法,然后想要为ListView ...

  4. 第59讲:Scala中隐式转换初体验

    今天学习了下隐式转换的内容.所谓隐式转换,就是说,一个实例拥用1 2 3方法,但是当它需要4方法的时候,它没有,但是却可以通过转换成另一种类型来调用4方法,而且这种转换是自动转换不需要人为干预的,这种 ...

  5. C++ 非阻塞套接字的使用 (1)

    在维护代码的过程中,发现软件运行的CPU占用率居高不下,在4核的电脑上占用了25%的CPU.查阅资料的得知,这是可能是由于软件中出现了死循环. 经过对软件的一些测试,最终确定了死循环出现的位置——通讯 ...

  6. hdoj 1022 Train Problem I

    #include<stdio.h> int main() { int n,i,j,k; ],]; ]; while(scanf("%d %s %s",&n,in ...

  7. PCA降维

    http://blog.csdn.net/a784763307/article/details/17289317 这篇比较棒 openCV版 void PrintMatrix(CvMat *Matri ...

  8. oracle ORA-12514: TNS: no listener 解决方案

    服务端:oracle 11g 客户端: pl/sql 问题描述: 用客户端 pl/sql 连接登录的时候,提示 "ORA-12514: TNS: no listener". 在服务 ...

  9. 如何保证DBContext实例上下文唯一

    using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using S ...

  10. Android性能优化典范第一季

    2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...