HTML02之html中的标签及其使用

最新推荐文章于 2024-07-21 17:58:14 发布

EUPHORIA_jasmine

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量188

点赞数

文章标签： html html5 web

本文链接：https://blog.csdn.net/qq_45976736/article/details/112554063

版权

HTML基本知识

1.标签

1.<br>：换行标签，是一个单标签。一个<br>代表空一行

2.<hr>：设置水平线（默认水平居中于网页）

size：设置水平线高度
width：设置水平线宽度
ailgn：设置水平线的位置（left、center（默认）、right）

3.<sub></sub>：设置下标

eg： log<sub>10</sub>2

<sup></sup>：设置上标

eg：20<sup>2</sup>

4.字体大小改变，依次递减

5. a: 超链接（有一定的跳转动作）

a标签生成的链接，未被访问时，字体颜色为蓝色；

点击访问时，为红色；访问结束回到当前页面时，字体颜色为紫色。

eg：
<a href="http://www.baidu.com">百度一下你就知道</a>

href：设置链接地址

1.标准url：绝对路径/相对路径

eg：

<a href="http://www.baidu.com">百度一下你就知道</a>

2.设置锚点值（形象记忆：就好比蜘蛛侠吐丝来定点位置）

通过id属性设定锚点位置
#id属性值

eg：

点击“第一章”会定位到“第一章内容------”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <a href="#one">第一章</a>
    </div>
<div>
        <a href="#two">第二章</a>
    </div>
    <div>
        <a href="#three">第三章</a>
    </div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="one">第一章内容------</p>
<br>
<br>
11111111
<br>
<br>
<p id="two">第二章内容------</p>
<br>
<br>
2222222222
<br>
<br>
<p id="three">第三章内容------</p>
<br>
<br>
333333333333
<br>
<br>

</body>
</html>

3.邮箱地址

mailto：邮箱地址

target：设置页面打开方式

_blank：打开新的页面

_self：在当前页面中打开（默认）

_top：在顶级框架中打开

_parent：在父框架中打开

6.table：用来写表格的

子标签

<caption>：用来设置表格的标题信息

thead：设置表格头部，包含了<tr>、<td>

tbody：设置表格体部，包含了很多<tr>

tfoot：设置表格脚部，包含了对表格的总结信息

tr：表示表格的行，一对<tr>表示一行（存在于thead或tfoot任何一个中，但省略上述thead或tfoot，tr的父标签默认为tbody）

td：普通单元格，表示表格用来包含数据的单元格

th：常用于表头单元格，th单元格内的内容有剧中加粗的效果

eg：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
    
    td,th{
        width: 100px;
        height: 30px;
        border: 1px solid black;
       
    }</style>


</head>
<body>
<table align="center"  cellpadding="0px" cellspacing="0px">
    <caption>学生管理系统</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>班级</th>
    </tr>
    
    <tr>
        <td>rose</td>
        <td>22</td>
        <td>女</td>
        <td>web2101</td>
       </tr>
</table>
页面展示：

table私有属性（后期学习完css不建议使用）

align：表格应该如何在文档中对齐

left 、center、right

cellpadding：设定内容与单元格之间的距离

cellspacing：表格与表格之间的间距（设定单元格与单元格之间的距离）

bgcolor：设定表格的背景颜色

width：设定表格的宽度

border：设定表格边框特性，取整数为值，单位为px

（注：所有效果以实际测试为准）

td私有属性：

colspan：跨列数合并

rowspan：跨行数合并

width：设定单元格与单元格之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
           border-collapse: collapse;
        }
        
        td,th{
            width: 100px;
            height: 50px;
            border: 1px solid black;
           
        }</style>


</head>
<body>
    <div class="text" style="text-align:center;">    
    <h1>例如</h1>  </div>
  <br>
    <table align="center"  cellpadding="0px" cellspacing="0px" style="text-align: center;">
        <caption></caption>
<tr>
    <td rowspan="2">联系方式</td>
    <td>移动电话</td>
    <td></td>
    <td>现在住址</td>
    <td></td>
    <td>邮编</td>
    <td></td>
</tr>
<tr>
   
    <td>紧急联系人</td>
    <td></td>
    <td>与本人关系</td>
    <td></td>
    <td>联系电话</td>
    <td></td>
</tr>

   </table>




</body>
</html>

页面展示：

colgroup：写在所有tr之上，在它里面可以通过col标签标识列（定义一个表中的一组列，只能作为table的子元素，位于元素后，其他元素之前。）

col：定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为<colgroup>元素的子元素
col的私有属性： span ----->设置col控制几列 (跨列数，即规定有几列可以作为同一列)

H5中新增标签

header
是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。
nav
是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
article
代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。

EUPHORIA_jasmine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML02之html中的标签及其使用

HTML基本知识1.标签1.<br>：换行标签，是一个单标签。一个<br>代表空一行2.<hr>：设置水平线（默认水平居中于网页）size：设置水平线高度 width：设置水平线宽度 ailgn：设置水平线的位置（left、center（默认）、right）3.<sub></sub>：设置下标eg：log<sub>10</sub>2<sup></sup&gt..
复制链接

扫一扫