Head First HTML学习笔记

  1. 重要的思想转变：HTML中的ML是标记语言，HT是超文本hypertext。
  2. 文本只要存为html格式，浏览器就能显示它，但你要是在文本加上一些标记，浏览器会按照约定的方式读取它，这样文本就会显示得更好看一些更有结构一点。所以是先有的文本，然后再有的标记，有了标记还不够，还得有HT，就是超文本，得有链接，能从不同的页面间跳转，用a元素实现，这就是HTML。
  3. 链接会从本页面所在的文件夹开始找，如果没有，就显示不出来或报错。向下查询只要指定子文件夹名就可以了，如beverages/elixir.html，向上查询用..即可，..表示向上移至父文件夹。如果向上两级就../..
  4. 没有任何内容的元素就用简写，如<br>.称之为void元素，image元素也是。
  5. 如何在HTML中输入特殊字符？可以查找相应的缩写，如<html>等价于&lt;html&gt;，&等价于&amp;

    一些常用的字符实体查询URL：http://www.w3school.com.cn/tags/html_ref_charactersets.asp

    更详尽的字符实体清单查询URL：http://www.unicode.org/charts/

  6.  <code>,<pre>,<strong>,<em>,<time>,<q>,<blockquote>。这些元素除了<em>和<strong>会改变文本格式之外，其他只是标记文本的作用，并不能把文本显示为特定的格式，比如<time>元素并不表示输入里面的数字会自动变成时间，输入123456显示的还是123456.之所以用<time>标记，只是为了方便在DOM中查找和引用这个元素，为CSS和JS提供方便。
  7. <a>元素既可以是block块元素，也可以是inline内联元素，包围文本时是内联元素，包围块元素时是块元素；<br>是一个模糊地段，没法确定是块还是内联.
  8. <image>元素是一个inline元素。
  9. www.starbuzzcoffee.com中www是域中一个特定服务器的名字，而starbuzzcoffee.com才是域名，如weibo.com是域名，而非www.weibo.com。包含www的名字叫网站名，唯一的域名可以用于多个网站，比如还可以是employees.starbuzzcoffee.com。域名的作用一是让你的网站有独一无二的名字，而且还可以让你的页面能够链接到其他的网站。域名由一个集中的权威机构ICANN控制，以确保不会被重复，如果要保留你的域名，每年还要交注册费。
  10. 域名就相当于一块地，拿到这块地的时候，你可以在这块地上建很多很多的网站。域名是地，网站就是房子。
  11. 绝对路径和相对路径。相对路径是从当前页面到目标的页面的路线图，绝对路径是从根文件夹到目标页面的路线图。根文件夹（在web中叫根目录）在URL里用“/”表示。
  12. URL与默认页面。Uniform Resource Locators,统一资源定位符。如http://www.starbuzzcoffee.com/index.html，由三部分组成，http是超文本传输协议（transfer protocols），www.starbuzzcoffe.com是网站（www是服务器名，后面是域名），/index.html是绝对路径，三部分共同构成了URL。默认页面是指输入非绝对路径表示的目录或不输入绝对路径时默认弹出的页面，可以自己设置，比如有些可能规定只要把某一个文件命名为index.html或default.htm或index.php（与服务器有关）就可以默认返回该页面了。对于我们网站上的其他页面（就是在同一个服务器上），用相对链接来链接（相对链接的好处在于不会提到网址，所以哪怕有一天网址搬家了，也不会一个个去改href属性），不需要写协议和网址，对于其他网站，使用URL来链接。
  13. http和file都是协议，http是从服务器获取文件，file是从计算机本地读取文件。如file:///chapter4/starbuzz/index.html。可以理解为file协议与http相比就是少了网站名。
  14. 端口。网站是建在域名上的一栋楼，端口就是这栋楼的邮箱，通过这个端口来传送数据，默认端口都是80.正常web服务器几乎都在80端口接收请求。
  15. 把鼠标移到链接上会出现文字提示？使用<a>的title属性（任何元素都可以，title属性等同于工具提示）即可。点击链接，直接定位到打开页面中的某个特定位置（在此创建锚点）？使用id属性。如href="index.html#chai"。如果是别的网站，怎么知道目标文本的id属性呢？F12看源码。回到顶部的原理即是如此，链接到顶部的元素ID即可。要在新窗口中打开链接？使用target属性，target="_blank"，target属性告诉浏览器在哪个窗口中打开链接。
  16. 理解image元素，HTML页面是纯文本，只是通过标记可以让它丰富起来，比如a元素，image元素，image元素只是指向图片本身，并不是HTML页面的一部分，当浏览器显示页面时，会用图像取代image元素。图像Ping技术。查找图片的URL，三种方式：右键复制链接、新窗口中打开图像、查看源码。
  17. <image>元素属性。alt，图像未能加载时给出的提示文本，注意如果用中文给出提示，好像会出现乱码，英文就不会。width和height属性要慎用，因为它们只是为图片预留固定空间大小，图片还是按原来的大小下载，只不过下载后会缩放成固定的大小，如果要用，只能把它们的值设置成图像本身的大小。
  18. 照片在photoshop中打开，存储为web所用格式。可以通过修改杂边的颜色与浏览器背景颜色一致使logo边缘消除难看的锯齿，尤其是在logo为透明图像时。png和jif格式是无损的，文件往往更大，而jpg是有损压缩，文件小，且更适合保存复杂的照片。
  19. html从5开始变成一个活标准，就是不再通过版本号的方式进行迭代，而是根据需要进行迭代，而且会保持向后兼容，浏览器只要看到html就默认为是标准的html，不是4.01也不是678，它是以5为蓝本的html，它就是html，只是html。在h5之前html只能用来构建web页面，但h5的出现使得构建web应用成为了html很大的一块功能，web应用就是一些如社交媒体应用、地图应用、游戏等，就像桌面计算机上的应用一样。
  20. http://validator.w3.org，W3C验证工具，验证html文件的语法错误。<meta>是一种标记，表示字符编码，有一个charset属性（web页面是utf-8）。<!doctype html>不是一个标记， 因为尖括号里面有一个感叹号，表示了它的特殊性。
  21. 工业标准的HTML。
  22. 只能在<head>元素中放置title\meta\style元素，即与页面相关的元素，而且必须包含title元素。其实还有link元素
  23. border-bottem属性是下边框，于text-decoration属性的"underline"相比，区别在于border-bottom会延伸到页面边缘。
  24. 如何判断某个属性能不能继承？如果是跟文本外观有关的，一般都可以继承，可以根据常识判断。更特定的规则会覆盖更宽泛的规则。
  25. 应用样式的路径：选择器>继承>默认。若有多个选择器选择同一个元素，规则冲突：最特定>顺序。
  26. CSS验证工具http://jigsaw.w3.org/css-validator/。
  27. 常用CSS属性：color,font-family字体,font-weight粗体,font-style斜体,font-size大小,letter-spacing字间距,text-align对齐方式,text-decoragion文本装饰,line-height文本元素行间距,list-style列表项外观。background-color,background-image,left,top,padding,border。
  28. 字体系列一共有5个，每个字体系列都包含大量字体。sans-serif表示没有衬线的字体，更适合屏幕阅读；serif表示有衬线的字体，比如新闻报纸；monospace表示每个字符占固定宽度，主要用于显示软件代码；cursive看起来像手写，标题中会用到；fantasy含有某种风格的装饰性字体；serif高雅、传统，sans-serif外观清晰可读性好，monospace就像是打字机打出来的，cursive和fantasy感觉很有趣或很有风格。
  29. font-family:Verdana, Geneva, Arial, sans-serif;实际上就是一个字体优先列表。表示会从前到后依次查找字体是否可用，最后一个字体系列是用来兜底的，如果前面都不可用，那就用浏览器能支持的默认sans-serif字体。
  30. web字体，使用@font-face规则自定义一种字体的名字和位置，然后所有的用户不管用啥浏览器不管用啥平台都能支持这种字体了。当然，前提是，必须把这些文件放在一个服务器上，或者利用一个托管服务，如Google的字体托管服务（免费）。也可以将字体下载下来，通过相对路径引用它。web开放字体格式：.woff，TrueType字体：.ttf。.woff格式现代浏览器支持最为广泛，另外.ttf可以保证较老的浏览器也能支持，如果要考虑到IE8以前的浏览器，还要加上EOT格式字体。要指定多种格式，只要在@font-face规则中的src属性里多加几个备用的URL即可。
  31. 类似于@font-face的前面带@的规则称之为内置规则，而非选择器规则，它并不选择元素。利用该规则，可以获取一个web字体，并为它分配一个font-family名。除了@font-face之外，还有别的内置规则，如@import：导入其他CSS文件。@media：允许创建特定于某些媒体类型的CSS规则，如印刷页、桌面屏幕、手机。
  32. 托管web字体的网站，Google Web字体服务（www.google.com/webfonts），可直接复制URL，在CSS里链接；FontSquirrel（www.fontsquirrel.com）。
  33. 调整字体大小。px：绝对大小。%：相对父元素百分比。em：相对于父元素比例。关键字：xx-small,x-small...medium...xx-large，浏览器会将其转换成像素值。指定字体大小的秘诀：1.选择一个关键字（推荐small或medium），作为body规则中的字体大小，相当于默认字体大小；2.使用em或百分数，相对于body字体大小指定其他元素字体大小。这样要改变整个页面的字体大小，只要改变body字体即默认字体大小就可以了，另外，如果用户想调整页面字体大小，利用这个秘诀，也会变得非常方便。
  34. 指定web颜色的三种方法。颜色名（16种基本颜色名和150种扩展颜色名）；RGB（用R、G、B的百分比或0-255间的数值指定颜色）；十六进制码（使用最广泛，用photoshop或在线颜色表https://en.wikipedia.org/wiki/Web_colors选择颜色，或百度搜索HTML颜色表）
  35. 要快速创建css文件有方法，先在html文件中链接css，然后ctrl单击链接，会提示你没有此文件是否要创建，点击确定即可。这样在code界面和文件夹里都有了css文件，不用新建再保存再链接了，非常方便。
  36. line-height属性，1.6em指行高为字体大小的1.6倍。尽量不要用像素去指定，太绝对了。
  37. 一个元素就是一个盒子，由四部分组成，从里到外依次是内容区、内边距、边框、外边距，前面三个都好理解，外边距的作用在于给在同一个页面上不同元素之间增加空间，记住元素就是盒子，盒子就是整个元素，外边距也是盒子的一部分，也就是元素的一部分，不存在两个盒子之间的距离是外边距这种说法，只有元素本身才有内边距和外边距。如果两个盒子紧挨着，外边距就相当于它们之间的空间。
  38. 内边距和外边距的区别。内边距是在内容周围增加额外的空间，把人体当作内容区的话，人体的四肢能够到的空间就可以理解为内边距，而外边距就可以理解为人的气场，与其他人保持什么样的距离个人会觉得比较舒服，靠得太近会觉得压抑、太挤，这和外边距的作用类似，外边距就是为了给元素之间增加距离。另外，元素的背景颜色或背景图像会延伸到内边距下，但不会延伸到外边距。
  39. 作出一个插画一样的段落需要用到的CSS属性：background-image,background-position,background-repiat,background-color;   font,line-height,color;   padding,padding-left,margin,margin-right;   border(border-width,border-style,border-color，按顺序)或borer-top-style,border-radius;   
  40. border-style只有8种，solid,double,dotted,dashed,groove,ridge,inset,outset.小技巧，如何得到锯齿形的边框？设置border: 1px dashed white;把边框设置为白色，与背景色一样，就相当于从段落的背景里一块一块切掉一样。
  41. border-radius属性要么一次指定所有角，要么一个角一个角地指定圆角。不能一次指定两个。
  42. 类和ID都可以包含字母数字和下划线，但在开头字符上有区别，类名要以一个字母开头，id名可以以一个数字或字母开头。
  43. 对于成熟样式表的维护或版本更新或补充，通常要修改样式表通常不是直接在样式表里修改，而是在链接这个样式表，然后在它下面提供你自己的样式表，指定你想修改的样式，对于重合的部分，你的会覆盖它的，对于你没涉及到的部分会采用它的，有点类似于正片叠底。
  44. <link>标记有一个media属性，即媒体查询，可以指定设备类型来应用某样式，如media="screen and (max-device-width: 480px)" 匹配有屏幕且屏幕像素不超过480的设备，如media="print"匹配打印机设备。还可以查询设备是横向landscape还是纵向portrait。在CSS中使用媒体查询。使用@media规则，CSS3媒体查询规范：www.w3.org/TR/css3-mediaqueries
  45. 如果你的CSS文件相当庞大，建议使用<link>元素来指定不同的样式表，而非用@media规则指定。
  46. <div>是一个块元素，跟其他块元素如<p><blockquote><h1>也没什么区别，它也是个盒子（或者人体）。唯的区别在于<div>只是一个容器，可以给页面划分出逻辑区域，不是语义化的标签。而<p>表示段落，<blockquote>表示引文，都是有语义的。
  47. 元素的width属性只指定内容区的宽度，整个元素的宽度没法直接指定，但可以通过指定边框、内边距、外边距的像素，然后计算得到元素的宽度。一个块元素的默认宽度是“atuo”，说明它会延伸占满整个空间，即"auto"允许内容填满所有可用空间。所以在没设置宽度的情况下，块元素会随着浏览器的大小而拉伸或压缩，总是适应浏览器的大小。当元素设置宽度后，则不论浏览器大小怎么变化，元素的宽度都是固定的，不会适应浏览器的在小变化。一般不要指定元素的高度，因为一旦高度不够，内容会溢出元素，很难看，高度用auto，让它自适应就好了。
  48. 如果使用百分比指定宽度，则宽度为元素所在容器（<body>\<div>等）的一个百分比。
  49. text-align属性只能应用于块元素，且可以对块元素内的对所有内联元素起作用。
  50. 子孙选择器"#id h2"选择所有后代h2，"#id>h2"仅选择子代h2，"#id element h2"选择特定后代h2。
  51. line-height若设置为相对度量如em或%，那么由于body中各元素会继承body的字号属性如small，所以行高也都是small的多少倍或百分之外少，这样大字号的文本就显得行高很小，看起来很挤，我们需要的是将行高设置为字体本身大小的多少倍，方法是直接用数字，如1就表示行高为字体本身大小的1倍。
  52. 哪些属性有简写形式？内边距外边距、边框背景 、字体，除了内外边距有顺序之外，边框背景字体都没有顺序之分，边框（1px solid red;）背景（white url(images/background.gif) repeat-x;）字体（虽然有简写，但我觉得没有必要，一是font-size居然是必选，这其实很没必要，而且输入字体系列的时候就没有提示了，更重要的是输错了还不好调试。）
  53. <div>和<span>的类比记忆，一个是块级划分逻辑，一个是内联级划分逻辑。
  54. 内联元素的内外边距和块元素的内外边距有什么不同？设置内外边距只对左右空间有影响，对上下空间没影响。
  55. 伪类，设置<a>链接样式，如a:link,a:hover，其中a可以换成类名或id名。一般的链接样式指定顺序为：link,visited,hover,focus,visited.hover是悬停属性。什么是伪类？就是非真正的类，如你可以为a:link指定样式，但HTML中根本就没有这个类，但是你又可以像类一样给它指定样式，所以它就是伪类（伪类是:link而非a:link）。除了:link之外还有其他的伪类如:first-child,:last-child。
  56. 关于层叠。如果我是浏览器，我如何知道某个元素的font-size属性？分三个步骤：收集样式表——匹配声明——排序（1.按规则排序，作者>读者>浏览器默认；2.按特定排序；3.按先后顺序排序，就近原则。）按特定排序有一种算法：给一个3位数，选择器中有一个id就在百分位上加1，选择器中有一个类或伪类就在十分位上加1，选择器中有一个元素名就在个位上加1，最后比这个三位数的大小，哪个大就用哪个选择器的样式。注意，读者可能会用!important覆盖作者的样式。把层叠理解为图层即可。
  57. 什么是流？就是浏览器摆放元素的方法，对于块元素，从上到下流，每个占一个整行，块元素前后有换行符。对于内联元素，从左上到右下流，从左往右，直到右边没空间了就另一起一行继续流。如果两个内联元素并排放置，那么它们之间的距离就是它们各自的外边距之和（之所以不加上内边距的原因是内边距能被背景属性覆盖到，所以严格上来说不算元素的空间/气场）。如果两个块无素上下放置时，那么谁的外边距更大，就会吃掉另一个的外边距，它们之间的距离由更大的那个外边距决定。再延伸点说，只要两个垂直外连距碰到一起，大的那个就会把小的那个吃掉，哪怕是两个元素是嵌套关系也是一样，但有一种情况例外，就是如果外面的元素有一个边框（相当于里面那个元素被限制在外元素的内容区里了），这样它们的外边距就碰不到一起了，也就不会被吃掉。
  58. 对于设置了浮动的块元素，会将它尽可能地往设置的方向移动，并从流中删除该元素，接下来流入的元素会当它不存在，继续从它的位置开始流动，浮动元素一定要设置宽度。所以浮动的元素会覆盖流在它后面的块元素，但对于块元素里面的内联元素，在遇到右边的浮动元素障碍时，会自发地向下一行流动，所以内联元素不会被覆盖。如果浮动元素和它下面的块元素背景颜色不一样，就会明显看出来。对于这一点参考P480那张图，一清二楚。
  59. 那么如何解决块元素忽略浮动元素一直往下排，导致块元素和浮动元素重叠的问题？毕竟如果颜色不同时很难看。首先植入一个理念，要保证主内容区是可扩展的，而边栏是固定宽度的，不能反过来。那么第一个方法是将主内容区的右外边距设置为至少边栏的宽度（盒子总宽度，包含内外边距），如果主内容区的外边距刚好等于边栏的宽度，那么由于外边距是透明的，不会有背景覆盖到，这样看起来就是主内容区（实际上是不含外边距的盒子）与边栏（不含外边距的盒子）之间有一道漂亮的中缝，这道中缝的宽度就是边栏的外边距宽度。还有一个解决重叠的方法是设置clear属性为right/left，这表示如果设置了该的元素右边必须是干净没有遮挡的时候，我才会开始摆放该元素，不管你是浮动的还是固定的，我都不能跟你在一排。
  60. 流体布局、冻结布局、凝胶布局。流体布局：屏幕有多大，布局就会扩展多大，就跟水一样，盒子有多大，它就延展多大。冻结布局：用一个大容器包含body里的所有元素，把这个大容器定死宽度，屏幕小了，内容就挤一挤或变长，屏幕大了，内容就变宽变胖，但不会超过大容器的宽度，可能造成的后果就是页面会有留白，很难看。凝胶布局：锁定页面中内容区的宽度，但是会将它放在浏览器中间。用大容器冻结body中所有元素后，再设置它的左右margin为auto，这样浏览器会计算屏幕各个时刻的外边距大小并平分，导致页面能一直居中而不是在某一边上留大段的白，弥补了冻结布局的缺点，显得更美观。
  61. 浮动元素，内联元素看得见。绝对定位元素，谁也看不见。设置绝对定位等于你夺取了元素摆放位置的决定权（从正常流中删除），由你来告诉浏览器该把元素摆在什么位置（设定top,right值）。绝对定位的霸道特性，是它的优点也是它的缺点，页脚看不到它也就没法躲避它，它与页脚的重叠没法解决。
  62. CSS表格显示。在HTML中添加两个嵌套的<div>，一个表示表格，一个表示行，每个块元素当作一个单元格，然后在CSS里设置相应div的display属性为table,table-row,table-cell。然后设置表格的boder-spacing（可理解为表格线的粗线，只是看不见）。这样就可以保证每个单元格的高度是一样的，然后哪个单元格内容多，单元格宽度会根据其内容自适应。CSS中的表格与HTML中的表格功能是不一样的，CSS表格只是一个类表格，是用表格的方式来布局。HTML中的表格是真正的表格，是用来放数据的一种结构。
  63. CSS布局工具箱策略。浮动布局（边栏要移到最前，无法创建两个高度相同的列），凝胶布局（内容不会扩展占满浏览器屏幕，也无法创建高度相同的两列），绝对布局（浏览器变宽时边栏会覆盖页脚），表格显示布局（暂时没缺点）。
  64. 固定定位。固定定位与绝对定位的区别在于，绝对定位是针对于页面来定位，你滚动页面就有可能隐藏它，但固定定位是针对于窗口来定位，只要你浏览器窗口没关闭，无率你怎么滑动页面，它都一直在那个固定的位置盯着你。
  65. 4种定位。静态定位：正常流入页面；绝对定位：元素完全从页面中流出，相对于离它最近的父元素定位；固定定位：相对于浏览器窗口定位；相对定位：相对于外围包含元素定位，元素正常流出。
  66. html5新元素，<header>，<nav>导航,<footer>,<aside>边栏,<section>,<article>.<section>和<article>的关系就像是<ul>和<li>的关系一样，不过前者弱相关，后者强相关。IE8及Safari3以前版本没有得到支持，可以查看http://caniuse.com/#search=new%20elements，了解浏览器是否支持新元素。
  67. 用h5中更具体的元素来代替旧版本HTML中的各种<div>，使得一看到标记就能知道这是啥，而不是毫无主义的<div>，这。。就是传说中的语义化HTML！！
  68. <section>,<article>,<div>，相关内容组织在一起用<section>，不相关内容组织在一起只是为了统一应用某种样式用<div>,某些内容可以独立于页面上其它内容进行重用和分发（如一个新闻，一个帖子）用<article>。就通用性来讲，div>sectin>article。大多数情况下，section和article都需要有一个header或者至少一个标题如h1。
  69. 通过元素的display属性（值可以是block或inline,分别表示块元素和内联元素），可以将元素的流入方式在块和内联之间切换。
  70. <video>，布尔属性controls，autoplay，loop，布尔属性不需要赋值，写在HTML标记里就表示布尔属性的值为true，poster属性用来表示视频未播放时的封面。preload属性预载，none表示用户不点击播放就不下载，metadata表示下载视频无数据但不下载内容，auto表示让浏览自己作决定。type属性，指定容器格式和编解码器（包括视频解码器和音频解码器）。
  71. 对于IE9，360，chrome，firefox四种浏览器，除IE9之外，其他三种浏览器对三种视频格式.mp4/.ogv/.webm都支持，而IE9则只支持.mp4。为了解决兼容性问题，可以用一组source元素代替src属性来链接视频文件。每个<source>元素链接一种格式，最后再加一句话“你的浏览器不支持播放此视频”，浏览会自上向下查找能用的格式，如果都找不到就会显示最后一句话。
  72. 用<object>元素插入Flash视频。<mark>突出显示某些文本，其实就是高亮文本，和<em>一个道理。<progress>显示任务的完成进度，。<meter>显示某个范围的度量。有value,min,max属性，显示。<canvas>绘图。<figure>定义类似照片、图表甚至代码清单等独立的内容，只是为了替代无语义的div而已，没什么特别的用处。和section和article一样。
  73. <table>,<caption>,<th>,<tr>,<td>.CSS:table--->margin,caption-side,border,border-spacing边框间距，两个单元格之间的空隙，只能在table中设置，th,td中不能指定，还可以分开指定水平和垂直方向的边框间隔（也可用border-collapse: collapse;来达到相同的目的）;th,td--->border,padding.没有外边距。
  74. 对于CSS要用得好，完全可以脱离HTML来写CSS，意思味可以先在CSS中对类设置样式，然后再在HTML中写上相应的类，这两者其实没有先后顺序。
  75. 隔行增加颜色的高级方法（用类是低级方法），nth-child伪类（numberth-child每几个子元素），如elements:nth-child(even或2n+1)表示选择偶数项的某元素，记住n从0开始。
  76. 如何让单元格跨多行？其实就是合并单元格并居中，rowspan属性指定一个数据单元格占多少行，然后在其它行中删除数据（就是被合并的行就可以不用指定<td>了）。 同理，colspan属性可以跨多列。
  77. 在有多种方法可以设置样式的情况下，优先选择不用更改HTML的方法，如用nth-child伪类哇代替在HTML中增加元素类来设置样式。
  78. 列表样式。list-style-type:disc(默认列表标记类型)，circle(圆形标记），square，none。list-style-image:设置列表标记图像。line-style-position:inside表示标记在列表项的盒子里面，文字另起一行时会经过标记的下文。outside表示标记在列表项的盒子外面，文字另起一行时不会经过标记下方。
  79. <form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">，action由服务器URL+脚本所在文件夹+服务器脚本文件名组成，即规定响应处理这些表单数据的服务器脚本。
  80. <input>是功能最多的一个表单元素，通过设置不同的type值可以实现n种控件，text,submit,radio,checkbox,(number,range显示一个滑动条,color,date,email,url,tel，password,file)HTML5新增，placeholder、required属性。除了input元素之外，还有<select><option>，这两个通常成对出现，类似<ol>和<li>的关系，会创建一个下拉菜单，加上multiple布尔属性可以多选。另外还有<textarea>输入多行文本。
  81. 表单元素的name属性很重要，除了<option>之外都要有name属性，一定要设置成唯一，而且要根据服务器脚本的规定来，不能自己想设成啥名字就设成啥名字。因为这些数据打包时是需要做成一个一个的名值对的JSON，所要要有唯一的名字和值对应才行。对于input--text输入框可以用maxlength属性限制最多输入的字符数，但textarea就没法限制了。
  82. 在HTML中表示一个复杂的表单时，可以用<p>元素包裹一些逻辑上是一类的表单元素，看起来会更有条理。也避免输入太多的<br>，对于单选框/复选框使用布尔属性checked可以默认选中选项。
  83. GET和POST提交表单数据的区别，POST会打包你的表单变量作为请求的一部分发送，数据对用户不可见。GET会把表单数据添加到URL后面，然后向服务器发送请求，所以用户可以在地址栏看到表单数据。这里的GET不是浏览器获取表单数据的GET，而是指浏览器向服务器获取页面，只不过这次发送请求时URL加了点表单数据在里面而已。
  84. GET和POST的使用比较。利用GET得到的页面可以加书签而POST不行。这点区别是造成GET和POST的适用范围不同的关键 。如果你提交表单只是起查询作用，并且想保存查询结果（如淘宝商品搜索，百度搜索）页面，那就用method="GET"。如果你是订单提交页面或输入账户名密码，那就不要用GET，否则就可能重复提交订单或者私密信息被泄露（通过历史记录中的URL就可以查看到所以用户名和密码信息）。另外POST对于发送大量数据方面有优势。换句话说，GET适用于查询功能，POST适用于提交功能和数据量大时使用。POST的应用范围明显更广。
  85. 最佳实践是标签文本用<label>元素表示。要使用label元素，首先必须为input设置一个id，然后<label for="idname">XXXX</label>。
  86. 利用<fieldset><legend>可以将一组复选框或一组input元素组合在一起，同时标签名用统一的legend表示，相当于一个标题。
  87. 更多选择器。伪元素。first-letter（可营造首字母大写或下沉的效果），first-line；属性选择器，img[height="300"]；按兄弟选择器，h1+p选择所有紧跟在h1后面的段落；结合选择器，div#greentea > blockquote p:first-line；
  88. 开发商特定CSS属性，transform，转换，动画效果。
posted @ 2016-12-05 02:38  蚂蚁不排队  阅读(328)  评论(0)  编辑  收藏  举报