Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习。
之前介绍都是静态的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属性增加描述信息,使用"替代引号。此外,还可以:使用准确的标题;创建人性化的URL,创建反应了你的目录结构的URL;为导航使用文本;如果内容具有多级深度,可以使用浏览路径记录(breadcrumb trail);适当使用语义元素和标题。
参考资料:
- 梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.
Html与CSS快速入门04-进阶应用的更多相关文章
- python快速入门及进阶
python快速入门及进阶 by 小强
- CSS快速入门(四)
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- 【干货合集】Docker快速入门与进阶
收录待用,修改转载已取得腾讯云授权 Docker 在众多技术中,绝对是当红炸子鸡.这年头,如果你不懂一点容器,不学一些Docker,还怎么出去跟人炫耀技术? Docker 也是云计算技术中较为热门的一 ...
- #001 CSS快速入门讲解
CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...
- CSS快速入门例子
CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
随机推荐
- Java 用自带dom解析器遍历叶子节点内容
一.XML文件config.xml,内容如下: <?xml version="1.0" encoding="UTF-8" standalone=" ...
- java嵌套类
java有四种嵌套类: 静态内部类,成员内部类,局部内部类,匿名内部类 1)静态内部类: (1)类的申明加上staitc关键字.一般用public修饰 (2)只能访问外部类的静态变量和静态方法.不能访 ...
- Android addHeaderView和setAdapter的调用顺序后报错
在4.4之前的系统,setAdapter后再设置addHeaderView会爆 ListView想要添加headerview的话,就要通过addHeaderView这个方法,然后想要为ListView ...
- 第59讲:Scala中隐式转换初体验
今天学习了下隐式转换的内容.所谓隐式转换,就是说,一个实例拥用1 2 3方法,但是当它需要4方法的时候,它没有,但是却可以通过转换成另一种类型来调用4方法,而且这种转换是自动转换不需要人为干预的,这种 ...
- C++ 非阻塞套接字的使用 (1)
在维护代码的过程中,发现软件运行的CPU占用率居高不下,在4核的电脑上占用了25%的CPU.查阅资料的得知,这是可能是由于软件中出现了死循环. 经过对软件的一些测试,最终确定了死循环出现的位置——通讯 ...
- hdoj 1022 Train Problem I
#include<stdio.h> int main() { int n,i,j,k; ],]; ]; while(scanf("%d %s %s",&n,in ...
- PCA降维
http://blog.csdn.net/a784763307/article/details/17289317 这篇比较棒 openCV版 void PrintMatrix(CvMat *Matri ...
- oracle ORA-12514: TNS: no listener 解决方案
服务端:oracle 11g 客户端: pl/sql 问题描述: 用客户端 pl/sql 连接登录的时候,提示 "ORA-12514: TNS: no listener". 在服务 ...
- 如何保证DBContext实例上下文唯一
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using S ...
- Android性能优化典范第一季
2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...