<!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; 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; 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;180px; display: inline-block"> <h4>列表 ul li · 形式的列表</h4> <ul> <li>狮子座</li> <li>双鱼座</li> </ul> </div> <div style="height: 100px;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; 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; 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; 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; 80px;border: 1px red solid;float: left">左</div> <div style="height: 40px; 80px;border: 1px red solid;float: left">并列左</div> <div style="height: 40px; 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=" 60px;height: 10px;background-color: yellowgreen;display: inline">外联标签</div> <div style=" 200px;height: 100px;background-color: mediumpurple;display: block">内联标签</div> <span style="60px;height: 40px;background-color: yellowgreen">大师兄</span> <div style="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; 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=" 90px;height: 90px;overflow: hidden;display: inline-block"> <img src="http://ui.imdsx.cn/static/image/dsx.jpg" > </div> <div style=" 120px;height: 120px;overflow: auto;display: inline-block"> <img src="http://ui.imdsx.cn/static/image/dsx.jpg" > </div> <div style=" 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>