HTML5

今天被HR(人很好)问道前台,给一个图像模板让我做一下布局(div+css),自己长久时间没用,可能忘记,就看看之前的笔记和http://www.w3school.com.cn/借此机会把HTML5也学了吧!感觉现在前段HTML5这一块,是比较火。然后查漏补缺,做一下笔记。

<aname="ds">跳转内连接</a>一般用于文档内的链接

<ahref="#ds">asdhklahdsk</a>

引入CSS三种方式:linkrel属性href<style><style>style="background-color:brown"三中方式的优先级依次提高。推荐使用第一种。

表格中设计table里头<caption>重要表格</caption>显示在中间。style="border-collapse:collapse"表格合并ul是无序列表ol有序列表,有序列表的一个常用属性<olstart="10">从10开始

嵌套列表:可以无序,有序嵌套

<ul>

<li>动物

<ul>

<li>猫</li>

<li>够</li>

</ul>

</li>

</ul>

自定义表格:<dl>

<dt>helloword</dt>

<dd>aada</dd>

<dt>helloword</dt>

<dd>aada</dd>

</dl>

div+css布局方式:简单练习一下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        /*初始化声明,消除浏览器不同,margin 外边框的不一样*/
        body{
            margin: 0px;
            padding: 0px;
        }
        .container{
            width: 100%;
            height: 980px;
            background-color: gray;
        }
        .header{
            width: 100%;
            height: 10%;
            background-color: aqua;
        }
        .content_menu{
            float: left;/*添加浮动*/
            width: 30%;
            height: 80%;
            background-color: cornflowerblue;
        }
        .content_body{
            float: left;
            width: 70%;
            height: 80%;
            background-color: pink;
        }
        .foot{
            clear: both;/*清除浮动*/
            width: 100%;
            height: 10%;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="container">
            <div class="header">头部</div>
            <div class="content_menu">菜单内容</div>
            <div class="content_body">主题内容</div>
            <div class="foot">尾部</div>
    </div>
</body>
</html>

当然还有一种布局方式table,自己用的比较少。感觉其他人也用的比较少。

基本的表单:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        用户名:<input type="text" name="username" value=""/><br/>
        密码:<input type="password" name="password" value=""/>
        <!--单选-->
        男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/><br/>
        苹果:<input type="checkbox" name="shuiguo"/>  香蕉:<input type="checkbox" name="shuiguo"/>  梨:<input type="checkbox" name="shuiguo"/>
        <!--下拉-->
        <br/>
        <select>
                <option>daimajia.iteye.com</option>
                <option>百度</option>
                <option>www.baidu.com</option>
        </select>
        <br/>
        <!--文本域,是可以在表单外创建的-->
        <textarea cols="20" rows="10">
            asdasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss10行20列
        </textarea>
        <br/>
        <input type="button" value="按钮"/>
        <br/>
        <input type="submit" value="确认">
    </form>
</body>
</html>

表单提交的方式,常用的两种:post,get,post一般用于提交数据量大,或者数据保密,安全性能高。get一般用于数据简单,资源定位(淘宝上很多网店就是),不需要太高的保密方式。

相关推荐