标签，路径，列表

最新推荐文章于 2023-04-20 09:12:52 发布

海伦•

最新推荐文章于 2023-04-20 09:12:52 发布

阅读量177

点赞数

分类专栏： HTML5 ==========前端=========

本文链接：https://blog.csdn.net/qq_42794545/article/details/88807398

版权

==========前端========= 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

长时间没有学习前端，由于以前学习笔记太乱，刚好通过这次的复习来总结一下。

我的每节要点都通过案例里面体现了，并分别对其进行了标注。

1.HTML标签

主要注意的是链接 a 对应 href 属性

图片 img 对应 src 属性

base 设置总体默认格式

锚点定位利用id 来实现也页面滑动

了解一下避免程序识别<p>为段落以及其他的方法

<!DOCTYPE html>  <!--DOCTYPE :文档类型 -->
<html> 
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>常用标签</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <!-- base 设置 总体默认格式 -->
    <base target="_blank">
</head>


<body>  <!-- body 和 h2 是嵌套的关系 -->
    <h2>这周，实现了一个小目标，拿到了阿里的offer</h2>
    2019年03月22日 17:44:43 bit_kaki 阅读数：1008更多<br><!-- 水平线 -->
    <!-- 锚点定位 -->
    <a href="#end" target="_self">下滑到底部</a>
<!-- b是加粗该字段 -->
<b id="start" >个人分类： </b> 
版权声明：本文为博主原创文章，未经博主允许不得转载。

<!-- 超链接的 href 属性 是必填 -->
<a href="https://blog.csdn.net/bit_kaki/article/details/88745124" alt = "博客地址">博主博客链接</a>
<hr>


<!-- div 表容器 -->
       <div>在我读书尤其是读研的时候，我的师兄师姐大都后来去了事业单位。当时整个周围的环境几乎所有人也大都是以进事业单位或者公务员为荣，
 <!-- 加粗 --> 
         <strong>所以我在学生时代基本上都是考虑将来去个研究所，并且后来毕业后我也就真的就去了个研究所。</strong> 
 <!-- 斜体 --> 
         <em>
            去了研究所后才发现，其实在里面也就不过如此，和心里想象的工作完全不一样。以前总觉得研究所里的人应该是穿着白大褂的怪蜀黍，做着科研，
            然后一不小心就能做出改变的事情。但实际上，真的很让人失望。
          </em>
 <!-- 删除线 --> 
         <del>
            我也是这个时候了解到更多关于阿里的信息。
          </del>
 <!-- 下划线 --> 
         <ins>
            除了已经用习惯的支付宝、淘宝等以外，也真的觉得它做出了很多改变我们生活方式的事情，所以我期待有一天自己也能去阿里，也能在那里通过自己努力让这个世界更美好一点，哪怕是一点点。
          </ins>


       不过立下这个目标后，我后来发现自己离阿里好像越来越远。
       能去阿里的人本身就很厉害，而他们在阿里里接触到的都是亿万级用户的项目，用到的技术也是能引领时代潮流的技术，还能和各类大佬近距离接触，时不时接受各种培训。
       这些事和自己所做的事情比较起来，感觉差距好像越拉越大。
<!-- 换行 -->
       所以一度我认为我这辈子来不了阿里了。<br>

       去年我先后有阿里的朋友、师兄和我联系，问我是否考虑阿里。实话来说当时我心里还是很没底的，但我想人嘛，总该给自己定个目标啥的，于是我就说明年，我一定要来阿里。<br>

       </div>

<!-- img 的 src 属性必填 alt 属性表示是如果加载不出则显示改文本 -->
      <img src="https://img-blog.csdnimg.cn/20190322174144551.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpdF9rYWtp,size_16,color_FFFFFF,t_70">
      <img src="https://img-blog.csdnimg.cn/20190322174215666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpdF9rYWtp,size_16,color_FFFFFF,t_70">

       <span>当时我也把我的微博签名改成了，下一站一定是阿里巴巴。</span>
       <img src="https://img-blog.csdnimg.cn/2019032217483319.png">

 

       <span>终于，在这个礼拜，我收到了阿里的offer。算是实现了自己的一个梦想，也是实现了去年自己立下的flag吧！</span>
       <img src="https://img-blog.csdnimg.cn/20190322174852220.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpdF9rYWtp,size_16,color_FFFFFF,t_70">



       <div id="end">最近真的十分开心，感觉就跟做梦一般。新的起点，新的开始。未来几年，希望不让初心，继续努力加油吧！  </div>
     <a href="#start">回到顶部</a>
</body>
</html>

2.相对路径绝对路径

主要注意的是在使用绝对路径时要谨慎，以免网页在换机时运行出错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对绝对路径</title>
</head>
<body>
    <!-- 相对路径 -->
    <h1>相对路径用的比绝对路径一般较多</h1>
    <!-- 上一级 -->
    <h1>上一级前面加 ../  上两级加 ../../ 依次类推</h1>
    <img src="../3.png" alt="3.png">
    <!-- 同级 -->
    <img src="5.png" alt="5.png">
    <!-- 下一级 -->
    <img src="img/12.png" alt="12.png">

    <!-- 绝对路径 -->
    <h1>一般不使用绝对路径，因为一旦换电脑就会存在找不出图片的情况，但可以使用网络上的绝对路径图片</h1>
    <img src="D:\VsCode编写文档\COOD\.vscode\3.png">
    <img src="https://img-blog.csdnimg.cn/img_convert/650923df0d02a87e637b4b1eff9240d7.png">
    
</body>
</html>

3.列表

要点：我们常常在一个网页的地步会使用到 dl dt dd 列表。非常实用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义列表</title>
</head>
<body>
    <h1>有序列表</h1>
    <ul>
        <li>apple</li>
        <li>apple</li>
        <li>apple</li>
    </ul>

    <h1>无序列表</h1>
    <ol>
        <li>apple</li>
        <li>apple</li>
        <li>apple</li>

    </ol>

    <h1>自定义列表</h1>
    <dl>
        <dt>apple</dt>
        <dd>blanana</dd>
        <dd>pear</dd>
        <dd>watermellen</dd>
    </dl>
    <h1></h1>
    
</body>
</html>