目录
一、列表
- 有序列表
-
<ol> //order list 有序列表 <li></li> //list item 列表项 <li></li> </ol>
-
- 无序列表
-
<ul> //unorder list 无序列表 <li></li> //list item 列表项 <li></li> </ul>
-
- 属性
- 有序列表的属性
- start="4" 指定列表项编号的起始值
- type="1" 指定列表项编号的类型，默认值1，代表阿拉伯数字
- a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字
- 无序列表的属性
- type="disc"实心圆，默认值
- 还有circle空心圆 square方块 none没有标识
- 有序列表的属性
- 列表的嵌套
- ul/ol的直接子元素必须是li
- 所有被嵌套的内容都需要写在li中
- 定义列表
- 常用来给一类事物定义的情形，比如名词解释，字典等
-
<dl> //定义列表Definition list <dt> //这里要被解释的名词</dt> Definition Type <dd> //这里写具体的解释内容</dd> Definition Description </dl>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表练习</title>
</head>
<body>
<!-- 有序列表的属性 -->
<!-- 从4号开始，列表项前面的序号类型为大写字母 -->
<ol start="4" type="A">
<li>把冰箱门打开</li>
<li>把大象塞进去</li>
<li>把冰箱门关上</li>
</ol>
<!-- 无序列表 -->
<!-- 列表项标识符默认为实心圆，可以用none去掉 -->
<ul type="none">
<li>唐僧</li>
<li>孙悟空</li>
<li>猪悟能</li>
<li>沙悟净</li>
<li>白龙马</li>
</ul>
<!-- 列表的嵌套 -->
<ul type="none">
<li>商品管理
<ul type="none">
<li>商品列表</li>
<li>多条件搜索</li>
<li>添加商品</li>
</ul>
</li>
<li>用户管理
<ul type="none">
<li>用户列表</li>
<li>用户检索</li>
</ul>
</li>
<li>订单管理
<ul type="none">
<li>订单列表</li>
<li>搜索订单</li>
</ul>
</li>
</ul>
<!-- 定义列表 -->
<dl>
<dt>西游记</dt>
<dd>一本神话故事书，讲述了一个人与四个动物的故事</dd>
<dt>红楼梦</dt>
<dd>一本清朝的史书，讲述了一个男人与n个女人的故事</dd>
<dt>水浒传</dt>
<dd>一本农民起义书，讲述了3个女人与105个男人的故事</dd>
</dl>
</body>
</html>二、结构化标签
- h5新增了带有结构语义的标签，来取代div
- 虽然在用户看来和之前使用div没有区别，但带语义的标签可以增加代码的可读性，很方便的实现页面各个部分的划分，让网络爬虫更快找到
- 但注意:低版本的浏览器会不兼容
-
<header> </header> //定义网页的头部，或者某个区域的顶部 <nav></nav> //定义网站的导航链接 <section></section> //定义网页的主体 <aside> </aside> //网页的侧边栏 <article> </article> //定义与文字相关的内容，比如论坛 回帖 <footer> </footer> //定义网页的底部，或者某个区域的底部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构化标签</title>
</head>
<body>
<div class="ye-tou">页头</div>
<div class="dao-hang">导航</div>
<div class="zhu-xin-xi">主信息</div>
<div class="bian-lan">边栏</div>
<div class="ye-jiao">页脚</div>
<hr>
<!-- 使用结构化标签 -->
<header>页头</header>
<nav>导航</nav>
<section>
主信息
<article>第一篇文章的内容...</article>
<article>第二篇文章的内容...</article>
</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
</body>
</html>
三、浮动框架
- iframe是在一个html页面中，引入其它的html页面
- 属性：
- src="url" 被引入资源的路径
- width="" 被引入资源在本页面显示的宽度
- height="" 被引入资源在本页面显示的高度
- scrolling="no" 是否需要滚动条，默认值auto有滚动条 no不要滚动条
- frameborder="0" 去掉被引入页面的边框线
- 优势与劣势:
- 我们可以直接调用已经写好的静态页面，比较方便
- 页面被引用在多个页面中，可以实现复用
- 样式不好控制
- 有额外的链接，请求的次数会增加，速度会变慢
每日一句
博观而约取，厚积而薄发。
"广泛阅读，多了解古今中外的人和事，把其中好的部分牢牢记住；积累了大量的知识材料，到需要用时便可以很自如恰当地选择运用。 "
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
