X  
登录

还没有账号?立即注册

忘记密码?
登陆
X  
注册

已经有账号?马上登陆

获取验证码
重新获取(60s)
立即注册
统计
  • 建站日期:2021-03-10
  • 文章总数:683 篇
  • 评论总数:697 条
  • 分类总数:10 个
  • 最后更新:11月26日
文章 前端知识

HTML5 & CSS3 常用标签总结 适合小白

程序员阿鑫
首页 前端知识 正文


HTML5&CSS3常用标签总结适合小白
-程序员阿鑫-带你一起秃头!
-第1
张图片

HTML常用标签总结

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

块标签:独占一行,可以设置宽度和高度 ;
行内标签:多个标签存在一行,对宽高属性值不生效。

2.常见块标签:

h1~h6、p、div、table、form、ul、li

3.常见行内标签:

a、img、span、input

4.常见标签用法:

<h1>标题标签</h1>
<p>段落标签</p> 
<a href="#">这是超链接</a>
<img src="图片地址" /> 
<div>div容器</div> 
<span>span容器</span>

表格用法

<table> 
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td> 
    </tr> 
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <tr>
        <td>第三行第一列</td> 
        <td>第三行第二列</td>
    </tr> 
</table>

列表用法

<ul>
    <li>第一项</li>
    <li>第二项</li> 
</ul>

表单用法

<form>
    <input type="text" />
    <input type="button" /> 
</form>

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,如

<div id="nav"> 
    <ul>
        <li><a href="#">菜单1</a></li> 
        <li><a href="#">菜单2</a></li> 
        <li><a href="#">菜单3</a></li> 
        ....... 
        ....... 
    </ul> 
</div>

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 常用标签总结 适合小白》文章的全部内容了!

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
这篇文章最后更新于2020-5-6,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
蓝桥杯 JAVA 算法训练 猴子吃包子 C组 2020年新题
« 上一篇
WIN10一键关闭自带杀毒和更新工具
下一篇 »
为了防止灌水评论,登录后即可评论!
注册登录

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
社交账号登录

IP地址

热门文章

1
抖音无限礼物模拟小工具分享
2
QQ假红包引流QQ群教程及代码
4
卡QQ永久大会员方法

最新文章

标签