html5学习笔记(2)

2024-12-26 技术教程

html5

列表：

http://www.w3school.com.cn/tags/html_ref_byfunc.asp

列表：

无序列表：

使用标签<ul><li>

属性：disc, circle, square

有序列表：

使用标签<ol><li>

属性：A,a,I,i,start

嵌套列表：

使用标签：<ul>,<ol>,<li>

自定义列表：

使用标签：<dl>,<dt>,<dd>

<body><ultype="circle"><li>apple</li><li>bnana</li><li>orange</li></ul><ultype="square"><li>apple</li><li>bnana</li><li>orange</li></ul><oltype="a"><li>apple</li><li>bnana</li><li>orange</li></ol><oltype="A"><li>apple</li><li>bnana</li><li>orange</li></ol><oltype="i"><li>apple</li><li>bnana</li><li>orange</li></ol><oltype="I"><li>apple</li><li>bnana</li><li>orange</li></ol><olstart="10"><li>apple</li><li>bnana</li><li>orange</li></ol><ultype="square"><li>fruit</li><ol><li>apple</li><li>bnana</li><li>orange</li></ol><li>vegetable</li><ol><li>potato</li><li>tomato</li><li>cabbage</li></ol></ul><dl><dt>helloworld</dt><dd>printhelloworld</dd><dt>helloworld</dt><dd>printhelloworld</dd></dl></body>

html块

html块元素

块元素在显示时，通常以新行开始

html内联元素：

内联元素通常不会以新行开始

html <div>元素：

<div>元素也被称为块元素，其主要是组合html元素的容器

html<span>元素：

<span>元素是内联元素，可作为文本的容器

<div>和<span>通常一起使用

index.html:

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><linkrel="stylesheet"type="text/css"href="divcss.css"><styletype="text/css">span{color:crimson;}</style><title></title></head><body><p>helloworld</p><h2>helloworld</h2><br/><b>helloworld</b><ahref="hrefht.html">hrefht</a><br/><divid="divid"><p>helloworld</p><a>click</a></div><divid="divspan"><p><span>helloworld</span>thisisatext</p></div></body></html>

divcss.css:

#dividp{color:chartreuse;}

html布局：

使用<div>布局

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><styletype="text/css">body{margin:0px;}div#container{width:100%;height:950px;color:gainsboro;}div#heading{width:100%;height:10%;background-color:cornflowerblue;}div#content_menu{width:30%;height:80%;background-color:gainsboro;float:left;}div#content_body{width:70%;height:80%;background-color:burlywood;float:right;}div#footing{width:100%;height:10%;background-color:black;clear:both;}</style><title></title></head><body><divid="container"><divid="heading">头部</div><divid="content_menu">内容菜单</div><divid="content_body">内容主体</div><divid="footing">底部</div></div></body></html>

使用<table>布局

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><bodymarginheight="0px"marginwidth="0px"><tablewidth="100%"height="950px"><tr><tdcolspan="2"width="100%"height="10%">头部</td></tr><tr><tdwidth="20%"height="80"><ul><li>ios</li><li>ios</li><li>ios</li></ul></td><tdwidth="60%"height="80%">实体</td><tdwidth="20%"height="80">左菜单</td></tr><tr><tdcolspan="2"width="100%"height="10%">底部</td></tr></table></body></html>

极客学院：http://www.jikexueyuan.com/course/135.html