HTML基础练习
时间：2022-04-11 14:43
<!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 id="i1"><H1 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 value="shenzhen">黑龙江</option>
<option >辽宁</option>
<option >大连</option>
</select>
<h5 multiple="multiple">
<option>山东</option>
<option>北京</option>
<option>上海</option>
<option>成都</option>
</select>
<h5 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" >大师兄的博客</a>
<a href="http://www.imdsx.cn" target="_blank" >大师兄的博客</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 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 >
<h3>float</h3>
<div><pp>float 浮动 块级标签浮动后 相当于分层</pp></div>
<div><pp>通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。
none:默认不浮动、inherit:父类继承</pp></div>
<div value="鼠标悬浮小手" value="元素移动" value="截图" >
</div>
<div >
</div>
<div >
</div>
</div>
<div>
<h3>hover</h3>
<div><pp>hover属性是当鼠标移动到上面后，设置其样式</pp></div>
<div ></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>
本类排行
今日推荐
热门手游
-
僵尸前线4完整版
版本：v1.78
大小：63.15MB
日期：2024-05-21
-
雷电傲气雄鹰完整版
版本：v47.01
大小：1423.39MB
日期：2024-05-21
-
末日求生手机版
版本：v1.16
大小：168.44MB
日期：2024-05-21
-
植物暴打僵尸王破解版
版本：v1.1
大小：57.44MB
日期：2024-05-21
-
巅峰战舰九游版
版本：v1200007.8.0
大小：724.12MB
日期：2024-05-21
-
寻找道路的能量完整版
版本：v1.0
大小：36.79MB
日期：2024-05-21