JavaScript 第一章第二节（二）

最新推荐文章于 2024-09-27 11:49:32 发布

S u N .

最新推荐文章于 2024-09-27 11:49:32 发布

阅读量45

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_65088924/article/details/129935977

版权

1.3标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

提倡：尽量不使用样式属性。

1.4图像标签img（重点）

代码段：

<img src="" alt="">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://cdn.onlinewebfonts.com/svg/img_282010.png"  alt="文章图片">
    <img src="/img/favicon.ico" alt="图片">
    <!-- src设定图片资源的位置
         alt是当图片加载不进来不能显示的时候，用文字代替 -->
</body>
</html>

相对路径与绝对路径：

<body>
    <!-- src设定图片资源的位置
         alt是当图片加载不进来不能显示的时候，用文字代替 -->
    <img src="https://cdn.onlinewebfonts.com/svg/img_282010.png"  alt="文章图片">
    <!-- 绝对路径 -->
    <img src="/img/favicon.ico" alt="图片">
    <!-- 绝对路径，只带/为绝对路径，绝对于当前地址的根目录 -->
    <!-- http://127.0.0.1:5500/img/favicon.ico   /img/favicon.ico表示省略的是斜杠/前的ip地址，所以为绝对路径 -->
    <!-- file:///D:/app/VSCode/index.html  本地文件路径的绝对路径（不要写在网页） -->
    <img src="./img/favicon.ico" alt="图片">
    <!-- 相对路径 -->
    <img src="img/favicon.ico" alt="图片">
    <!-- 相对路径：相对于当前目录，可以用./或者直接不写 -->
    <img src="../img/favicon.ico" alt="图片">
    <!--   ../--   在./的基础上再加一个.就可以访问上级目录中的图片了 -->
 </body>

<img/>标记属性

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

tittle 鼠标悬停时显示的内容

  <img src="../img/favicon.ico" alt="图片" title="走开">

 <h1 title="走开">hello,mi</h1>

1.5链接标签

在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。

< a href=" " target="目标窗口的弹出方式">文本或图像</ a>

    <a href="https://baike.baidu.com">百度百科</a>
    <!-- 跳转的路径 -->
    <a href="./图片标签.html">图片标签</a>

<body>
    <a href="https://baike.baidu.com">百度百科</a>
    <!-- 跳转的路径 -->
    <a href="./图片标签.html">图片标签</a>

<h1>新型冠状病毒疫苗</h1>
<div>
    <h3><a href="#yflc">1、研发流程</a></h3>
    <h3><a href="#yfqk">2、研发情况</a></h3>
    <h3><a href="#yfjd">3、研发进度</a></h3>
    <h3><a href="#ymlx">4、疫苗类型</a></h3>
</div>
<div>
    <h2 id="yflc">1、研发流程</h2>
    <p>疫苗研发的大体流程和周期，包括两个阶段：</p>
    <p>第一个阶段是疫苗前期研发过程，包括获得免疫原（获得活病毒、分离相关亚单位、通过基因重组技术获得重组蛋白或者合成相关的DNA(RNA)）、免疫反应测试、动物保护测试、免疫原生产工艺（放大）优化、临床前毒理研究等环节。</p>
    <p>第二个阶段是疫苗研发及注册过程，包括临床前研究、申报临床、开展临床试验，最后才能实现疫苗上市。</p>
</div>

<div>
    <h2 id="yfqk">2、研发情况</h2>
    <p>疫苗研发的大体流程和周期，包括两个阶段：</p>
    <p>第一个阶段是疫苗前期研发过程，包括获得免疫原（获得活病毒、分离相关亚单位、通过基因重组技术获得重组蛋白或者合成相关的DNA(RNA)）、免疫反应测试、动物保护测试、免疫原生产工艺（放大）优化、临床前毒理研究等环节。</p>
    <p>第二个阶段是疫苗研发及注册过程，包括临床前研究、申报临床、开展临床试验，最后才能实现疫苗上市。</p>
</div>

<div>
    <h2 id="yfjd"> 3、研发进度</h2>
    <p>疫苗研发的大体流程和周期，包括两个阶段：</p>
    <p>第一个阶段是疫苗前期研发过程，包括获得免疫原（获得活病毒、分离相关亚单位、通过基因重组技术获得重组蛋白或者合成相关的DNA(RNA)）、免疫反应测试、动物保护测试、免疫原生产工艺（放大）优化、临床前毒理研究等环节。</p>
    <p>第二个阶段是疫苗研发及注册过程，包括临床前研究、申报临床、开展临床试验，最后才能实现疫苗上市。</p>
</div>

<div>
    <h2 id="ymlx">4、疫苗类型</h2>
    <p>疫苗研发的大体流程和周期，包括两个阶段：</p>
    <p>第一个阶段是疫苗前期研发过程，包括获得免疫原（获得活病毒、分离相关亚单位、通过基因重组技术获得重组蛋白或者合成相关的DNA(RNA)）、免疫反应测试、动物保护测试、免疫原生产工艺（放大）优化、临床前毒理研究等环节。</p>
    <p>第二个阶段是疫苗研发及注册过程，包括临床前研究、申报临床、开展临床试验，最后才能实现疫苗上市。</p>
</div>
</body>

注意：

1. 外部链接需要添加 http:// www.baidu.com
2. 内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页
3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。