HTML CSS第一次笔记

80 阅读2分钟

1 HTML基本骨架

image.png

2 标签关系

image.png

3 HTML的注释

<!--我是注释-->

4 标题标签

image.png

image.png


<body>
  <h1>1级标题</h1>
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <h4>4级标题</h4>
  <h5>5级标题</h5>
  <h6>6级标题</h6>
</body>

效果:

image.png

5 段落标签

image.png

<body>
  <p>
    上海正在见证一场机器人革命,而这次的主角是本土企业——智元机器人。就在不久前,这家成立仅两年的初创公司宣布,将在浦东新建一座工厂,目标是把人形机器人产能提升至每月400台以上,以满足市场日益增长的需求。这个数字听起来可能有些抽象,但放到现实中,相当于每个月能造出400个“钢铁小助手”,未来或许会取代某些重复性劳动,让人类从繁重工作中解放出来
  </p>
  <p>智元机器人的野心可不止于此。他们放话,今年计划生产5000台人形机器人,并且希望能达到全球顶级水准,向马斯克的擎天柱项目看齐。这让不少人开始思考:国产机器人真的能在国际市场上占据一席之地吗?</p>
</body>

image.png

6 换行和水平线标签

6.1 br标签(单标签)和 hr标签(单标签)


<body>
  第一行文字<br>
  <hr>
  第二行文字<br>
  <hr>
  第三行文字<br>


</body>

效果: image.png

7 文本格式化标签

image.png

效果:

<body>
  1.加粗<br>
  <strong>a stronger women</strong> <br>
  <b>a stronger women</b> <br>
  2.斜体<br>
  <em>a stronger women</em><br>
  <i>a stronger women</i><br>
  3.下划线<br>
  <ins>a stronger women</ins><br>
  <u>a stronger women</u><br>
  4.删除线<br>
  <del>a stronger women</del><br>
  <s>a stronger women</s><br>

</body>

image.png

8 图像标签

8.1 使用图像标签导入图像

image.png

<body>
  <img src="./img/njs1.jpg" alt="">

</body>

8.2 图像标签-属性

image.png

<body>
  <img src="./img/njs1.jpg" alt="NJZ" title="NJZ" width="100%" height="100%">

</body>

9 路径

image.png

9.1 相对路径

9.2 绝对路径

10 链接标签

image.png

1.不额外添加窗口的打开目标
<body>
  <a href="https://www.baidu.com/">点击跳转到百度</a>

</body>

2.新开窗口
<body>
  <a href="https://www.baidu.com/" target="_blank">点击跳转到百度</a>

</body>

image.png

11 音频标签

image.png

image.png

12 视频标签

image.png

image.png