黑马程序员-html笔记

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------


<!--注释-->
&nbsp;  表示空格


&lt;&gt;  表示<>


小技巧  在设计视图敲一个空格,在源码就看到对应的符号了


<img src="../imges/1.jpg"/>  
表示上一级目录下的imges文件夹


<img src="/imges/1.jpg"/>
网站根目录下的imges文件夹


<a href="http://www.baidu.com/" target=_blank>target=_blank</a>
target=_blank  表示在新窗口打开超链接


radio  相同name属性的为一组


<input type="text" name="name" value="aaaaaaaaaa" readonly =readonly />
radonly设置只读属性


file:使用file,form的enctype设置为 enctype="multipart/form-data"
<form action="/" method="post" enctype="multipart/form-data">


锚定
<a name="top">aaaaaaaa</a>


    <br /><br /><br /><br />


<a href="#top">回到顶部</a>


 <textarea cols="100" rows="10"></textarea>
多行文本框 默认100列10行


列表
<ul>
<li>aaaaaaa</li>
<li>bbbbbbb</li>
</ul>


  <label for="userName">用户名</label><input type="text" id="userName" /><br />
  <input type="checkbox" id="hf"/><label for="hf">婚否</label>


label标签可以绑定控件,方便用户使用


fieldset相当于c#中的GroupBox
   <fieldset>
   <legend>常用</legend>
       <input type="text"/>
   </fieldset>


<select id="province">
        <option>北京</option>
        <option>上海</option>
        <option>天津</option>
</select>


css层叠样式表


所有的input标签都是这种样式  p标签都是这种风格
<style type="text/css">
        input{background-color:Red;}
        p{color:blue;}
</style>


 将css文件放到外部
 <link href="1.css" rel="stylesheet" type="text/css" />


前面的原点取消
<ul>
<li>aaa</li>
<li style="list-style-type:none">bbb</li>
</ul>


css计量单位: css表示宽度.距离的单位  px像素  30%百分比  em相对单位


postiton样式值
static  无定位,显示在默认位置
absolute  绝对定位
fixed  相对于窗口的固定定位,位置不会随着浏览器的滚动而变化
relative  相对于元素默认位置的定位




border-style:边框风格,实线solid 默认没有


display: 
none 不显示
block显示为块级元素,此元素前后会有换行符
inline  内联元素,元素前后没有换行符


css选择器   标签选择器  class选择器  id选择器

标签选择器
input{border-clor:Yellow;color:Red;}


class选择器
   <style type="text/css">
        .warning{background-color:Red ;}
    </style>


 <div class="warning">
    aaaaaaaaaaaaaa
    </div>




<div class="warning" style="background-color:Blue">
    优先级问题
</div>


id选择器
 #userName{background-color:Green}


 <div id="userName">
    id选择器
 </div>

标签+class选择器  包含选择器
<style type="text/css">
        input .acc{background-color:Red;}
</style>


<input type="text" class="acc"value="标签+class选择器" />
   <input type="text" value="aaaaaaaaaaaa" />
    <div class="acc">
    aaaaaaaaaaaaaaaa
    </div>


组合选择器
<style type="text/css">
        input,div{background-color:Red;}
</style>


伪选择器


        a:visited{color:Red;}
        a:active{color:Green; }
        a:link{color:blue;}
        a:hover{color:Orange;}


 <a href="#">伪选择器</a>


a:visited  超链接点击过的样式
a:active  选中超链接时的样式
a:link    超链接为被访问时的状态
a:hover  鼠标移动到超链接时的状态