HTMLCSS

HTML

xml （标签名）可扩展标记语言
<Stu>

</Stu>

Html 超文本标记语言（文本，图片，链接） <> </>
Internet网上编写页面（H5版本：支持多种标签特性）
规范，通过标记符号标识要显示的页面的各个部分
html页面不要求标签完整性，按照标记符进行解析，对书写出错的标识符不指出其错误，且不停止其解释执行过程

页面页面结构（html）样式页面表现（css）页面动作灵活数据（js）

基本语法
    文件后缀名：.htm   .html
    注释
标签<>
      成对标签，单标签
元素
属性 id class style title
(元素，属性名均不区分大小写)

文档结构

meta 定义文档元数据

颜色 R G B 0-255 #000000

大小 font-size

标签
块级标签
     p 段落   独占一行上下文之间有距离
     h1-h6   标题
     div   独占一行
     ul li

dl dt dd

行内（内联）标签
span

a 超链接

&nbsp 空格

table标签
table tbody tr th td

thead tfoot

图片

表单
form
   前后台数据交互
   收集来自用户的信息，发送给服务器端进行处理

   <form></form>
   action method(get,post)

input

table测试

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格测试</title>
</head>
<body>
     
     <table border="1" bgcolor="#aaeeee"
            cellspacing="10" cellpadding="10"
            frame="box" rules="all"
            bordercolor="#aaaaaa" align="center"
            width="70%">
            <caption>菜单</caption>
         <tbody align="center">
             <tr>
                 <th>星期</th>
                 <th>午餐</th>
                 <th>晚餐</th>
             </tr>

             <tr>
                 <td>一</td>
                 <td colspan="2">sd</td>
                 
             </tr>

             <tr>
                 <td>二</td>
                 <td rowspan="2">bg</td>
                 <td>er</td>
             </tr>

             <tr>
                 <td>三</td>
                 
                 <td>yj</td>
             </tr>
         </tbody>

         <thead align="center">
            <tr>

              <td colspan="3">xssdsd</td>

            </tr>
         </thead>
         <tfoot>
            <tr>
                <td colspan="3">fgbhdc</td>
            </tr>

         </tfoot>
   </table>

   <img src="02.jpg" alt="">

</body>
</html>

form表单测试

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form表单测试</title>
</head>
<body>

CSS

CSS
描述文档的呈现形式
   属性和值用冒号分割
   属性间用分号分割
   多个值空格

内嵌式：style="css“
嵌入式
外部引用式

盒模型

测试1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS</title>

<linkd rel="stylesheet" href="CsTest.css">

<style type="text/css">
/* @import url("") */
/*标签选择器*/
   div{
       background-color: #dff0ff;
       width:300px;   height:30px;
       margin-bottom: 10px;
   }

   p{
       font-size;10px;
       color:#ffffff;
   }
/*类选择器*/
   .two{
       background-color: #356766;
       width:200px;    height:30px;
       margin-top:10px;
       font-szie:50px;
   }

/*id选择器*/
   #t{
       background-color: #634142   ;
       width:300px;   height:30px;
       margin-bottom: 10px;
       font-size:20px; color:#421411;
   }

</style>
</head>
<body>
   
   <div style="width:100px;height:30px;margin-bottom:10px ">one</div>
   <div class="two">two</div>
   <div id="t">three</div>


</body>
</html>

测试1.2

@CHARSET "UTF-8";
/* @import url("其他CSS") */
body{
   margin:0px;
    padding:0px;

}

测试2

   div{
       font-size:30px;
       color:#ffffff;
   }
   #one{
       background-color: #006666;
       width:100px; height:100px;
       float: left;
       margin-right: 10px;
   }
   .two{
       background-color: #ff6600;
       width:200px;   height:50px;
       float: left;
       margin-left: 10px;

   }
</style>