HTML
<!DOCTYPE html> <!--规定标准的html--> <html lang="en"> <!--一个页面只允许出现一对html标签， 标签的属性-指定英文 lang= --> <head> <!--自闭和标签，只有一部分--> <meta charset="UTF-8">
<!--<meta http-equiv="refresh" content="1"> <!–页面每秒刷新一次–>--> <!--<meta http-equiv="refresh" content="2;url=https://www.baidu.com"> <!–页面每秒刷新一次–>--> <!--主动闭合标签，有两个部分--> <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> <!--如果想要在内容中加多个空格，直接敲入是不能用的，只会显示一个空格，要用到 --> <!--如果想输入一个<, 用<--> <span><年    轻></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> <!--<!–margin:0 auto 去掉边距,不然上线会有白色的边距–>--> <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>
