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      &nbsp;空格     &lt;小于     &gt;大于     &amp;&
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清楚浮动
    
    

posted @ 2013-07-18 13:29  wolfy  阅读(876)  评论(0)  编辑  收藏  举报