语法规范
不区分大小写，但是一般使用小写
注释不能嵌套！
标签必须结构完整，要么成对出现，要么为自结束标签
HTML可以嵌套，不可以交叉嵌套
HTML中的属性必须有值，必须有引号，双单引号都可以
1.框架
<!DOCTYPE html><!--文档声明，声明当前的网页是按照HTML5标准-->
<html> <!--根标签，一个页面有且只有一个-->
<head> <!--帮助浏览器解析网页-->
<meta charsef="UTF-8"/><!--需要用来告诉浏览器，网页所采用的编码字符集，用来设置网页的一些元数据，比如字符集，关键字，简介-->
<title></title><!--标题标签，搜索引擎在检索页面时，首先检索title-->
</head> <!--子标签，与body为兄弟标签-->
<body> <!-- 页面所有可见内容写在内部-->
</body> < !-- 子标签 -->
</html>
2.注释标签 <!-- --> 不会在页面显示，开发人员可以看见
3.标题标签
<h1></h1>........<h6></h6> 由大到小 ，但是文字大小我们不必关心有css可以将六级比一级还大，注重语义，h1最重要，依次减小
4.单独设置标签
<font> 规定文本的字体、字体尺寸、字体颜色。 不赞成使用，css可设置
<h1>这是我的<font color="red">第一个</font>网页</h1>
==5.属性 ==
只能在在开始标签中写，实际就是一个名值对的结构 。w3school可具体查有哪些属性。多个属性空格隔开
6.段落标签 <p></p> 控制一个段落
7.空格标签 HTML中写再多空格都当一个空格对待。 代表一个空格。
8.分割线标签 <hr/>
9.换行标签 <br/>
10.转义字符串 &实体的名字；
在HTML中，例如<,>这种字符不能直接使用，需要一些特殊的符号表示这些字符
< < , > > ， 版权符号 © © w3school 找HTML实体
11.图片标签
使用img标签来向网页中引入ー个外部图片，img标签也是一个自结束标签
属性:
src:设置一个外部图片的路径
alt:可以用来设置在图片本能显示时,对图片的描述。搜素引可以通过a1t属性来识别不同的图片，若不写,则搜素引不会对图片进行收录
width:可以用来修改图片的宽度,一般使用px作为单位
height:可以用来修改图片的高度,一般使用px作为单位。宽度和高度两个属性如果指设置一个,另一个也会同时等比例整大小
如果两个值同时指定则按照你指定的值来设置，一般不建议设置 width和 height
<img src="abc/1.gif" alt="这是一个" width="100px" height="100px" />
相对路径
当前资源所在目录的位置。./返回上一级
绝对路径
图片格式
JPEG (JPG)
JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明，一般使用JPEG来保存照片等颜色丰富的图片
GIF
GIF支持的颜色少,只支持简单的遗明,支持动态图，图片颜色单一或者是动态图时可以使用gif
PNG
支持的颜色多,并且支持复杂的透，可以用来显示颜色复杂的透明的图片
图片的使用原则:
效果不一致,使用效果好的，效果一致,使用小的
12.meta标签
属性
name：对content的一描述。author，description，keywords，generator，revised，others
content：关键字,可以不止一个
<meta name="keywords" content="HTML5,JavaScript,前端" /> 设置网页的关键字
<meta name="description" content="发布HTML5,JavaScript,前端相关信息" /> 指定网页的描述，搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这俩个不会影响在搜索引擎中的排名
<meta http-equiv="refresh" content="秒数;url=目标路径" /> 请求重定向
13.内联框架
在一个页面中引入另一个页面。<iframe></iframe>，一般不推荐，搜索引擎不回去检索
<iframe src="目标地址" name="tom" width="" height=""> </iframe>
14.超链接
从一个页面跳转到另一个页面。
href: 跳转的目标地址，可以是一个相对路径，也可是绝对路径。地址为#自动跳转当前顶部，#id去往id所在位置。mailto:邮件地址，计算机中默认邮件客户端，并将收件人设置为mailto后的邮件地址。
target：指定打开链接的位置。
_self:当前窗口，默认值。
_blank：新窗口。
可为内联框架name的值，即为在同name的内联框架打开。
<a href="" target=""></a>
HTML中所有标签都可以有id属性，作为标签的唯一标识，一个页面中id值不可以重复。
15.<em><em/>表示一段内容中的着重点。通常显示为斜体
<strong><strong/>表示一个内容的重要性。 通常显示为粗体
二者可以单独使用，也可以一起使用
<strong>警告：任何情况下不要接近僵尸。</strong>
他们只是<em>看起来</em>很友好？
16<b></b> 标签中内容加粗显示，无任何语义
<i></i> 标签中内容斜体显示，无任何语义
<u></u> 标签中内容下划线显示，无任何语义
17<smal></smal>:标签中内容比父元素文字小一些，经常用来表示一些细则，例如版权声明等
18.<cite></cite>:指明对某内容的引用或参考。例如，戏剧，文章，图书的标题，歌曲电影等
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
19.<q></q>表示一个短的引用（行内引用） ，q标签引用的内容，浏览器会默认加上引号
<blockquote></blockquate>长引用，（块级引用）
子曰：<q>学而时习之不亦说乎！</q>
<div>
子曰：
<blockquote>
有朋自远方来，不亦说乎！
</blockquote>
</div>
20.<sup></sup> 设置一个上标
21. <sub></sub> 设置一个下标
22. <del></del> 表示删除一个内容，标签中的内容会自动添加删除线
23. <ins></ins> 表示插入一个内容，标签中的内容会自动添加一个下划线
24. <pre></pre> 页面中需要直接编写一些代码，pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
25. <code></code> 专门用来表示代码，pre，code一般结合使用
<pre>
<code>
window.οnlοad=function(){
alert("Hallo,World");
};
</code>
</pre>26.列表标签列表只见可以互相嵌套
①无须列表<ul></ul>,使用<li></li>创建一个个列表项，一个li就是一个列表项。二者都是块元素。
通过type属性可以修改项目符号，disc(默认) square circle，默认的项目符号一般不使用。 每个浏览器样式不统一，去掉默认 css中设置一个样式，ul{list-style：none；}。若需要项目符号，可采用为li设置背景图片的方式设置。
②有序列表与无须类似，<ol></ol>代替ul，也是块元素
type属性指定项目符号类型罗马数字（默认）a A
③定义列表用来对一些词汇或内容进行定义，<dl></dl>有俩个子标签，dt：被定义的内容；dd：对定义内容的描述。
<ul>
<li>鱼香肉丝
<ol>
<li>鱼香</li>
<li>肉丝</li>
</ol>
</li>
<li>宫保鸡丁
<ul>
<li>宫保</li>
<li>鸡丁</li>
</ul>
</li>
<li>青椒肉丝
<dl>
<dt>青椒</dt>
<dd>一种很辣的蔬菜</dd>
<dt>肉丝</dt>
<dd>一般采用猪肉，切成条状</dd>
</dl>
</li>
</ul>27=表格
<table></table>使用table标签来创建一个表格,tr来表示表格中的一行,有几行就有几个tr,tr中需要使用td来创建一个单元格，有几个单元格就有几个td。rowspan用来设置纵向的合并单元格，colspan用来设置横向的合并单元格.th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果加粗居中。
属性：
border- spacing:table和td边框之间默认有一个距离,设置这个距离。 border-spacing:0px ;
border- collapse可以用来设置表格的边框合并。如果设置了边框合并，则border-spacing自动失效。border-collapse: collapsep;
tr:hover{
background-color: #ff0;
／／表格被选中时变化
}
tr:nth-child(even) {
background-color: #bfa;
／／表格奇数行背景颜色
｝长表格：将表格分为三个部分，表头，表格的主体，表格底部。三个标签:thead表头tbody表格主体tfoot表格底部。这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远都会显示表格的顶部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody,浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素。通过table > tr无法选中行需要通过tbody > tr
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格。不推荐，维护性差
代码28.表单：
表单的作用就是用来将用户信息提交给服务器的.比如:百度的搜索框注册登录这些操作都需要填写表单
<form></form>标签创建一个表单，必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址。<form action="target . html">
使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项。
表单项：
a)文本框：
使用input来创建一一个文本框， 它的type属性是text.如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性,name表示提交内容的名字。用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器：url地址?查询字符串
格式：属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
用户名<input type="text" name="username" Value="我是value" />
b)提交按钮：
提交按钮可以将表单中的信息提交给服务器。使用input创建一个提交按钮，它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字
<input type= "submit" value="注册” />
c)密码框:
使用input创建-一个密码框，它的type属性值是password
密码<input type="password" name="passwordl" />
d)单选按钮
使用input来创建一个单选按钮，它的type属性使用radio
-单选按钮通过name属性进行分组，name属性相同是一组按钮
-像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
性别<input type="radio" name= " gender" value="male" />男
<input type="radio" name=" gender" value= "female" />女
e)多选框
-使用input创建一个多选框，它的type属性使用checkbox
如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked= "checked"属性
爱好<input type="checkbox" name="hobby" value="zq" />足球
<input type='checkbox" name= "hobby" value="lq" />篮球
<input type='checkbox" name="hobby" value="ymq" />羽毛球
<input type='checkbox" name= "hobby" value="ppq" />乒乓球
f)下拉列表
-使用select来创建一个 下拉列表
下拉列表的name属性需要指定给select,
而value属性需要指定给子标签option。 在下拉列表中使用option标签来创建一个一个列表项 ,可以通过在option中添t加selected="selected"来将选项设置为默认选中
当为select添加一个multiple=“multiple”，则下拉列表变为一个多选的下拉列表
你喜欢的明星<select name="star">
<option value="fbb" >范冰冰</option>
<option value="lxr">林心如</ option>
<option value="zbs" >赵本山</option>
</select>
在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，可以通过label属性来指定分组的名字
<optgroup label="女明星">
<option value= "fbb">范冰冰</option>
<option value="lxr"> 林心如</option>
<option value= " zw">赵薇</ option>
</ optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">赵本山</option>
<option value= "1dh">刘德华</ option>
<option value= "pcj">潘长江</option>
</optgroup>
g)文本域：
使用textarea创建一个文本域，宽高在css中设置
自我介绍<textarea name="info"></textarea>
h)重置按钮
点击重置按钮以后表单中内容将 会恢复为默认值
<input type="reset" />可以创建一个重置按钮，
l)单纯按钮：
创建一一个 单纯的按钮，这个按钮没有任何功能，只能被点击。js中会用
<input type="button" value="按钮" />
29.<button></button>
除了使用input，也可以使用button标签来创建按钮,这种方式和使用input类似，只不过由于它是成对出现的标签,使用起来更加的灵活
<button type="submit">提交</button>
<button type="reset">重置</button>
< button type="button" >按钮< /button>
30<label></label>
在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
<label for="um">用户名</label>
<input id="um" type= "text"name="username" />
31<fieldest></fieldset>
在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中
在fieldset可 以使用legend子标签，来指定组名
<fieldset>
<legend>用户信息</legend>
</fieldset>
32.框架集：
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架。
<frameset></frameset>使用frameset来创建一一个框架集， 注意frameset不能和body出现在同一个页面中。所以要使用框架集，页面中就不可以使用body标签
属性:
rows，指定框架集中的所有的框架，一 行一行的排列
cols，指定框架集中的所有的页面，- -列一列的排列
这两个属性frameset必须选择一一个， 并且需要在属性中指定每一部分所占的大小
<frameset cols="50%，50%">数值：引入几个页面写几个
在frameset中使用frame子标签来指定要引入的页面，引入几个页面就写几个frame
</frameset cols="50%，50%">
<frame src="01. 表格. html" />
<frame src="02. 表格. html" />
</ frameset>
<frameset cols"30%，*， 30%"> *：除了俩个30%剩余的
frameset中也可以再嵌套frameset
< frameset>
<frame src="01. 表格. html" />
<frame src="02. 表格. html" />
<frameset rows= "30% , 50%, * "><!-- 嵌套一个frameset -->
<frame src="04. 表格的布局. html" />
<frame src="05. 完善clearfix. html" />
<frame src="06.表单. html|" />
</ frameset>
</ frameset>
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一一个框架页的话，它是不能去判断里边的内容的．使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差，如果非得用建议使用frameset而不使用iframe．
33.id class 命名：
id class和文 件的命名规范
-命名时尽量使用英文，如果不会可以使用拼音,但是不要英文和拼音混用
命名格式：
驼峰命名法 -首字母小写，每个单词的开头字母大写 例子: aaaBbbCcc helloWorld
-也可以所有的字母都小写，单词之间使用或-链接 例子：aaa_ bbb_ CCC aaa- bbb-ccc
