HTML常见标签总结
什么是浏览器
解释和执行HTML源码的工具
五大浏览器：IE、FF(FireFox)(火狐)、Chrome(谷歌)、Opera(空中)、Safari（Apple）(苹果)
IE用的是Trident引擎(WebBrowser控件)
其它很多都用的是WebKit引擎(开源浏览器内核)
HTML:Hypertext Markup Language超文本标记语言
CSS:Cascading Style Sheet层叠样式表
静态页面和动态页面
静态页面：后缀名为html或htm的都是静态页面
动态页面：包括一些脚本代码，服务器动态生成的HTML页面发给浏览器
html、htm都是静态页面
asp、aspx、jsp、php等都是动态页面
基本标签
文档类型定义
Document Type Definition,DTD
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html></html>基本标签 3 <head></head>头部信息，对页面描述 4 <title></title>页面的标题，只能放在<head></head>中 5 <body></body>页面的主体 body标签的bgcolor属性可以设定网页的背景颜色 6 <!--此为注释--> 7 <meta name="keywords" content="新闻，娱乐，八卦"/>网页的描述信息，关键字-----和网站优化相关 8 <meta name='description' content="中国最大的八卦新闻网站">网页的描述信息，信息 9 <h1></h1>————<h6></h6>标题标签 10 <br/>回车 11 <p></p>段落标签，分段 12 <center></center>居中显示 13 <b></b> <strong></strong>都是粗体，推荐后者 14 <i></i> <em></em>都是斜体，推荐后者 15 <u></u>下划线 16 <sub></sub>下标 <sup></sup>上标 17 <font></font>字体标签 color颜色 size(1——7)字体大小 face字体样式 18 <hr/>华丽的分割线 color颜色 size厚度 width长度 align=left/center/right默认是居中显示 19 <pre></pre>预格式化，保持本色 20 空格 <小于 >大于 && 21 <a></a>超链接 href链接地址(/表示网站根目录，../表示父母路，../../表示父目录的父目录，/或没有/表示相对于当前路径的目录) 22 name(锚记 href="#name") target:_blank(在新窗口中打开)、_self(在自己窗口中打开)、_parent(父窗口中打开)、_top(在顶级窗口中打开)、框架名称(在指定框架中打开) title超链接信息 23 <img/>图片 src指向图片地址，不是插入的 a 24 25 lt图片无法显示时的显示文本，鼠标放上去也会有悬浮提示“点击查看大图” 26 title显示鼠标放上图片上显示的文字 border指定边框 27 <dl></dl>定义列表 <dt>河北</dt><dd>石家庄</dd><dd>沧州</dd><dd>保定</dd> 28 <ul></ul>无序列表 type可以取值disc(圆点)、circle(圆圈)、square(方块) 29 <ol></ol>有序列表 type可以取值A、a、1、i、I 30 <table></table>表格 <tr></tr>行 <td></td>单元格 31 cellpadding内容和表格边线之间的距离 32 cellspacing单元格之间的间距 33 <tr>和<td>的属性： align水平对齐 34 valign垂直对齐 35 rowspan合并行 36 colspan合并列 37 完整的表格：table/caption/thead/tbody/tfoot/tr/td/th 38 <form></form>表单 需要把数据提交到服务器，需要把<input><textarea><select>放到<form>中 39 <input/>表单元素 submit/button/checkbox/file/hidden/image/password/radio/reset/text 40 text:maxlength输入最大长度 readonly只读 41 file:form的enctype必须设置为multipart/form-data，method属性为post 42 <select></select> size>1就是ListBox，否则就是ComboBox multiple多选 43 <option></option> selected默认选中 44 <textarea></textarea>多行文本，文本域 cols列数 rows行数 45 <label></label>文本 for指定要修饰的控件的id accesskey="r"指定快捷键 46 <fieldset></fieldset>GroupBox效果 <legend></legend>修饰这个GroupBox信息 47 <marquee></marquee>滚动文字 direction滚动方向 behavior(scroll/slide/alternate) scrolldelay滚动速度 48 <bgsound/>播放wav和mid格式的声音 49 <div></div>层 display:inline变成<span>效果 50 <span></span> display:block变成<div>效果 51 <frameset></frameset>框架 52 <frameset rows="30%,65%,*" cols="50%,50%"> 53 <frame src="top.html" noresize/> 54 <frameset cols="20%,80%"> 55 <frame src="left.html" noresize/> 56 <frame src="main.html" noresize/> 57 </frameset> 58 <noframes> 59 <body>当浏览器不支持框架时，显示这个内容</body> 60 </noframes> 61 </frameset> 62 63 <iframe src="iframe.html" name="0" width="0" height="0"></iframe>不分割当前页面，就可以嵌入其它页面
HTML和XML的联系和区别
相同点
都是标记语言，注释都一样
都可以通过dom编程方式来访问
都可以通过CSS来改变外观
不同点
xml比html语法要求更严格
xml侧重于数据存储，html侧重于数据展示
样式表、CSS
CSS的好处
外观美化，布局，定位
实现内容与样式的分离，方便团队开发
方便统一定义格式，修改也方便
CSS的计量单位：px、%、em(相对单位)
CSS的属性：
background-color:背景颜色
border-style:边框风格 solid(实线)、dashed(虚线)、dotted(点)
border-width:边框宽度
border-color:边框颜色
display:元素是否显示 block(块级元素)、none(不显示)、inline(内联元素)
cursor:鼠标样式 pointer(小手)、text(输入Bean)、wait(忙沙漏)、help(帮助)
cursor:url(1.ani)使用ani和cur格式的自定义光标图片
list-style-type:none li不显示原点，设置在ul或者li上
margin:上右下左 与表格的cellspacing类似
padding:与表格的cellpadding类似
visibility:hidden隐藏
样式选择器：
标签选择器:input{}
class选择器:.cls{} 用多个类选择器的时候用空格隔开，以最后一个定义的重复类选择器为准
id选择器:#dv{}
标签+类选择器:input.cls{}
包含选择器(层次选择器):p strong{}
组合选择器:h1,h2,input{}
自选择器:div>p{}
相邻选择器:div+p
伪选择器: a:link{}没点之前
a:hover{}鼠标悬浮
a:active{}激活状态
a:visited{}访问以后
以上选择器的优先级是：
style>id选择器>类选择器>标签选择器(!important可以提高优先级 color:red !important)
使用CSS的三种方式:元素内联(行内样式表)、页面嵌入(内嵌样式表)、外部引用(外部样式表)
写入元素的style属性 在head中加入 css后缀文件(推荐)
文档流
position:absolute绝对定位
position:fixed固定定位
position:relative相对定位
position:static默认值
position:inherit继续父元素的position值
Div+CSS布局
不用<table>进行布局的原因
table可能会在所有的tr和td加载完成以后才显示，所以加载完成之前一片空白
用table布局会将布局方式写在html中，违反了“语义性”原则
用table会影响搜索引擎的抓取，不利于SEO
Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个快的大小、位置等
float:left两个层并排排列
margin:0px auto层的相对居中
clear:both清楚浮动