![]()
作业
![]()
1.HTML文档结构
<!--申明文档类型--><!DOCTYPE Html><!--代码语言为中文，键值对的形式lang是键，zh-cn是值--><html lang="zh-cn"><!--头部元素，主要介绍页面编码--><head><!--页面编码--><meta charset="utf-8"><!--兼容模式（没啥用）--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--可视窗口设置，开发宽度和硬件宽度统一（多余的，不写也行）--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--页面标题--><title>Document</title><head/><!--页面主体--><body><!--预定义标签,由W3C制定，各个游览器实现--><!--双标签：属性写在其实标签内，内容写在标签之间--><h1 id="header" class="title" style="color:red;">hello,world<h1><!--单标签：空标签，即没有内容的标签，内容是由某个属性来设置，本质上是资源占位符--><input type="text" value="admin" /><img src="" alt=""><link rel="stylesheet" href=""><body/></html>
![]()
2.演示布局元素
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>布局元素</title></head><body> <!-- 传统布局 div + id --> <div id="header">页眉</div> <div id="main">主体</div> <div id="footer">页脚</div> <hr> <!-- 目前主流布局 div + class --> <div class="header">页眉</div> <div class="main">主体</div> <div class="footer">页脚</div> <hr> <!-- 语义化 --> <header>页眉</header> <main>主体</main> <footer>页脚</footer> <hr> <!-- 语义化标签，数量有限，且会导致元素层级过深 <article> <header>文章头部</header> <main>文章主体</main> <footer>文章底部</footer> </article> --> <!-- 有限的回退到 tag+class --> <div class="article header">文章头部</div> <p class="article main">文章主体</p> <div class="article footer">文章底部</div></body></html>
![]()
3.图文
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图文</title></head><body> <!-- 传统方式 --> <div class="box"> <!-- 图片 --> <img src="https://img.php.cn/upload/aroundimg/000/000/001/63997a4d5d9fd596.png" alt=""> <!-- 文字 --> <p class="title">第二十二期前端开发</p> </div> <!-- 语义化 --> <!-- figure:创建带有标题的内容 --> <figure> <!-- 图片 --> <img src="https://img.php.cn/upload/aroundimg/000/000/001/63997a4d5d9fd596.png" alt=""> <!-- 文字 --> <figcaption>第二十二期前端开发</figcaption> </figure></body></html>
![]()
4.图像和链接，列表
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图像，链接，列表</title></head><body> <!-- 图像 宽高只需要设置一个，会等比缩放 --> <img width="300" src="https://img.php.cn/upload/aroundimg/000/000/001/63997a4d5d9fd596.png" alt="提示信息"> <!-- 链接 --> <a href="https://www.php.cn" target="_self">php中文网</a> <a href="https://www.php.cn" target="_blank"> <button>click</button> </a> <a href="https://www.php.cn" target="_self"><img width="300" src="https://img.php.cn/upload/aroundimg/000/000/001/63997a4d5d9fd596.png" alt="提示信息"></a> <!-- 列表 --> <!-- 无序列表 --> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <!-- 有序列表 --> <ol> <li>item1</li> <li>item2</li> <li>item3</li> </ol> <!-- 自定义列表：类似名词解释 --> <dl> <dt>php中文网</dt> <dd>程序员梦开始的地方</dd> </dl></body></html>
