1.HTML+CSS基础学习笔记1（前端零基础入门小tips）

html中标签的知识点总结

<head>是头标签里面的东西不会在网页里显示,它是用来帮助浏览器解析页面。
html中的注释，不会在网页中显示，只会在源码中显示。
<title>网页的标题，默认显示在浏览器标题栏中，搜索引擎在检索页面时会首先检索title
<body>标签用来设置网页的主体内容（网页可见的内容）。
通过属性可以设置标签中的内容，在开始标签中添加属性，实际上就是一个名值对的结构（属性名=“属性值”）。
一个标签中可以使用多个属性，每个属性之间必须用空格隔开。
<font>标签中的size属性最大就是7。
在html中元素就是标签，二者等价。
<meta>标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介。 <meta>是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个/,(<meta/>)。<meta>标签设置网页的关键字 name=“keywords” content=“可以设置多个关键字，用逗号隔开”，<meta>标签设置网页的描述，name=“description” content="描述词" 搜索引擎在检索页面时，会同时检索页面中的关键词和描述，到那时这两个值不会影响页面在搜索引擎中的排名。使用<meta>标签可以用来做请求的重定向<meta http-equiv="refresh" content="秒数;url=目标路径">。
在HTML中，一共有六级标题标签<h1>~<h6>,显示效果从大到小。
使用html标签时，关心的是标签的语义，我们使用的标签都是语义化标签，6级标题中，<h1>最重要，表示一个网页中的主要内容，<h2>~<h6>重要性依次降低，对于搜索引擎检索完<title>，会立即查看<h1>中的内容，会影响到页面在搜索引擎中的排名，页面只能写一个<h1>。
段落标签用于标示内容中的一个自然段，使用<p></p>,<p>标签中的文字，默认会独占一行，并且段与段之间会有一个间距。
在页面中可以使用<br>标签来表示一个换行，<br>标签是一个自结束标签<br/>。
<hr>标签是一个自结束标签，生成一条水平线<hr/>
图片标签<img>是一个自结束标签，属性src：设置一个外部图片的路径 alt：可以设置在图片不能显示时的描述，搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对<img>标签中的图片进行收录。
使用内联框架可以引入一个外部的页面，使用<iframe>标签来创建一个内联框架。<iframe>的属性：src：指向一个外部页面的路径，可以使用相对路径 name：可以为内联框架指定一个name属性。(在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎检索。)
使用超链接可以让我们从一个页面跳转到另一个页面，使用<a>标签来创建一个超链接。超链接<a>标签的属性： href：指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址。 target：可以用来置顶打开链接的位置可选值：（1）_self：表示在当前窗口中打开（默认值）。（2）_blank:在新的窗口中打开链接。（3）可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开。
创建超链接时，如果地址不确定可以直接写一个#作为占位符。如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部。
<center>标签中的内容会默认在页面中居中显示。（不推荐使用）
在HTML中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识。id属性在同一个页面中只能有一个不能重复。
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端。href=“mailto:邮件地址” 当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址。
<div>这个标签没有任何语义，就是一个块元素，不会为里面的元素设置任何的样式，主要是为页面进行布局的，块元素是会独占一行的元素，无论内容有多少，都会独占一整行。类似还有<p>标签，<h1>等等。
<span>标签是个内联元素（行内元素），没有任何语义，专门来选中文字，然后为文字设置样式，行内元素指的是只占自身大小的元素，不会占用一整行。类似<a>，<img>，<iframe>。
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素。<a>元素可以包含任意的元素，除了它本身,<p>元素不可以包含任何其他的块元素。
严格来说在HTML5中没有块元素和内联元素的概念。
<em>标签用于表示一段内容中的着重点。<strong>标签用于表示一个内容的重要性。这两个标签可以单独使用，也可以一起使用。通常em显示为斜体，而strong显示为粗体。<em>和<strong>这两个标签表示一个强调的内容。em主要表示语气上的强调。strong 表示一个强调的内容，比em更强烈。
<i>标签中的内容会以斜体显示。<b>标签中的内容会以加粗显示。html5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体。就可以使用<b>和<i>标签。
<small>标签中的内容会比他的父元素中的文字要小一些，在Html5中使用<small>标签来表示一些细则一类的内容，比如：合同中小字，网站的版权声明都可以放到<small>标签中。
网页中所有的加书名号的内容都可以使用<cite>标签，表示参考的内容。比如：书名，歌名，话剧名。
<q>标签表示一个短的引用（行内引用）<q>标签引用的内容，浏览器会默认加上引号。
<blockquote>标签表示一个长引用（块级引用）独占一行。
使用<sup>标签来设置一个上标，<sub>标签用来表示一个下标。
使用<del>标签来表示一个删除的内容，<del>标签中的内容会自动添加删除线。
<ins>标签表示一个插入的内容。<ins>标签中的内容会自动添加下划线。
需要页面中更直接编写一些代码，<pre>是一个预格式标签，会将代码中的格式保存，不会忽略多个空格，<code>专门用来表示代码，一般结合使用<pre>和<code>来表示一段代码。
使用<input>标签可以创建一个文本输入框。
title属性可以给任何标签指定，当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示。

元素之间的关系

父元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。
祖先元素：直接或间接包含后代元素的元素。
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素。
兄弟元素：拥有相同父元素的元素叫做兄弟元素。
子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于内容区大小，如果子元素大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出内容。父元素默认是将溢出内容，在父元素外边显示。通过overflow可以设置父元素如何处理溢出内容，可选值：visible(默认值)，不会对溢出内容做处理，元素会在父元素意外的位置显示。hidden：溢出的内容会被修剪，不会显示。scroll：会为父元素添加滚动条，通过拖动滚动条来查看完整内容，该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条。auto：会根据需求自动添加滚动条（需要水平就添加水平滚动条，需要垂直就添加垂直滚动条，都不需要就都不加，都需要就都加）

html中的文档声明解释

为了让浏览器识别HTML版本，需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本，不写文档声明会导致有些浏览器进入一个怪异模式，进入怪异模式以后，浏览器加载页面会导致页面无法正常显示。
<!doctype html>是html5的文档声明。一般来说用html5的文档声明，简洁好记，同时也是主流版本，其他版本的文档声明比较长，用的也比较少，这里不一一赘述，感兴趣可以自行查找。

字符集知识点

网页产生乱码的根本原因是编码和解码采用的字符集不同，编码时需要告诉浏览器，网页采用的编码字符集。
常见的字符集ASCII(美国),ISO-8859-1（欧洲）,GBK,GB2312（中国）,UTF-8（万国码）,ANSI(自动以系统的默认编码保存文件)。
在中文系统的浏览器中，默认都是使用GB2312进行解码的。
一般网页的字符集采用UTF-8，<meta charset="UTF-8"/>
在html中，字符之间写再多的空格，浏览器也会当成一个空格解析。

html中实体的知识点

在html中，一些如<>这种特殊字符是不能直接使用的，需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号成为实体（转义字符串）
实体的语法： &实体的名字； < &lt; > &gt; 空格 &nbsp；版权符号 &copy；浏览器解析到实体时会自动将实体转换为其对应的字符。

html中的列表知识点

列表相当于去超市购物时的购物清单，在html中也可以创建列表，在网页中一共有三种列表：

无序列表：使用<ul>标签来创建一个无序列表，使用<li>标签在<ul>标签中创建一个一个的列表项，一个<li>标签就是一个列表项。通过type属性可以修改无序列表的项目符号可选值：disc（默认值）实心的圆点。square,实心的方块。(<ul>和<li>都是块元素)
有序列表：有序列表和无序列表类似，只不过它使用<ol>标签来代替<ul>标签，有序列表使用有序的序号作为项目符号。type属性可以指定序号的类型，可选值 1，默认值，使用阿拉伯数字。 a/A采用小写或者大写作为符号。i/I采用小写或大写的罗马数字作为序号。（<ol>也是块元素）
定义列表：定义列表用来对一些词汇或内容进行定义。使用<dl>标签来创建一个定义列表，<dl>标签中有两个子标签，<dt>标签：被定义的内容。<dd>标签：对定义内容的描述。同样<dl>和<ul>和<ol>之间都可以互相嵌套。

列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表。

html中表格知识点

在html中，使用<table>标签来创建一个表格。在<table>标签中使用<tr>标签来表示表格中的一行，有几行就有几个<tr>标签，在<tr>标签中需要使用<td>标签来创建一个单元格，有几个单元格就有几个<td>标签。
<table>标签中有align属性，设置成center表示表格居中。colspan属性表示横向的合并单元格，rowspan属性用来设置纵向设置单元格。语法：colspan(rowspan)=“合并的单元格数”

html中文档流的知识点

文档流：处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素都处在文档流里。
元素在文档流中的特点：
1. 块元素：块元素在文档流中独占一行，块元素会自上向下排列。块元素在文档流中默认宽度是父元素的100%，宽度值是auto。块元素在文档流中的高度默认被内容撑开。
2. 内联元素：内联元素在文档流中只占自身的大小，会默认从左向右排列。如果一行中不足以容纳所有的内联元素，则换到下一行继续自左向右。在文档流中，内联元素的宽度和高度默认都被内容撑开。
块元素在文档流中默认垂直排列，自上至下。如果希望块元素在页面中水平排列，可以是块元素脱离文档流，使用float来使元素浮动，从而脱离文档流。可选值：none(默认值)，元素默认在文档流种排列。left：元素会立即脱离文档流，向页面的左侧浮动。right：元素会立即脱离文档流，向页面的右侧浮动。当为一个元素设置浮动以后（float属性是一个非none的值）元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动，元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或者其他浮动元素。如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。浮动的元素不会超过它上边的兄弟元素，最多最多一边齐。
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以通过浮动来设置文字环绕图片的效果。
在文档流中，子元素的宽度默认占父元素的全部。当元素设置浮动以后，会完全脱离文档流。块元素脱离文档流以后，高度和宽度都被内容撑开。
内联元素脱离文档流以后会变成块元素。

CSS中属性的知识点

css样式的使用:
- 可以编写到元素的style属性当中，给谁设置就写在哪里，将样式直接编写到style属性中，这种样式称为内联样式，内联样式只对当前的元素中的内容起作用，内联样式不方便复用，内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用。style中每个样式写完了要用分号分开。
- 可以将css样式编写到head中的style标签里，将样式表编写的style标签中，然后通过css选择器选中指定元素。然后可以同时为这些元素一起设置样式，这样可以使样式进一步复用。将样式表编写到style标签中，也可以使表现和结构进一步分离，是推荐的使用方式。style中养成写type="text/css"用来兼容老版本的浏览器。<style>标签里是css代码，不能出现HTML中的内容，包括HTML的注释。
- 可以将样式表编写到外部的css文件中，然后通过<link>标签来将外部的css文件引入到当前页面中，这样外部文件中的css样式表会应用到当前页面中。语法：<link rel=“stylesheet” type="text/css" href="外部文件相对路径">将css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表可以在不同的页面中使用，最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过<link>标签引入，可以利用浏览器的缓存加快用户访问的速度提高了用户体验，所以在开发中最推荐使用的是外部的css文件。
color设置颜色，font-size设置字体大小。
width：可以用来修改图片的宽度，height：可以用来修改图片的高度，一般使用px作为单位。当宽度和高度两个属性如果只设置一个，另一个也会同时等比例调整大小。
当元素的width和height的值为auto时，此时指定padding不会影响可见框的大小。而是会自动修改宽度，以适应padding。
css的注释作用和HTML注释类似，必须编写在<style>标签中，或者是css文件中。/* */
在css中，祖先元素上的样式，也会被他的后代元素所继承。利用继承可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承，边框相关的样式，定位相关的。
去掉项目符号 ul{list-style：none；}。
默认的项目符号我们一般不使用，如果设置项目符号，则可以采用为<li>标签设置背景图片的方式来设置。
超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline，如果需要去除超链接的下划线则需要将该样式设置为none。
letter-spacing可以指定字符间距。
word-spacing可以设置单词之间的距离。实际上就是设置词与词之间空格的大小。
通过display属性可以修改元素的类型，可选值： inline：可以将一个元素作为内联元素显示。block：可以将一个元素设置成块元素显示。inline-block：将一个元素转换为行内块元素。（行内块元素可以使一个元素既有行内元素的特点，又有块元素的特点，即可以设置宽高，又不会独占一行）none：不显示元素，并且元素不会在页面中继续占有位置。（使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置)。
visibility:可以用来设置元素的隐藏和显示的状态，可选值：visible （默认值），元素默认会在页面显示。hidden：元素会隐藏不显示。使用visibility：hidden隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持。
当元素的宽度是auto时，padding会自动调整宽度的大小来适应父元素，确保子元素不会溢出父元素。（会主动往里挤）
通过z-index属性可以用来设置元素的层级。可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级。层级越高，越优先显示。对于没有开启定位的元素不能使用z-index。父元素的层级再高，也不会盖住子元素。
设置元素的透明背景 opacity可以用来设置元素背景的透明，它需要一个0-1之间的值。0表示完全透明，1表示完全不透明，0.5表示半透明。opacity属性在IE8及以下的浏览器中不支持，IE8及以下的浏览器需要使用如下属性代替，filter：alpha(opacity=透明度)，透明度需要一个0-100之间的值，0表示完全透明，100表示完全不透明，50表示半透明。这种方式支持IE6，但是这种效果在IE Tester中无法测试。
在<body>标签的最后引入外部的js文件。

1.<cursor>标签可以用来设置鼠标指针的样式。

在项目测试时，可以压缩css代码和图片整合提升网页访问速度。

css中字体知识点

color是前景色（字体颜色），font-size（设置文字大小，浏览器中默认的文字大小为16px）设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的，我们设置的font-size实际上是设置格的高度，并不是字体的大小，一般情况下文字都要比格要小一些，有时也会比格大，根据字体的不同，显示效果也不同。
font-family可以指定文字的字体，当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体。该样式可以同时指定多个字体，多个字体之间使用逗号分开，当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个。
浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用。在开发中，如果字体太奇怪，用的太少了，尽量不用使用，有可能用户的电脑没有，就不能达到想要的效果。
字体的分类，在网页中将字体分为5大类，可以将字体设置为这些大的分类。当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类指定为font-family中的最后一个字体（一般用serif和sans-serif）。serif（衬线字体），sans-serif(非衬线字体)，monospace（等宽字体）程序语言一般都是等宽字体，cursive（草书字体），fantasy（虚幻字体）
font-style可以用来设置文字的斜体，可选值：normal，默认值，文字正常显示。 italic 文字会以斜体显示。oblique 文字会以倾斜的效果显示。大部分浏览器都不会对倾斜和斜体作区分。也就是说设置italic和oblique的效果往往是一样的，一般只会使用italic。
font-weight可以用来设置文本加粗的效果，可选值：normal，默认值，文字正常显示。bold，文字加粗显示。该样式也可以指定100-900之间的9个值，但是由于用户的计算机往往没有这么多级别的字体，所以不能达到我们想要的效果。也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的。
font-variant可以用来设置小型大写字母，可选值：normal，默认值，文字正常显示。small-caps文本以小型大写字母显示。小型大写字母：将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母的大小小一些。
在css中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式。可以将字体的样式的值统一写在font样式中，不同的值之间使用空格隔开。使用font设置字体样式时，斜体，加粗，小大字母，没有顺序要求，甚至可以不写，如果不写则使用默认值。但是要求文字的大小和字体必须写。而且字体必须是最后一个样式，大小必须是倒数第二个样式。实际上使用简写属性也会有一个比较好的性能。
在chrome浏览器中字体最小支持到12px，1-11都显示为12px。

css中文本知识点

在css中并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接的设置行间距，行高越大行间距越大，使用line-height来设置行高。行高类似于单线本，线与线之间的距离就是行高，网页中的文字也是写在一个看不见的行中的，而文字会默认在行高中垂直居中显示。行间距=行高-字体大小。通过设置line-height可以间接的设置行高，可以接收的值：1.直接接收一个大小，2.可以指定一个百分数，则会相对于字体去计算行高。3.可以直接传一个数值，则行高会设置为字体大小相应的倍数。
对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素中垂直居中。
在font中也可以指定行高，在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值。
text-transform可以用来设置文本的大小写，可选值：none（默认值），该怎么显示就怎么显示不做任何处理。 capitalize 单词的首字母大写，通过空格来识别单词。uppercase 所有的字母都大写。lowercase 所有的字母都小写。
text-decoration可以用来设置文本的修饰，可选值：none（默认值），不添加任何修饰，正常显示。underline为文本添加下划线。overline为文本添加上划线。line-through为文本添加删除线。
text-align用于设置文本的对齐方式，可选值：left(默认值)，文本靠左对齐。right文本靠右对齐。center文本居中对齐。justify两端对齐，通过调整文本之间的空格大小来达到一个两端对齐的目的。
text-indent用来设置首行缩进。当给它指定一个正值时，会自动向右侧缩进指定的像素。如果为它指定一个负值，则会向左移动指定的像素。通过这种方式可以将一些不想显示的文字隐藏起来。这个值一般都会使用em作为单位。
设置文本域不能调整大小。(resize:none)
在文本框或文本域中可以通过<placeholder>标签来指定提示文字（水印），这个属性在IE8及以下的浏览器中不支持，如果要兼容IE8需要使用js。

背景图片的知识点

使用background-image来设置背景图片，语法：background-image：url(相对路径)。如果背景图片大于元素，默认会显示图片的左上角。如果背景图片和元素一样大，则会将背景图片全部显示。相对路径写在哪就相对于哪个文件夹。如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素。可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。一般情况下设置背景图片时都会同时设置一个背景颜色。
background-repeat用于设置背景图片的重复方式，可选值：repeat(默认值)，背景图片会双方向重复（平铺）。no-repeat，背景图片不会重复，有多大就显示多大。repeat-x：背景图片沿水平方向重复。repeat-y：背景图片沿垂直方向重复。
背景图片默认是贴着元素的左上角显示，通过background-position可以调整背景图片在元素中的位置，可选值：该属性可以使用top，right,left,bottom,center中的两个值来指定一个背景图片的位置。也可以直接指定两个偏移量，第一个值是水平偏移量（如果指定的是一个正值，则图片会向右移一指定的像素，如果指定的是一个负值，则图片会向左移指定的像素），第二个值是垂直偏移量（如果指定的是一个正值，则图片会向下移一指定的像素，如果指定的是一个负值，则图片会向上移指定的像素）。
background-attachment用来设置背景图片是否随页面一起滚动。可选值：scroll默认值，背景图片随着窗口滚动。fixed：背景图片会固定在某一位置，不随页面滚动。当背景图片的background-attachment设置为fixed，背景图片的定位永远相对于浏览器的窗口。不随窗口滚动的图片，一般都是设置给body，而不设置给其他元素。
background通过该属性可以同时设置所有背景相关的样式，没有顺序的要求，谁在前谁在后都行，也没有数量的要求，不写的样式就使用默认值。

css中颜色知识点

颜色单位：在css中可以直接使用颜色的单词来表示不同的颜色。也可以使用RGB值来表示不同的颜色，所谓的RGB值指的是通过三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色。例子：rgb（红色的浓度，绿色的浓度，蓝色的浓度）；颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有，浓度也可以采用一个百分数来设置，需要一个0%-100%之间的数字。使用百分数最终也会转换为0-255之间的数。
可以使用十六进制的rgb值来表示颜色，使用三组两位的十六进制数字，每组表示一个颜色，第一组表示红色的浓度，第二组表示绿色的浓度，第三组表示一个蓝色的浓度，范围都是00~ff。语法： #红色绿色蓝色 ，00表示没有，相当于rgb中的0，ff表示最大，相当于rgb中的255 例如红色#ff0000，绿色#00ff00，蓝色#0000ff；像这种两位重复的颜色可以简写比如#ff0000可以写成#f00，#aabbcc可以写成#abc

css中长度单位知识点

像素px，像素是在网页中使用的最多的一个单位，一个像素就相当于屏幕中的一个小点，屏幕实际上就是由这些像素点构成的。但是这些像素点是不能直接看见。不同的显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。
百分比% 也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变，在我们创建一个自适应的页面时，经常使用百分比作为单位。
em 和百分比类似，它是相对于当前元素的字体大小来计算的，1em=1font-size,使用em时，当字体大小发生改变时，em也会随之改变，当设置字体相关的样式时，经常会使用em。

css中的选择器与声明块

css的语法:主要是选择器和声明块。
css选择器：可以选中页面中指定的元素。并且将声明块中的样式应用到选择器对应的元素上。
css声明块：声明块紧跟在选择器的后面，使用一对{}括起来。声明块中实际上就是一组组的名值对结构。一组一组的名值对称为声明。在一个声明块中可以写多个声明，多个声明之间使用;隔开，声明的样式名和样式值之间使用：连接。
css中常用的选择器，
1. 元素选择器：通过元素选择器可以选择页面中的所有指定元素。语法：标签名{}
2. id选择器：通过元素的id属性值选中唯一的一个元素。语法： #id属性值{}，对于id选择器来说，不建议使用复合选择器。
3. 类选择器（class选择器）：可以为元素设置class属性，class属性和id属性类似，但是class属性可以重复，拥有相同class属性值的元素，我们称为一组元素，通过元素的class属性值选中一组元素。语法：.class元素值{} ，可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
4. 选择器分组（并集选择器），通过选择器分组可以同时选中多个选择器对应的元素，语法： 选择器1，选择器2，选择器n{}
5. 通配选择器，可以选中页面中的所有的元素，语法:*{}
6. 复合选择器（交集选择器）作用：可以选中同时满足多个选择器的元素。语法：选择器1选择器2选择器n{}
7. 后代元素选择器作用：选中指定元素的指定后代元素。语法：祖先元素后代元素{}
8. 子元素选择器作用：选中指定父元素的指定子元素语法： 父元素>子元素{}，IE6及以下的浏览器不支持子元素选择器。
选择器越短越好

css中伪类知识点

伪类专门用来表示元素的一种特殊的状态。比如访问过的超链接，普通的超链接，获取焦点的文本框，当我们需要为处在特殊状态的元素设置样式时，就可以使用伪类。
a：link表示普通的链接（没访问过的链接）
a：visited表示访问过的链接，由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体颜色。（浏览器是通过历史记录来判断一个链接是否访问过）
a:hover{} 伪类表示鼠标移入的状态。
a:active{}表示的是超链接被点击的状态
hover和active也可以为其他元素设置。IE6中，不支持对超链接以外的元素设置hover和active。
：focus伪类可以获取焦点
为<p>标签中选中的内容使用样式，可以使用::selection伪类。注意：这个伪类在火狐中需要采用另一种方式编写，::-moz-selection{}
使用伪元素来表示元素中的一些特殊的位置。例如：为<P>标签中第一个字符来设置一个特殊的样式p：first-letter{ color:red;} 例如：为<p>标签中的第一行设置一个背景颜色为黄色p：first-line{background-color:yellow;}
:before表示元素最前边的部分。一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容。
:after表示元素最后边的部分。用的不是特别多。
否定伪类作用：可以从已选中的元素汇总剔除某些元素。语法： :not（选择器）
涉及到a的伪类一共有四个，:link,:visited,:hover,:active,顺序就是如此。否则会被覆盖。

首次加载页面时图片闪烁问题

用超链接伪类做按钮时，发现第一次切换图片时会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验。产生问题的原因：背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求。但是外部资源并不是同时加载的，浏览器会在资源被使用才去加载资源。由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况。
为了解决闪烁情况，可以将多个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，然后通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（css-Sprite）,整合的图片成为雪碧图。
雪碧图的制作，先在ps中调整画布，再整合。
雪碧图只适用于背景图片，而且是宽高都固定的背景。
使用雪碧图的优点
1. 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
2. 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验。

css中属性选择器知识点

属性选择器作用：可以根据元素中的属性或属性值来选取指定元素。
- 语法1：[属性名]选取含有指定属性的元素。
- 语法2：[属性名=“属性值”] 选取含有指定属性值的元素。
- 语法3： [属性名^="属性值"]选取属性值以指定内容开头的元素。
- 语法4：[属性名$=“属性值”] 选取属性值以指定内容结尾的元素。
- 语法5：[属性名*=“属性值”] 选取属性值以包含指定内容的元素。
:first-child可以选中第一个子元素。 :last-child可以选中最后一个子元素。 :nth-child可以选中任意位置的子元素,该选择器后边可以制定一个参数，指定要选中第几个子元素。even表示偶数位置的子元素，odd表示奇数位置的子元素。语法 :nth-child()
:first-of-type :last-of-type :nth-of-type 和上面的类似，只不过child是在所有的子元素中排列，而type是在当前类型的子元素中排列。
后一个兄弟选择器.作用：可以选中一个元素紧挨着的指定的兄弟元素。语法：前一个+后一个
选中后边所有兄弟元素语法：前一个~后边所有。

css选择器优先级知识点

当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突。最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示。
优先级规则：内联样式优先级1000 ， id选择器优先级100，类和伪类优先级10，元素选择器优先级1 通配选择器*优先级0，继承的样式没有优先级。
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，但是注意，选择器的优先级计算不会超过他的最大的数量级。
如果选择器的优先级一样，则使用靠后的样式。
并集选择器的优先级是单独计算的。

css hack知识点

有一些情况，有一些特殊的代码只需要在某些特殊的浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS Hack来解决该问题，CSS Hack实际上指的是一个特殊的代码，这段代码只在某些浏览器中可以识别，而其他浏览器不能识别，通过这种方式，来为一些浏览器设置特殊的代码。条件Hack只对IE浏览器有效，其他的浏览器都会将它识别为注释。IE10及以上的浏览器已经不支持这种方式。<!--[if IE]><![endif]>,通过这种方式可以专门给IE浏览器设置样式表来解决兼容性问题。
在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别。
添加了*的样式只有IE7及以下的浏览器认识。
CSS Hack不到万不得已的情况尽量不要使用。
在选择器前添加 * html，则该选择器只有IE6能够识别。

HTML中表格的知识点

使用<table>标签创建表格，<table>是一个块元素。
<table>和<td>边框之间默认有一个距离，通过border-spacing属性可以设置这个距离。
border-collapse可以用来设置表格的边框合并。如果设置了边框合并，则border-spacing自动失效。
可以使用<th>标签来表示表头中的内容，它的用法和<td>标签一样，不同的是有默认效果（居中和加粗）
有一些情况下表格是非常长的，这时需要将表格分为三个部分，表头，表格的主体，表格底部，在HTML中为我们提供了三个标签：<thead>（表头），<tbody>(表格主体)，<tfoot>（表格底部），这三个标签的作用，就是来区分表格的不同的部分，他们都是<table>标签的子标签，都需要直接写到<table>标签中，<tr>需要写在这些标签当中，<thead>中的内容，永远会显示在表格的头部，<tfoot>中的内容，永远都会显示在表格的底部，<tbody>标签中的内容，永远都会显示在表格的中部。如果表格中没有写<tbody>标签，浏览器会自动在表格中添加<tbody>标签并且将所有的<tr>标签都放到<tbody>标签中，所以注意<tr>标签并不是<table>标签的子元素，而是<tbody>标签的子元素，通过table>tr无法选中需要通过tbody>tr
表格的列数由<td>标签最多的那行决定，表格是可以嵌套的，可以在<td>标签中放置一个表格。

css盒模型知识点

盒子模型：一个盒子会分成几个部分：内容区（content），内边距（padding），边框（border），外边距（margin）。
使用width来设置盒子内容区的宽度，使用height来设置盒子内容区的高度。width和height只是设置的盒子内容区的大小，而不是盒子的整个大小。
为元素设置边框，要为一个元素设置边框必须指定三个样式。border-width：边框的宽度。border-color：边框颜色。border-style：边框属性。
盒子可见框的大小由内容区，内边距和边框共同决定。
border-width设置边框的宽度，使用border-width可以分别指定四个边框的宽度，如果在border-width指定了四个值，则四个值会分别设置给上右下左，按照顺时针的方向设置的。如果指定三个值，则三个值分别设置给上，左右，下。如果指定两个值，则两个值分别设置给上下，左右。如果指定一个值，则四边都是该值。除了border-width，css中还提供了border-xxx-width，xxx的值可能是top，right，bottom，left，专门用来设置指定边的宽度。
border-color设置边框的颜色，使用border-color可以分别指定四个边框的颜色，如果在border-color指定了四个值，则四个值会分别设置给上右下左，按照顺时针的方向设置的。如果指定三个值，则三个值分别设置给上，左右，下。如果指定两个值，则两个值分别设置给上下，左右。如果指定一个值，则四边都是该值。除了border-color，css中还提供了border-xxx-color，xxx的值可能是top，right，bottom，left，专门用来设置指定边的颜色。
border-style：设置边框的样式，可选值：none（默认值），solid实线，dotted点状虚线，dashed虚线，double双线。style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边。
火狐浏览器边框默认是3，颜色是黑色。大部分的浏览器中，边框的宽度和颜色都是有默认值的，而边框的样式默认值都是none。
border是边框的间接样式，通过它可以同时设置四个边框的样式，宽度，颜色。而且没有任何顺序要求。border一指定就是同时指定四个边不能分别指定。border-top，border-right，border-left，border-bottom可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效。
内边距（padding）：指的是盒子的内容区与盒子边框之间的距离，一共有四个方向的内边距。可以通过：padding-top，padding-right，padding-bottom，padding-left来设置四个方向的内边距。内边距会影响盒子可见框的大小。元素的背景会延伸到内边距。盒子的大小由内容区，内边距和边框共同决定。盒子可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width.可见框的高度=border-top-width+padding-top+height+padding-bottom+border-bottom-width。
使用padding可以同时设置四个边框的样式，规则和border-width一致。
外边距指的是盒子与其他盒子之间的距离，不会影响可见框的大小，但是会影响到盒子的位置。盒子有四个方向的外边距：margin-top，margin-right，margin-bottom，margin-left。由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变。而如果是设置右和下外边距时，会导致盒子其他位置发生改变。外边距也可以指定一个负值，如果外边距设置的是负值，则元素会向反方向移动。margin还可以设置为auto，auto一般只设置给水平方向的margin。如果只指定左外边距或有外边距的margin为auto则会将外边距设置为最大值。垂直方向外边距如果设置为auto，则外边距默认就是0.如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto以使子元素在父元素中水平居中。外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和padding一样。特殊形式（margin：0 auto；居中）
垂直外边距的重叠，在网页中垂直方向的相邻外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。消除重叠的方式可以改变两个条件之一，如垂直条件（可以设置父元素的padding来代替margin），相邻条件（可以给父元素设置边框，或者设置父元素的内边距）。
浏览器为了在页面中没有样式时，也可以让页面有一个比较好的显示效果。所以为很多元素都设置了一些默认的margin和padding，而他的这些默认样式，正常情况下是不需要使用的，所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉。*{margin：0；padding：0；}
内联元素不能设置width和height,内联元素可以设置水平方向的内边距，内联元素可以设置垂直方向的内边距，但是不会影响页面布局，内联元素可以设置边框，但是垂直的边框不会影响页面布局，内联元素支持水平方向的外边距，内联元素不支持垂直外边距。

元素外边距重叠问题

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。
display:table可以将一个元素设置为表格显示。可以解决父子元素外边距重叠
经过修改后的clearfix是一个多功能的，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠，.clearfix:before,.clearfix:after{ content:"";display:table;clear:both;}

BFC相关知识及开启方式

根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context,简称BFC，该属性可以设置打开或者关闭，默认是关闭的，当开启元素的BFC以后，元素将具有如下的特性：
1. 父元素的垂直外边距不会和子元素重叠。
2. 开启BFC的元素不会被浮动元素所覆盖。
3. 开启BFC的元素可以包含浮动的子元素。
如何开启元素的BFC
1. 设置元素浮动（使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且是用这种方式也会导致下边的元素上移，不能解决高度塌陷的问题）
2. 设置元素绝对定位
3. 设置元素为inline-block（可以解决高度塌陷的问题，但是会导致宽度丢失，不推荐使用这种方式）
4. 将元素的overflow设置为一个非visible的值。（推荐方式，将overflow设置为hidden是副作用最小的开启BFC的方式。解决高度塌陷最简单的方式）
但是在IE6及以下的浏览器并不支持BFC，所以使用这种方式不能兼容IE6，在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所以在IE6浏览器可以通过开hasLayout来解决该问题，开启方式很多，副作用最小的：直接将元素的zoom设置为1即可
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍。zoom：1表示不放大元素，但是通过该样式可以开启hasLayout。zoom这个样式，只在IE中支持，其他浏览器都不支持。
在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout。

html中表单的知识点

表单的作用就是用来将用户信息提交给服务器的。使用<from>标签创建一个表单。<form>标签中必须制定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址。使用<form>标签创建的仅仅是一个空白的表单，我们还需要向<form>标签中添加不同的表单项。
使用<input>标签来创建一个文本框，它的type属性是text。（内联元素）如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性。name表示提交内容的名字。用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器，格式：url地址？查询字符串 （属性名=属性值&属性名=属性值）在文本框中也可以指定value属性值，该值会将作为文本框的默认值显示。
提交按钮可以将表单中的信息提交给服务器，同样使用<input>标签创建一个提交按钮，它的type是submit。在提交按钮中可以通过value属性来指定按钮上的文字。
使用<input>标签创建一个密码框，它的type是password。
使用<input>标签来创建一个单选按钮，它的type属性使用radio，单选按钮通过name属性进行分组，name属性相同是一组按钮，像需要用户选择，但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器。
多选框使用<input>标签创建，它的type属性使用checkbox。
使用<select>标签来创建一个下拉列表，在下拉列表中使用<option>标签来创建一个一个列表项，下拉列表的name属性需要指定给<select>标签，而value属性需要指定给<option>标签，可以通过在<option>标签中添加selected=“selected”来将选项设置为默认选中。当为<select>标签添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表。在<select>标签中可以使用optgroup属性对选项进行分组，同一个optgroup的选项是一组。可以通过label属性来指定分组的名字。
如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked=“checked”属性。
使用<textarea>标签创建一个多行文本框(文本域)
使用<input>标签创建一个重置按钮，它的type是reset，点击重置按钮后表单中内容会恢复为默认值。
使用<input type=button>可以创建单纯的按钮，这个按钮没有任何功能，只能被点击。除了使用<input>也可以使用<button>标签来创建。这种方式和使用<input>类似，只不过由于它是成对出现的标签，使用起来更加的灵活。
在html中专门用来选中表单中的提示文字的<label>标签。该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值。
在表单中可以使用<fieldset>标签来为表单项进行分组，可以将表单项中的同一组放到一个<fieldset>标签中，在<fieldset>标签中可以使用<legend>子标签，来指定组名。

清除元素浮动的问题

我们有时希望清除掉其他元素浮动对当前元素产生的影响。这时可以使用clear属性来完成，clear可以用来清除其他浮动元素对当前元素的影响。可选值：none(默认值)，不清除浮动。left，清除左侧浮动对当前元素的影响。right，清除右侧浮动元素对当前元素的影响。both，清除两侧浮动元素对当前元素的影响（清除对它影响最大的一侧）。清除浮动以后，元素会回到其它元素浮动之前的位置。

父元素高度塌陷相关知识点

高度塌陷的原因：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素多高，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致父元素无法撑起子元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。
解决高度塌陷的几种方案
1. 我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
2. 可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的。然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
3. 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理是一样的，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。但是在IE6中不支持after伪类，，所以在IE6中还需要使用hasLayout来处理。

元素定位的知识点

定位指的是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素，通过position属性来设置元素的定位，可选值static：（默认值）元素没有开启定位。relative：开启元素的相对定位。absolute：开启元素的绝对定位。fixed：开启元素的固定定位（绝对定位的一种）。当开启了元素的定位（position属性值是一个非static的值）时，可以通过left，right，top，bottom四个属性来设置元素的偏移量。left：元素相对其定位位置的左侧偏移量。right：元素相对于其定位位置的右侧偏移量。
top：元素相对于其定位位置的上边的偏移量。bottom：元素相对于其定位位置下边的偏移量。
当元素的position属性设置为relative时，则开启了元素的相对定位。当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。相对定位是相对于元素在文档流中原来的位置移动。相对定位的元素不会脱离文档流。相对定位会使元素提升一个层级。通常偏移量只需要两个就可以对一个元素进行定位，一般选择水平方向的偏移量和垂直方向的偏移量来为元素进行定位。相对定位不会改变元素的性质，块还是快，内联还是内联。
当position属性值设置为absolute时，则开启了元素的绝对定位。绝对定位的特点：
1. 开启绝对定位会脱离文档流。
2. 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化。
3. 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）。如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
4. 绝对定位会使元素提升一个层级。
5. 绝对定位会改变元素的性质，内联元素会变成块元素，块元素的宽度和高度默认都被内容撑开。
当元素的position属性设置fixed时，则开启了元素的固定定位。固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样。不同的是：固定定位永远都会相对于浏览器窗口定位。固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动。IE6不支持固定定位。
如果定位元素的层级是一样的，则下边的元素会盖住上边的。

引用的路径的知识点

相对路径：相对于当前资源所在目录的位置。
可以使用../来返回上一级目录，返回几级目录就写几个../
可以在样式的最后添加一个！important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示，甚至超过内联样式。但是在开发中不建议使用。

引用的图片的知识点

图片的格式

JPEG(JPG)支持的颜色比较多，图片可以压缩，但不支持透明，一般使用JPEG来保存照片等颜色丰富的图片。
GIF支持的颜色少，只支持简单的透明，支持动态图，图片颜色单一或者是动态图时可以使用gif。
PNG支持的颜色多，并且支持复杂的透明，可以用来显示颜色复杂的透明的图片。

图片的使用原则：效果不一致，使用效果好的，效果一样，使用小的。

IE6中图片显示问题

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示。
解决方法：
1. 可以使用png8来代替png24，即可解决问题。但是使用png8代替使用png24以后，图片的清晰度会有所下降。
2. 使用js来解决该问题，需要向页面中引入一个外部的js文件，然后再写一些简单的js代码，来处理该问题。DD_belatedPNG.fix('标签名')；

IE6中双倍边距问题

IE6的双倍边距bug，在IE6中，当为一个向左浮动的元素设置左外边距，或者为一个向右浮动的元素设置右外边距，这个外边距将会是设置的值的2倍，添加一个样式来解决IE6的双倍边距问题，display：inline。对于一个浮动元素来说设置没有任何意义，但是该属性可以解决IE6的双倍边距问题。

html中框架集的知识点

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架。使用<frameset>标签来创建一个框架集，注意<frameset>标签不能和<body>标签出现在同一个页面中，所以要使用框架集，页面中就不可以使用<body>标签。在<frameset>标签中使用<frame>子标签来指定要引入的页面。引入几个页面就写几个<frame>标签。属性：rows：指定框架集中所有的框架，一行一行的排列。cols，指定框架集中的所有的页面，一列一列的排列，这两个属性<frameset>标签必须选择一个，并且需要在属性中指定每一部分所占的大小。
<frameset>标签中也可以嵌套<frameset>标签。<frameset>标签和<iframe>标签一样，它里面的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它不是去判断里边的内容的使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加在一个页面，浏览器阿都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差，如果非得用，建议使用<frameset>标签而不使用<iframe>标签。

xhtml常用语法规范

HTML中不区分大小写，但是一般都使用小写。
HTML中的注释不能嵌套。
HTML标签必须结构完整，要么成对出现，要么自结束标签（浏览器会尽最大的努力正确解析页面，所有不符合语法规范的内容，浏览器都会自动修正，但是有些情况会修正错误）。
HTML标签可以嵌套，但是不能交叉嵌套。
HTML标签中的属性必须有值，且值必须加引号。

标签命名规范

id ，class和文件的命名规范，命名时尽量使用英文，如果不会可以使用拼音，但是不要英文和拼音混用。命名格式，驼峰命名法，首字母小写，每个单词的开头字母大写，例子：aaaBbbCcc ,helloWorld,也可以所有的字母都小写，单词之间使用_或-链接，aaa_bbb_ccc , aaa-bbb-ccc。