前端--DAY22（标记语言和CSS选择器）

最新推荐文章于 2024-09-14 22:07:12 发布

qq_53439751

最新推荐文章于 2024-09-14 22:07:12 发布

阅读量77

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/qq_53439751/article/details/125840973

版权

本文介绍了HTML和XML两种常见的标记语言，重点讲解了HTML在网页结构设计中的应用，如表格的跨行（rowspan）和跨列（colspan）属性的使用，以及图片和超链接的标签实现。此外，还简要提到了CSS的基础概念，包括选择器的优先级和一些基本应用。

摘要由CSDN通过智能技术生成

标记语言

常用的标记语言：XML（可拓展标记语言）,HTML（超文本标记语言）

XML：一般用于软件系统的配置文件，例如：Maven的配置文件settings.xml文件，项目中安装依赖的pom.xml文件。后缀名：xml

HTML：被广泛的用于网页的结构设计（html文件也就是网页文件）。后缀名：htm或html。

标记语言编写的文件结构是树形结构，因此HTML网页也称为HTML文件树

树形结构：1，只有一个根节点（根节点只能嵌套，不能和其他节点并列，没有兄弟节点，没有父节点，只有子节点），

2，节点中可以并列也可以嵌套，并列节点之间是兄弟关系（拥有同一个父节点）嵌套节点之间是父子关系。

3，一个父节点，可以嵌套多个子节点，一个节点可能存在多个兄弟节点。

4，一个节点只有一个直接父节点，但可以存在多层的父节点

5，节点（node）也称为标签（tag），或者元素（element）是标记语言的最小组成单位，每一个节点用于标记网页中的一个信息。

6，节点（标签）的语法：

1.单标签：<标签名/>

2.双标签：<标签名></标签名>。前面的是开始标签，后面的是结束标签

标签中的“ / ”代表节点的闭合，表示这个节点到此结束

双标签有开始标签和结束标签，在结束标签中用 “/”闭合。

单标签不可以嵌套子标签，自闭合。

1.跨行的属性：rowspan=“2”跨两行，发生跨行的td，写在跨的行里面的第一行

  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>分数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">张飞</td>
        <td>语文</td>
        <td>85</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>80</td>
      </tr>
      <tr>
        <td rowspan="2">关羽</td>
        <td>语文</td>
        <td>84</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>87</td>
      </tr>
    </tbody>
  </table>

2. 跨列的属性名：colspan=“2”;

<table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th colspan="2">成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">张飞</td>
        <td>语文</td>
        <td>80</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>70</td>
      </tr>
      <tr>
        <td rowspan="2">关羽</td>
        <td>语文</td>
        <td>89</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>70</td>
      </tr>
    </tbody>
  </table>

3.图片标签的使用

<body>
<!--src属性写图片的地址
本地图片：图片和当前网页在一起
网页图片：图片来自其他服务器
-->
<!--alt属性写图片加载失败后显示的文字-->
<img src="QQ截图20220718093123.png" alt="黑子"/>
<img src="https://img12.360buyimg.com/n7/jfs/t1/80086/5/19576/36343/62b441e6Ed3eeb3b2/9d62e003a1bb5069.jpg.avif" alt=""/>
</body>

4.超链接标签的使用

<body>
<!--href指向链接的网页-->
<!--target 属性用于设置目标-->
<!--可以是自己本地的网页-->
<!--可以是其他网站-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="01.hello%20world.html"target="_self">helloworld</a>
<!--#是刷新当前页面-->
<a href="#">空链接</a>
</body>