HTML/CCS初学的小小收获（大虾表鄙视小白）(1)

1、由于并非所有的浏览器类型及版本对CSS3、HTML5都能很好的支持，所以在JavsScript程序中需要对浏览器进行判断。以下代码是一个对大部分浏览器的判断，在代码中如需要进行浏览器的判断时可使用以下代码进行裁剪使用。

var client = function(){//rendering enginesvar engine = {            ie: 0,gecko: 0,webkit: 0,khtml: 0,opera: 0,//complete versionver: null  };//browsersvar browser = {//browsersie: 0,firefox: 0,safari: 0,konq: 0,opera: 0,chrome: 0,//specific versionver: null};//platform/device/OSvar system = {win: false,mac: false,x11: false,//mobile devicesiphone: false,ipod: false,ipad: false,ios: false,android: false,nokiaN: false,winMobile: false,//game systemswii: false,ps: false };    //detect rendering engines/browsersvar ua = navigator.userAgent;    if (window.opera){engine.ver = browser.ver = window.opera.version();engine.opera = browser.opera = parseFloat(engine.ver);} else if (/AppleWebKit\/(\S+)/.test(ua)){engine.ver = RegExp["$1"];engine.webkit = parseFloat(engine.ver);//figure out if it's Chrome or Safariif (/Chrome\/(\S+)/.test(ua)){browser.ver = RegExp["$1"];browser.chrome = parseFloat(browser.ver);} else if (/Version\/(\S+)/.test(ua)){browser.ver = RegExp["$1"];browser.safari = parseFloat(browser.ver);} else {//approximate versionvar safariVersion = 1;if (engine.webkit < 100){safariVersion = 1;} else if (engine.webkit < 312){safariVersion = 1.2;} else if (engine.webkit < 412){safariVersion = 1.3;} else {safariVersion = 2;}   browser.safari = browser.ver = safariVersion;        }} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){engine.ver = browser.ver = RegExp["$1"];engine.khtml = browser.konq = parseFloat(engine.ver);} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    engine.ver = RegExp["$1"];engine.gecko = parseFloat(engine.ver);//determine if it's Firefoxif (/Firefox\/(\S+)/.test(ua)){browser.ver = RegExp["$1"];browser.firefox = parseFloat(browser.ver);}} else if (/MSIE ([^;]+)/.test(ua)){    engine.ver = browser.ver = RegExp["$1"];engine.ie = browser.ie = parseFloat(engine.ver);}//detect browsersbrowser.ie = engine.ie;browser.opera = engine.opera;//detect platformvar p = navigator.platform;system.win = p.indexOf("Win") == 0;system.mac = p.indexOf("Mac") == 0;system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);//detect windows operating systemsif (system.win){if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){if (RegExp["$1"] == "NT"){switch(RegExp["$2"]){case "5.0":system.win = "2000";break;case "5.1":system.win = "XP";break;case "6.0":system.win = "Vista";break;case "6.1":system.win = "7";break;default:system.win = "NT";break;                }                            } else if (RegExp["$1"] == "9x"){system.win = "ME";} else {system.win = RegExp["$1"];}}}//mobile devicessystem.iphone = ua.indexOf("iPhone") > -1;system.ipod = ua.indexOf("iPod") > -1;system.ipad = ua.indexOf("iPad") > -1;system.nokiaN = ua.indexOf("NokiaN") > -1;//windows mobileif (system.win == "CE"){system.winMobile = system.win;} else if (system.win == "Ph"){if(/Windows Phone OS (\d+.\d+)/.test(ua)){;system.win = "Phone";system.winMobile = parseFloat(RegExp["$1"]);}}//determine iOS versionif (system.mac && ua.indexOf("Mobile") > -1){if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){system.ios = parseFloat(RegExp.$1.replace("_", "."));} else {system.ios = 2;  //can't really detect - so guess
        }}//determine Android versionif (/Android (\d+\.\d+)/.test(ua)){system.android = parseFloat(RegExp.$1);}//gaming systemssystem.wii = ua.indexOf("Wii") > -1;system.ps = /playstation/i.test(ua);//return itreturn {engine:     engine,browser:    browser,system:     system        };}();

2、HTML中即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

3、id VS class

1)class是设置标签的类,id是设置标签的标识。class属性用于指定元素属于何种样式的类,id属性用于定义一个元素的独特的样式。id是一个标签，用于区分不同的结构和内容，class是一个样式，可以套在任何结构和内容上。
2)概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。
至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时,一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
3)Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。

4、XHTML与 HTML 相比最重要的区别：

文档结构

•XHTML DOCTYPE 是强制性的

•<html> 中的 XML namespace 属性是强制性的

•<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

•XHTML 元素必须正确嵌套

•XHTML 元素必须始终关闭

•XHTML 元素必须小写

•XHTML 文档必须有一个根元素

属性语法

•XHTML 属性必须使用小写

•XHTML 属性值必须用引号包围

•XHTML 属性最小化也是禁止的

5、CSS:

3.1 优先级内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

3.2 空格和大小写包含空格与否不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

CSS 未完待续...

转载于:https://www.cnblogs.com/zitqin/p/3282979.html

HTML/CCS初学的小小收获（大虾表鄙视小白）(1)相关推荐

哈哈日语初学必备动词活用表
动词活用表初学必备词态五段活用一段活用变格活用上一段下一段カ变动词サ变动词词例書く主要接续起きる主要接续食べる主要接续来る主要接续する主 ...
初学后端，如何做好表结构设计？
前言最近有不少前端和测试转Go的朋友在交流群里聊:如何做好表结构设计? 大家关心的问题阳哥必须整理出来,希望对大家有帮助. 先说结论这篇文章介绍了设计数据库表结构应该考虑的4个方面,还有优雅设计的 ...
CCS初学调试以及RTDX
1.DSP/BIOS应用程序调试(2009.10.20) 在CCS2.0 的emulator写dsp/bios 的程序,编译链接无错误,而点击LOAD Program下载xxx.out完成时弹出如下对 ...
一个小白如何创建MYSQL数据表_MySQL小白扫盲（二）--建表、添加、查询
1.SELECT子句字句名称使用目的 select 确定结果集中应该包含哪些列 from 指明所要提取数据的表,以及这些表示如何连接的 where 过滤掉不需要的数据 group by 用于 ...
线性表（小白，如有错误还望海涵）
#include<iostream> using namespace std; #define MAXSIZE 100 #define ADDSIZE 10 #define OK 1 #d ...
js打印直角三角形，九九乘法表（小白进）各种疑难杂题持续更新...
正直角三角形第一个循环i控制多少行第二个循环j控制多少列 for (var i = 0; i < 5; i++) { //行for (var j = 0; j <= i; j++) { ...
网页设计实现读书信息反馈表适合小白入门安排
<!DOCTYPE html > <html lang="en"> <head> <head><meta charset=&q ...
建立六轴机器人D-H表，小白向
建立六轴机器人D-H表简介准备工作关于 D-H表建立D-H表并导入Matlab 1.Z轴: 2.建立相邻连杆的坐标轴,并建立D-H表 3.验证D-H表以及坐标系建立是否正确: 4.运行计算后, ...
php获取sqlserver时间函数,php 操作 sqlserver 数据库关于时间的小小见解
php 操作 sqlserver 数据库关于时间的小小见解上周五,要做一个php 同时对mysql数据库和sqlserver数据库的连接东东以前一直在用mysql对sqlserver不是很熟悉, ...
的技术难点_马铃薯收获机研究的技术难点与使用注意事项
马铃薯收获机研究的技术难点与使用注意事项基金项目:国家重点研发计划课题"典型土壤薯类挖掘仿生减阻技术研究"(2016YFD0701601)子课题"东北粘重壤土高性能挖掘 ...

HTML/CCS初学的小小收获（大虾表鄙视小白）(1)

HTML/CCS初学的小小收获（大虾表鄙视小白）(1)相关推荐

最新文章

热门文章