![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：html标签众多, 但常用的并不多, 很容易记住的
Collection
Collection
<!DOCTYPE html>:声明文档的类型<html>:网页的根元素<meta charset="UTF-8">:字符集<head>:头部元素<body>:主体内容<footer>:脚步元素
<!DOCTYPE html><!-- 默认语言 --><html lang="zh-CN"><head><!-- 头元素给浏览器搜索引擎看的 --><!-- 字符集 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Demo</title></head><body><!-- 主体元使用者看的 --></body></html>
<header>:类似于<div class="header"></div><main>:类似于<div class="main"></div><article>:类似于<div class="article"></div><aside>:类似于<div class="aside"></div><footer>:类似于<div class="footer"></div>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>语义化标签</title></head><body><!-- 传统div方式 --><!-- <div class="header">一个页眉</div><div class="main"><div class="article"><h3>一个标题</h3><p>一个段落</p></div><div class="aisde"><h3>一个AD</h3></div></div><div class="foot">一个页脚</div><hr> --><!-- 语义化标签 --><header>一个页头</header><main><article><h3>一个标题</h3><p>一个段落</p></article></main><aside><h3>一个AD</h3></aside><footer>一个页脚</footer></body></html>
<img>:调整大小长宽设置一个就行，图片等比例缩放alt: 图片描述title: 鼠标悬浮描述
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>图片</title></head><body><!-- alt 图片描述 title 悬浮描述 大小长宽设置一个就行，图片等比例缩放--><img src="/front/images/1.jpg" alt="一个图片" width="150" title="一个图片"></body></html>
<a href="">:默认在当前页面直接跳转,href=””为要跳转的地址target="_bland" 新建窗口打开链接为文件时可直接下载链接为 mailto: + 有效邮箱 为发送邮件链接为 tel: + 号码 为拨打电话链接为标签ID时可快速跳转到该ID所在地
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>链接</title></head><body><!-- 默认在当前页面直接跳转,target="_bland" 新建窗口打开--><a href="https://magi.com/" target="_bland">Magi</a><br><!-- 下载功能 --><a href="/front/images.7z" target="_bland">下载图片包</a><br><!-- 发邮件 --><a href="mailto: yanzhenhao188@foxmail.com">发邮件</a><br><!-- 打电话 --><a href="tel: 13********21">打电话</a><br><!-- 锚点 当前文档跳转 如回到顶部--><a href="#top">锚点</a><h1 id="top" style="margin-top: 2000px;">锚点</h1><br></body></html>
<ul><li></li></ul>:无序列表<ol><li></li></ol>:有序列表<dl><dt></dt><dd></dd></dl>:自定义列表
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>列表</title></head><body><!-- 列表 --><h4>无序列表</h4><h3>购物车</h3><ul><li>1.相机，1/台， 998，998</li><li>2.泡面，1/0桶， 5，50</li><li>3.可乐，5/瓶， 3，15</li></ul><hr><h4>有序列表</h4><h3>购物车</h3><ol><li>相机，1/台， 998，998</li><li>泡面，10/桶， 5，50</li><li>可乐，5/瓶， 3，15</li></ol><hr><h4>自定义列表</h4><dl><dt>自定义列表</dt><dd>自定义列表数据1</dd><dd>自定义列表数据2</dd><dd>自定义列表数据3</dd><dt>购物车</dt><dd>1.相机，1/台， 998，998</dd><dd>2.泡面，10/桶， 5，50</dd><dd>3.可乐，5/瓶， 3，15</dd></dl></body></html>
<table>:表格<caption>:标题<tr>:行<td>:单元格<th>:单元格加粗居中<cellspacing>单元格间距<colspan>列合并<rowspan>行合并
<!DOCTYPE html><html lang="zh_CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格</title></head><body><!-- 表格 --><!-- tr行 td单元格 th单元格加粗居中 cellspacing单元格间距 colspan列合并 rowspan行合并--><table border="" width=500 cellpadding=10 cellspacing=0><caption><h3>购物车</h3></caption><thead><tr bgcolor="#ddd"><th>序号</th><th>品名</th><th>数量</th><th>单价</th><th>总价</th></tr></thead><tbody><tr><td>1</td><td>相机</td><td>1/台</td><td>998</td><td>998</td></tr><tr><td>2</td><td>泡面</td><td>10/桶</td><td>5</td><td>50</td></tr><tr><td>3</td><td>可乐</td><td>5/瓶</td><td>3</td><td>15</td></tr></tbody><tfoot><tr><td colspan="2" rowspan="2" >合计</td><td rowspan="2" >16</td><td></td><td rowspan="2" >1063</td></tr><tr><td></td></tr></tfoot></table></body></html><style type="text/css">td{text-align: center;}</style>
<iframe>：内联框架标签<frameborder>:设置边框<src>：设置显示的网页的URL地址，可设置为>：设置显示的网页的URL地址，可设置为 srcdoc：可填写HTML标签<name>:实现点击链接<a>，显示不同的页面，需要提前设置<a>的target属性
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>内联框架</title></head><body><!-- <a href="demo6.html" target="shopcar">购物车</a> --><!-- <iframe src="demo6.html" frameborder="0" width="400" height="400" ></iframe> --><!-- frameborder 边框 --><!-- <iframe src="" frameborder="0" width="400" height="400" name="shopcar"></iframe> --><hr><!-- <iframe src="https://j.map.baidu.com/82/Rf" frameborder="0" width="600" height="400"></iframe> --><ul style="float: left;margin-right: 20px;"><li><a href="demo2.html" target="content">内联页面1</a></li><li><a href="demo3.html" target="content">内联页面2</a></li><li><a href="demo4.html" target="content">内联页面3</a></li></ul><!-- srcdoc 可写HTML代码 默认src --><iframe srcdoc="<h3 style='text-align: center;'>内联页面</h3>" frameborder="1" width="400" height="400" name="content"></iframe></body></html>
