html5 css3单双标签,HTML5 & CSS3 常用标签总结 适合小白

HTML常用标签总结

1.行内标签与块标签区别：

块标签：独占一行，可以设置宽度和高度 ；

行内标签：多个标签存在一行，对宽高属性值不生效。

2.常见块标签：h1~h6、p、div、table、form、ul、li

3.常见行内标签：a、img、span、input

4.常见标签用法：

标题标签

段落标签

这是超链接

div容器

span容器

表格用法

第一行第一列	第一行第二列
第二行第一列	第二行第二列
第三行第一列	第三行第二列

列表用法

• 第一项
• 第二项

表单用法

5.常用样式：width: 1000px; /*设置标签宽度*/

height:600px; /*设置标签高度*/

color : #999999; /*文字颜色*/

font-family : 宋体; /*文字字体*/

font-size : 9px; /*文字大小*/

line-height : 50px; /*设置行高,一般配合height使用，设置文字垂直居中*/

font-weight:bold; /*文字粗体*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除下划线*/

text-align:center; /*文字居中对齐*/

margin-top:10px; /*上外边距*/

margin-right:10px; /*右外边距*/

margin-bottom:10px; /*下外边距*/

margin-left:10px; /*左外边距*/

padding-top:10px; /*上内边距*/

padding-right:10px; /*右内边距*/

padding-bottom:10px; /*下内边距*/

padding-left:10px; /*左内边距*/

list-style:none; /*隐藏ul前面的点*/

background-color:#F5E2EC; /*背景颜色*/

background-image : url(/image/bg.gif); /*背景图片*/

background-repeat : no-repeat; /*不重复排列*/

background-position : -10px -50px; /*背景图片向左移动10px，向上移动50px*/

border : 1px solid #6699cc; /*边框*/

float: left; /*左浮动*/

overflow:hidden; /*消除溢出，用于解决浮动塌陷、边距合并问题*/

display:none; /*隐藏标签*/

display:block; /*将行内标签转为块标签*/

6.常用固定样式写法：

去掉标签默认边距*{

padding:0px;

margin:0px;

}

让div水平居中margin:0px auto;

让div中的内容水平垂直居中text-align:center;

height : 50px; /*height与line-height 值相同，根据实际情况设置*/

line-height : 50px;

7.水平导航菜单实现步骤：

1)搭建静态ul，如

• 菜单1
• 菜单2
• 菜单3

.......

.......

2)添加如下样式/*去掉标签默认边距*/

*{

margin:0px;

padding:0px;

}

#nav ul{

list-style:none; /*隐藏ul前面的点*/

overflow:hidden; /*解决ul浮动塌陷*/

}

/*li效果*/

#nav ul li{

width:100px; /*每个菜单的宽度，自己改动*/

height:30px; /*每个菜单的高度，自己改动*/

line-height:30px; /*垂直居中*/

text-align:center; /*水平居中*/

border:1px dashed #ccc;

float:left; /*水平菜单最关键的，使菜单水平排列*/

}

/*li中超链接效果*/

#nav ul li a{ color:black; /*菜单字体颜色*/

text-decoration: none; /*隐藏下划线*/

}

#nav ul li:hover{

background-color: yellow; /*鼠标经过菜单背景颜色改变*/

}

#nav ul li:hover a{

color:orange; /*鼠标经过菜单文字改变*/

}

以上是《HTML5 & CSS3 常用标签总结 适合小白》文章的全部内容,感谢你的支持！

以上就是《HTML5 & CSS3 常用标签总结 适合小白》文章的全部内容了!

本文最后更新于2020-5-6，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！