html加强

                                                                      HTML 基础        www.55.la 网站美工素材网 指定网页编码:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

浏览器:输入网址点击链接后,向服务器请求页面,           服务器将页面编译解析出来并将HTML JS CSS等内容返回给浏览器           展现在用户面前的是一个页面 2.浏览器的兼容性问题:开发注意 3.HTML和XML的联系 , 区别: 书写规范,标签必须前后封闭,属性值带引号"＂ 4.HTML的注释: <!--注释内容--> 5.敏感字符以及标签:  1.小于<或 大于>: &lt; 或 &gt;   2.空格符 : &nbsp;   3.双引号" ": &quot;  4.回车符 : <br/>  5.居中显示标签 : <center></center>  6.表示段落,控制段落之间的间隙 : <p></p>  7.<h1>--<h6>: 表示字体的大小Size.  8.<b>与<strong>: 粗体 . 建议使用<strong>  9.<i> : 斜体.  10.<u>:下划线(underline)  11.<font color="red"></font>:(不推荐使用) 控制字体的属性,size-字体大小,color-字体颜色.  因为按照网页设计理念,html本身只是描述内容的,格式交由CSS控制,因此br,b,i,u,center,font标签等  不建议使用.

6.超链接<a href ="">转向超链接</a> 7.图片标签:<img src="图片路径" onerror="加载失败后显示自定义的图片"/>--显示图片  缩略图:使用专业工具进行缩略,不要使用属性width和height定义图片大小(其实大小还是原来的大小)  图片保存格式: jpg ,jpeg(只压缩) ,png(可设置透明) , gif(动画图片)  bmp(原始位图,尺寸大):网页中不要使用bmp格式的图片,浪费流量. 文件路径问题:  1. ./当前目录.  2. ../相对于当前页面上一级目录  3. http://www.cnblogs.com/相对于当前页面上一级目录的上一级目录  4.  / 网站根目录

8.锚点: 定义锚点--<a name="top"></a>,指定name属性     转向锚点--<a href="#top">回到顶部</a>-->转向定义锚点的位置

--------------------------------重要标签---------------------------------- 1. 无序列表: ul (unordered list)  li (list  item)  <ul>   <li>灌水区</li>     ------<li>不显示圆点 list-style-type:none;   <li>服务区</li>   <li>原创区</li>  </ul> 2.有序列表:<ol></ol>(ordered list) ,用的少

3.表格:<table></table>    <thead>用来设置表头.    <tbody>用来设置表体.    <tr>创建行.    <td>创建单元格       可以将table的border属性设为0来隐藏表格线    cellpadding: 内容和表格边线之间的距离    cellspacing : 单元格之间的间距       <tr>的属性: align水平对齐(left,rightcenter)         valign垂直对齐(top,middle,bottom)    <td>的属性: 与<tr>大致相同    子标签默认继承父标签的属性    属性 rowspan 与 colspan 用于 行 与 列 单元格的合并    通过设置td的 colspan, rowspan 属性 可以设定它占用多少纵向,横向的空间 4.<form>表单标签:  如果要把数据提交到服务器,则需要将<input>,<textarea>,<select>等  表单元素放到<form>标签中 5.<input>为主要的表单元素  <input type="" id="" value="" text=""/>  type的可选值:   1.submit(提交按钮)--点击按钮,表单会被提交给服务器,可设置value属性修改按钮的显示文本   2.button(普通按钮)   3.checkbox:复选框--<input type="checkbox" checked="checked" />(推荐)   4.file:文件选择框   5.hidden:隐藏字段   6.radio:单选按钮--相同name属性的为一组   7.reset:重置按钮   8.text:文本框--size属性为宽度,value为值,maxlength为可输入的最大长度   9.readonly:只读文本.<input type="text" readonly="readonly" />（推荐）   10.image:图片提交按钮,使用src属性指定图片的地址，用来实现美化的“登录按钮”   11.password:密码框 6.<select>标签:用来创建类似于Winform中的ComboBox或者ListBox  下拉列表框:   其中的每项表示为: <option value="1">山东</option>   将一个option设置为选中：<option selected="selected">山东</option>(推荐)就可以将这个项设定为选择项   将列表中的选项 进行分组在select标签下使用<optgroup>标签,其中的label属性用来显示父类内容   <select>    <optgroup label="山东">     <option>烟台</option>     <option>青岛</option>    </optgroup>    <optgroup label="辽宁">     <option>沈阳</option>     <option>大脸</option>    </optgroup>   </select>  ListBox列表:   <select size="3"></select> --size属性 设置显示项的个数

7.多行文本<textarea></textarea>  属性 cols , rows 控制多行文本框的 宽度和高度. 8.label标签: for属性用来指定所关联标签的id值.    <input type="checkbox" id="chk"><label for="chk">购物</label>

----------------------------Div + Css--------------------------------

1.div层: 块级元素, 英文自动折行属性 <div style="word-break:break-all"></div>       将内容放到层中，就以将这些内容当成一个整体进行处理，       比如整体隐藏、整体移动等。div非常强大和常用。类似于WinForm的Panel 2.span: 不影响其他元素的布局.span只是把一段内容定义成一个整体进行操作，      但不影响布局、显示 3.样式表CSS : 是用来美化页面用的,元素单独设置的样式覆盖页面级别等更高级的,类似继承中的override    CSS（层叠样式表）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。    CSS主要有元素内联、页面嵌入和外部引用三种使用方式。    CSS是描述元素的皮肤！   1.元素内联 :  直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，适用于样式没有可复用性的场合。   2.页面嵌入：在head中加入    <style type="text/css">    input{border-color:Yellow;color:Red;}    </style>    表示页面中 所有input 都是采用指定的样式。适合于样式复用，减小页面体积   3.外部引用，将css内容写入css后缀的文件    textarea{background:yellow}    然后在页面中引用，在head中加入    <link type="text/css" rel="Stylesheet" href="s1.css" />    适合于多个页面共享css。    4.class选择器 : ( . 样式名 )    以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，          <style type="text/css">    .warn {border-color:Yellow;color:Red;}    .error {border-color:Red;color:Red;}    </style>

   还可以同时设定多个class，名称之间加空格,若设定的多个样式中有相同的属性,    则按照样式声明的顺序,采用最后声明的样式    <input type="text" class="warn error"/>    这里error选择器后声明的,这里的border-color 就采用error的样式 5.Id选择器:( # 样式名 ) ----永远不要把属性设置到 标签中    标签使用该Id样式选择器时,只要指定元素Id名跟选择器的名字相同即可    #txtname     {            font-size:xx-large;     }    <input id="txtname" type="text" value="" />

6.标签选择器+class选择器: input . warn{background-color: Red;}    input.accountno{text-align:right;color:Red;}    label.accountno{font-style:italic;}    <input class="accountno" type="text" value="123" />    <label class="accountno">这里是内同</label>

7.Id选择器+标签选择器    Id为span1标签下面的 input标签所采用的样式     #span1 input{background-color:Yellow;} 8.包含选择器：    P strong{ background-color:Yellow}    表示P标签内的strong标签内的内容使用的样式    <strong>fadsfasdfads</strong>    <p><strong>adfasfd</strong></p> 9.组合选择器，同时为多个标签设定一个样式    H1,H2,input{background-color:Green}    <h1>nihao</h1>    <input type="text" value="test" /> 10:属性 display:none 隐藏元素,隐藏后并且不占据位置(不保留物理空间)             visibility: hidden 也是隐藏元素 但是占据着位置.(保留物理空间)

11.cursor:设置鼠标的形状(hand和pointer--手, move--移动, wait--等待. help--帮助?) 12.可以设定position:absolute; 来让元素绝对定位,一旦设定绝对定位,元素不再占据"文档流"      而是"飘起来",覆盖在其他没有绝对定位的元素上. 13.float: none ,right ,left.   none : 　对象不浮动   left : 　对象浮在左边   right : 　对象浮在右边     导航栏可以使用<ul>中的<li>布局. 给ul设置id选择器(向左飘,去掉圆点,选项间的间隙)     #ul1 li {float:left; list-style-type:none;margin-left: 50px; }