页面的基本结构
<!-- 文档说明 --><!DOCTYPE html><!-- 跟节点 --><html lang="en"><!-- 头部，主要用于给浏览器，搜索引擎解析 --><head><meta charset="UTF-8"><title>我的第一个网页</title></head><!-- 主体部分：给客户用户看到的界面，平时的网页内容存放区域 --><body><h2 height="40" width="100" style="color: red;">Hello Word!</h2></body></html>
总结
1.需要声明文档类型
2.页面根节点需要有
3.页面分头部和主体两部分，头部用于浏览器搜索引擎解析，主体部分用于展示内容
4.标签都可以有自己的属性，大小，颜色，字体等
5.标签都是用尖括号括起来，大多数成对出现，双标签形式，也有单标签
语义化标签
| 标签 | 说明 |
|---|---|
| <h1>~<h6> | 标题标签：用于划分或内容中的文本段落 |
| <header> | 页眉：一般由导航，logo等元素组成 |
| <footer> | 页脚：一般由友情链接，联系方式，备案号，版权等信息组成 |
| <nav> | 导航：导航通常是有一个或多个链接标签<a>标签组成 |
| <main> | 主体：作为页面的主要内容容器使用，建议一个页面只出现一次 |
| <article> | 文档：本义是文档，实际可以充当其他内容的容器 |
| <aside> | 边栏：与主体信息无关，例如广告位、相关推荐、阅读排行等 |
| <section> | 片段：与主体无关的信息，例如广告位、相关推荐、阅读排行等 |
| <div> | 区块：也叫通用容器，本身无任何语义，功能主要是用过他的属性来描述 |
应用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>语义化标签应用</title></head><body><header>页眉</header><main><article><h2>标题</h2><p>段落</p></article><aside>广告位</aside></main><footer>页脚</footer></body></html>
图像与链接
图像元素
单标签，没有结束标记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>语义化标签应用</title></head><body><img src="images/1.jpg" alt="美女" width="300" title="赵丽颖"></body></html>
1.src图片路径
2.alt图片失效后的文字说明
3.width图片宽度，如果不写heigh那么图片默认等比缩放
4.title鼠标悬停的时候文字提示
链接元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>链接</title></head><body><!-- 打开跳转页面 --><a href="https://www.php.cn" target="_blank">php.cn</a><!-- 下载文件 --><a href="demo.zip" target="_blank">demo.zip下载</a><!-- 发送邮件 --><a href="mailto:183332818@qq.com">发邮件</a><!-- 打电话 --><a href="tel:18951835487">打电话</a><!-- 锚点 --><a href="#test">锚点</a><h1 id="test" style="margin-top:1200px;">锚点使用案例</h1></body></html>
1.a标签链接标签
2.href是跳转地址，如果放入其他文件名如zip，也可以用作下载、发邮件、打电话等使用
3.target是页面打开方式，默认当前页面跳转，_blank打开一个新窗口
4.a标签中间是标签名称
5.a标签也可做为页面的锚点使用，进行页面节点之间跳转
列表与表格
列表元素
| 标签 | 说明 |
|---|---|
| <ul>,<li> | 无序列表标签 |
| <ol>,<li> | 有序列表标签 |
| <dl>,<dt>,<dd> | 自定义列表标签 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>列表</title></head><body><h3>购物车：</h3><!-- 无序 --><ul><li>1.苹果，3斤，10，30</li><li>2.西瓜，10，8，80</li><li>3.手机，1，5000，5000</li></ul><!-- 有序 --><ol><li>苹果，3斤，10，30</li><li>西瓜，10，8，80</li><li>手机，1，5000，5000</li></ol><!-- 自定义列表 --><dl><dt>第十期培训班</dt><dd>前端基础</dd><dd>PHP编程</dd><dd>laravel框架开发</dd></dl></body></html>
表格元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格</title></head><body><table border="" width="500" height="150" cellpadding="10" cellspacing="0"><!-- 表格的名称 --><caption><h2>购物车</h2></caption><thead><tr bgcolor="#add8e6"><th>ID</th><th>品名</th><th>数量</th><th>单价</th><th>金额</th></tr></thead><tbody><tr><td>1</td><td>苹果</td><td>3斤</td><td>10</td><td>30</td></tr><tr><td>2</td><td>西瓜</td><td>10</td><td>8</td><td>80</td></tr><tr><td>3</td><td>手机</td><td>1</td><td>5000</td><td>5000</td></tr></tbody><tfoot><tr><td colspan="2" align="center">合计：</td><td>14</td><td></td><td>5110</td></tr></tfoot></table></body></html>
总结
1.table表格标签声明，双标签
2.caption表格标题
3.thead、tbody、tfoot表格表头、主体、表格结尾标签，双标签
4.tr，th表头；tr，td表体元素
5.border表格线、width宽度、height高度、cellpadding表格内间距、cellspacing表格线宽度、bgcolor背景颜色、colspan合并表格数量、align居中
内联框架与多媒体
| 属性 | 说明 |
|---|---|
| src | 被嵌套页面的URL地址 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>iframe</title></head><body><iframe src="www.php.cn" frameborder="0" width="500" height="300"></iframe></body></html>