黑马程序员----HTML摘要

HTML要记的东西很多,标签;表单;属性;样式;选择器;文档流;浮动;定位;等，一些常用的标签要熟练的手写出来,多练多记！学会模仿别人的网页;查看帮助文档,参考手册。1.html是超文本标记语言,用来展示面页信息,它具备简易性:各类html标签简单易学,方便网站制作学习开发,与平台无关性:这是html最大优点,它包括"硬件"平台无关性和"软件"平台无关性.
2.右击打开一个网页查看源代码,保存时以html格式保存;注意扩展名也就是后缀名的格式。
3.<titel></titel>网页的标题
4.<meta></meta>标签的作用：1.优化引擎SEO,搜索关键词可以使网页排名靠前.2.描述网页相关信息.3.设置编码格式等等
5.<!>写注释内容
6.<br/>换行标签，自行封闭
7.<!>
8.<hr/>标尺线(水平线)
9.特殊符号
   空格            &nbsp;
   引号 ("")       &quot
   小于号 <        &lt
   大于号 >        &gt
   版权号          &copy
10.粗体用<strong></strong>有利于SEO优化,建议使用,不要用<i></i>标签,斜体用<em></em>
11.字体标签
   <font size="文字大小" align="对齐方式" color="颜色"face="字体"等></font>
   不要用<img src="图片路径"></img>标签做缩略图,下载图片时会很慢(因为下载时会把原大图下载,浪费流量)
   相对路径:引用的图片与文件在同一目录下,直接引用图片名+格式,也可以通过../文件名/(父目录)一直到文件的根目录加文件名+格式,引用图片文件时建议使用相对路径.
   绝对路径:文件所在的全路径,不建议使用.
12.无序列表,有序列表与自定义列表
      1.无序列表<ul type="square,circle,disk"设定样式><li>列表一</li><li>列表二</li>...</ul>
      2.有序列表<ol type="1"><li>中国</li><li>美国</li>...</ol>
      3.自定义<dl><dt>图片或文字</dt><dd>解释</dd><dd>说明</dd>...</dl>
        子标签默认继承父标签的属性,如果子标签自己单独指定了属性则会覆盖父标签的属性.
13.<a></a>语法如下：
          <a href="链接地址" target="目标窗口位置">链接文本或图像</a>
          href:表示链接地址的路径.
          target:指定链接在哪个窗口打开,常用的取值有_self(自身窗口),_blank(新建窗口).
          页面间的链接:<a href="要链接的网页.html" >链接文字</a>
          锚链接:<a name="marker"(name属性做标记) >目标位置乙</a>
                 <a href="#marker">跳转到乙的位置</a>
          链接邮箱:<a href="mailto:[email protected]">站长信箱</a>
14.表单
      <form action="表单提交地址" method="提交方法"(get,post)</form>
      <input/>元素的属性
      type:指定表单元素的类型,可用的选项有text,password,checkbox,radio,submit,reset,file,hidden(隐藏域),image(图片按钮具有

提交功能)和button(disabled="disabled"禁用按钮)默认text.
      name:指定表单元素的名称
      value:指定表单元素的初始值
      size:指定表单元素的初始宽度.
      maxlength:指定可在text或password元素中输入的最大字符数,默认不做限制.
      checked:此属性只有一个值,为"checked"表示选中状态,如果不选中则不需添加此属性.
      用<label>标签通过for属性,让input获得焦点设置唯一的id如下：
              <label for="name">
                   <input id="name" type="password" name="pwd" seze="21" maxlength="16"/>用户名:
              </label>
label标签中设置属性accesskey可以设置快捷键，用Alt+字母键即可。不会与浏览器的快捷键发生冲突的。
     fiedset：效果跟GroupBox一样。
     <marquee></marquee>通过属性direction设置方向；属性scrolldelay设置时间；
     播放声音:<embed src="temp.mp3" loop=true autostart=true name=bgss width="460" height="68">会看见插件，将width和height设置为0，也会不可见。<bgsound src=”temp.mp3” loop=”true”/>不会看到插件，并且只有IE才支持。
15.下拉列表框
      通过<select>和<option>标签来实现的,<select>标签用于显示可供用户选择的下拉列表,每个选项由一个<option>标签表示,<select>

标签必须包含至少一个<option>标签.语法如下：
      <select name="指定列表名称" size="行数">
             <option value="可选项的值" selected="selected">...</option>
             <option value="可选项的值">...</option>
             ...
      </select>
      "size"属性确定列中可同时看到的行数."selected"属性表示该选项默认情况下是被选中的,而且一个列表框中只能有一个列表项默认被选中.
       select分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择,无论对于下拉列表还列表框都适合.
16.多行文本域
       <textarea>语法如下:
                <textarea name="textarea" cols="40" rows="6" readonly="readonly" >初始文本内容</textarea>
            cols用来指定多行文本域的列数,rows用来指定多行文本域的行数,readonly="readonly"只能读取文本域内容,不能修改.           
17.表格标签
      <table></table>在内部通过<tr>创建行,<tr>内部通过<td>创建单元格.可以将table的border边框属性设为0隐藏表格线.
      <tr>的属性:align,水平对齐,可选值lefft,right,center;valign垂直对齐,可选值top,middle,bottom.
      <td>也有水平对齐和垂直对齐.
       使用rowspan,colspan进行单元格的合并.
       表格标题<caption>年终报表</caption>
       表头<thead>代替<tr>,<th>代替<td>
       表体<tbody>包起来
       表脚<tfoot>包起来
18.css样式表
       css(层叠样式表)是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字颜色,背景颜色,边框等.css主要有内

联,页面嵌入和外部引用三种使用方式.
       元素内联,直接将样式写入元素的style属性中,<input type="text" readonly="readonly" style="background-color:blue" />适

于特定的样式。
       页面嵌入:在head中加入
           1.<style type="text/css">
                input{border-color:yellow;color:red;}
             </style>
           2.表示页面中所有input都是采用指定的样式,input标签样式得到复用,减小页面繁余代码.
       外部引用:将css内容写入css后缀的文件
           textarea{background:yellow}
           然后在页面中引用,在head中加入
           <link type="text/css" rel="stylesheet" href="s1.css"(样式文件)
            适合于多个页面共享css.
       样式优先级
           css中规定的优先级规则为：
           行内样式表>内部样式表>外部样式表.(就近原则)
           ID选择器>类选择器>标签选择器.
       文本属性：
            行高(行间距):line-height="25px";  对齐方式:text-align="center";(left,right,center)
            字符间距: letter-spacing="5px";
            下划线样式:中划线text-decoration="line-through"上下划线(overline,underline)默认值无样式(none)
            文本是否换行：white-space="nowrap"强制在同一行内显示所有文本,文本溢出时不换行,默认换行(normal)
       字体属性:
            字体类型: font-family:"宋体";
            字体大小: font-size:"12px";
            字体粗细：font-weight:"normal";(默认值正常字体,粗体bold,lighter比默认normal细)
            简写形式:"font:lighter 12px 宋体;",但要注意三种格式的顺序依次为>字体大小-->字体类型
       背景属性：
            背景颜色：background-color:#ccc;
            背景图片：background-image:url(路径)
            背景平铺方式：background-repeat:no-repeat(不平铺)
            前景出现的初始位置:background-position:20px -100px;(左右,上下的值)
            设置所有的背景属性：background:#ccc url(images/bg.png)repeat-x(横向平铺) 20px -100px;
       常用的列表类型：
            去掉修饰符号：list-style:none
            实心圆：list-style:disc(无序列表<ul默认类型>)
            空心圆：list-style:cirle
            实心正方形：list-style:square
            数字：list-style:decimal(有序列表<ol>默认类型)
19.选择器：
       根据选择器表示所修饰的内容类别,选择器又分为标签选择器,类选择器,ID选择器.
       标签选择器:
       当需要对页面内某类标签的内容进行修饰时,则采用标签选择器用法如下
       标签名{属性名1:属性值1;
              属性名2:属性值2;
              ...
             }
       类选择器：
           <1.定义样式,语法如下.
             .类名{属性名1:属性值1;
                   属性名2:属性值2;
                   ...
                }
           <2.应用样式,使用标签的"class"属性引用类样式,即<标签名class="类名">标签内容</标签名>,需要注意:定义时类名前有个点号

( .),应用样式时则不需要点号。
       ID选择器
            用ID属性标识被修饰的页面元素。
            #ID标识名{属性名1:属性值1;
                      属性名2:属性值2;
                       ...
                     }
            需要注意,定义ID选择器时有个#号,但给Html标签设置ID属性时不需要。ID选择器和类选择器用途刚好相反,ID选择器用于修饰某个指定的页面元素或区块,这些样式是对应ID标识的HTML元素所独占的;而类选择器是定义某类样式让多个HTML元素共享,这些样式是可以共享和代码复用的。
20.图片的偏移量处理：
       为了减少客户端从服务器端下载图片的次数,提高服务器的性能,好的做法是将多张图片拼合为一张大图片,然后利用background-position属性截取其中的各个小图.<css sprite技术>
       背景图默认从被修饰元素的左上角开始显示图像,以此为基础设置背景图出现的水平方向和垂直方向的坐标.但也可以使用background-position属性设置背景图出现的位置,可以使用具体的数值,百分比,关键词三种方式表示水平和垂直方向的偏移量。
21.盒子模型：
       CSS网页中所有元素都看成一个个盒子,它的属性对应盒子结构:(边框>背景图>内边距)
       边框(border):对应包装盒的纸壳,它具有一定的厚度.
           border(属性):border-color:边框颜色
                            border-width:边框宽度
                            border-style:边框样式<默认无边框none,实线solid,虚线dashed>
           border(方向):border-top(right,bottom,left)
           border-left:在一个声明中设置左边框的属性border-left:1px solid red;设置左边框为1像素,红色,实线.
           缩写形式border:在一个声明中统一设置四个方向的边框属性border:1px solid rdd;设置四个方向的边框均为1像素,红色,实线.

对于每个边的属性,可以一次性设置但要注意按顺时针的方向(上右下左)(边框宽度,样式,颜色)
       内边距(padding):位于边框内部,是内容与边框的距离;对应包装盒的填充部分,所以有的教材也称其为"填充".
           padding(方向):四个方向分别设置,也可在一个声明中统一设置四个方向的填充属性,按顺时针方向,上填充,右填充,下填充,左填充.需要注意的是padding值不允许为负值.
       外边距(margin):位于边框外部,是边框外面周围的间隙,所以有的教材也称其为"边界".
       四个方向的属性设定同padding,特殊设置:margin:0px auto;表示在父级元素容器中水平居中.(上,下外边距为0px,左,右外边距自动计算)
22.浮动
       web网页默认采用常规文档流的方式自动排列各元素,根据各元素在html文档中出现的先后顺序,从上往下(div),从左往右(span)的方式自动排列,对于块级元素则换行,对于行级元素则按行逐一显示.有时需要脱离文档流设定显示方式,就要用到float浮动.
      floata:"浮动方向"设置某个元素的浮动行为,该元素将脱离常规文档流,向左或向右移动直到它的外边距碰到父元素(容器)的边框或另一个浮动元素的边框为止。块级元素(如<div>)设置浮动后将失去"独占一行"的特征.浮动元素将紧贴上一个浮动元素(同方向)或父级元素的边框,如果宽度不够将换行显示.浮动元素将占据行内元素的空间,浮动元素变成特殊的"行内元素"后,将占据行元素的空间,行内元素只能在剩余空间进行显示.(float:left,right,none不浮动)
      清除浮动:"clear"一般译为"清除",但其实际含义表示和前一个浮动元素换行区隔开,只对块级元素有效.clear:left左侧不允许有浮动元素,clear：right右侧不允许有浮动元素,clear:both左右两侧均不允许有浮动元素,在实际开发中不知道上一个浮动方向常有both.clear:none默认值,允许两侧都有浮动元素.

23.CSS定位与定位应用
        position的三种定位方式：position定位属性主要包含relative相对定位、absolute绝对定位和static默认定位.
        position:relative; 采用相对定位，相对于本来位置的偏移,四个方向的偏移量left:20px;(left,top,right,bottom)一般情况下，right和left或top和bottom不应同时存在。他们之间有个公式。left值等于-right，同样的，top值等于-bottom，例如：“left:10px;”等价于“right:-10px;”。
        相对定位有如下3个特点：
①参照物：相对定位是相对于未设置定位方式前的位置，其参照物就是原来位置。
②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。
③占位：相对定位偏移后的元素，其占有的位置是原来位置，其偏移后会覆盖并位于其他重叠元素的上面，但不会增加高度和宽度。
        position:absolute;绝对定位，完全脱离文档流，是相对于第一个非默认定位方式的上级元素的距离。相对定位的元素大小会在文档流原来位置占去相同大小的页面空间。而绝对定位则不再占原文档流页面的任何空间。其常用属性语法语义与相对定位类似，例如“position:absolute;top:200px;left:150px;”。定位方式的区别导致了参照物区别。具体参照物为上级元素中，第一个存在非默认定位方式的元素，它完全脱离了文档流。
        学习完绝对定位，可以发现绝对定位也有3个特点：
①参照物：绝对定位参照物是第一个非默认定位方式的上级元素，如不存在则为整个页面。
②偏移量：方式确定后，根据与参照物的具体偏移量来确定元素新位置。
③占位：绝对定位偏移后的元素，不再占原来位置，其偏移后会覆盖并位于其他重叠元素的上面。
        position还有一种类似的定位方式为固定定位，值为fixed。同样完全脱离文档流，但参照物为浏览器的可见范围。但只工作在IE7.0的strict模式下，这里稍微提下。
        position:static静态无偏移，不填时默认属性，偏移量属性无效，属于常规文档流。虽然这个参数只有在JavaScript中实现某些效果时使用，但必须理解static定位方式对应的常规文档流概念。叠放层次属性z-index
        z-index属性只对非默认定位方式的元素（相对、绝对与固定定位）有效，默认值为1，其值为正整数。值越大，叠放在越前面。其语法格式如：“z-index:2”。
       （1）叠放层次值有大小差异，大的居上。就像建房子，地基即文档流页面。楼层数越大则在越上面。
       （2）同层间，后出现的居上。
24.超链接伪类：
       未点击访问时的超链接样式   a:link{color:#999;}
       单击访问后的超链接样式     a:visited{color:#009;}
       鼠标悬浮其上的超链接样式   a:hover{color:#ff7300;}
       鼠标单击未释放的超链接样式 a:active{color:#879;}