收藏
天蓬老师批改状态：合格
老师批语：
<!DOCTYPE html>或<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<body></body>
<div id="header">header</div><div id="main">main</div><div id="footer">footer</div>
<div class="header">header</div><div class="main">main</div><div class="footer">footer</div>
<header>header</header><main>main</main><footer>footer</footer>
div + class常用布局更符合开发人员布局习惯，同时可以精简标签。如：
<div class="article-header">我是文章头部</div>
表达更清晰，更容易理解。
<a href="https://www.jd.com">京东</a>
<a href="https://tmall.com" target="tmall">天猫</a><iframe frameborder="2" name="tmall"></iframe>
<a href="#hello">我要找到你</a>
<img src="dog.jpg" alt="dog" />
<h3>东京奥运奖牌榜</h3><ol><li>美国:113</li><li>中国:88</li><li>日本:58</li></ol>
<h3>购物车</h3><ul><li>笔记本电脑一台</li><li>蓝牙耳机一副</li><li>卫生纸10卷</li></ul>
<ul><li><a href="">导航1</a></li><li><a href="">导航2</a></li><li><a href="">导航3</a></li><li><a href="">导航4</a></li><li><a href="">导航5</a></li><li><a href="">导航6</a></li></ul>
<nav><a href="">导航1</a><a href="">导航2</a><a href="">导航3</a><a href="">导航4</a><a href="">导航5</a><a href="">导航6</a></nav>
说明：ul+li不仅可用于网站导航，还可以用于文章列表，图片列表等批量数据的排版布局。
table<表格> + caption<标题> + thead<头部> + tbody<主题> + tfoot<尾部>
tr：表示行
th：多用于thead中，表示列
td：表示列
colspan：水平快行
rowspan: 竖直跨列
<h2><a href="https://taobao.com" target="taobao">淘宝</a></h2><iframesrcdoc="<em>点击上面的链接打开</em>"frameborder="1"width="400"height="400"name="taobao"></iframe><hr /><button onclick="taobao.location='https://taobao.com'">打开淘宝</button>
可以通过a或button打开内链标签。
<!-- 后台顶部 --><div class="header"><h1>网站管理后台</h1><div><span>admin</span><a href="">退出</a></div></div><!-- 左侧导航 --><ul class="nav"><li><a href="demo3.html" target="content">菜单项1</a></li><li><a href="demo4.html" target="content">菜单项2</a></li><li><a href="demo5.html" target="content">菜单项3</a></li></ul><!-- 右侧内容区 --><iframe srcdoc="<p>请点击左边菜单栏打开</p>" frameborder="0" name="content"></iframe>
采用内链标签可以布局网站后台。
通过对html的常用标签的学习，可以快速掌握html的基础知识，为进一步学习打好基础。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
