这篇文章给大家分享的是有关HTML5中div标签的用法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- <link rel="stylesheet" href="CSS\17-p.css"> --> <style> /* 块元素的特点 1.默认宽度 父元素的百分百;一致 2.霸占一行 3.支持全部样式 */ .box{ width: 100px; height: 50px; background-color: red; } span{ /* 1.行内元素排列一行,遇到边界 会自动换行 */ background-color: red; /* 2.宽高有内容决定 不支持宽高 不支持margin上下 */ width: 200px; height: 200px; margin: 100px 20px; /* 3.padding上下有问题 */ /* padding: 50px 20px; */ } </style> </head> <body> <p class="box"></p> <p>段落</p> <h2>标题标签</h2> <!-- ol>li{有序$}*5 --> <ol> <li>有序1</li> <li>有序2</li> <li>有序3</li> <li>有序4</li> <li>有序5</li> </ol> <!-- ul>li{无序$}*3 --> <ul> <li>无序1</li> <li>无序2</li> <li>无序3</li> </ul> <!-- dl>dd{定义列表}*3 --> <dl> <dt>title</dt> <dd>定义列表</dd> <dd>定义列表</dd> <dd>定义列表</dd> </dl> <form action=""> <label for="">标注</label> <input type="text" name="" id=""> </form> <span>行内元素</span> <span>行内元素</span> </body> </html>
运行效果如下:
感谢各位的阅读!关于HTML5中div标签的用法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。