Fundamental of HTML5 and CSS

Posted on Edited on In Disqus:

大菜鸭推荐了几本前端学习书籍pdf给我，这本《HTML5与CSS3基础教程（第8版）》是我看的第一本。虽然大三上的时候选修了移动Web应用开发这门课，当时觉得这门课性价比真高，除了HTML/CSS/JavaScript三件套，还学了Java, JSP, MySQL等等，但都只是涉猎，并没有很全面地学。虽然我这样看书可能也不见得能学得多系统，不过一步步来吧。

网页的构造块

  1. 网页包含的内容
  • 文本内容(text content): 纯文字;
  • 对其他文件的引用(references to other files): 由引用加载图像音视频、引用CSS层叠样式表控制页面显示效果、引用javascript为页面添加行为;
  • 标记(markup): 对文本内容进行描述并确保引用正确工作.
  1. 网页等成分都由纯文本构成，用纯文本格式可以跨平台在浏览器上显示。
  2. HTML思想：HTML通过标签来描述元素内容，而不关心内容的样式。
  3. 元素：开始标签+内容+结束标签。标签中可能含有属性+值。
    属性的值可能是无限制的，可能是需要枚举的，还可能是boolean的。一旦出现布尔属性，则该属性为真。例如required，或写作required="required".
  4. URL: uniform resource locator，统一资源定位符包含了文件存储位置和浏览器应如何处理它的信息。
    url-def
  5. 语义化HTML semantics
  • 使用最恰当的HTML元素进行标记。当然HTML5没有给所有可能的内容都配备对应元素，在100种元素中通常只会用到少量核心元素。
  • 语义化HTML的优点：
    (1) 提升可访问性和互操作性，方便无障碍访问；
    (2) 提升搜索引擎优化SEO效果；
    (3) 使维护代码和添加样式更容易；
    (4) 代码更少、页面加载更快。

编写网页

  1. HTML页面分为两部分，head和body。
    DOCTYPE出现在每个页面开头，告诉浏览器本页面是HTML5.
    head：指明页面标题title，提供搜索引擎所需页面本身的信息、加载样式表、加载javascript（不过在body结束之前加载JS会更好）。除了title，其余head中的信息对于浏览者都是不可见的。
    body：包含浏览者可见的正文、图像、音视频、表单。
  2. title元素
    每个HTML页面都必须有title元素，简要概括文档内容，提升搜索引擎带来的流量。
  3. 分级标题h1~h6
    对任何页面来说，分级标题可以说是最重要的元素，因为它们与搜索关键词匹配得越多，排序越靠前。
    分级标题通常都是粗体且上下行距会略大。这不是HTML带来的效果，这是浏览器默认的CSS制造的样式。
  4. 创建页眉header
    header元素标记一块含介绍性、导航性内容的区域。通常含有标题、标识、导航、搜索框等。若使用h1h6可以满足要求，则不必引入header将它们包起来。Header不能代替h1h6，他们各自有语义目的。
  5. 标记导航nav
    HTML5引入nav来把一组重要链接标记为导航。
  6. 标记页面主要区域main
    HTML5引入main标签来标记文档的主要区域。
  7. 标记文章article
    HTML5引入article表示页面中独立的容器，可嵌套使用。内容可包含任意数量的元素，如段落、列表、音视频、图像等。
  8. 定义区块section
    HTML5引入section代表一组具有相似主题的内容区块。Section虽说是通用的区域块，但不能与div混用，section指出了特定主题的区域，而div没有这样的语义。如果只是因为要添加样式而要对特定内容加个容器，直接用div.
  9. 指定附注栏aside
    HTML5引入aside表明页面中一组和主题内容相关性不是很强的部分，如引述、侧栏、友情链接、广告、商品列表等。若aside嵌入到正文中，则应当与这部分内容密切相关。
  10. 创建页脚footer
    HTML5引入footer表示所在区块的附录、索引、版权等信息。
  11. 通用容器div
    不带有任何语义的块级元素，只是为了方便添加样式或javascript效果。同前面的header, footer, main, article, section, aside, nav, h1~h6一样，默认都是另起一行显示。
  12. role属性（ARIA改善可访问性）
    使用role属性，为元素添加landmark role，帮助用户识别页面区域。ARIA并不会改变任何样式，只用于提升辅助设备上的浏览体验。
  • role=”banner”对应放在页面级header元素中；
  • role=”navigation”对应nav元素或其他包含导航型链接群的容器；
  • role=”main”对应main元素或其他表示主体内容的元素；
  • role=”complementary”对应aside；
  • role=”contentinfo”对应footer。
  1. class/id属性
    通常为了添加样式会在html元素中添加class=”xx-xxxx”””属性，每个元素可以有多个class。
    而id则是用于为元素添加javascript效果的，每个元素至多有一个id，且id在该页面中唯一。
  2. title属性
    使用title也可以提升无障碍访问体验，title中的内容可以朗读出来，或鼠标悬停在该元素时显示的提示。注意和前面的title元素区分！

文本编辑元素

  1. 段落p
    HTML会忽略文本编辑器中的回车与空格，故另起一段文字应用p标签包裹。
  2. 细则small
    行内文本的一小块，表示免责声明、注意事项、注解等短语。这并不意味着small包裹的内容就一定是小号字。
  3. 强调重要性strong/em
    strong标记重要文本（以粗体显示），em着重强调一部分内容（以斜体显示）。
    em是表示强调的唯一元素，strong表示重要程度，可嵌套提升重要性。注意HTML5强调标签的语义而非表现样式，HTML5中的粗体标签b和斜体标签i只是顺应样式上的惯例。（如书名用斜体，而不能用em实现这种斜体的效果）
  4. 图片figure+figcaption
    一个fugure中不论有多少个<img src=”xxx” />，都只能在开头或结尾出现一个figcaption。
1
2
3
4
<figure> 
  <figcaption><b>xxx<b></figcaption> 
  <img src="xx" width="180" height="143" alt="this is what" /> 
</figure>
  1. 引用cite
1
<cite>引用的参考源</cite>
  1. 引述文本blockquote/q
    blockquote是块级引述，可带有cite属性给出url链接；
    q是行内引述，也可带有cite, lang等属性。
    cite与blockquote/q的区别是，cite表明的是引言的来源，而blockquote/q是本身引用的内容片段。
  2. 指定时间time（HTML5新增）
    time中包含的内容会显示在页面上，若没有datetime属性，则必须是机器可读的格式如YYYY-MM-DDThh:mm:ss；若前面附上datetime=” YYYY-MM-DDThh:mm:ss”，则后面的内容就不必严格遵守格式。
  3. 解释缩写词abbr
    在abbr标签的title属性中写出后面缩写词的全称，方便访问者理解。其实针对触摸屏的用户，直接使用括号解释缩写词更方便。
  4. 定义术语dfn
    包围要定义的专用术语，dfn元素必须和它的定义内容在一起。
  5. 上下标sup/sub
    sup通常用于为脚注标号，sup元素位置会稍高导致扰乱行间距。Sub下标类似。
  6. 作者联系信息address
    用于定义与页面或其中某一部分有关的相关人士的联系方式。
  7. 标记编辑或不再正确的文本ins/del/s
    标记添加内容的ins元素和标记已删除内容的del元素，它俩既可以包围块级也可以包围行内内容。而s则只可以标记行内的已删除内容。
  8. 标记代码code
    在行内插入一段代码，代码中<和>符号需要用&lt和&gt代替。若想单独成段且保持每行一段代码，需要使用pre元素保持原有代码格式。
  9. 预格式化pre
    保持文本编辑器中的文本的排版，保留空格、回车。
  10. 突出显示文本mark
    HTML5引入mark提醒读者对特定文本段的注意。
  11. 换行br
    强制文字换行。确保br是最后的选择，例如控制段落间距时用margin去调而不是添加几个br。因为br元素将表现样式带到了HTML中，应该尽量将呈现样式的任务交给CSS。
  12. span
    无语义（如同div），包围行内的字词、短语，非常适合给行内一小块内容添加样式或补充一些属性如class, dir, id, lang, title等。无语义元素应当作为最后的选择。

图像

  1. 格式与下载速度
  • jpeg: 有损的格式，不支持透明。合理压缩使图片体积变小，加载速度快，而压缩后丢失的信息无法还原。照片和插图通常选择jpeg方便加载。
  • png: 无损的格式，支持透明（分为基本透明、alpha透明两档）。也带有压缩算法，但文件尺寸依然较大。
  • gif: 无损格式，只支持基本透明。压缩算法不如png，文件更大。
  • webp: 既支持有损压缩，也支持无损压缩，产生文件远小于jpeg和png，同时支持alpha透明。但浏览器支持较少。
  1. 颜色
    Gif, png-8支持256色。
    Jpeg, png-24, png-32支持1600万+。
  2. 大小尺寸
    网页上的图片应控制在几百像素宽，控制好尺寸才能减少加载时间。
    SVG可缩放矢量图形不论如何缩放都不会影响显示品质，不论页面中显示的大小如何，文件体积都是固定的。
  3. 透明度
    索引色透明是binary value，一个像素要么透明要么不透明；(gif)
    Alpha透明是渐变的，可以控制透明程度，从而边缘更平滑、锯齿较少。互联网上大多数alpha透明的图片都是png-32的，虽然png-8也支持alpha透明。
  4. 动画
    使用图像表现动画需要保存为gif。
  5. 插入图像img
    <img src=”xxx” alt=”xxx” width=”300” height=”350”>。
    其中alt可以在图像无法显示的时候作为文字说明显示在对应位置，而且可以提供无障碍访问。定义宽度和高度可以帮助浏览器预留出图像的位置，是图像更快地显示出来。默认单位是像素，属性这里的宽度和高度不一定要反映图片真实的尺寸，可以适当缩放，这在retina屏幕上会有更锐利的视觉效果。但注意加载速度仍不变，毕竟还是同一个图像文件，要想加速还得用PS修一下图真正改变尺寸。
  6. 网站图标favicon
    16*16的favicion.ico文件，放在网站的根目录，浏览器会显示在标签栏中。

链接

  1. 链接的组成
    由目标destination和标签label组成。目标文件需要有正确的路径。
  2. 行内链接元素a
    <a href=”xxx.html”>label content</a>。
    对于指向外部其他网站的链接，推荐加入属性rel=”external”。Title属性也是作为一种鼠标悬停提示。
  3. 块级链接元素a
    即在a之间的标签加入p等块级元素，甚至可以包含h1, img等。不过需要注意标签内容还是尽量少比较好。
  4. a的target属性
    控制链接在新窗口或标签页打开，target=”window name”，但不推荐使用，因为在浏览器中有这样的选项，所以完全可以将这种操作权交给用户。
  5. 用锚跳转到网页特定区域
    <a href=”xxx.html#anchor-name”>，其中anchor-name对应页面文件xxx.html中的某元素的id，若直接href=”#anchor-name”的话必须是当前页面。
  6. 其他链接
    如文件：href=”https://www.xxx.com/bbb.txt”
    邮件：href=”mailto: sb@xxx.com”
    电话：href=tel:+8612345678900。

CSS构造块

  1. 样式表定义了网页外观的规则。每一条规则由选择器selector和声明块declaration block组成。
  2. 注释
    Html中是<!-- blablabla-->，CSS是/*Blablabla*/。
  3. 继承inheritance
    根据元素的包含关系（或者画出树形结构）确定谁是后代谁是祖先。
  4. 样式层叠
    当多条规则定义同一元素的同一属性，会根据以下方式来确定样式：
  • 特殊性（specificity，越具体规则性越强，例如id选择器就大于继承来的样式）；
  • 顺序（order，晚出现的优先级更高）；
  • 重要性（在样式声明块末尾加上!important强调，不推荐）。
  1. 样式属性值
  • Inherit：显示地指出该元素继承祖先的样式。
  • 预定义的值：如none, left, right，不带引号。
  • 长度：必须带有单位。em表示当前字号长度，受font-size设置的影响，这属于响应式web设计；px像素，很难准确度量像素的实际大小；百分数则是相对于父元素的。
  • URL：指定另一个文件（如图像）的url，如·background-image: url(file.png)。
  • CSS颜色：最常用的是hex十六进制#5900FF；还有rgb(r, g, b)。CSS3引入了RGBA（引入alpha透明rgba(r, g, b, a)，alpha=0为透明、1为不透明）、HSL（色相hue、饱和度saturation、亮度lightness）、HSLA（引入了alpha）

操作样式表

  1. 外部样式表
    这是最佳选择，让各个页面有类似的样式设置，不会出现很多重复代码。同时使用外部样式表可以充分利用浏览器的缓存功能，不需要重复请求css文件。
    在html的head中使用<link rel="stylesheet" type="text/css" href="style.css">，在实践中最好将css放在单独子目录中。
  2. 嵌入样式表
    在html的head包围中，加入<style> img{border: 2px solid red;} </style>这样的样式，只会作用于这个页面。
  3. 内联样式
    将style作为各个元素的属性进行设置，它严重违背了html的宗旨（将内容和表现分离）。要想改变一点点样式就需要大量的检查，很麻烦。当然可以作为简单的测试，合适后搬移到外部css文件中。
  4. 指定媒体
    在link的属性中加上media=”screen”或“print”来规定什么情况下使用该样式。
    或者直接在css文件中的对应选择器之前加上一个大包围
1
2
3
@media print { 
  xxxx 
}

定义选择器

  1. 编写CSS的一个重要目标是使选择器尽可能简单，仅保持必要的特殊性。应充分利用样式的层叠特性，让后代继承祖先的样式。善于利用通用设计元素，便于共享样式。
  2. 基本选择器
  • 标签选择器：直接用元素名称。P{font-size: 14px;}
  • ID选择器：#idname. 由于id的唯一性使id选择器的样式不能在其他元素上复用，且它的特殊性很高，在覆盖样式时不容易控制。Id属性应尽量只用于javascript。
  • 类选择器：.classname;
  1. 复合选择器
  • 派生选择器：祖先后加空格，再接后代的选择器。p span{}选择p的所有子孙元素中的span元素。
  • 子女选择器>：只能选出直接后代，父元素后加>接子元素。p>span{}选择p元素所有直系子女中的span元素。
  • 组合选择器：直接并在一起写就可以了，表示且&&。p#start{}，选择id为start的p元素。
  • 群组选择器,：用逗号隔开且最好换行分别列出来，表示或||。em, .even{}会选择em或类名为even的元素.
  • 相邻兄弟选择器+：用+连接，紧跟的同辈元素符合要求才会选中。h1+p{}当h1元素后紧跟的兄弟元素是p才会被选中。
  • 后续兄弟选择器~：用连接，所有后续同辈元素都会被选中。`h1p{}`。
  • 否定选择器not：p:not(#start)选择p元素中id不为start的。注意这里的冒号含义是“p元素中”，这与后面的单个孩子选择器中的冒号有区别。
  1. 属性选择器
  • img[alt]{}：选择具有属性alt的img元素。
  • img[alt=”value”]：选择属性alt的值为value的元素。
  • img[alt^=”val”]：选择属性alt的值以val开头的元素。
  • img[alt$=”lue”]：选择属性alt的值以lue结尾的元素。
  • img[alt*=”5-”]：选择属性alt的值包含字符串5-的元素。（CSS3新增）
  • img[alt~=”val”]：选择属性alt的值完全匹配单词val的元素，单词指以空格分开。
  1. 单个孩子选择器
    伪类中所有的冒号都不表示从属关系，而是表示“作为…身份”。
  • p:first-child{}：表示作为第一个孩子的p元素，即p的双亲的第一个孩子为p时选中。
  • p:last-child{}：表示作为最后一个孩子的p元素，即p的双亲的最后一个孩子为p时选中。
  • p:nth-child(5){}：表示作为第五个孩子的p元素，即p的双亲的第五个孩子为p时选中。
  • p:nth-child(even/odd){}：表示作为偶数/奇数位孩子的p元素，即p的双亲的偶数/奇数位孩子为p时选中。
  • p:nth-child(3n+1){}：表示作为第1、4、7…个孩子的p元素，即p的双亲的3n+1位孩子为p时选中。
  1. 子女类型选择器
    与单个孩子选择器不同在于，参与计数的孩子只算上规定类型的元素。
  • p:first-of-type{}：表示作为第一个p元素的p元素，即选中p的双亲的第一个p元素。
  • p:last-of-type{}：表示作为最后一个p元素的p元素，即选中p的双亲的最后一个p元素。
  • nth-of-type(5){}：表示作为第五个p元素的p元素。
  • nth-of-type(even/odd/3n+1)：类似。
  1. 伪元素选择器
    在CSS3中将单冒号改为双冒号，这是为了与伪类区别开来（不过IE8不支持）。伪元素是在html中并不存在的元素，即没有对应标签，它们只是元素的一部分。
  • p:first-letter：选择p元素的第一个字母。
  • p:first-line：选择p元素的第一行。
  • p:after{content:”…”}：在p元素内容后面加上…。
  • p:before{content:”---”}：在p元素内容前面加上—。
  1. 伪类选择器
    伪类的意思是不必为了应用于一组元素特地创建一个类来标记它们，伪类相当于内置类。例如根据连接的状态设置样式，记住设置顺序一定是LVFHA。
  • a:link{}：没有访问过的链接。
  • a:visited{}：已访问过的链接。
  • a:focus{}：通过键盘选择的、即将访问的链接。
  • a:hover{}：光标指向链接时。
  • a:active{}：光标点下时的链接。

文本样式

  1. 字体
    font-family：可以多设置几个备选。
  2. 斜体
    font-style：italic; 取消则用normal。
  3. 粗体
    font-weight：bold; 取消则用normal。
  4. 字体大小
    font-size：可用px, em, %, rem。尽量使用em这样的相对单位，便于适应各种尺寸的显示设备。
  • 关于px：使用像素会定死字体大小，浏览器内置的字体调节都不行。
  • 关于em：根据父元素的字体大小按比例缩放。先在body元素上加一个基准{ font-size: 100%; }，（通常是系统默认的是16px，各个浏览器都可以由用户自行设置），利用font-size的继承性传递到各个子元素。接下来在各个子元素中再计算一个比例，你要放大到2倍就用2em，缩小到0.8就0.8em。通常设计网页时，使用em比px好，原因是em是相对单位，有更大的灵活性，而且对定义页面中特定的设计部件（边距、空白）的尺寸有帮助。
  • 关于rem：根据root根元素（即html元素）的字体大小按比例缩放，在CSS3引入。
  1. 行高line-height
    每行之间的距离，通常直接用数字设置行高，解析时会与字体大小相乘得出行高。line-height: n; 或者使用em，百分数。
  2. 统一设置font
    使用font简写属性同时设置体样式、粗细、变体、大小、行高和字体系列，其中必须显示声明字体大小和字体系列。行高如果出现只能写在字体大小后接横杠加行高。
  3. 文本颜色color
    使用#rrggbb（若为重复值可简写为#rgb），rgb(r, g, b)，rgb(r%, g%, b%)，hsl(h, s, l)，rgba(r, g, b, a)，hsla(h, s, l, a)。
  4. 文本背景background
    其实background也是简记法，包括了
    background-color：颜色。
    background-image: url(image.png)
    background-repeat: repeat/repeat-x/repeat-y/no-repeat
    background-attachment: fixed表示随滚动固定在浏览器上
    background-position: x y表示距离左上角的距离或百分数，也可用关键字。
  5. 单词间距
    word-spacing：接带单位数字em, px，控制单词之间距离。
  6. 字母间距
    letter-spacing：接带单位数字em, px，控制字母之间距离。
  7. 缩进
    text-indent：接带单位数字em, px，只能对块级元素（或强制display:block/inline-block的元素）预留缩进。
  8. 对齐
    text-align：后接left左对齐、right右对齐、center居中、justify文本两端对齐。同样只对块级元素起作用。
  9. 指定大小写
    text-transform：capitalize首字母大写、uppercase、lowercase、none取消继承值。
  10. 迷你大写
    font-variant: small-caps可让大写字母与小写字母一样大。
  11. 装饰线
    text-decoration：underline下划线、overline上划线、line-through删除线。
  12. 保留空白回车
    white-space：pre显示原文本中空格/回车、nowrap取消自动换行、normal默认。再次强调尽量少用html中的br元素，html应尽量少插手样式设置。

用CSS布局

  1. 布局分为两种
  • 固定布局fixed：每个元素都是固定宽度，不论任何设备显示都是固定的。
  • 响应式页面responsive（fluid, liquid）：使用百分数定义宽度，会随着环境变化、调整尺寸
  1. 为不支持html5的浏览器添加样式的两种方法
  • 在每个页面的head元素中加入一段javascript（通常JS最好放在页面结束的位置，但这个必须放在最开始才起作用），这是html5shiv剃刀，防止IE8-浏览器忽略原声不支持元素的CSS.
1
2
3
4
5
6
7
8
<head>
  <meta charset="utf-8" />
  <title>Le Journal</title>
  <link rel="stylesheet" href="css/lejournal.css" />
  <!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
  • HTML5剃刀
    将html5shiv的文件放到网站服务器上并在head之间导入该js脚本。
1
2
3
<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->

还需要注意的是由于大多数浏览器对无法识别的元素都当作行内元素处理，所以还需要加入一句CSS强制以块级显示html5元素

1
2
3
article, aside, figcaption, figure, footer, header, main, nav, section {
  display: block;
}

3. 对默认样式进行重置或标准化使得在不同浏览器中外观相似

  1. 盒模型
  • 默认处理方式
    CSS中设置的宽度只是padding里面的内容的宽度，真正显示的宽度还需要加上padding和边框的大小。
  • border-box方式
    这种方式更直观，CSS中设置的参数就是显示的参数，包含除了margin以外的内容+padding+border。需要在元素中显示指明
1
2
3
box-sizing: border-box;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;

后二者是为了在旧的android和ios和firefox上也能识别。
5. 控制元素显示类型和可见性display
display: block; 可以将行内元素设为块级显示
display: inline; 将块级元素设为行内显示；
display: inline-block; 设为行内显示但是又可以用到块级元素的样式如width, height, margin
display: none; 直接完全消失，元素原本所处的位置也不会留出来。
可见性还可以用visibility: hidden控制，这种情况下元素还是会在文档流中留有位置。
6. 元素宽高
weight: w; 设置元素内容的宽度，w可以为带单位px, em的长度，也可是父元素的百分比。
height: h; 设置元素内容到底高度，h可以为带单位px, em的长度，也可是父元素的百分比。
若没有显示设置宽高，默认都是auto。以width为例，auto值就是包含块的宽度减去元素的padding、border和margin计算出来的。而包含块的宽度指的是父元素留出来的宽度。
若手动设置了width同时将左右margin都设为auto，相当于左右外边距将父元素留出来的宽度平分，则元素会居中。
7. padding
padding: n; 会将设置的值应用于四个方向；
padding: n1 n2; 将n1用于top&bottom，n2用于left&right。
padding: n1 n2 n3; 将n1用于top，n2用于left&right，n3用于bottom。
padding: n1 n2 n3 n4; 按照TRouBLe的顺时针顺序用于上右下左。
值的单位可以是px, em, rem或百分比。
8. border
border: 宽度 样式 颜色;
样式有可以是 none、dotted（点线）、dashed（虚线）、solid （实线）、double（双线）、groove （槽线）、ridge（脊线）、inset（凹边）或 outset（凸边）。
可以指定某个方向的border进行设置，如border-top这样。
9. margin
相邻元素的margin值不会叠加，只取较大者。
使用margin: 0 auto;的方式实现居中，必须依赖于width手动设置好固定值。
em单位用于padding和margin时，它的值是相对于元素的字体大小的。
10. 浮动元素float
可以使得设置了宽度的元素浮在第二层，其他第一层元素的内容环绕着它显示，注意只是内容环绕显示，对于height, width都是按第一层文档流计算的。
若不希望某第一层元素的内容环绕在其他浮动元素周围，可强制使用clear: left/right/both;强行下挪直到该元素左/右/两边都没有浮动元素之后才显示。但是这样做也有问题，如果浮动元素的父元素中包含的全部都是浮动元素，那这个父元素的高度是0，它设置的背景色之类的样式就无法显示了。解决办法是加入clearfix类，给浮动元素的父元素添加class=”clearfix”即可。

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

还可以用overflow创建自清除浮动元素，对浮动元素的父元素使用overflow: hidden;
11. 相对定位
position: relative;表示相较于原本的自然位置的偏移。具体偏移量需要指定。
top: 6px; 另有right、bottom、left，后接带单位的数字。
12. 绝对定位
指定它们相对于 body或最近的已定位祖先元素，绝对定位的元素会脱离正常文档流，但是又和浮动元素不一样，因为别的元素内容不会感知到它而环绕着显示，重叠了就是重叠了。
对于重叠的元素，可以使用z-index指定叠放顺序，值越大越高。
此外还有一种position: fixed;可以让元素随着滚动而固定不动，但它在移动设备上效果不佳，一般不用。
13. overflow处理元素溢出盒子
overflow: visible;直接显示出来；hidden隐藏掉；scroll不管用不用都会强行加上滚动条；auto仅在需要时加上滚动条。
14. 垂直对齐行内元素
vertical-align: middle;-父元素中央；baseline-父元素基准线；sub-父元素下标；super-父元素上标；text-top-顶部对齐父元素；text-bottom-底部对齐父元素；top-对齐当前行中最高元素顶部；bottom-对齐当前行中最低元素的底部。
15. 鼠标形状
cursor: default箭头、pointer手指、crosshair十字架、move挪动框、wait沙漏、help带问号、text输入的I字形、process箭头带沙漏。

响应式web设计

  1. 响应式网页基于三点
  • 图像和媒体尺寸均以百分比定义；
  • 基于网格的流式布局，所有width都以百分比定义
  • 媒体查询，可根据设备进行调整适配。
  1. 可自动伸缩的图像
  • 在HTML中的img标签必须省略width和height；
  • 在CSS中为该图像加上max-width: 100%;样式，使图像缩放的可用空间是由其父元素建立的内容区域（除去padding的）。
  • width: 100%;也可以缩放，但是它有可能会因为超过图像本身的宽度而强行填充容器，比较难看。
  1. 弹性布局网络
    创建弹性布局需要使用百分数宽度，并将它们应用于页面里的主要区域。元素的百分数宽度基于其父元素（即包含该元素的容器）提供的可用空间。
    设置width: p%;形成弹性宽度。可结合max-width: 1000px;来限制最大宽度。可以使用box-sizing: border-box;来限定盒模型计算方式，直观很多。
  2. 媒体查询media query
  • 指向外部样式表的链接
    <link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />
    其中logic值是可选的，可为only或not；
    type是媒体类型，如screen, print；
    (feature: value)组合是可选的，一定要用括号括起来。
    例如样式中插入一段针对480px屏幕的外部css
1
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="styles-480.css" />
  • 位于样式表中的媒体查询：
1
2
3
@media logic type and (feature: value) {
  /* 目标 CSS 样式规则写在这里  */
}

例如

1
2
3
4
5
6
@media only screen and (min-width: 480px) {
  p {
    color: red;
    font-weight: bold;
  }
}

5. 组合可伸缩图像、弹性布局、媒体查询

  • 在html中添加<meta name= "viewport" content="width=device-width, initial-scale=1"/>
  • 遵循移动优先，先提供基本样式，再根据媒体查询为不同尺寸的屏幕定义样式。
  • 逐步完善布局，使用媒体查询为页面中的每个断点（breakpoint，内容需作适当调整的宽度临界值）定义样式。注意为其中的元素使用百分比宽度。
  • 测试响应式页面可以多缩放浏览器窗口。http://lab.maltewassermann.com/viewport-resizer/
  • 多倍屏可能也需要使用媒体查询，例如使用更锐丽的sprite图：
1
2
3
4
5
6
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio:1.25), (min-resolution: 120dpi) {
  .your-class {
     background-image:url(sprite-2x.png);
     background-size: 200px 150px;
  }
}
  1. 针对无法媒体查询的处理
    IE8以前都无法使用媒体查询，所以可以对低版本IE新建一个CSS，把媒体查询相关语句去掉，在html的head标签之间加入：
1
2
3
4
5
6
<!--[if gt IE 8]><!-->
  <link rel="stylesheet" href="css/styles.css" />
<!--<![endif]-->
<!--[if lt IE 9]>
  <link rel="stylesheet" href="css/old-ie.css" />
<![endif]-->

或者为低版本IE使用特殊的js，这样IE就能理解min-width了

1
2
3
<!--[if lt IE 9]>
  <script src="js/respond.min.js"> </script>
<![endif]-->

使用Web字体

  1. 有点杂，略过。
  2. 使用Google fonts
    (1) 在google fonts中找到喜欢的字体，复制<link href="http://fonts.googleapis.com/css?family=Lato:300|Open+Sans:700" rel="stylesheet" />到head之间。
    (2) 在CSS中直接可以使用font-family了。

使用CSS3进行增强

  1. 渐进增强
    强调创建所有用户都能访问（无论使用什么样的 Web 浏览器）的基本层面的内容和功能，同时为更强大的浏览器提供增强的体验。这意味着网站在不同 Web 浏览器中的外观和行为不一样是完全可以接受的，只要内容是可访问的。
  2. polyfill
    polyfill用于填补旧浏览器与新的Web技术之间的差异。polyfill通常使用JavaScript 实现，它可以为较弱的浏览器提供一定程度的对HTML5和CSS3的API和属性的支持，同时，当浏览器本身就具有相应的能力时，会不动声色地退而使用官方的支持。关于IE，Jason Johnston的CSS3 PIE是一种最为常见的polyfill.
  3. 厂商前缀
    每个主流浏览器都有其自身的前缀。使用时将前缀放在 CSS 属性名的前面，我们一般只需要-webkit 前缀。
    -webkit- （Webkit/Safari/ 旧版本的 Chrome）
    -moz- （Firefox）
    -ms- （Internet Explorer）
    -o- （Opera）
  4. 创建圆角border-radius
    border-radius: 10px 20px 0 30px;
    /* 将左上方圆角半径设为10px，右上方圆角半径设为20px，右下方圆角半径设为0，左下方圆角半径设为30px */
    border-radius: x / y;为椭圆形圆角。
    同 border 、 margin 和 padding 属性一样，border-radius 属性也有长短两种形式的语法。只有当你想在旧版本的 Android、Mobile Safari 和 Safari 浏览器中显示相应效果的时候才使用 -webkit 前缀。
    为了防止背景透过圆角，在最后加上background-clip: padding-box;
  5. 文本阴影text-shadow
    text-shadow: x-offset y-offset blur-radius color;
    若想为同一个元素加入多个阴影样式，可以用逗号分隔，继续输入。
    text-shadow: 2px 2px white，6px 6px #aaa;
  6. 元素阴影box-shadow
    -webkit-box-shadow: 2px 2px 3px 5px #333 inset;
    box-shadow属性接受六个值：带长度单位的 x-offset 和 y-offset 、可选的带长度单位的 blur-radius 、可选的 inset 关键字(将阴影显示在内部)、可选的带长度单位的 spread 值及 color 值。如果不指定 blur-radius 和 spread 的值，则设为 0。为兼容旧版 Android、Mobile Safari和Safari浏 览器，使用-webkit-box-shadow。
  7. 颜色+图片混合背景（CSS3引入）
1
2
3
4
background-color: blue;（备用背景色）
background-image: url(stars.png); 
background-position: 0 -150px; （对于每一个url都应该有一个pos，成对的x-offset和y-offset）
background-repeat: repeat-x/repeat-y/no-repeat;
  1. 渐变背景（CSS3引入）
    线性渐变background: linear-gradient(方向/角度值，指定颜色)
    如background: linear-gradient(to top left, aqua, navy);
    形状渐变background: radial-gradient(形状 尺寸 开始位置, 指定颜色)
    如background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red);
  2. 设置不透明度
    opacity: o; 其中o越大，越不透明。
  3. 生成内容generated content
    使用:before和:after伪元素，与content属性结合使用，可生成CSS内容。生成内容可以添加符号、 创建用于添加样式的空内容元素
    如为链接<a href="victoria.html" class="more"> Read More</a>添加后面的箭头，可用
1
2
3
.more:after {
   content: " »";
 }
  1. Spirte拼合图像
    将多个图像拼合到一张图里，再使用background-position来定位找到图片。
    例如为每一个文件链接前加上文件类型的图标。
1
2
<li><a href="expenses.xls" class="icon"> Business expenses</a></li>
<li><a href="user-manual.pdf" class="icon">User Manual</a></li>

在CSS中的icon类，使用before伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.icon:before {
  background-image: url(sprite.png);
  content: " ";
  display: block;
  height: 16px; /* 图标高度 */
  position: absolute;
  width: 16px; /* 图标宽度 */
}
a[href$=".xls"]:before {
  background-position: -17px 0;
}
a[href$=".docx"]:before {
  background-position: -34px 0;
}

列表

  1. 有序列表
1
2
3
<ol>
   <li></li>
</ol>
  • 有序列表的每一个list item左边都会有标号，可以用CSS控制标号样式。
    list-style-type: decimal（数字123）、upper-alpha（大写字母ABC）、lower-alpha（小写字母abc）、upper-roman（大写罗马字母I II III IV）、lower-roman（i ii iii iv）。也可以使用后面无序列表的标记，但这样ol标签的语义就被违背了。
  • 正确的列表嵌套次序为 I（罗马数字）、A、1、a（此后交替使用 1 和 a 编号方案）
  • 可以在html中为ul标签添加start=”2”属性强制从2开始递增。或者在某个li标签中添加value=”5”属性，则后续的标号也会根据这个值计算。
  1. 无序列表
1
2
3
<ul>
  <li></li>
</ul>

list-style-type: disc（圆点）、circle（圆圈）、square（方块）。当然也可以选用前面的数字标记。
3. 自定义列表标记

  • list-style-type:none;取消官方标记
  • 在每个li的目标CSS样式中，加入background: url(image.png);
  • 为每个li适当调整行高line-height: 1.5em;并用padding把文本向右挪动padding-left: x;
  1. 标记位置内缩
    list-style-position: inside;
  2. 简写列表样式
1
2
3
ul {
  list-style: circle inside;
}
  1. 嵌套列表实现下拉式导航
    使用CSS，让每个子菜单仅在访问者鼠标停留在其父元素的列表项目上时显示出来。
1
2
3
4
5
6
7
8
9
10
/*  子菜单的默认状态 */
.nav .subnav {
  left: -999em; /*  将子菜单移出屏幕 */
  position: absolute;
  z-index: 1000;
}
/*  当鼠标停留在父元素li上时子菜单的状态 */
.nav li:hover .subnav {
  left: auto; /*  让子菜单回到自然状态 */
}
  1. 描述性列表
    专门描述成组出现的术语及对应值的列表。
1
2
3
4
<dl>
  <dt>Title</dt>
  <dd>Description</dd>
</dl>

表单

  1. 表单的组成部分
  • 页面上可视的控件、标签、按钮。
  • 用于获取信息并转化为可读取或计算的格式的处理脚本。
  1. HTML5对表单的改进
    引入新的表单元素、输入类型和属性，增强了表单行为如对必填字段、电子邮件地址、URL 以及定制模式的验证。
    <input type=”email”> 另有search, tel, url, date, number, range
    Ryanseddon可为旧版浏览器提供模仿html5表单行为的js。
  2. 创建表单form
1
2
3
4
<form method="post" action="show-data.php">
  各种说明标签、控件和按钮。
  <input type="submit" value="Create Account" class="btn" />
</form>

可在form标签中加入novalidate关闭html5的表单验证功能。
4. Get和Post的区别

  • Get: 表单提交后，表单中的数据会显示在浏览器的地址栏里。通常，如果你希望表单提交后从服务器得到信息，就使用get。例如搜索引擎提交关键词，由于数据出现在 URL 中，因此用户可以保存搜索查询，或者将查询发给朋友。
  • Post: 提交表单后，表单中的数据不会显示在浏览器的地址栏里，这样更为安全。同时，比起get，使用post可以向服务器发送更多的数据。通常，post用于向服务器存入数据，而非获取数据。因此，如果需要在数据库中保存、添加和删除数据,就应选择post。
  • 如果不确定使用哪一种，就使用 post ，这样数据不会暴露在 URL 中。
  1. 用脚本处理表单
    脚本根据表单收集的信息，在服务器进行相应处理如存入服务器数据库、转发到别的邮箱等。常用的脚本语言有php, Django, Ruby on Rails, ASP.NET, JavaServer Pages.
    服务器端脚本有一个重要功能是表单验证，检查用户输入的信息是否符合预期格式。而元素内置的检查功能或者javascript提供的验证
  2. 服务器端与客户端
  • php是服务器端server-side语言，运行于为网页服务的计算机（称为服务器）。脚本必须上传到服务器上才能发挥作用，这通常跟你托管网页、图像等用的是同一个服务器。
  • html/css是客户端client-side语言，在查看网页的访问者的计算机的浏览器上运行，可以在完全不与服务器交互的情况下执行很多任务。JavaScript也是一种客户端语言.
  1. 将表单中相关元素组合起来
  • 在form标签下，加入<fieldset>标签开始包裹相关元素。
  • 紧跟着fieldset下方输入<legend>提供起注释标签功能的文本。
  1. 文本框
    type=”text”的input。
  • name属性必须为每个文本框设置，脚本会通过name获取文本框中的值。
  • value属性是文本框默认值，会预先填入。
  • placeholder起到提示的作用，鼠标点击后就消失，与value不同。
  • required=”required”会强制用户输入才能提交。
  • autofocus=” autofocus”会自动获取焦点。
  • size设置文本框的宽度，以字符为单位。
  • maxlength设置最大字符数，以字符为单位。
  • autocomplete=”off”可以关闭历史填充信息的保存，保护文本框隐私如银行卡等。
  1. 为表单组件添加说明标签
1
2
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first_name" class="field-large" />

label中使用for属性，若for 的值与一个表单字段的id 的值相同，该label 就与该字段显式地关联起来了。这可以提升可用性和可访问性。
还可以将一个表单字段放在一个包含标签文本的label内，就不需要使用for和id了。但不经常这样做的原因是分离开来比较容易加样式。
10. 密码框
相比文本框就把type=”password”即可。
11. html5新增类型框
邮件 type=”email”
网址 type=”url”
电话 type=”tel”
加入pattern 属性用于定制的验证规则，它使用正则表达式对用户在框中输入的内容进行限制。
12. 单选按钮
对input元素设置type=”radio”即可。
name=”xxx”用于服务器识别数据，同时用于将多个单选按钮联系在一起，同一组中最多只有一个被选中。
id=”idxx”每一个独立的选项都会有唯一的id，可用于后面label的for属性进行关联。
value=”data”是单选按钮被选中时要发送给服务器的文本。
checked=”checked”可以默认勾选。
13. 多选按钮
对input元素设置type=”checkbox”即可。
name=”xxx[]”，加入[]可以让php自动创建一个包含复选框值的数组。
value=”data”是复选框被选中时要发送给服务器的文本。
14. 文本区域textarea
<textarea id="bio" name="bio" cols="40" rows="5" class="field-large"></textarea>
15. 下拉选择
由select和option标签组成。通常select中设置name属性，option中设置value属性。

1
2
3
4
5
6
<label for="state">State:</label>
<select id="state" name="state">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  ...
</select>

可以对option进行分组，加入分别包围起来即可。
16. 上传文件
1
2
3
4
<form method="post" action="show-data.php"enctype="multipart/form-data">
  <label for="picture">Picture:</label>
<input type="file" id="picture" name="picture" multiple=”multiple”(表示可上传多个)/>
</form>

服务器端必须有处理文件上传的脚本才行。
17. 隐藏字段
type=”hidden”的input，它的值（name, value）也会一同提交到服务器，但不会显示在浏览器中，但通过开发者工具还是可以看到这个标签的。
想设置为只读input，可用readonly=”readonly”。
想完全禁用，使用disabled=”disabled”。
18. 提交按钮
1
2
<input type="submit" value=" submit message " /> message是显示在按钮上的文本。
<input type="image" src=" image.url " width=”168” height=”22” alt="description" />

将文本与图片的按钮相结合，应使用button元素：
1
2
<button type="submit" class="btn">
<img src="check.png" width="21" height="21" alt="" /> Create Profile</button>

19. 使用伪类根据状态调整表单样式
:focus
:checked
:disabled
:enable
:required
:optional
:invalid
:valid

插入音视频和多媒体

  1. html5的改变
    在html5之前，添加多媒体必须通过插件如adobe, quicktime。而html5提供了原生的多媒体，由浏览器负责解析而不需要插件，同时为不支持某些格式的浏览器提供flash备选方式。
    为什么不喜欢flash等插件？一是兼容性，在某个浏览器中插入视频的代码不一定能在另一个浏览器上起作用，没有标签包围的优雅实现方式；而是用户体验，插件会占用计算资源，是浏览器卡顿甚至崩溃。
    html5原生的多媒体速度更快，降低了对插件的依赖。但html5对文件格式进行了规范，这意味着可能需要提供多种格式才能满足要求。
  2. 视频
  • Html5视频支持的格式包括.ogg, .ogv, .mp4, .m4v, .webm。
  • 插入视频直接使用video标签即可：<video src=”xxx.webm” ></video>
  • 其他属性
    autoplay 加载完自动开始播放
    controls 添加控制按钮
    muted 视频静音
    loop 循环播放
    poster 指定视频上显示的图像，而不是默认的第一帧。
    width
    height
    preload=”none”关闭自动加载 ”metadata”只加载元数据 “auto”自动加载
    当视频不是页面主要元素或播放可能性不大，很有用，特别是为移动设备节省流量。
  • 防止视频格式不兼容的备择方案，使用source元素而非src属性。其中p元素是为旧浏览器配置的，当视频不能显示出来就会显示p中的文本，不过必须保证这些元素都被video标签包围。
1
2
3
4
5
<video width="369" height="208" controls>
  <source src="paddle-steamer.mp4" type="video/mp4">
  <source src="paddle-steamer.webm" type="video/webm">
  <p><a href="paddle-steamer.mp4">Download the video</a></p>
</video>
  1. 音频
  • html5音频支持的格式包括.ogg, .mp3, .wav, .aac, .mp4, .opus。其中mp4既可对视频编码也可对音频编码。
  • 插入音频直接使用audio标签即可
  • 其他属性
    autoplay
    muted 默认静音
    loop 循环播放
    preload 参考前面视频
  • 防止浏览器不兼容html5的备择方案，使用source。
1
2
3
4
5
<audio controls>
  <source src="piano.ogg" type="audio/ogg">
  <source src="piano.mp3" type="audio/mp3">
  <p>Your browser doesn't support HTML5 audio, but you can <a href= "piano.mp3">download the audio file</a> (MP3, 1.3 MB).</p>
</audio>.

type属性对于音频文件来说，其值总是”audio/格式”。
4. 使用flash作为备择方案
使用MediaElement.js自动选择让浏览器使用HTML5原生播放系统还是Flash播放器。使用其中的build文件夹，拷贝到服务器中。在html的head标签里加入

1
2
3
<script src="build/jquery.js"></script>
<script src="build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="build/mediaelementplayer.min.css" />

在正文中可正常添加html5的video或audio标签。在最底下、body结束之前，加入
1
2
3
<script>
  $('video').mediaelementplayer();/$('audio').mediaelementplayer();
</script>

5. html5额外功能
canvas: 使用 canvas 元素及相应的 JavaScript API可以在网页上描制并创建动画。
SVG: Scalable Vector Graphic，使用XML定义图形和图像，浏览器则对其进行解释和使用，从而描绘出真正的图形。使用SVG创建的图像也是基于矢量而不是基于光栅的。这意味着它们可以很好地适应缩放，因为浏览器只是简单地依照绘制说明，根据所需的尺寸，将图形绘制出来。

表格

  1. 基本结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
  <caption>表格标题</caption>
  <tr> （每一行的开始标签）
<th scope=”col”>列标题</th>
<th scope=”col”>列标题</th>
<th scope=”col”>列标题</th>
      </tr>
      <tr>
        <th scope=”row”>行标题</th>
        <td>单元格内容</td>
        <td>单元格内容</td>
        <td>单元格内容</td>
      </tr>
    </table>
  1. 结构化代码
    引入thead, tbody, tfoot来标记表格的第一行、主体、最后一行。
    这些只是显示地指出表格内容的布局，但不会真正影响样式。
  2. 合并单元格
    将th或td跨越一个以上的单元格。使用下列两个属性。
    colspan=”n”横向合并。
    rowspan=”n”纵向合并。
    如<td colspan="2">Celebrity Hoedown</td>

加载javascript

  1. 加载脚本
  • 类比外部CSS，直接src而不用rel, href等属性。但是注意不应该在head中使用script标签，而是尽量在最底下</body>之前。
1
2
<link rel="stylesheet" href="css/global.css" />
<script src="behavior.js"></script>
  • 内部嵌入脚本则不能带有src属性：
1
<script> ...Code... </script>
  1. 性能最佳化
    通常浏览器按照html出现次序依次下载脚本文件，然后解析、执行。在处理脚本的过程中，浏览器相当于挂起，既不会下载当前script标签之后的内容，也不会呈现那些元素。除了html5剃刀，其余脚本加载都应该放到最下面，防止这样的阻塞行为blocking behavior.