本文探讨了网页设计中内容模型的重要性，通过实例展示了如何利用HTML、CSS等技术实现高效的内容布局，确保最终用户获得最佳体验。同时，文章还提到了网络价值与用户数量的关系，强调了最终用户优先的原则。
* 伯斯塔尔法则 */
/* 求真务实 */
/* 平稳退化 ==> 渐进增强 */
/* 梅特卡夫定律 : 网络价值同网络用户数量的平方成正比。 */
/* 最终用户优先 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。 */
/*内容模型
header nav section article footer
*/
<div class="user mod">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="user mod">
<div class="sec-head"></div>
<div class="sec-body">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="sec-foot"></div>
</div>
<div class="user mod">
<div class="sec-head"></div>
<div class="sec-body">
<div class="hd"></div>
<div class="bd">
<div class="sec-article">
<div class="sec-head"></div>
<div class="sec-body">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="sec-foot"></div>
</div>
</div>
<div class="ft"></div>
</div>
<div class="sec-foot"></div>
</div>
=>
<div class="user mod">
<div class="section-header"></div>
<div class="section-article">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="section-footer"></div>
</div>
=>
<div class="user mod">
<div class="section-header"></div>
<div class="section-article">
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div>
<div class="section-footer"></div>
</div>
=>
/*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> html文档 </title>
</head>
<body>
<header>
<h1>传说中的h1</h1>
</header>
<section>
<article>
<header><h1> 新的内容模型运行你再搞个h1 </h1></header>
<section>
<article>
<header><h1> 新的内容模型运行你再搞个h1 </h1></header>
<section />....
<footer></footer>
</article>
</section>
<footer></footer>
</article>
</section>
<aside>
<section>
<article>
<header><h1> 新的内容模型运行你再搞个h1 </h1></header>
<section />
<footer></footer>
</article>
</section>
</aside>
</header>
</body>
</html>
*/
/* 求真务实 */
/* 平稳退化 ==> 渐进增强 */
/* 梅特卡夫定律 : 网络价值同网络用户数量的平方成正比。 */
/* 最终用户优先 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。 */
/*内容模型
header nav section article footer
*/
<div class="user mod">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="user mod">
<div class="sec-head"></div>
<div class="sec-body">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="sec-foot"></div>
</div>
<div class="user mod">
<div class="sec-head"></div>
<div class="sec-body">
<div class="hd"></div>
<div class="bd">
<div class="sec-article">
<div class="sec-head"></div>
<div class="sec-body">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="sec-foot"></div>
</div>
</div>
<div class="ft"></div>
</div>
<div class="sec-foot"></div>
</div>
=>
<div class="user mod">
<div class="section-header"></div>
<div class="section-article">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<div class="section-footer"></div>
</div>
=>
<div class="user mod">
<div class="section-header"></div>
<div class="section-article">
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div>
<div class="section-footer"></div>
</div>
=>
/*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> html文档 </title>
</head>
<body>
<header>
<h1>传说中的h1</h1>
</header>
<section>
<article>
<header><h1> 新的内容模型运行你再搞个h1 </h1></header>
<section>
<article>
<header><h1> 新的内容模型运行你再搞个h1 </h1></header>
<section />....
<footer></footer>
</article>
</section>
<footer></footer>
</article>
</section>
<aside>
<section>
<article>
<header><h1> 新的内容模型运行你再搞个h1 </h1></header>
<section />
<footer></footer>
</article>
</section>
</aside>
</header>
</body>
</html>
*/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
