HTML5

代码家的乐趣

浏览: 63923 次

最近访客更多访客>>

风貌酱

wangyy

rain16881

fan云雷

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5，css补习

html5 css XHTML

今天被HR（人很好）问道前台，给一个图像模板让我做一下布局（div+css），自己长久时间没用，可能忘记，就看看之前的笔记和http://www.w3school.com.cn/借此机会把HTML5也学了吧！感觉现在前段HTML5这一块，是比较火。然后查漏补缺，做一下笔记。
<a name="ds">跳转内连接</a>一般用于文档内的链接
<a href="#ds">asdhklahds k</a>
引入CSS 三种方式：link rel 属性 href <style><style> style="background-color: brown" 三中方式的优先级依次提高。推荐使用第一种。
表格中设计 table 里头 <caption>重要表格</caption> 显示在中间。style="border-collapse: collapse"表格合并ul是无序列表 ol有序列表，有序列表的一个常用属性 <ol start="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一般用于数据简单，资源定位（淘宝上很多网店就是），不需要太高的保密方式。

分享到：