关于HTML基础的标签知识

最新推荐文章于 2024-10-01 22:08:10 发布

前端菜鸟10086

最新推荐文章于 2024-10-01 22:08:10 发布

阅读量103

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/qq_57205669/article/details/118975513

版权

本文是作者前端学习的第十天记录，主要介绍了HTML的基本结构和常用标签，如标题、段落、文本格式化、图像、链接、表格等。特别强调了表格的创建、属性设置、单元格合并，并提醒读者注意表格的样式应通过CSS来处理。

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

学习前端第十天，想用这个平台记录我的学习历程，如果有幸存在像跟我一样的小菜鸟，或者是大佬读到我的小文章，希望可以给出我一点点的小建议或者是能够指点迷津。

我学习前端使用的开发工具是VScode,这个开发工具对于我这种小菜鸟还是比较容易上手的，但是也推荐使用sublime text、HbuilderX以及intelliJ IDEA。

首先关于html的骨架：

<!DOCTYPE html>
<!--声明文件类型，即确定html的版本 -->

<html lang="en">

<head> 
<!--网页相关属性 -->

    <meta charset="UTF-8">                                                                               

<!-- 关于字符集

utf-8是目前最常用的字符集编码方式，其包含全世界所有国家需要用到的字符，而常用的字符集编码方式还有gbk和gb2312，为避免字符集不统一，所以使用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>

   <!-- 网页主体 -->

</body>

</html>

在进行网页总体格式书写时，在body中写，而建设网页属性时，则写在head中。

其次是html的基础标签：

注释标签：
标题标签：<h1><h2><h3><h4><h5><h6>

<h1>我是个标题</h1>
<h2>我是个标题</h2>
<h3>我是个标题</h3>
<h4>我是个标题</h4>
<h5>我是个标题</h5>
<h6>我是个标题</h6>

段落标签：<p></p>
div span标签：<div></div> <span></span>
文本格式化标签：
加粗: <b></b> <strong></strong>

斜体:<i></i> <em></em>

~~删除线~~： <s></s> <del></del>

加下划线： <u></u> <ins><ins>
水平线标签：<hr>
换行标签：<br>

(注：br和hr是单标签)

图像标签：<img src="图像路径" >

属性：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注：初学小菜鸟在制作网页时，可以将跳转目标设为“#”,表示该链接暂时为一个空链接。

target取值有self和blank两种，其中self为默认值，_blank为在新窗口中打开方式。(在制作网页时可以使用的)
base 标签:base 可以设置整体链接的打开状态,base 写到 <head> </head> 之间
锚点定位：
通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用<a href=”#id名">链接文本"</a>创建链接文本。

2.使用相应的id名标注跳转目标的位置。
特殊字符标签：

表格：

创建表格：表格标签（写在body中）

<table>
  <tr>
<!--tr代表行-->
    <td>单元格内的文字</td>
<!-- td相当于列-->
    ...
  </tr>
  ...
</table>

表格属性：

设置表格的一般形式：

<table border="1px" cellspacing="0"  cellpadding="10px" align="center" width="500px" height="300px">
        <tr align="center">
            <td>
                单元格
            </td>
            <td>
                单元格
            </td>
            <td>
                单元格
            </td>
        </tr>
    </table>

当设置表头结构加粗且居中时，就可以把<td></td>换成<th></th>

在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述）

具体如下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容

合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

<table border="1px" width="300px" height="300px" align="center" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>     
        </tr>
    </table>