20150917-html第二次课

HTML标签

1、marquee 滚动字幕

默认状态：浏览器的从右往左，滚完之后再从右往左。

属性：direction (up向上） hspace距左侧的距离 behavior（alternate来回滚动 slide不会滚动）scrollamout速度 scrolldelay停顿时间

可以放置图片滚动。

滚动一般用JS做

2、HTML表单 form

表单：注册时，把内容放在form表单里。指定的传递页面action,传值方式method

get和post区别：

1、get值写在地址栏，可以看到传的值。ID、数据量比较小的，安全性不太高的。

2、post地址栏是不显示的，安全性高一些。数据量大一些。当刷新时会提示“重试”对话框。

传递参数表单：

<form action="a.htm" method="get">
    <table>
        <tr><td>用户名：</td><td><input type="text" /></td></tr>
        <tr><td>密码：</td><td><input type="password" /></td></tr>
        <tr><td>喜欢的颜色：</td><td><select>
        <option>---请选择---</option>
        <option>红色</option>
        <option>蓝色</option>
        <option>绿色</option>
        </select></td></tr>
        <tr><td>性别：</td><td><input type="radio" name="sex" id="male" /><label for="male">男</label><input type="radio" name="sex" id="female" /><label for="female">女</label></td>   
        </tr>
        <tr><td>喜欢的水果：</td><td><input type="checkbox" />桔子<input type="checkbox" />苹果<input type="checkbox" />梨子</td></tr>
        <tr><td>头像</td><td><input type="file" /></td></tr>
        <tr><td>个人简介：</td><td><textarea cols="50" rows="10"></textarea></td></tr>
        <tr><td><input type="reset" /></td><td><input type="submit" /></td></tr>
    </table>
</form>

表单元素

button普通按钮 reset重置 submit提交 image图像按钮 checkbox复选 radio单选 text文本输入 password密码 file上传 hidden 隐藏

重置提交只能用在form里

input里必须写name="username"时参数才会传递

<textarea>固定属性，在CSS里设置resize:none;不进行拖放

这些控件一定要掌握，客户端控件配合ajax, 服务端控件会有效率的问题

嵌套页面
<iframe src="http://www.baidu.com" width="600px" height="600px"></iframe>

常用的一些HTML，就这些了。

通常HTML是4.01版本 HTML5 4.01+加了一些新的标签。

%是针对上级标签（没写就是针对浏览器的）的宽度的百分比，不是很精确。

3、CSS需要做的更好看一些。

网页外观

如何写CSS

第一种：直接在HTML中写，行内样式

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="200px; height:100px; border:1px solid red;"></div>
</body>
</html>

div style属性属性值

css属性width 属性值200px;

第二种：内嵌式

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*标签选择器*/
        div
        {
          width:200px;
          height:100px;
          border:1px solid red;  
          color:#00F;
        }
        /*class选择器,可以共用*/
        .cl
        {
            color:#F00;
        }
        /*可重复使用，以第二个为主*/
        .c2
        {
            font-size:20px;
        }
        /*ID选择器，不能重复*/
        #d1
        {
            color:#6F3;
        }
    </style>
</head>
<body>
<div></div>
<div class="c1 c2">你好</div>
<p class="cl">p</p>
<div id="d1"></div>
</body>
</html>

标签选择器<class<id

第三种：链接式

把CSS和HTML分开

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="CSS/a.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="c1" id="d1"></div>
</body>
</html>

div
{
    color:Red;
}
.cl
{
    color:green;
}
#d1
{
    color:Blue;
}

第四种：导入样式一般不用，会在页面加载完成后才加载样式

4、如果一个样式会在以上的几种方式都写，会按照就近原则

5、CSS的注释：/**/

6节CSS的课

6、字体样式

   color:Red;
   font-size:"微软雅黑";
   font-weight:700;
   text-decoration:underline;
   text-transform:uppercase;/*变大写*/
   letter-spacing:10px;/*字符间距*/
   text-align:center;/*文本的对齐方式*/
   line-height:200px;/*垂直对齐*/
   height:200px;

7、FSCapture 取色工具精确测量

知识点：P标签会继承d1的属性，不会所有的样式都继承，一般字体会继承

维护CSS页面

如果是公共的样式，一般放在base.css里，如果是页面单独的样式a.css b.css c.css

JS也是同样的。

程序要讲究低耦合：不要把所有的内容写到一起，要分开。

如何交作业？

建文件夹-昵称+html作业-把文件拷贝到文件夹-压缩-发QQ邮件。