理解line-height

基本概念

  • 基线、中线、顶线、底线

  • 基线

    • 基线并不是汉字的下端沿，而是英文字母”x”的下端沿

  • 行高

    • 文本间基线的距离

  • 行距

    • 上行文本的底线到下行文本顶线之间的具体

  • 内容区

  • 行内框

    • 行内框只是一个概念，它无法显示出来，但是它又确实存在
    • 它的高度就是行高
    • 在没有其他因素（padding）影响的时候，行内框等于内容区域

  • 行框(line box)

  • 同行内框类似，行框是指本行的一个虚拟的矩形框
  • 行框高度等于本行内所有元素中行高最大的值

line-height的设置

  • 行高继承

    • 默认情况下，如果父元素设置了line-height，而子元素没有设置，那么子元素将会将会继承父元素的line-height

  • 行高的计算

    • 行高常用的单位：
      • px - 固定值
      • em - 一个em的大小等于当前行中font-size的大小
      • number - 一个纯数字，数字大小表示的是font-size的倍数
      • normal - 正常，默认值，默认一般为1.2
      • inherit - 继承
    • 一般情况下如果行内有多种大小字体，可以用一个纯数字设置行高，这样可以避免行高小于字体大小而导致文字重叠

HTML5学习总结

Element(元素)

  • html5的空标签，如<br>,<hr>, 建议都带结束符，如：<br/>,<hr/>
  • html5的标签是大小写不敏感的，不过建议都小写

Attributes(属性)

  • alt
    • 指定alt属性，可以在元素不能正常显示的时候，显示一段执行的文本
    • 如：<img src="hello.jpg" alt="This is the description of img">
  • 建议所有的属性名称都小写
  • 建议所有的属性值都用引号括起来,通常都用双引号，特殊情况下用单引号
    • <p title='John "ShotGun" Nelson'>
    • <p title="John 'ShotGun' Nelson">

Meta Elements(源元素)

  • meta element 也叫做meta data, 即：元数据，用来描述数据的数据
  • 主要有：<title>,<meta>,<style>,<link>,,<script>

paragraphs(段落)

  • <p> - 用来显示一个段文字，不过格式不好控制
  • <pre - 用来显示已经格式化好的文本，此元素间的内容会把内容的格式如实显示

Formatting Elements(格式化元素)

  • <strong> - 加重(字体会加粗)
  • <em> - 强调(字体会倾斜)
  • <small> - 字体变小(在一段正常的字体中加一些小字体的文本)
  • <mark> - 标记或高亮文本(默认会给文本添加黄色背景)
  • <del> - 标记文本为删除(在文本中线上会添加一条线)
  • <ins> - 插入文本(在文本下面会有一条下划线)
  • <sub> - 下标文字
  • <sup> - 上标文字

Quotation and Citation Elements(表引用或举证的元素)

  • <q> - 行内引用，文本会被双引号括起来

  • <blockquote> - 块级引用

    • cite属性可以用于搜索引擎来搜索相关信息
      <blockquote cite="http://www.worldwildlife.org/who/index.html">
  For 50 years, WWF has been protecting the future of nature.
</blockquote>

  • <cite> - 定义一个work的标题，比如一本书、一首歌、一幅画、一个雕塑、一部电视剧

    <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

  • <abbr> - 缩写(全称可以写在title属性中)，字体样式没有变化

    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

  • <dfn> - 定义一个术语或缩写，跟<abbr>类似，但字体会倾斜

    <p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>

  • <address> - 定义一个文档或文章的联系方式或信息，字体会倾斜

  • <bdo> - 重写文本的显示方向位置

    • <bdo dir="rtl">This text will be written from right to left</bdo>
    • 通过控制dir属性来决定是从左到右显示，还是从右到左显示
    • <bdo dir="ltr|rtl">

Computer Code Elements(代码元素)

  • <code> - 用来显示一段代码，为了保持代码的显示格式，内容可以用<pre>包起来

Links(超链接)

  • 超链接(a)的四种状态的顺序从高到低如下：
    • a:link - 正常的，没被访问过
    • a:visited - 已访问过
    • a:hover - 鼠标移动之上
    • a:active - 点击的瞬间动作

Table(表格)

  • 去掉table双边框效果
    table {
  border-collapse: collapse;
}

Layouts(布局)

  • html5中跟布局相关的几个元素：
    • header - 定义一个document或一个section的头部区域
    • nav - 定义一个导航的容器
    • section - 在document中定义一个模块
    • article - 定义一个独立的文章区域块
    • aside - 定义除了具体内容一个外的其他内容(如：侧边栏)
    • footer - 定义一个document或一个section的底部区域
    • details - 定义额外的细节
    • summary - 为details元素定义一个标题

Color value

  • 颜色值有三种写法：
    • 1)直接写颜色单词;2)”#”加一个十六进制的数字;3)rgb颜色。最终都为被转化为十六进制来显示

Responsive(响应式)

  • viewport - 响应式的meta标签的参数
  • 参数的属性值：
属性 描述
width 虚拟视窗的宽度
device-width 设备屏幕的宽度
height 虚拟视窗的高度
device-height 设备屏幕的高度
initial-scale 页面初始化的缩放倍数。1.0为不缩放
minimum-scale 可以缩放的最小倍数
maximum-scale 可以缩放的最大倍数
user-scalable 是否允许缩放,值为Boolean 
<meta name="viewport" content="width=device-width, initial-scale=1">

Charset Encoding(字符集编码)

<meta charset="UTF-8">

Form Elements(表单元素)

  • html5新增加的元素：

    • <datalist> - 指定一个有默认选项值的input
      <datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

  • html 新增加的input type:

    • color
    • date
    • datetime
    • datetime-local
    • email
    • month
    • number
    • range
    • search
    • tel
    • time
    • url
    • week

  • Input Attributes(input常用属性)

    • readonly - 只读
    • disabled - 不能用
    • maxlength - 最大长度
    • autofocus
    • min - 最小值
    • max - 最大值
    • multiple - 多选，针对file和image类型
    • pattern - 正则验证，如：pattern=”[A-Za-z]{3}”
    • placeholder - 默认值
    • required - 必须填写
    • step - 数字间隔，针对number类型

New HTML5 Elements(html5 新增的几个常用元素)

  • 语义化
    • <header>
    • <footer>
    • <article>
    • <section>
  • 图像处理
    • <svg>
    • <canvas>
  • 多媒体
    • <audio>
    • <video>
      <video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

SVG 和 Canvas 最大的不同

  • SVG是基于XML的，每一个元素都是一个DOM元素，可以添加事件
  • Canvas是通过javascript一像素一像素的画出来的

HTML plug-ins(插件)

<object width="400" height="50" data="bookmark.swf"></object>
<embed width="400" height="50" src="bookmark.swf">

HTML5 APIs

  • Geolocation - 定位
  • Drag/Drop - 拖拽
  • Local Storage - 本地存储
  • Web Workers - 可以在后台运行脚本而不影响页面的性能

详细使用请参考：

http://www.w3schools.com/html/

正则表达式参考手册 - (收集,仅供个人参考)

字符 描述
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。
^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
$ 匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。
* 匹配前面的子表达式零次或多次。例如，zo*能匹配“z”以及“zoo”。*等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
? 匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“does”或“does”中的“do”。?等价于{0,1}。
{n} n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。
{n,} n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
{n,m} m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“oooo”，“o+?”将匹配单个“o”，而“o+”将匹配所有“o”。
. 匹配除“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符，请使用像“(.|\n)”的模式。
(pattern) 匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“\(”或“\)”。
(?:pattern) 匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分是很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。
(?=pattern) 正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern) 正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如“Windows(?!95|98|NT|2000)”能匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始
(?<=pattern) 反向肯定预查，与正向肯定预查类拟，只是方向相反。例如，“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。
(?<!pattern) 反向否定预查，与正向否定预查类拟，只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”，但不能匹配“2000Windows”中的“Windows”。
x|y 匹配x或y。例如，“z|food”能匹配“z”或“food”。“(z|f)ood”则匹配“zood”或“food”。
[xyz] 字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。
[^xyz] 负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“p”。
[a-z] 字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
\b 匹配一个单词边界，也就是指单词和空格间的位置。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”。
\B 匹配非单词边界。“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。
\cx 匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c”字符。
\d 匹配一个数字字符。等价于[0-9]。
\D 匹配一个非数字字符。等价于[^0-9]。
\f 匹配一个换页符。等价于\x0c和\cL。
\n 匹配一个换行符。等价于\x0a和\cJ。
\r 匹配一个回车符。等价于\x0d和\cM。
\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S 匹配任何非空白字符。等价于[^ \f\n\r\t\v]。
\t 匹配一个制表符。等价于\x09和\cI。
\v 匹配一个垂直制表符。等价于\x0b和\cK。
\w 匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”。
\W 匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
\xn 匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。.
\num 匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1”匹配两个连续的相同字符。
\n 标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。
\nm 标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。
\nml 如果n为八进制数字（0-3），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。
\un 匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（©）。