Html5，链接标签，行内元素和块元素，表格_html中超链接改为块元素-优快云博客

本文链接：https://blog.youkuaiyun.com/difgsief/article/details/114733503

链接标签

     ```html

连接文本或图像
```

文本超链接
图像超链接

例子：(标签的学习)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签的学习</title>
</head>
<body>
 <!--a标签
 href : 必填，表示要跳转到那个页面


 -->
 <a href="我的网页.html">点击跳转到我的页面</a>
 <a href="https://www.baidu.com">点击我跳转到百度</a>

</body>
</html>

锚链接

需要一个锚标记
跳转到标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签的学习</title>
</head>
<body>
 <!--a标签
 href : 必填，表示要跳转到那个页面


 -->
 <a name="top">顶部</a>
 <a href="我的网页.html">点击跳转到我的页面</a>
 <a href="https://www.baidu.com">点击我跳转到百度</a>
<hr/>
 <a href="我的网页.html"><img src="../../resources/image/01.JPG" alt="用于返回，当图片无法加载时会提示这个字《张鑫》"
                          title="悬停文字（当鼠标停在图片上时会显示文字）"></a>
<hr/>

<p> <a href="我的网页.html"><img src="../../resources/image/01.JPG" alt="用于返回，当图片无法加载时会提示这个字《张鑫》"
                             title="悬停文字（当鼠标停在图片上时会显示文字）"></a>
 <hr/></p>
 <p> <a href="我的网页.html"><img src="../../resources/image/01.JPG" alt="用于返回，当图片无法加载时会提示这个字《张鑫》"
                              title="悬停文字（当鼠标停在图片上时会显示文字）"></a>
 <hr/></p>
 <p> <a href="我的网页.html"><img src="../../resources/image/01.JPG" alt="用于返回，当图片无法加载时会提示这个字《张鑫》"
                              title="悬停文字（当鼠标停在图片上时会显示文字）"></a>
 <hr/></p>




 <!--锚链接-->

 <a href="#top">回到顶部</a>

//<a name="top">顶部</a>


</body>
</html>

功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>功能性链接</title>
</head>
<body>
<!--功能性链接
邮件链接
mailto:
QQ链接：
-->
<a href="mailto:2807327273@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
   <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点我给你看小电影" title="点我给你看小电影"/>
</a>

</body>
</html>

行内元素和块元素

1. 块元素

无论内容多少，该元素独行一行
（p,h1-h6…）

2.行内元素

内容撑开宽度，左右都是行内元素的可以排在一起
（a.strong.em…)

列表

有序列表
无序列表
自定义列表

dl:标签

dt：列表名称

dd：列表内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->

<ol>
    <li>java</li>
    <li>运维</li>
    <li>安全</li>
    <li>密码</li>
</ol>


<!--无序列表-->
<ul>
    <li>菜鸡</li>
    <li>菜鸟</li>
    <li>努力</li>
    <li>加油</li>
</ul>


<!--自定义列表-->
<dl>
    <dt>王狗蛋</dt>>
    <dd>陈狗蛋</dd>
    <dd>赵狗蛋</dd>
    <dd>全蛋</dd>
</dl>
</body>
</html>

表格

为什么使用表格
- 简单通用
- 结构稳定

基本结构

单元格
行
列
跨行
跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的学习</title>
</head>
<body>
<!--表格的学习table
行：tr  rows
列：td

-->
<table border="1px">
    <tr>
        <!--跨列：colspan
        -->
        <td colspan="4">1</td>

    </tr>
    <tr>
        <!--跨行：rowspan-->
        <td rowspan="2">5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
    </tr>
</table>

</body>
</html>

媒体元素学习

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和媒体
src:是资源路径
controls：为控制条
autoplay：为自动播放
-->

<audio src="../../abc/多多poi%20-%20少年%20(原唱%20%20梦然).mp4" controls autoplay></audio>
<video src=""></video>
</body>
</html>

页面结构分析

header：标题头部区域的内容（用于也面或者页面中的一块区域）

footer：标记脚部区域的内容（用于整个页面或页面中的一块区域）

section：Web页面中的一块独立区域

article：独立的文章内容

aside：相关内容或应用（常用于侧边栏）

nav：导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构学习</title>
</head>
<body>
<header>
    <h1>网页头部</h1>
</header>

<section>
    <h1>网页主体</h1>
</section>

<footer>
    <h1>网页尾部</h1>
</footer>

</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe内联框架
src：地址
w-h：宽高
-->
<iframe src="音频和视频.htm" width="200px" height="200px" name="tom"></iframe>
<a href="" target="_top"> 点击跳转</a>
</body>
</html>