<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML基础</title>
<link rel="stylesheet" href="http://ui.imdsx.cn/static/image/title_icon.jpg">
<style>
.banner{
/*绝对定位*/
height: 48px;
width: 100%;
background-color: pink;
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
}
.back_to_menu{
/*回到菜单*/
display: inline-block;
height: 20px;
width: 100px;
margin-top: 15px;
}
.menu{
/*左边导航*/
margin-top: 40px;
height: 600px;
width: 20%;
border: 2px black solid;
margin-left:-9px;
background-color: #FCF8E3;
display: inline-block;
position: fixed;
}
.content{
/*右侧内容*/
margin-top:40px;
margin-right: -9px;
width: 81%;
float: right;
background-color:#FCF8E3;
display: inline-block;
}
.color{
color: purple;
}
.body{
/*内容框*/
width: 99%;
border:2px black solid;
margin-top: 3px;
padding-left:5px;
padding-bottom: 5px;
}
.back {
/*回到顶部 */
position:fixed;
top: 500px;
left:1100px;
right:5px
}
.box{
border: 1px indianred solid;
height: 50px;
width:150px;
color: #FCF8E3;
text-align: center;
line-height: 48px;
}
.box:hover{
background-color: pink;
}
.repeat1{
/*#无限堆叠*/
height: 150px;
width:500px;
background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg");
}
.repeat2{
/*不堆叠*/
height: 150px;
width:500px;
background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg");
background-repeat: no-repeat
}
.repeat3{
/*纵向堆叠*/
height: 150px;
width:500px;
background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg");
background-repeat: repeat-y
}
.repeat4{
/*横向堆叠*/
height: 150px;
width:500px;
background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg");
background-repeat: repeat-x
}
.img_position{
width: 20px;
height: 20px;
border: 1px red solid;
background-image: url("http://ui.imdsx.cn/static/image/icon.png");
background-position-x:0;
background-position-y:0;
display: inline-block;
}
.img_position1{
width: 20px;
height: 20px;
border: 1px red solid;
background-image: url("http://ui.imdsx.cn/static/image/icon.png");
background-position:0;
display: inline-block;
}
.img_position2{
width: 20px;
height: 20px;
border: 1px red solid;
background-image: url("http://ui.imdsx.cn/static/image/icon.png");
background-position:0 0;
display: inline-block;
}
.img_position3{
width: 20px;
height: 20px;
border: 1px red solid;
background: url("http://ui.imdsx.cn/static/image/icon.png") 0 0 no-repeat;
}
</style>
</head>
<body>
<div class="banner">HTML基础
<div class="banner back_to_menu">
<a href="http://ui.imdsx.cn/menu/">回到菜单</a>
</div>
</div>
<div>
<span class="menu">
<div><h3 class="color">HTML</h3></div>
<div><h3 class="color">CSS</h3></div>
</span>
<span class="content" >
<div style="height: 40px;width: 100%" id="i1"><H1 style="text-align: center">HTML</H1></div>
<div class="back">
<!--回到顶部-->
<a href="#i1">回到顶部</a>
</div>
<div class="body" style="margin-top: 0">
<H3><p></p> 段落标签 </H3>
<H4><h></h> 标题标签</H4>
<pp>年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</pp>
<pp>别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！</pp>
<pp>你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。</pp>
</div>
<div class="body">
<H3>标题标签</H3>
<h1><h1></h1> 标题标签h1</h1>
<h2><h2></h2> 标题标签h2</h2>
<h3><h3></h3> 标题标签h3</h3>
<h4><h4></h4> 标题标签h4</h4>
<h5><h5></h5> 标题标签h5</h5>
<h6><h6></h6> 标题标签h6</h6>
</div>
<div class="body">
<h3><div> </div></h3>
<pp>块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签</pp>
</div>
<div class="body">
<h3><span> </span></h3>
<pp>行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签</pp>
<div style="height: 30px;width: 150px;border:1px cornflowerblue solid;margin-top: 10px;margin-left:10px ">
大师兄写作业了吗？
</div>
</div>
<div class="body">
<H3><input /></H3>
<pp>文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset</pp>
<div>
<input value="我是默认值">
<input type="text">
<input type="button" value="登录">
</div>
<div><H4>大师兄择偶标准：</H4></div>
<div>
<span>男的<input type="checkbox" checked="checked"></span>
<span>36D<input type="checkbox" checked="checked"></span>
<span>男<input type="radio" checked="checked" name="sex"></span>
<span>女<input type="radio" name="sex"></span>
</div>
<div><H4>上传文件:</H4></div>
<div>
<span><input type="file"></span>
<span><input type="submit"></span>
<span><input type="reset"></span>
</div>
</div>
<div class="body">
<H3><form></form> 表单标签</H3>
<pp>表单标签可以理解为载体，承载着所有要像后端提交的数据，
通常与input连用,表单提交数据分为get提交和post提交，
get提交在url上挂参数，post提交在body中</pp>
<div>
<input type="text" name="username" placeholder="usernama传参">
<input type="text" name="passwd" placeholder="passwd传参">
<input type="button" value="登录">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</div>
<div class="body">
<H3><label></label> 标题标签</H3>
<pp>label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id</pp>
<div>
<label for="user">用户名：</label>
<input type="text" placeholder="placeholder属性" id="user">
</div>
</div>
<div class="body">
<H3><textarea></textarea> 多行文本标签</H3>
<pp>多行文本 textarea 默认值在标签之间</pp>
<div><textarea >多行文本的默认信息</textarea></div>
</div>
<div class="body">
<h3><select></select> 下拉选择框标签</h3>
<pp>select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性：multiple</pp>
<div>
<h5 style="display: inline">单选</h5>
<select>
<option selected="selected" value="shenzhen">黑龙江</option>
<option >辽宁</option>
<option >大连</option>
</select>
<h5 style="display: inline">多选</h5>
<select name="city" multiple="multiple">
<option>山东</option>
<option>北京</option>
<option>上海</option>
<option>成都</option>
</select>
<h5 style="display: inline">超出3个有滚动条</h5>
<select name="city"multiple="multiple" size="3">
<option>山东</option>
<option>北京</option>
<option>上海</option>
<option>成都</option>
</select>
<h3><select></select> <optgroup></optgroup></h3>
<pp>对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择</pp>
<div>
<select name="city" multiple="multiple" size="4">
<optgroup label="河北省">
<option value="1">邢台</option>
<option value="2">保定</option>
<option value="3">秦皇岛</option>
<option value="4">唐山</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="body">
<h3><a> </a></h3>
<pp>超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none</pp>
<div>
<a href="http://www.imdsx.cn" target="_blank" style="text-decoration: underline" >大师兄的博客</a>
<a href="http://www.imdsx.cn" target="_blank" style="text-decoration:none" >大师兄的博客</a>
</div>
</div>
<div class="body">
<h3><img /></h3>
<div><pp>mg 图片标签 src：图片的位置 图片跳转通过a标签 alt：
当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字</pp></div>
<img src="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg" title="我是悬停文字"
alt="图片加载失败">
</div>
<div class="body">
<h3><ul></ul></h3>
<div style="height: 100px;width:180px; display: inline-block">
<h4>列表 ul li · 形式的列表</h4>
<ul>
<li>狮子座</li>
<li>双鱼座</li>
</ul>
</div>
<div style="height: 100px;width:180px;display: inline-block">
<h4>列表 ol li · 形式的列表</h4>
<ol>
<li>狮子座</li>
<li>双鱼座</li>
</ol>
</div>
<div>
<h4>分层列表 dl dd内层 dt外层</h4>
<dl>
<dt>黑龙江省</dt>
<dd>哈尔滨市</dd>
<dd>牡丹江市</dd>
</dl>
<dl>
<dt>北京</dt>
<dd>北京</dd>
</dl>
</div>
</div>
<div class="body">
<h3><table> </table></h3>
<pp>table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列</pp>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>用例名称</th>
<th>执行人</th>
<th colspan="2">编辑</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>table表格测试</td>
<td>韩韩</td>
<td><a href="http://ui.imdsx.cn/html/tmp.html">运行</a></td>
<td><a href="http://ui.imdsx.cn/html/tmp.html">编辑</a></td>
</tr> <tr>
<td>2</td>
<td colspan="2">table表格测试</td>
<td><a href="http://ui.imdsx.cn/html/tmp.html">运行</a></td>
<td><a href="http://ui.imdsx.cn/html/tmp.html">编辑</a></td>
</tr> <tr>
<td>3</td>
<td>table表格测试</td>
<td>韩韩</td>
<td><a href="http://ui.imdsx.cn/html/tmp.html">运行</a></td>
<td><a href="http://ui.imdsx.cn/html/tmp.html">编辑</a></td>
</tr>
</tbody>
</table>
</div>
<div style="height: 40px;width: 100%"><H1 style="text-align: center">CSS</H1></div>
<div class="body">
<h3>CSS</h3>
<pp>css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class</pp>
<div><pp>例如：</pp></div>
<div><pp>style="height: 48px;background-color: #6699CC"</pp></div>
</div>
<div class="body">
<h3>ID选择器</h3>
<pp># 代表通过id选择器查找</pp>
<div><pp>例：</pp></div>
<div><pp>#i1{height: 48px;background-color: red;}</pp></div>
</div>
<div class="body">
<h3>class选择器</h3>
<pp>.代表通过id选择器查找</pp>
<div><pp>例：</pp></div>
<div><pp>.menu{height: 48px;background-color: aqua;}</pp></div>
</div>
<div class="body">
<h3>标签选择器</h3>
<pp>标签名 代表通过id选择器查找</pp>
<div><pp>例：</pp></div>
<div><pp>span {color: red;background-color: blue;}</pp></div>
</div>
<div class="body">
<h3>标签层级选择器</h3>
<pp>标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签下面所有div标签颜色改变</pp>
<div><pp>例：</pp></div>
<div><pp>span div{color: aqua;background-color: red;}</pp></div>
</div>
<div class="body">
<h3>CLASS层级选择器</h3>
<pp>通过CLASS标签选择器定位第一层，在通过层级选择器定位第二层</pp>
<div><pp>例：</pp></div>
<div><pp>.c1 div{background-color: #336699;height: 48px;}</pp></div>
</div>
<div class="body">
<h3>ID层级选择器</h3>
<pp>通过ID标签选择器定位第一层，在通过层级选择器定位第二层</pp>
<div><pp>例：</pp></div>
<div><pp>#i2 div{background-color: black;height: 48px;}</pp></div>
</div>
<div class="body">
<h3>ID组合选择器</h3>
<pp>ID组合选择器，应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔</pp>
<div><pp>例：</pp></div>
<div><pp>#z1,#z2,#z3{background-color: chocolate;height: 48px;}</pp></div>
</div>
<div class="body">
<h3>CLASS组合选择器</h3>
<pp>CLASS组合选择器，应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式 组合 通过逗号间隔</pp>
<div><pp>例：</pp></div>
<div><pp>.s1,.s2,.s3{background-color: darkmagenta;height:48px;}</pp></div>
</div>
<div class="body">
<h3>属性选择器</h3>
<pp>属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用</pp>
<div><pp>例：</pp></div>
<div><pp>div[s='dsx']{background-color: darkred;height: 48px;}</pp></div>
</div>
<div class="body">
<h3>CSS优先级</h3>
<pp>标签中style优先级最高，其次在代码中就近找，也就是重下往上找</pp>
</div>
<div class="body">
<h3>引入CSS样式表</h3>
<pp>CSS可以写在三个地方，分别是1、标签中增加属性style，2、header中添加标签style标签，在标签中添加CSS，3、引入CSS样式表，实际就是将header中的style标签复制到一个以css为结尾的文件中，通过在header中添加link标签，引入css样式表<link rel="stylesheet" href="tmp.css"></pp>
</div>
<div class="body">
<h3>height</h3>
<pp>高度</pp>
</div>
<div class="body">
<h3>width</h3>
<pp>宽度</pp>
</div>
<div class="body">
<h3>font-size font-weight</h3>
<pp>font-size:字体大小 px font-weight:字体加粗</pp>
<div><pp>font-weight:字体加粗 bold:粗体 700 bolder:更粗字体
lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细</pp></div>
<span style="font-size: xx-large">字体大</span>
<span style="font-weight: bolder">字体粗</span>
</div>
<div class="body">
<h3>text-align</h3>
<div><pp>text-align 水平文本对齐方式</pp></div>
<div><pp>left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承</pp></div>
<div style="height:40px;width: 80px;border:1px red solid;text-align: right">右</div>
</div>
<div class="body">
<h3>line-height</h3>
<div><pp>line-height 垂直文本对齐方式</pp></div>
<div><pp>line-height的属性直接对应外层div的宽度就可以</pp></div>
<div style="height:40px;width: 80px;border:1px red solid;text-align: center;line-height:40px">2</div>
</div>
<div class="body" >
<h3>float</h3>
<div><pp>float 浮动 块级标签浮动后 相当于分层</pp></div>
<div><pp>通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。
none:默认不浮动、inherit:父类继承</pp></div>
<div style="height: 40px;width: 80px;border: 1px red solid;float: left">左</div>
<div style="height: 40px;width: 80px;border: 1px red solid;float: left">并列左</div>
<div style="height: 40px;width: 80px;border: 1px red solid;float: right">右</div>
<div style="clear:both"></div>
<!--clear:both可以清除浮动-->
</div>
<div class="body">
<h3>display</h3>
<div><pp>display 展示属性</pp></div>
<div><pp>块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，
行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性</pp></div>
<div style="width: 60px;height: 10px;background-color: yellowgreen;display: inline">外联标签</div>
<div style="width: 200px;height: 100px;background-color: mediumpurple;display: block">内联标签</div>
<span style="width:60px;height: 40px;background-color: yellowgreen">大师兄</span>
<div style="width:80px;height: 60px;background-color: orangered;display: inline-block">大师兄</div>
</div>
<div class="body">
<h3>margin</h3>
<div><pp>margin 外边距</pp></div>
<div><pp>外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom</pp></div>
<div style="border:1px black solid;height:100px;">
<div style="background-color:lightskyblue;height:50px;margin-top: 49px"></div>
</div>
</div>
<div class="body">
<h3>padding</h3>
<div><pp>padding 内边距</pp></div>
<div><pp>内边距 自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加</pp></div>
<div style="border:1px black solid;height:100px;">
<div style="background-color:lightskyblue;height:50px;padding-top:20px;">内边距增加</div>
</div>
</div>
<div class="body">
<h3>position</h3>
<div><pp>position 分层</pp></div>
<div><pp>position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html</pp></div>
<div><pp>position relative absolute</pp></div>
<div><pp>position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼)
absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html</pp></div>
</div>
<div class="body">
<h3>z-index</h3>
<div><pp>z-index 层级关系</pp></div>
<div><pp>分层后通过z-index来记录层级关系 越大越在前面</pp></div>
<div style="height: 50px;width: 150px;background-color:lightpink;border: 1px black solid;z-index: 10 ">z-index: 10</div>
</div>
<div class="body">
<h3>cursor</h3>
<div><pp>cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:move 有很多种样式 知道干嘛的就行了</pp></div>
<input type="button" value="鼠标悬浮小手" style="cursor: pointer">
<input type="button" value="元素移动" style="cursor: move">
<input type="button" value="截图" style="cursor: crosshair">
</div>
<div class="body">
<h3>overflow</h3>
<pp>overflow属性设置当div内的内容溢出div的高宽时，如何处理 默认会出现在元素框之外 hidden：溢出部分截取掉 scroll：超出就出现滚动条</pp>
<div style="width: 90px;height: 90px;overflow: hidden;display: inline-block">
<img src="http://ui.imdsx.cn/static/image/dsx.jpg" >
</div>
<div style="width: 120px;height: 120px;overflow: auto;display: inline-block">
<img src="http://ui.imdsx.cn/static/image/dsx.jpg" >
</div>
<div style="width: 120px;height: 120px;overflow:scroll;display: inline-block">
<img src="http://ui.imdsx.cn/static/image/dsx.jpg" >
</div>
</div>
<div>
<h3>hover</h3>
<div><pp>hover属性是当鼠标移动到上面后，设置其样式</pp></div>
<div style="" ></div>
</div>
<div class="box">鼠标移动改变样式</div>
<div class="body">
<h3>background</h3>
<div><pp>background 是针对背景一些样式设置， background-image：背景图片，图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。 background-position 针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px。
可以通过background直接简写，background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠</pp></div>
<h4>无限堆叠：</h4>
<div class="repeat1"></div>
<h4>不堆叠：</h4>
<div class="repeat2"></div>
<h4>纵向堆叠：</h4>
<div class="repeat3"></div>
<h4>横向堆叠：</h4>
<div class="repeat4"></div>
<h4>background-position 三种方式</h4>
<div class="img_position"></div>
<div class="img_position1"></div>
<div class="img_position2"></div>
<h4>简写background属性</h4>
<div class="img_position3"></div>
</div>
</span>
</div>
</body>
</html>
浙公网安备 33010602011771号