HTML5

zktsx

于 2016-03-18 21:32:08 发布

阅读量97

点赞数

分类专栏： HTML5，css补习文章标签： html5 css XHTML

本文链接：https://blog.csdn.net/zktsx/article/details/84771482

版权

HTML5，css补习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天被HR（人很好）问道前台，给一个图像模板让我做一下布局（div+css），自己长久时间没用，可能忘记，就看看之前的笔记和[url]http://www.w3school.com.cn/[/url]借此机会把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>