黑马程序员 04 Java WEB学习笔记< HTML & CSS >-CSDN博客

本文详细介绍了HTML的基础知识，包括创建HTML文档、使用各种标签、理解文档结构等，并提供了实例代码帮助读者快速上手。
  ------- android培训、java培训、期待与您交流！ --------

----Html---- 
1、创建 
    Dreamweaver 8---创建Html------代码 
2、标签: 
     <html> 
    <head> 
        <title>hello html</title>          设置编码方式 
    </head>                                    head和body平级 
         <ul> 
            <li></li> 
         </ul> 
         <ol> 
         </ol> 
         <pre> 
         </pre> 
    <body> 
    网页内容<br><p> 
    ABCDEFGH<font>IGKLMNO</font>PQRSTUVWXYZ 
    </body> 
     </html> 
 
<br>             换行标签                                    <p>               换段标签 
<font color="" size="+5"></font>                  改变范围内字体 
<img src="图片相对路径" width="200" height="200" alt="123"/>    alt：提示信息 
<body  bgcolor="" bg>                                   gcolor是body的属性颜色 
 
&nbsp;                              空格标签 
&quot;XXXX&quot;              引号 
&lt;XXXX&gt;                       <XXXX> 
&copy;                               版权符号 ©  
<ul></ul>                          列表符号 
<li></li>                            无序列表 
<ol></ol>                         有序列表 
<ul type="square">            以方格列表 
<ol type="i">                     以阿拉伯字符列表 
<pre></pre>                     域文本格式标签 
<!--XXXX-->                        加注释 
<imp src="1.bmp" align="top"/>XXXX        字和图片对齐 
<div>XXXX</div>               容器标签 
<div align="位置">             容器在网页的位置 
<h1 align="left">XXXX</h1>   
<h2>XXXX</h2>                标题标签依次递减 
<h3>XXXX</h3> 
<h4>XXXX</h4> 
<marquee direction="down" scrolldelay="10" onmouseover="this.stop()" onmouseout="this.start()">XX</marquee>    滚动标签   direction滚动方向 scrolldelay速度 
<a href="XXX">XXX</a>                      超链接标签 
<a name="top">backtop</a>              返回连接标志 
<a href="#top">返回顶部</a>             返回XXX超级链接 
<a href="1.html#buttom"></a>            跨网页链接 
<a href="mailto:1234@qq.com"></a> 
<hr color="" width="50%" size="10">   画线 width在屏幕多少 size粗细 
表格: 
<table border="1" align="center">        border边框 
    <tr> 
    <td></td>    列 
    </tr>         行 
</table> 
<td colspan="4" align="center">  行合并 
<td rolspan="3"> 
cellpadding="" 内容到边框的距离 
cellspacing="" 边框到边框的距离 
表单 :
<form></form>   
<input type="text" name="昵称" value="默认值" />   输入文本框 
<input type="radio" name="sex" value="男" />男 
<input type="radio" name="sex" value="女" />女   单选按钮 
<input type="checkbox" name="hobby" value="eat">吃        复选框 
<input type="checkbox" name="hobby" value="sleep">睡 
<input type="checkbox" name="hobby" value="eat">喝 
<input type="button" name="sava" value="提交">    普通按钮 
<input type="submit" ....>    提交按钮 
<input type="reset" name="reset" value="重置"> 重置按钮 
<select name="province">      下拉列表 
    省份 
    <option value="陕西省">陕西省</option> 
    <option value="山东省">山东省</option> 
    <option value="河南省">河南省</option> 
    城市 
    <option value="西安">西安</option> 
    <option value="北京">北京</option> 
    <option value="天津">天津</option> 
</select> 
<textarea cols="40" rows="3" name="info"></textarea> 文本框 
<input type="file" name="userface" />        头像上传 
框架 : 不要<body> 放<frameset>面板集合 
<frameset rows="50,*"> 
    <frame src="加网页" name=""/>   设置名字 
    <frame src=""/> 
</framest>  
<a href="1.html" target="right">1.html</a>  超链接显示到右边
-----------------------------------------------------------------------------------------------------------------------
CSS

<style type="text/css">   css样式   text样式修饰 
p{    样式选择器-标签样式 
    font-size: 24px;                        尺寸 
    font-style: italic;                       类型(斜体 粗体) 
    font-family: "楷体_GB2312";     字体 
    color: #996600;                      颜色 
    font-weight: bolder; 
} 
.xy{    类样式 
    font-size: 
    font-style: 
    font-family: 
    font-weight: 
    color: 
}   <p class="xy">                    调用... 
.bg{    类表格样式 
    background-color:  
    background-image: 
    width: 
    height: 
    backgroud-repeat: repeat-x;  按x轴平铺背景 
} 
.tab{    类表格内容样式 
    background-image: 
    text-align: 
    width: 
    height: 
    vertical-align: 
} 
td{     标签样式 
    vertical-align:bottom; 
    text-indent: 
    text-transform: capitalize; 
    line-height: 
    letter-spacing:0.2cm;     字符间距 
} 
.btn{    类按钮样式 
    background-color; 
    background-image: 
    font-size: 
    color:                          字体颜色 
    width: 
    height: 
    border: 0px;                按钮边框 
} 
伪类 超链接样式 共4种 
a:link{         初始样式 
    color:   
    text-decoration:none;   下划线 
    font-family: "宋体" 
    font-style:italic;            斜体 
} 
a:hover{     鼠标放上去时样式 
    color: 
} 
a:active{    鼠标点下去时样式 
    color: 
} 
a:visitored{  访问过后样式 
    color: 
} 
边框样式 
  边框--对象 距离 padding 
          边框 距离 border 
  边框--边界 距离 margin 
margin-top:        table内 
margin-left: 
padding:           td内 
border:             table内-外边框 td内-内边框 
.f{                    使之包围起来 
    float:left; 
    cursor:         鼠标样式 
} 
.ul{                  列表样式 
    list-style-type:        符号样式 
    list-style-image:     
    display:block;        隐藏none 显block 
    list-style-position: inside; 
} 
外部样式表文件 
   建立XX.CSS文件 
 <link href="XX.css" rl="stylesheet" type="text/css" /> 连接网页 
 
按照应用范围分为3类样式:   内嵌样式、行内样式、外部样式表 
div分层  id样式 
<style type="text/css"> 
     #div1{ 
    background-color: 
    width:100%; 
    height:150px; 
     } 
     #div2{ 
    background-image: 
     } 
</style> 
<div id="div1"></div> 
<div id="div1"></div>