初学HTML心得
2016-06-24 16:41
288 查看
HTML其实和ANDROID里写布局和style文件时差不多，不过HTML的标签更多，个人认为只要记住标签和它的作用就可以很好的写出一张漂亮的网页了。不过里面的自定义就需要另外学习了
标签和标签对
<p></p> 段落标签 <span></span>富文本标签，设置字体颜色，加粗等,中间写要操作的文字
<a href="http//www.baidu.com">百度</a>超链接标签，网页跳转
<img></img> 图片资源
<br></br> 换行标签
<ul>无序列表
<li>苹果</li></ul> //列表项
<li>小米</li></ul>
</ul>
<ol><ol>有序列表
<form>输入标记
用户名<input type ="text" name="user" />
密码<input type="password" name="pd" />
<input type="radio" name="gander" values="男" />
<input type="radio" name="gander" values="女" />
</form>
下拉
<form>
<select>
<option>四川</option>
<option>重庆</option>
<option>湖南</option>
</select>
</form>
多选
<form>
<input type="checkBox" name="books" values="言情" />
<input type="checkBox" name="books" values="玄幻" />
<input type="checkBox" name="books" values="仙侠" />
<input type="checkBox" name="books" values="修真" />
</form>
文本选择框 <input type="file" name='file' />
文本选择域 <textarea rows="2" cols="2" />
提交按钮 < input type="submit" valu="提交"/>
普通按钮 <input type="button" name="点击" />
占位符 &ndps
边框属性：border
字体：font family text_decoration(下划线之类)
<div></div>板块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网易音乐</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.logo{
width:100%;
height:90px;
}
.logo .logo_img{
width:151px;
height:40px;
margin-left:200px;
float:left;
margin-top:20px;
}
.logo .logo_form{
width:500px;
height:30px;
float:left;
margin-left:50px;
margin-top:20px;
}
.logo .logo_form .in1{
width:440px;
height:30px;
border:#E7E7E7 2px solid;
line-height:30px;
vertical-align:middle;
color:#ABABAB;
display:block;
float:left;
}
.logo .logo_form .in2{
width:37px;
height:35px;
background-image:url(ss.png);
background-repeat:no-repeat;
border:none;
margin-top:-2px;
diaplay:block;
float:left;
}
.logo .logo_link{
width:180px;
height:30px;
margin-top:30px;
float:left;
margin-left:-1px;
}
.logo .logo_link a{
font-size:12px;
color:#359BED;
}
.dh{
width:100%;
height:35px;
background-color:#0E97E6;
}
.dh ul{
margin-left:200px;
list-style-type:none;
}
.dh ul li{
width:120px;
height:35px;
float:left;
margin-left:1px;
}
.dh ul li a{
color:white;
font-weight:bold;
text-decoration:none;
width:120px;
height:35px;
display:block;
text-align:center;
line-height:35px;
vertical-align:middle;
font-size:12px;
}
.dh ul li .a1{
background-color:#067ED1;
}
.dh ul li a:hover{
background-color:#067ED1;
}
.content{
width:80%;
height:600px;
margin-left:200px;
margin-top:20px;
}
.content .content_left{
width:20%;
height:100%;
background-color:#F3F3F3;
float:left;
}
.content .content_left h3{
margin-top:5px;
margin-left:20px;
font-size:14px;
}
.content .content_left ul{
list-style-type:none;
margin-left:40px;
margin-top:5px;
}
.content .content_left ul li{
margin-top:10px;
}
.content .content_left ul .li1{
background-image:url(bt1.png);
background-repeat:no-repeat;
background-position:-3px 0px;
}
.content .content_left ul li a{
font-size:12px;
color:#666666;
text-decoration:none;
display:block;
width:50px;
margin-left:30px;
}
.content .content_left ul li a:hover{
color:#067ED1;
}
.content .content_left .p1{
font-size:12px;
color:#CCC;
margin-left:35px;
margin-top:10px;
}
.content .content_left .p2{
font-size:14px;
margin-left:35px;
}
.content .content_left button{
font-size:14px;
width:120px;
height:30px;
background-color:#09F;
color:#FFF;
border:none;
margin-top:10px;
margin-left:35px;
}
.content .content_middle{
width:50%;
height:100%;
float:left;
}
.content .content_middle .content_middle_1{
width:100%;
height:300px;
}
.content .content_middle .content_middle_1 .p1{
margin-left:10px;
margin-top:10px;
float:left;
}
.content .content_middle .content_middle_1 .p1 a{
text-decoration:none;
font-size:16px;
font-family:"华文行楷";
font-weight:bold;
}
.content .content_middle .content_middle_1 .content_middle_1_1{
width:100%;
height:270px;
margin-top:4px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_left{
width:50%;
height:270px;
float:left;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_left img{
margin-top:20px;
margin-left:10px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right{
width:50%;
height:270px;
float:left;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right .p1{
margin-left:40px;
margin-top:20px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right .p2{
margin-left:40px;
margin-top:10px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right .p1 span{
font-weight:bold;
}
.content .content_middle .content_middle_2 img{
margin-left:10px;
}
.content .content_right{
width:30%;
height:100%;
background-color:lime;
float:left;
}
</style>
</head>
<body>
<div class="logo">
<div class="logo_img">
<img src="logo.png" />
</div>
<div class="logo_form">
<form action="#" method="get">
<input type="text" name="msg" class="in1" value="百度卫士" /><input type="submit" value="" class="in2" />
</form>
</div>
<div class="logo_link">
<a href="#">添加软件站到桌面，下载更便捷！</a>
</div>
</div>
<div class="dh">
<ul>
<li><a href="#" class="a1">首页</a></li>
<li><a href="#">软件管理</a></li>
<li><a href="#">开放平台</a></li>
<li><a href="#">活动中心</a></li>
<li><a href="#">安全中心</a></li>
</ul>
</div>
<div class="content">
<div class="content_left">
<h3>音乐播放</h3>
<ul>
<li class="li1"><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
</ul>
<p class="p1">商户合作邮箱:</p>
<p class="p2"><a href="#">rjhz@baidu.com</a></p>
<button>提交软件</button>
</div>
<div class="content_middle">
<div class="content_middle_1">
<p class="p1"><a href="#">首页</a> > <a href="#">音乐播放</a></p>
<p style="clear:left;"></p>
<div class="content_middle_1_1">
<div class="content_middle_1_1_left">
<img src="d6e2c1d8b26a52950409e484011eb004.jpg" width="300" />
</div>
<div class="content_middle_1_1_right">
<p class="p1"><span>网易音乐</span> <img src="xx.png" /> 9.1分</p>
<p style="clear:left;"></p>
<p class="p2">大小：31.9M 版本：2.0.3.131777</p>
</div>
</div>
</div>
<div class="content_middle_2">
<img src="1464245315.jpg" />
</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="content_right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
标签和标签对
<p></p> 段落标签 <span></span>富文本标签，设置字体颜色，加粗等,中间写要操作的文字
<a href="http//www.baidu.com">百度</a>超链接标签，网页跳转
<img></img> 图片资源
<br></br> 换行标签
<ul>无序列表
<li>苹果</li></ul> //列表项
<li>小米</li></ul>
</ul>
<ol><ol>有序列表
<form>输入标记
用户名<input type ="text" name="user" />
密码<input type="password" name="pd" />
<input type="radio" name="gander" values="男" />
<input type="radio" name="gander" values="女" />
</form>
下拉
<form>
<select>
<option>四川</option>
<option>重庆</option>
<option>湖南</option>
</select>
</form>
多选
<form>
<input type="checkBox" name="books" values="言情" />
<input type="checkBox" name="books" values="玄幻" />
<input type="checkBox" name="books" values="仙侠" />
<input type="checkBox" name="books" values="修真" />
</form>
文本选择框 <input type="file" name='file' />
文本选择域 <textarea rows="2" cols="2" />
提交按钮 < input type="submit" valu="提交"/>
普通按钮 <input type="button" name="点击" />
占位符 &ndps
边框属性：border
字体：font family text_decoration(下划线之类)
<div></div>板块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网易音乐</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.logo{
width:100%;
height:90px;
}
.logo .logo_img{
width:151px;
height:40px;
margin-left:200px;
float:left;
margin-top:20px;
}
.logo .logo_form{
width:500px;
height:30px;
float:left;
margin-left:50px;
margin-top:20px;
}
.logo .logo_form .in1{
width:440px;
height:30px;
border:#E7E7E7 2px solid;
line-height:30px;
vertical-align:middle;
color:#ABABAB;
display:block;
float:left;
}
.logo .logo_form .in2{
width:37px;
height:35px;
background-image:url(ss.png);
background-repeat:no-repeat;
border:none;
margin-top:-2px;
diaplay:block;
float:left;
}
.logo .logo_link{
width:180px;
height:30px;
margin-top:30px;
float:left;
margin-left:-1px;
}
.logo .logo_link a{
font-size:12px;
color:#359BED;
}
.dh{
width:100%;
height:35px;
background-color:#0E97E6;
}
.dh ul{
margin-left:200px;
list-style-type:none;
}
.dh ul li{
width:120px;
height:35px;
float:left;
margin-left:1px;
}
.dh ul li a{
color:white;
font-weight:bold;
text-decoration:none;
width:120px;
height:35px;
display:block;
text-align:center;
line-height:35px;
vertical-align:middle;
font-size:12px;
}
.dh ul li .a1{
background-color:#067ED1;
}
.dh ul li a:hover{
background-color:#067ED1;
}
.content{
width:80%;
height:600px;
margin-left:200px;
margin-top:20px;
}
.content .content_left{
width:20%;
height:100%;
background-color:#F3F3F3;
float:left;
}
.content .content_left h3{
margin-top:5px;
margin-left:20px;
font-size:14px;
}
.content .content_left ul{
list-style-type:none;
margin-left:40px;
margin-top:5px;
}
.content .content_left ul li{
margin-top:10px;
}
.content .content_left ul .li1{
background-image:url(bt1.png);
background-repeat:no-repeat;
background-position:-3px 0px;
}
.content .content_left ul li a{
font-size:12px;
color:#666666;
text-decoration:none;
display:block;
width:50px;
margin-left:30px;
}
.content .content_left ul li a:hover{
color:#067ED1;
}
.content .content_left .p1{
font-size:12px;
color:#CCC;
margin-left:35px;
margin-top:10px;
}
.content .content_left .p2{
font-size:14px;
margin-left:35px;
}
.content .content_left button{
font-size:14px;
width:120px;
height:30px;
background-color:#09F;
color:#FFF;
border:none;
margin-top:10px;
margin-left:35px;
}
.content .content_middle{
width:50%;
height:100%;
float:left;
}
.content .content_middle .content_middle_1{
width:100%;
height:300px;
}
.content .content_middle .content_middle_1 .p1{
margin-left:10px;
margin-top:10px;
float:left;
}
.content .content_middle .content_middle_1 .p1 a{
text-decoration:none;
font-size:16px;
font-family:"华文行楷";
font-weight:bold;
}
.content .content_middle .content_middle_1 .content_middle_1_1{
width:100%;
height:270px;
margin-top:4px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_left{
width:50%;
height:270px;
float:left;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_left img{
margin-top:20px;
margin-left:10px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right{
width:50%;
height:270px;
float:left;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right .p1{
margin-left:40px;
margin-top:20px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right .p2{
margin-left:40px;
margin-top:10px;
}
.content .content_middle .content_middle_1 .content_middle_1_1 .content_middle_1_1_right .p1 span{
font-weight:bold;
}
.content .content_middle .content_middle_2 img{
margin-left:10px;
}
.content .content_right{
width:30%;
height:100%;
background-color:lime;
float:left;
}
</style>
</head>
<body>
<div class="logo">
<div class="logo_img">
<img src="logo.png" />
</div>
<div class="logo_form">
<form action="#" method="get">
<input type="text" name="msg" class="in1" value="百度卫士" /><input type="submit" value="" class="in2" />
</form>
</div>
<div class="logo_link">
<a href="#">添加软件站到桌面，下载更便捷！</a>
</div>
</div>
<div class="dh">
<ul>
<li><a href="#" class="a1">首页</a></li>
<li><a href="#">软件管理</a></li>
<li><a href="#">开放平台</a></li>
<li><a href="#">活动中心</a></li>
<li><a href="#">安全中心</a></li>
</ul>
</div>
<div class="content">
<div class="content_left">
<h3>音乐播放</h3>
<ul>
<li class="li1"><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
<li><a href="#">聊天通讯</a></li>
</ul>
<p class="p1">商户合作邮箱:</p>
<p class="p2"><a href="#">rjhz@baidu.com</a></p>
<button>提交软件</button>
</div>
<div class="content_middle">
<div class="content_middle_1">
<p class="p1"><a href="#">首页</a> > <a href="#">音乐播放</a></p>
<p style="clear:left;"></p>
<div class="content_middle_1_1">
<div class="content_middle_1_1_left">
<img src="d6e2c1d8b26a52950409e484011eb004.jpg" width="300" />
</div>
<div class="content_middle_1_1_right">
<p class="p1"><span>网易音乐</span> <img src="xx.png" /> 9.1分</p>
<p style="clear:left;"></p>
<p class="p2">大小：31.9M 版本：2.0.3.131777</p>
</div>
</div>
</div>
<div class="content_middle_2">
<img src="1464245315.jpg" />
</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="content_right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
-  |"|&|<|>等html字符转义
- 使用NPOI 转换Excel TO HTML （导出格式不如原生Excel好看）
- HTML基本标签(一)
- HTML <map> 标签
- HTML标签
- .net保存html文件
- [HTML]显示/隐藏DIV的技巧(visibility与display的差别)
- swiper基础使用（八）
- 带你走进html
- HTML新人基础学习1.1—HTML的全局属性
- Html常用正则表达式
- html 之 footer位于底端
- html table之 全选，全不选
- html meta标签作用
- HTML中的表单标签(一)
- Markdown 语法简明描述和速记
- Html Vedio标签全屏
- 关于html转pdf
- webpack 处理html中img的src引入的图片
- html 页面模块的常用命名