七、超链接标签的应用
（一）链接标签
链接标签
- 文本超链接
- 图像超链接
- 链接的基本格式
<a href="链接路径" target="目标窗口位置">链接文本或图像</a>
- 使用 a 标签作超链接 但 href 才是超链接的灵魂
（二）超链接标签
- 页面间链接：从一个页面跳转到另一个页面
- 锚链接
- 功能性链接
<!--a标签 href:必填，表示要跳转到那个页面 target:表示窗口再哪里打开 _blank:再新标签中打开 _self:在自己的网页中打开
1.页面间链接
从一个页面跳转到另一个页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body> <a href="https://www.baidu.com" target="_self">更多内容访问百度</a> <a href="1.我的第一个网页.html" target="_self">更多内容访问百度</a> </body> </html>
当输入超链接的网址有下划线标识时，说明网页输入完整可以放访问
在超链接中嵌套img标签可以实现图片超链接跳转
<a href="1.我的第一个网页.html" target="_self">访问我的第一个网页 <img src="../resources/images/1.jpg" alt="打开图片失败" width="300"> </a>
2.锚链接
<!--锚标签 类似与 goto 语句--> <a name="top">顶部</a> <hr> <a href="1.我的第一个网页.html"> <img src="../resources/images/1.jpg" alt="图片失效" width="300" title="打开有惊喜"> </a> <br> <img src="../resources/images/1.jpg" alt="测试" width="300"><br> <img src="../resources/images/1.jpg" alt="测试" width="300"><br> <img src="../resources/images/1.jpg" alt="测试" width="300"><br> <img src="../resources/images/1.jpg" alt="测试" width="300"><br> <hr> <a href="#top">回到顶部</a>
（三） 实现QQ推广
八、行内元素和块元素
行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6…）
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （a、strong、em…）
- 块元素间的呈现有明显的间距，行元素间的呈现会较为紧凑
九、列表标签
列表标签
- 什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应信息
- 列表的分类
- 无序列表
- 有序列表
- 自定义列表
（一）无序列表
<!---无序列表 unorder list 简写成 ul 应用范围：导航，侧边栏 --> <ul> <li>Java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/c++</li> </ul>
（二）有序列表
- Java
- Python
- 运维
- 前端
- C/c++
<!---有序列表 order list 简写成 order list 应用范围：试卷，问答 --> <ol> <li>Java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/c++</li> </ol>
（三）自定义列表
学科列表JavaPython运维前端C/c++
<dt> 位置</dt> <dd> 西安</dd> <dd> 重庆</dd> <dd> 新疆</dd> <img src="" alt="">
<!--自定义列表 dl:标签 ( defintion list 简写成 dl) dt：列表名称 (defintion title) dd 列表内容 (defintion description -- 准确的说是定义术描述的意思) --> <!----> <hr> <dl> <dt> 学科列表</dt> <dd> Java</dd> <dd> Python</dd> <dd> 运维</dd> <dd> 前端</dd> <dd> C/c++</dd> <dt> 位置</dt> <dd> 西安</dd> <dd> 重庆</dd> <dd> 新疆</dd> <img src="" alt=""> </dl>
十、表格标签
表格标签
（一）打印基本表格
- 为什么使用表格
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
- 如图是一个三行三列的表格
- 实现跨行跨列操作
<td rowspan="3">2-1</td> 跨行
<td colspan="3">1-1</td> 跨列
（二）测试样例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签学习</title> </head> <body> <table border="1px"> <tr> <!--colspan 跨列--> <td colspan="6">1-1</td> </tr> <tr> <!--rowspan跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> </tr> </table> </body> </html>
十一、媒体标签
视频和音频
- 视频元素：video
- 音频元素：audio
- 关键词学习
- autoplay 自动播放
- controls 控制器 要有控制器才有播放按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body> <!--音频和视频 src：资源路径 controls：控制条 autoplay ：自动播放 --> <video src="../resources/video/xxx.mp4" controls autoplay></video> <audio src="../resources/audio/xxx.mp3" controls autoplay></audio> </body> </html>
十二、页面结构学习
（一）页面结构分析
页面结构分析
1.常用元素列表
| 元素名 | 描述 |
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web网页中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用 |
| nav | 导航类辅助内容 |
2.页面演示示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构分析</title> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页脚部</h2> </footer> </body> </html>
（二）iframe内联框架
iframe内联框架 （实现简单的页面嵌套）
<iframe src="path" name="mainFrame"></iframe> path:引用网页地址 mainFrame:框架标识名
1.多个iFrame嵌套使用实现页面的切换
</iframe> <iframe src="" name="hello" frameborder="0"></iframe> <a href="1.我的第一个网页.html" target="hello">点击跳转</a> <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257627&page=10" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
2.演示示例
十三、表单学习(实现简易的登陆界面)
（一）初始表单post和get提交(form)
| 表单常用关键词 | 含义及表述 |
| action： | 表单提交的位置，可以是网站，也可以是一个请求处理地址 |
| method： | post，get 提交方式 |
| get方式提交： | 外面可以在url中看到外面提交的信息，不安全，高效 |
| post方式提交: | 比较安全，可以传输大文件 |
<form action="1.我的第一个网页.html" method="get"> <p>用户： <input type="text" name="username" value=""> </p> <p>密码： <input type="password" name="passwd" value=""> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form>
（二）表格元素属性格式
| 属性 | 说明 |
| type (搭配在 input 中使用) | 指定元素的类型。text、password、checkbox(多选)、radio(单选)、submit、reset、file、hidden、image、button，默认text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。但type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素(px)为单位。 |
| maxlength | type为 text 或 password，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
