大佬教程收集整理的这篇文章主要介绍了菜鸟零基础学习HTML5 ----- 1.4、HTML5列表、块和布局，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
一、HTML列表
1、无序列表
使用标签：<ul>、<li>
@L_489_2@：disc、circle、square
2、有序列表
使用标签：<ol>、<li>
@L_489_2@：A、a、l、i、start
3、嵌套列表
使用标签：<ul>、<ol>、<li>
4、自定义列表
使用标签：<dl>、<dt>、<dd>
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>列表</title> </head> <body> <!--无序列表--> <ul type="square"> <!--type可选disc、circle、square--> <li>苹果</li> <li>橘子</li> <li>香蕉</li> <li>西瓜</li> </ul> <!--有序列表--> <ol type="A"> <!--type可选A、a、l、i--> <li>苹果</li> <li>橘子</li> <li>香蕉</li> <li>西瓜</li> </ol> <!--嵌套列表--> <ul> <li>宠物</li> <ol> <li>小猫</li> <li>小狗</li> </ol> <li>人类</li> <ol> <li>中国人</li> <li>美国人</li> </ol> <li>植物</li> </ul> <ol> <li>宠物</li> <ul> <li>小猫</li> <li>小狗</li> </ul> <li>人类</li> <ul> <li>中国人</li> <li>美国人</li> </ul> <li>植物</li> </ol> <!--自定义标签--> <dl> <dt>HelloWorld</dt> <dd>111111111111</dd> <dt>HelloWorld</dt> <dd>222222222222</dd> <dt>HelloWorld</dt> <dd>333333333333</dd> </dl> </body> </html>
二、HTML块
1、HTML块元素
块元素在显示时，通常会以新行开始
如：<h1> <p> <ul>
2、HTML内联元素
内联元素通常不会以新行开始
如：<b> <a> <img>
3、HTML<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
4、HTML<span>元素
<span>元素是内联元素，可作为文本的容器
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>块元素</title> <link rel="stylesheet" type="text/css" href="mycss.css"> <style> span{ color: red; } </style> </head> <body> <!--块--> <p>大家好！</p> <h1>大家好！</h1> <b>这是一个加重标签</b> <a href="http://www.baidu.com">这是一个超链接标签</a> <!--div元素--> <div id = "divID"> <p>百度一下</p> <a href="http://www.baidu.com">百度一下</a> </div> <!--span元素--> <div id="divSpan"> <p><span>这是一个测试</span>span的代码</p> </div> </body> </html>
#divID p /*加p表示只更改p标签的@L_489_2@*/ { color: aqua; }
三、HTML布局
1、使用<div>元素布局
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin: 0px; } div#container{ width: 100%; height: 950px; BACkground-color: gray; } #heading{ width: 100%; height: 10%; BACkground-color: chartreuse; } #content_menu{ width: 30%; height: 80%; BACkground-color: aquamarine; float: left; } #contenT_Body{ width: 70%; height: 80%; BACkground-color: aqua; float: left; } #fooTing{ width: 100%; height: 10%; BACkground-color: deeppink; clear: both; } </style> </head> <body> <div id="container"> <div id="heading">头部</div> <div id="content_menu">内部菜单</div> <div id="contenT_Body">内容主题</div> <div id="fooTing">底部</div> </div> </body> </html>
2、使用<table>元素布局
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>table布局</title> <style> ul{ color: red; } </style> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height = "950px" style="BACkground-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="BACkground-color: chartreuse">这是头部</td> </tr> <tr> <td width="20%" height="80%" style="BACkground-color: aqua">左菜单</td> <td width="60%" height="80%" style="BACkground-color: aquamarine"> <ul> <li><h1>苹果</h1></li> <li><h1>橘子</h1></li> <li><h1>香蕉</h1></li> </ul> </td> <td width="20%" height="80%" style="BACkground-color: blueviolet">右菜单</td> </tr> <tr> <td colspan="3" width="100%" height="20%" style="BACkground-color: coral">尾部</td> </tr> </table> </body> </html>
以上是大佬教程为你收集整理的菜鸟零基础学习HTML5 ----- 1.4、HTML5列表、块和布局全部内容，希望文章能够帮你解决菜鸟零基础学习HTML5 ----- 1.4、HTML5列表、块和布局所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。