HTML

<!DOCTYPE html>   <!--规定标准的html-->
<html lang="en"> <!--一个页面只允许出现一对html标签, 标签的属性-指定英文 lang= -->

<head>
    <!--自闭和标签,只有一部分-->
    <meta charset="UTF-8">
<!--<meta http-equiv="refresh" content="1"> &lt;!&ndash;页面每秒刷新一次&ndash;&gt;--> <!--<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> &lt;!&ndash;页面每秒刷新一次&ndash;&gt;--> <!--主动闭合标签,有两个部分--> <title>lily</title> <!--修改浏览器页签名字--> <!--tps: chrome 页面右键 -检查,然后刷新按钮右键可以选择清空缓存并硬性加载--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> <!--修改浏览器页签图标--> </head> <body> <h1>标题标签</h1> <h2>标题标签</h2> <h3>标题标签</h3> <h4>标题标签</h4> <h5>标题标签</h5> <h6>标题标签</h6> <!--块级标签,无论文字多少,占满整行整块,可以页面上 find element分别查看一下效果--> <p>今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。</p> <!-- 这一行内容上下有间距 --> <!--行内标签,文字多少,占多少,span也是最基础的标签,白板标签--> <span>今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。今天周三。</span> <!-- 这一行内容上下没有间距,这个用的多 --> <!--伪白板标签, 因为他的styles里 有 display:block ,她也变成了块级标签--> <div>今天</div> <!--如果想要在内容中加多个空格,直接敲入是不能用的,只会显示一个空格,要用到&nbsp--> <!--如果想输入一个<, 用&lt--> <span>&lt&nbsp&nbsp&nbsp&nbsp轻&gt</span> <!--输入框 name就是传递给后端的key, value就是值,placeholder 框内的默认提示--> <input type="text" placeholder="请输入用户名" name="lily" value="happy"> <!--如果是password类型,自动变成***--> <input type="password" placeholder="请输入密码" name="lily" value="happy"> <!--勾选框,checked="checked" 默认勾选--> <span>请选择:</span><input type="checkbox" name="xxx" checked="checked"> <!--单选框,默认勾选的添加checked="checked"--> <div>性别</div> <span></span><input type="radio" name="xxx" checked="checked"> <span></span><input type="radio" name="xxx"> <!--上传文件file--> <input type="file" name="file"> <!--一个button,显示名字为提交--> <!--button是需要和js连用的,通过该js进行提交操作--> <input type="button" value="提交"> <!--action,点击登陆时跳转到哪里--> <form action="http://www.baidu.com" method="get"> <input type="text" value="admin" name="username"> <input type="reset"> <!--如果和form连用,直接提交form表单,现在很少直接用submit提交了,会用ajax绑定button操作,因为submit提交了,用户输入的东西会被清掉, ajax提交后台静态提交,页面用户输入还是保留的--> <input type="submit" value="登陆"> <input type="button" value="button登陆"> </form> 使用label,配合for 和input中的id,可以扩展输入框的范围,点击“用户名”,即可选中输入框,而是用span就不会 <label for="i1">用户名</label><input id="i1" type="text" value="admin"> <span>密码</span><input type="password"> 多行文本 <textarea name="name">sssss</textarea> 选框, 通过name value传给后台,size为显示几个,multip多选,需要按住ctrl <select name="city" size="5" multiple="multiple"> <option value="1">北京</option> <option value="2" selected="selected">河北</option> <option value="3">江苏</option> </select> <!--层级列出选项--> <select> <optgroup label="河北"> <option>保定</option> <option>石家庄</option> <option>唐山</option> </optgroup> </select> 不同标签切换 <a href="http://baidu.com">百度一下</a> <a href="#i2">nana</a> <a href="#i1">lily</a> <div id="#i1">lily</div> <div id="#i2">nana</div> <!----> <ul> <li>大连</li> <li>企鹅</li> </ul> <!--数字--> <ol> <li>大连</li> <li>企鹅</li> </ol> <!--层级显示--> <dl> <dt>黑龙江</dt> <dd>哈尔滨</dd> <dd>吉林</dd> </dl> <!--表格--> <table border="1"> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> <th>sex</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>lily</td> <td rowspan="3">12</td> <td></td> <td>确认</td> <td>取消</td> </tr> <tr> <td>2</td> <td>lily</td> <!--<td>12</td>--> <td></td> <td>确认</td> <td>取消</td> </tr> <tr> <td>3</td> <td>lily</td> <!--<td>12</td>--> <td></td> <td><a href='update.html'>确认</a></td> <td>取消</td> </tr> </tbody> </table> 显示图片 <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示" title="鼠标悬浮式显示"> </body> </html>

 CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式三:通过link标签引入css-->
    <!--<link rel="stylesheet" href="xx.css">-->
    <!--方式一:在head中添加style标签-->
    <style>
        /*id选择器*/
        #i1{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        /*id层级选择器*/
        #i1 span{
            background-color: yellow;
        }
        /*同时设定多个id选择器的样式, class和 标签选择器也可以这样设定*/
        #i3,#i4,#i5{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        /*class选择器*/
        .c1{
            height: 100px;
            width: 100px;
            background-color: black;
        }
        /*class层级选择器*/
        .cl span{
            background-color: green;
        }
        /*标签选择器*/
        div {
            height:100px;
            width:100px;
            background-color: pink;
        }
        /*标签层级选择器,div中 的span标签应用这个样式*/
        div span{
            background-color: blue;
        }
        div[name='lily']{
            /*下面这两行不写,会继承div样式中的 height:100px;width:100px;*/
            /*height:50px;*/
            /*width:50px;*/
            background-color: blue;
    }

    </style>
</head>
<body>
    <!--第二种方式,在某个需要样式的标签中指定style-->
    <!--<div id="i1" style=""></div>-->
    <!--id选择器,一个html页面中,不可以存在相同的id,通过#来定位,id是不可以重复的!!-->
    <!--<div id="i1"></div>-->
    <!--class选择器,通过.来定位,class是可以重复的!!-->
    <div class="c1"></div>
    <!--标签选择器,所有没有样式的div都会自动带入这个样式-->
    <div></div>
    <!--标签层级选择器-->
    <div>
        <span>lily</span>
    </div>
    <!--class层级选择器-->
    <div class="c1"><span>haha</span></div>
    <!--id层级选择器,当行内标签没有输入内容时,样式不会显示出来-->
    <div id="i1"><span>id层级</span></div>
    <!--多个id选择器使用相同样式,但是可以使用相同的class,因为class是可以重复使用的-->
    <div id="i3"></div><br>
    <div id="i4"></div><br>
    <div id="i5"></div><br>

    <div class="c1"></div><br>
    <div class="c1"></div><br>
    <div class="c1"></div><br>
    <!--属性选择器,通过name等属性来定位元素赋予样式, 会先选择div样式,然后根据name定位到指定样式覆盖-->
    <div name="lily">haha</div>

</body>
</html>

三种配置样式的方法的优先级:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--当同时使用三种方式设定样式 ,标签内的优先显示,然后是style,最后是 link,也就是从标签开始从下到上依次查找-->
    <link rel="stylesheet" href="s3.css">
    <style>
        .c1{
            background-color: pink;
            height:100px;
            width:100px;
        }
    </style>
</head>
<body>
    <div class="c1" style="background-color: blue;height: 100px;width: 100px;"></div>
</body>
</html>

CSS样式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*:hover 鼠标放上去显示*/
        .c2:hover{
            background-color: red;
            color:black;
        }
        /*background-position: 0 0  调整背景图的上下左右的位置*/
        #id{
            width:1000px;
            height:1000px;
            border:1px red solid;
            background-image:url('http://ui.imdsx.cn/static/image/dsx.jpg');
            background-repeat: repeat;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <!--添加红色边框, 1px red solid 一像素的红色实线边框,font-size 字体大小,font-weight 字体加粗-->
    <div style="font-size: larger; border: 1px red solid; font-weight: bolder;">1</div>
    <!--居中.text-align:center 水平居中,line-height:100px 垂直居中,实际上是帮我们做了一个/2的操作显示出来-->
    <div style="font-size: larger; border: 1px red solid; font-weight: bolder; text-align:center;line-height:100px">1</div>
    <!--float 调整位置-->
    <div style="height: 50px;width:50px;background-color: red;float: right;">1</div>
    <div style="height: 50px;width:50px;background-color: green;float: left;">1</div>
    display:inline 把块级标签变成行内标签,因为行内标签不能使用宽高边距等,所以可以使用display:inline-block 把他变成行内块级标签
    <div style="width: 100px;height:100px;background-color:red ;display:inline-block">1</div>
    行内变行内块级标签
    <span style="height:100px;width:100px;background-color: green;display: inline-block">1</span>
    <!--内边距外边距-->
    <!--外边距 margin-top:-->
    <div style="width:100%;height:100px;border: 1px red solid">
        <div style="width:100%;height:20px;background-color:yellow;margin-top: 10px"></div>
    </div>
    <!--内边距padding-top: 10px,扩充自身-->
    <div style="width:100%;height:100px;border: 1px red solid">
        <div style="width:100%;height:20px;background-color:blue;padding-top: 10px"></div>
    </div>
    <!--style="cursor:pointer 鼠标放上去显示小手图标,还有很多,自己百度一下-->
    <input type="button" value="提交" style="cursor:pointer">
    用css样式添加悬浮效果
    <div class="c2" style="height: 100px;width:100px;border:1px red solid;color:white">a</div>
</body>
<!--&lt;!&ndash;margin:0 auto 去掉边距,不然上线会有白色的边距&ndash;&gt;-->
<body style="margin:0 auto">
    <!--不添加position: fixed" 这一行会随着鼠标滑动页面而滑动,加上后固定在顶部,导航栏 都是这么固定的-->
    <div style="background-color: aquamarine;position: fixed;top:0;left:0;right: 0;height:48px"></div>
    <!--margin-top:48px 家这一行,不然红色边框被遮挡-->
    <!--<div style="height: 10000px;width: 100%;border: 1px red solid;margin-top:48px">111</div>-->
    <!--一个大方块每个角放一个小方块, z-index 设置显示优先级,后面跟数字-->
    <!--Left 靠左距离多少-->
    <!--Right 靠右边距离多少-->
    <!--Top 距离顶部距离多少-->
    <!--Bottom距离下边距离多少-->
    <div style="width:200px;height:200px;border: 1px red solid;position: relative;">
        <div style="width:20px;height:20px;background-color: yellow;position: absolute;left:0"></div>
        <div style="width:20px;height:20px;background-color: blue;position: absolute;right:0"></div>
        <div style="width:20px;height:20px;background-color: darkslategray;position: absolute;top:180px"></div>
        <div style="width:20px;height:20px;background-color: greenyellow;position: absolute;top:180px;left:180px"></div>
    </div>
    <!--overflow:auto 如果实际图片大于指定的宽高,出现滚动条;-->
    <div style="width:800px;height:800px;border:1px red solid;overflow:auto">
        <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
    </div>
    background-repeat: no-repeat 背景图不重复填充, repeat-x 和横向填充,repeat-y纵向填充,repeat横向加纵向填充
    <div style="width:1000px;height:1000px;border:1px red solid;background-image:url('http://ui.imdsx.cn/static/image/dsx.jpg');background-repeat: repeat"></div>
    调整背景图的位置
    <div id="id"></div>
</body>
</html>

 

posted on 2018-11-26 17:18  lilyzhang_18  阅读(167)  评论(0编辑  收藏  举报