【HTML】常见标签总结

线程A

已于 2022-08-14 17:40:24 修改

阅读量105

点赞数 3

分类专栏： JavaScript教程文章标签： html 前端 css

于 2022-06-03 17:53:35 首次发布

本文链接：https://blog.csdn.net/user_2022_5_1/article/details/124873069

版权

JavaScript教程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在之前我们一直使用的是div标签，现在我们来使用一些其它的标签

表示标题的标签

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

表示段落的标签

<p>这是一个段落</br>
br是换行符
</p>

引入链接

<a href = "链接地址" ></a>
超链接默认是替换本页面,但是也可以是打开新的页面
<a href = "链接地址" target = "_blank"></a>
想鼠标放在链接之上,有一个提示效果
<a href = "链接地址" target = "_blank" title = "你马上就要到达选择器"></a>

引入图片

<img src = "图片的地址" alt = "提示文字"/>

alt的作用是提示效果
如果图片丢失或者图片太大，导致图片没有正常显示出来，alt的值就会体现出来

引入flash

<object type = "application/x-shockwave-flash" data = "movie.swf" width = "400" height = "300">
<param name = "movie" value = "movie.swf"/>
</object>

引入vmv

<object classid = "clisd:6BF52A52-394A-11d3-B153-00C04F79FAA6" width = "320" height = "217">
    <param name = "autoStart" value = "true"/>
    <param name = "URL" value = "php.wmv"/>
    <embed autostart = "true" src = "php.wmv" type = "video/x-ms-wmv" width = "320" height = "217" controls = "ImageWindow" console = "cons">
</embed>
</object>

无序列表和无序列表

<ul>
 <li>梅</li>
 <li>兰</li>
 <li>竹</li>
 <li>菊</li>
</ul>

ul表示这是一个无序的列表，li表示的是列表的项

<ol>
<li>春</li>
<li>夏</li>
<li>里</li>
</ol>

ol表示这是一个有序列表，li表示列表里面的项

我们可以去控制这些列表的样式

<style type = "text/css">
#ul {
 list-style:表示列表的样式;
}
</style>

真正使用的时候都将list-style设置为none这是因为浏览器的兼容性不一样

用一个无序列表做一个网站页面导航

<!DOCTYPE html>

<html>
<head>
    <style type = "text/css">
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    li {
        list-style:none;
        border: solid 2px gray;
        margin: 5px;
        background: gray;
        float: left;
    }
    </style>
</head>

<body>
    <div>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">业务介绍</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">留言</a></li>
        <ul>
    </div>
</body>

</html>

表格

<!DOCTYPE html>

<html>
<head>
</head>

<body>
     <table border = "1">
       <tr><td>姓名</td><td>年龄</td><td>身高</td></tr>
       <tr><td>刘备</td><td>28</td><td>150</td></tr>
       <tr><td>关于</td><td>29</td><td>178</td></tr>
       <tr><td>张飞</td><td>30</td><td>189</td></tr>
      </table>
</body>

</html>

td表示一列，tr表示一行

合并列

<table border = "1">
<tr><td colspan = "3">将列进行合并,独占一行</td></tr>
</table>

合并行

<table border = "1">
<tr><td>刘备</td><td>28</td><td rowspan="3">150</td></tr>
</table>

合并列，合并行的小技巧，先把合并行要消失的td删除掉，数一数留下的行和列要跨几行几列,通过rowspan和colspan来合并

表格的样式
使用选择器来控制表格的样式

<!DOCTYPE html>

<html>
<head>
    <style type = "text/css">
    table {
        border: solid 1px blue;
    }
    td {
        border: solid 1px red;
    }
    </style>
</head>

<body>
    <table >
        <tr><td colspan = "3">独占一行</td></tr>
        <tr><td>姓名</td><td>年龄</td><td>身高</td></tr>
        <tr><td>刘备</td><td>28</td><td rowspan="3">150</td></tr>
        <tr><td>关于</td><td>29</td></tr>
        <tr><td>张飞</td><td>30</td></tr>
        </table>
</body>

</html>

在这里插入图片描述

发现外面还有一层，为蓝色，现在我们想让这层单元格进行融合
在选择器中添加一个table属性，然后添加border-collapse: collapse;

table {
        border-collapse: collapse;
    }

在这里插入图片描述
border-collapse:还有一个选项为separate(独立的)就会回到上面的选项

接下来看其它两个表格控制属性

首先是 border-spacing: npx;表示相邻单元格的边框间的距离
使用 border-spacing: npx;的时候，border-collapse;需要设置为separate
其次是empty-cells: 表示空表格是否显示，
如果是hide则表示不显示,使用这个的时候border-collapse:Npx;需要设置为separate