别人有的我不赘述。
目前,HTML一共有114个标签,但按照 80/20 原则,使用其中25个左右的标签就可以满足80%的标记需要。
HTML 最新的版本 HTML5,又新规定了一批结构化标签,用于对相关内容的标签进行分组,从而更好地规范网页的整体结构。这些新标签包括<header>
、<nav>
(即 navigation,导航)、<article>
、<section>
、<aside>
和<footer>
。
有趣的属性:视障用户使用的屏幕阅读器会大声读出 alt 属性的内容,因此一定要给标签的这个 alt 属性添加让人一听(或一看)就能明白的内容。
块级元素和行内元素:
文档流效果:HTML 元素会按照它们各自在标记中出现的先后顺序,依次从页面上方流向下方。
几乎所有HTML 元素的 display 属性要么为 block,要么为 inline。最明显的一个例外是 table 元素,它有自己特俗的 display 值。
块级元素(比如标题和段落)会相互堆叠在一起沿页面向下排列,每个元素分别占一行。而行内元素(比如链接和图片)则会相互并列,只有在空间不足以并列的情况下才会折到下一行显示。
无论你想了解哪个 HTML 元素,第一个要问的问题都应该是:它是块级元素,还是行内元素?知道了这一点之后,就可以在编写标记的时候,预想到某个元素在初始状态下是如何定位的,这样才能进一步想好将来怎么用 CSS 重新定位它。
有两点要知道的:
-
块级元素盒子会扩展到与父元素同宽。
-
行内元素盒子会 收缩包裹 其内容,
-
并且会尽可能包紧。
行内标签: <a> <anchar>锚<img><strong><abbr>简写<em>斜体
文档对象模型
文档对象模型(简称 DOM)是从浏览器的视角来观察页面中的元素以及每个元素的属性,由此得出这些元素的一个家族树。通过DOM,可以确定元素之间的相互关系。在 CSS 中引用 DOM中特定的位置,就可以选中相应的 HTML 元素,并修改其样式属性。
CSS 操作 DOM 的过程是先选择一个或一组元素,然后再修改这些元素的属性。通过 CSS 修改了元素后,比如修改了宽度或者在标记里插入了一个伪元素,这些变化会立即在 DOM 中发生,并体现在页面上。
简而言之,就是通过 HTML 标记来构建 DOM,然后在页面初次加载和用户与页面交互时,使用 CSS 来修改 DOM。
二--------字体和文本
3.3 字体样式 font-style
值:italic、oblique、normal
示例:h2 {font-style:italic;说明:italic和oblique都表示斜体;
英文中的斜体主要表示强调。假如你真想表示强调,那在 HTML 标记中直接使用<em>
标签即可,因为它默认就是斜体。
font-style 有一个 normal 值,中文就是常规的意思。 这个值其实不仅 font-style 有,很多其他属性也有,它的作用就是取消所有的特殊样式。这个值是用来有选择地覆盖某个默认或你设定的全局属性的。
3.4 字体粗细 font-weight
可能的值:100、 200……900,或者 lighter、 normal、 bold 和 bolder。
示例: a {font-weight:bold;}
说明:粗体的主要作用是表示重要。实际上, HTML 元素 strong 也表示重要,而它的默认
样式就是粗体。
3.5 字体变化 font-variant
值: small-caps(将所有小写字母变成小型大写字母)、 normal
示例: blockquote {font-variant:small-caps;}
说明:慎用,大写字母不像小写字母那样有上伸部分和下伸部分作为视觉提示,所以全都使用大写字母会增加辨识难度。
3.6 简写字体属性 font
示例:
p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
<p>Here's a piece of text loaded up with every possible font property.</p>
说明:使用这个简写形式要遵守两条规则,否则浏览器无法正确解释声明的值。
规则一:必须声明 font-size 和 font-family 的值
规则二:所有值必须按如下顺序声明:
font-weight、 font-style、 font-variant 不分先后;
然后是 font-size;
最后是 font-family。
提示:实际上,在设定 font-size 属性的同时,可以顺便设定 line-height(行高)值。也就是说,字体大小和行高的值可以写在一块,比如 12px/1.5。当然, line-height 是
文本属性,下一节我们会讲到它。
4.文本属性
4.1 文本缩进 text-indent
值:长度值(正、负均可)
示例:p {text-indent:3em;}
4.2 字符间距 letter-spacing
值:任何长度值(正、负值均可)。
示例:p {letter-spacing:.2em;}
4.3 单词间距 word-spacing
值:任何长度值(正、负值均可)。
示例:p {word-spacing:.2em;}
4.4 文本装饰 text-decoration
值:underline、overline、line-through、blink、none。
示例:.retailprice {text-decoration:line-through;}
4.5 文本对齐 text-align
值:left、right、center、justify
示例:p {text-align:right;}
4.6 行高 line-height
值:任何数字值(不用指定单位)
示例:p {line-height:1.5;}
说明:
CSS中的行高平均分布在一行文本的上方和下方。比如,如果字体大小是12像素,行高是20像素,则浏览器会在文本上方和下方各加4像素的空白,以凑足20像素的行高。
修改默认行高最简单的方式就是使用font快捷属性,以复合值的形式把 font-size 和 font-height 的值写在一起,比如:div#intro {font: 1.2em/1.4 helvetica, arial, sans-serif;} 在上面的一行代码,行高就是字体大小12em的1.4倍。注意这里不用给line-heightz 值指定单位,只要一个数值就可以。
4.7 文本转换 text-transform
值:none、uppercase、lowercase、capitalize。
示例:p {text-transform:capitalize;}
说明:capitalize 值会将每个词的首字母装换为大写,这种效果在很多广告、报道、杂志的标题中很常见。
4.8 垂直对齐 vertical-align
值:任意长度值以及 sub、 super、 top、 middle、 bottom 等。
示例:span {vertical-align:60%;}
说明:
vertical-align 以基线为参照上下移动文本,但这个属性只影响行内元素。
如果想在垂直方向上对齐块级元素,必须把其display属性设定为inline。
该属性较为常用于公式或化学分子式中的上下标,或用于文本中脚注的角标。
HTML 标签<sup>和<sub>有默认的上标和下标样式,但重新设定一下vertical-align 和 font-size 属性能得到更美观的效果。例如:p.custom {font-size:.8em; vertical-align:1em;}
5. Web 字体
目前,使用 @font-face 规则在网页中嵌入可下载字体的CSS功能,已经得到了浏览器广泛支持。该规则为设计师提供了系统自带的字体以外的广泛选择。换句话说,浏览器可以从Web服务器下载字体,就意味着不必再依赖用户机器中的字体,而且也可以确保用户能够看到CSS中设定的字体。
5.1 设定Web字体的方式
有以下三种:
使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字体库
使用事先打好包的@font-face 包
使用 Font Squirrel 用你自己的字体生成@font-face 包。
5.2 公共字体库
5.3 打包的 @font-face 包
5.4 生成的 @font-face 包
5.5 文字版式
文字版式讲求匀称,一般是由看不见的网格,框定页面文字的走向和布局。匀称的版式可以增强页面的可读性。