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;100px;*/
/*height:50px;*/
/*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; 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;50px;background-color: red;float: right;">1</div>
<div style="height: 50px;50px;background-color: green;float: left;">1</div>
display:inline 把块级标签变成行内标签,因为行内标签不能使用宽高边距等,所以可以使用display:inline-block 把他变成行内块级标签
<div style=" 100px;height:100px;background-color:red ;display:inline-block">1</div>
行内变行内块级标签
<span style="height:100px;100px;background-color: green;display: inline-block">1</span>
<!--内边距外边距-->
<!--外边距 margin-top:-->
<div style="100%;height:100px;border: 1px red solid">
<div style="100%;height:20px;background-color:yellow;margin-top: 10px"></div>
</div>
<!--内边距padding-top: 10px,扩充自身-->
<div style="100%;height:100px;border: 1px red solid">
<div style="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;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; 100%;border: 1px red solid;margin-top:48px">111</div>-->
<!--一个大方块每个角放一个小方块, z-index 设置显示优先级,后面跟数字-->
<!--Left 靠左距离多少-->
<!--Right 靠右边距离多少-->
<!--Top 距离顶部距离多少-->
<!--Bottom距离下边距离多少-->
<div style="200px;height:200px;border: 1px red solid;position: relative;">
<div style="20px;height:20px;background-color: yellow;position: absolute;left:0"></div>
<div style="20px;height:20px;background-color: blue;position: absolute;right:0"></div>
<div style="20px;height:20px;background-color: darkslategray;position: absolute;top:180px"></div>
<div style="20px;height:20px;background-color: greenyellow;position: absolute;top:180px;left:180px"></div>
</div>
<!--overflow:auto 如果实际图片大于指定的宽高,出现滚动条;-->
<div style="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="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>