HTML5+移动APP开发中遇到的各种代码元素的含义（二）

1、HTML中重点标签的用法

HTML标签包括两种，即块级元素(block)、内嵌元素（inline）（注意：具体的来说应该是三种，另外一种是行内块元素，常用的就是img和input,这里放在内嵌元素里了），块级元素：一般用来搭建网页架构、布局、承载内容……它包括右边这些标签：div、p、ul、ol、li、dl、dt、dd、fieldset、form、h1~h6、hr、table等，内嵌元素：一般用在网页内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，右边这些标签都属于内嵌元素：span、a、b、strong、i、em、label、textarea、small、img、input（img和input,这里放在内嵌元素里了）。下面对几个常用的进行详细说明：

• div 一直把他想作是一个箱子，这个div没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是< div> < /div> 必需要有封口。用DIV来整体的包住所有的段落，这是非常实用的。
• p 这是一个有特定语义的标签，表示段落，是用来区分段落的，正确的写法是< p> < /p> 
• span这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个（级联）内嵌元素，不是块级元素。把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。
• ul,li 这是一个列表，在列表中，除了UL还OL，不过OL没啥用。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般不推荐使用 OL，有UL就可以了。UL是块级的，他的子级li也是块级标签。正确的写法是< ul> < li> < /li> < /ul> LI标签是被UL标签包裹的，在UL标签里可以有无数个LI标签，LI标签不能独立使用。并且LI标签一定要封口。
• dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT是指标题，DD是指内容，DL是包括他们的容器。正确的写法是< dl> < dt> < /dt> < dd> < /dd> < /dl> 在DL里可以有很多组的DT，DD，当出现很多组的时候尽量是一个DT配一个DD，如果DD中内容很多，可以在DD里加P标签配合使用。
• a  这表示链接，是一个特定属性的，也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是：< a href=" " title=" " > < /a> 其中的href是表示目标地址，TITLE是鼠标悬停提示文字，这是可有可无的。
• img 这是图片标签，也是个特定属性的标签。正常写法是：< img src=" " alt=" " title=" " /> 这里的src是目标地址，ALT与TITLE是替换文字，ALT是 IE特定的，TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。
• H 这是一个系列的标签，从H1到H6，一共六个。正确写法是：< h> < /h> 主要是用来存放标题，这六个标签之间最好不要出现什么相互包含的事。
• strong 这个意思是着重，这是有语义的，作用也很简单。至于样式，是加粗着重，还是用色彩表明着重，那都是自行选择。正确的写法是< strong> < /strong> 
• em 这个与strong很像，是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是：< em> < /em> 

2、BEM思想

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论，BEM（或BEM的变体）是一个非常有用，强大，简单的命名约定，以至于让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密。

命名约定的模式如下：

.block{}
.block__element{}
.block--modifier{}	

1. .block 代表了更高级别的抽象或组件。
2. .block__element 代表.block的后代，用于形成一个完整的.block的整体。
3. .block--modifier代表.block的不同状态或不同版本。

3、html中特殊符号，例如大于小于符号表示方法

显示结果	描述	实体名称	实体编号
	空格	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
"	引号	&quot;	&#34;
'	撇号	&apos; (IE不支持)	&#39;

4、<pre>与<figure>标签

<pre>标签用于定义预先排版的文本。<pre>元素里的文本是用定宽字体显示的，而且会保留空格和换行。

html元素<figure> 标签是HTML5中新增的标签，用于定义文档中独立的流内容，<figure> 标签规定独立的流内容（图像、图表、统计图、照片、代码等等）；<figure> 标签的元素内容应该与主内容相关，同时元素的位置相对于主内容是独立的。<figure> 标签的元素内容被删除，则不应对文档流产生影响。<figure> 标签属于块元素；默认的宽度是100%；默认高度是元素内容的高度，它实质上跟DIV标签是完全一样的特性；

5、str.replace(/\//g, ' ')表示意思

.replace(/\//g, ' ')的作用是把所有的 / 替换为空，下面是说明：
.replace(参数1,参数2)的作用是把 参数1 替换为 参数2，这里参数1为/\//g，参数2为空。意思就是把符合这个表达式的字符串替换为空。
下面说下这表达式：/\//g
格式为：/ pattern /[switch]
pattern就是要替换的字符串
[switch]有三个常用值：
g：代表全局匹配
i：代表忽略大小写
gi：代表全局匹配+忽略大小写
[switch]为空的话只匹配第一个符合表达式的值
所以 /\//g 就是指 所有的 \/，而 \/ 就比较好理解了，就是 / 前面加个转义符号。

6、style="display: none;"与style="visibility:hidden;"

当visibility被设置为hidden时，元素虽然被隐藏了，但是它仍然占据它原来的位置。display属性就不一样，visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。当display被设置为none时，这时元素实际上就从页面中被移走，它下面所在的元素就会自动跟上填补空间。即display: none表示消失，visibility:hidden表示隐藏。注意：一般在HTML中使用hidden后，进行占位控制布局，在JS中进行逻辑控制显示即可。

7、$("#merNameID").html(merName);

信息反显 ，html中的ID最好不能重复，ID是JS中进行元素操作的标识。即可以通过HTML中的ID在js中进行显示操作。

8、mui.fire(lifeHome, "refreshQRCodePay", {})

通过mui.fire方法可以触发目标窗口的自定义事件。示例即为触发lifehome窗口的刷新事件。

9、 $("#backBtn").click(function() {  mui.back(); });

在HTML5+移动开发中，完全使得前端页面展示与JS逻辑控制相分离，通过需求确定业务逻辑与页面要素之后，可以先进行前端页面的展示，完成要素开发之后再进行js逻辑层面的开发，同时与HTML页面和后端建立起联系完成整个开发过程。

10、$("img").attr("width","180");

.attr() 方法设置或返回被选元素的属性值。

11、readonly="readonly"

readonly属性规定输入字段为只读。