HTML行元素

标签：clipboardErrorCopied 路径标签元素 HTML 跳转 Copy 链接

span元素

没有任何特殊的含义
主要是为了增加额外的结构，方便我们控制样式或者是数据
并且使用要求：在其他语义化标签不适用的情况下再使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
</head>
<body>
    <div>
        <h1>夏威夷三日游</h1>
        <!-- 增加了额外的结构 -->
        <p>价格<span style="color:red;">382</span>元</p>
    </div>
</body>
</html>Copy to clipboardErrorCopied

b、i、u元素

b标签呈现加粗状态
i标签呈现倾斜状态
u标签呈现下划线状态

这三个标签是吸引读者到需要注意的内容上
这些仅仅是添加了一些样式而已，只是表现层
尽管如此，我们也不必为了加粗倾斜等元素而去使用b i u等标签，替代的方法是使用css
在目前使用最多的是i标签-通常在开发过程中，小图标之类的元素我们习惯用i标签来表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b i u</title>
</head>
<body>
    
    <div>
        <b>我是小b</b>
        <i>我是小i</i>
        <u>我是小u</u>
    </div>
</body>
</html>Copy to clipboardErrorCopied

em、strong、var元素

em标签-强调作用：标出用户着重需要阅读的内容，但是主要也给SEO（搜索引擎优化）强调，呈现的是倾斜的状态
strong-强调（更强的强调）作用：表示文本十分重要，主要也给SEO（搜索引擎优化）强调，呈现的是一个加粗
em对某一个关键词强调
strong代表更强:比如对某一句话直接强调
var标签并没有起到强调或提示用户注意的作用。默认倾斜。var的语义是包含变量的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>em strong var</title>
</head>
<body>
<div>
    <!--em对某一个关键词强调-->
    <span>我<em>喜欢</em>男的！！！</span>
    <span>我喜欢<em>男的</em>！！！</span>

    <!--strong代表更强:比如 对某一句话直接强调-->
    <strong>警告:你们老师喜欢男的!!!</strong>

    <!--var标签 -->
    <p>小明有<var>x</var>个苹果，一天吃一个，一天吃完，请问<var>x</var>等于几</p>
    <p><var>x</var>+<var>y</var>=12</p>
</div>
</body>
</html>Copy to clipboardErrorCopied

a标签

01)路径

绝对路径

完整的描述文件位置的路径就是绝对路径，以web站点根目录为参考基础的目录路径。
绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径，由一系列连续的目录组成，中间用斜线分隔，直到要指定的目录或文件，路径中的最后一个名称即为要指向的目录或文件。
之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
比如file:///C:/Users/lipeihua/Desktop/code/01.html 就是一个绝对路径
在前端开发中大多数使用相对路径。个别在服务器环境下会使用绝对路径

相对路径

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。

./ ：代表文件所在的目录（可以省略不写）
../ ：代表文件所在的父级目录
../../ ：代表文件所在的父级目录的父级目录
/ ：代表文件所在的根目录,可以理解成项目内部的绝对路径。

相对路径练习：

01.html和outer是同级兄弟关系，02.html和inner是同级兄弟关系，03.html和content是同级兄弟关系

<!-- 01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>01.html</h1>
    <a href="./outer/02.html">02</a>
    <a href="./outer/inner/03.html">03</a>
</body>
</html>Copy to clipboardErrorCopied
<!-- 02.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>02</h1>
    <a href="../01.html">01</a>
    <a href="./inner/03.html">03</a>
</body>
</html>Copy to clipboardErrorCopied
<!-- 03.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>03</h1>
    <a href="../../01.html">01</a>
    <a href="../02.html">02</a>
</body>
</html>Copy to clipboardErrorCopied

网络路径

如果需要链接网络上的资源的时候，可以使用网络路径 http://www.baidu.com

02).a标签的基础用法

a标签用来做跳转
a标签就是超链接：可以创建通向其他网页文件同一个页面的位置邮件地址或者其他url链接链接电话链接短信
a标签的href属性，用来写地址:如果是网络地址需要写全http://或者https://协议。如果写本地地址，使用相对路径即可
title属性：是鼠标悬浮在a链接上的时候，对当前链接的提示信息，弹窗显示
target属性：_self:在当前标签页跳转; _blank:在新的标签页打开跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
    <div>

        <a href="http://www.baidu.com" title="" >百度一百下你也不知道</a>

        <a href="###" title="尚硅谷前端就业连续9期百分百就业 666666">尚硅谷大数据就业连续9期...</a>

        <a href="http://www.baidu.com" target="_blank">百度一百下你也不知道</a>
    </div>
</body>
</html>Copy to clipboardErrorCopied

03).a标签的锚链接

锚链接的两种效果：

在当前页面中跳转.：通过元素的ID进行跳转 <a href="#name"></a>
在a标签的href中书写 #+名字(自由命名，注意规范)
在相对应的跳转点标签书写id属性值为锚链接中的名字,这样点击锚链接就能跳转到相对应的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签的锚链接</title>
</head>
<body>
<div>
    <!--position: fixed;相对浏览器窗口定位 无论滚动条是否滚动，此元素位置不改变
    right是距离浏览器窗口右边为0
    top是距离浏览器窗口顶部为100px-->
    <div style="position: fixed;right: 0;top: 100px;">
        <p><a href="#news">新闻</a></p>
        <p><a href="#yule">娱乐</a></p>
        <p><a href="#smile">搞笑</a></p>
        <p><a href="#tiyu">体育</a></p>
        <p><a href="#my">我的</a></p>
    </div>
    <ul>
        <li style="height: 600px;background-color: red;" id="news">新闻</li>
        <li style="height: 600px;background-color: #ffca71;" id="yule">娱乐</li>
        <li style="height: 600px;background-color: #6559ff;" id="smile">搞笑</li>
        <li style="height: 600px;background-color: #beffbd;" id="tiyu">体育</li>
        <li style="height: 600px;background-color: #d0ffb9;" id="my">我的</li>
    </ul>
</div>
</body>
</html>Copy to clipboardErrorCopied

04).网页中的返回顶部效果：

<a href="#"></a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
</head>
<body>
<div>
    <div class="con" style='height: 1000px;background-color: red;'>我很高，生成滚动条了</div>
    <a href="#">点击我回到顶部</a>
</div>
</body>
</html>Copy to clipboardErrorCopied

04).a标签的其他功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签的其他功能</title>
</head>
<body>
<!--a标签下载：
    1.当连接的文件能够使用浏览器打开，那么可以进行打开，否则将直接下载
    2.也可以给a标签一个download属性 书写下载文件的路径，那么可以直接下载
    3.a标签必须书写href属性，哪怕为空都可以执行download下载，否则a标签不具有任何功能
 -->
<a href="" download="../images/01.png">点击下载图片</a>
<a href="../note/9.10_html02.pptx">点击下载图片</a>

<!--a标签对电话短信email的支持 主要针对移动端
    1.a标签的打电话是在href属性中书写   tel:电话号码  这样的格式
    2.a标签的发短信是在href属性中书写   sms:电话号码  这样的格式
    3.a标签的发送邮件是在href属性中书写 mailto:邮箱地址 这样的格式
-->
<a href="tel:15701665563">给李沛华打电话</a>
<a href="sms:15701665563">给李沛华发短信</a>
<a href="mailto:[email protected]">给李沛华发邮件</a>
</body>
</html>Copy to clipboardErrorCopied

img标签

向网页中嵌入一张图像
src 属性用于设置图像路径（本地相对路径或网络路径）
alt 属性是用于设置图像的替代文本，当网速慢等因素造成图片加载失败替代原图片显示的文字
title 属性是用于鼠标放在图片上显示出来的对图片的解释
width属性和height属性可以设置图片的宽和高
img是可替换元素所有的可替换标签都是可以设置宽高的（我们可以称之为行内块标签）

行内元素的属性

在一行中如有剩余空间，允许同其他行内/行内块标签公用一行（行内显示）
不可以直接设置宽高（宽高无效）,默认的宽高由内容决定
行标签只能嵌套行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行标签属性</title>
</head>
<body>
    <div>
        <!-- 宽度无效 -->
        <span style="width: 20000000px;height: 100px;background-color: red;">span111</span>
        <b>b111</b>
        <i> i1111</i>
        <var>var111</var>
    </div>
</body>
</html>

标签：clipboardErrorCopied,路径,标签,元素,HTML,跳转,Copy,链接
From： https://www.cnblogs.com/z-bky/p/17038800.html