程序员Web前端学习Day2-标签学习

最新推荐文章于 2022-11-13 12:00:00 发布

qq_42786725

最新推荐文章于 2022-11-13 12:00:00 发布

阅读量116

点赞数

文章标签： htm 前端基

本文链接：https://blog.csdn.net/qq_42786725/article/details/81193358

版权

1.组合标签

<figure>
        <img src="../../img/f3_Android1.png" alt="图片加载失败">
    <figcaption>
        安卓系统越来越流畅！
    </figcaption>
</figure>

2.行级元素

img
span
a
q
i
b
small
big

3.行级标签

<!--
h1 - h6
<p> 在文本中 ，多个连续空格和换行被当做一个空格处理
<br> 实现换行
&nbsp;空格转义符
<hr>分割线
<pre>  预格式标签
blockquote  引用标签
-->

 a标签
页面链接：
1：外部页面链接
2：本地页面链接
3:锚点链接

锚点举例

<body>
<h1 id="top">这是页面顶部</h1>
<div style="height: 1000px;background-color: green">
</div>
<a href="#top">返回页面顶部</a>
</body>

<!--同一个页面可以定义多个锚点-->
<p id="part1">第一章</p>
<div style="height: 200px;background-color: green"></div>
<p id="part2">第二章</p>
<div style="height: 200px;background-color: darkkhaki"></div>
<p id="part3">第三章</p>
<div style="height: 200px;background-color: black"></div>
<p id="part4">第四章</p>
<div style="height: 200px;background-color: darkblue"></div>
<p id="part5">第五章</p>
<div style="height: 200px;background-color: firebrick"></div>
<p id="part6">第六章</p>
<div style="height: 200px;background-color: green"></div>
<div style="position: fixed;top:0px;right:20px">
<a href="#part1">第一章</a>
<a href="#part2">第二章</a>
<a href="#part3">第三章</a>
<a href="#part4">第四章</a>
<a href="#part5">第五章</a>
</div>

5.表格

<!--
 表格 :块级标签
 border:表格宽度
 width:表格宽度度
 algin:表格对齐
 height:表格高方式 left right center 默认left
bgcolor:背景颜色
background：背景图片
bordercolor：边框颜色
cellspadding:文本和单元格之间的距离
cellspacing:单元格之间的间距
cell

tr属性：宽度没有意义；高度设置整行的高度。bgcolor:整行背景颜色
align valign top middle bottom整行的文本对齐方式

td th 属性
width:单元格宽度
height:单元格高度
align：文本水平对齐方式
valign:文本垂直对齐方式
bgcolor:单元格的背景颜色
 属性相同：单元格优先级大于行大于表格
 ctrl+alt+l 格式化代码
 -->

单元格跨行：rowsppan

单元格跨列：colspan

单元格结构化

<!--表格结构化标签：不管怎么排序，按照标题表格头表格体表格尾顺序显示
thead:表格头
tbody：表格体 做分区
tfoot：表格尾
caption：标题-->

单元格直列化

colgroup:对列进行分组
col:代表某一列

举例

<table border="1"width="600">
    <colgroup>
        <col span="2"bgcolor="green">

    </colgroup>
    <colgroup>
        <col bgcolor="red">

    </colgroup>
    <colgroup bgcolor="yellow">
        <col>
        <col>
    </colgroup>
    <thead>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>学历</td>
        <td>籍贯</td>
        <td>地址</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>01</td>
        <td>张力</td>
        <td>本科</td>
        <td>山东</td>
        <td>济南</td>
    </tr>
    <tr>
        <td>01</td>
        <td>张力</td>
        <td>本科</td>
        <td>山东</td>
        <td>济南</td>
    </tr>
    <tr>
        <td>01</td>
        <td>张力</td>
        <td>本科</td>
        <td>山东</td>
        <td>济南</td>
    </tr>
    <tr>
        <td>01</td>
        <td>张力</td>
        <td>本科</td>
        <td>山东</td>
        <td>济南</td>
    </tr>
    <tr>
        <td>01</td>
        <td>张力</td>
        <td>本科</td>
        <td>山东</td>
        <td>济南</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>汇总1</td>
        <td>汇总2</td>
        <td>汇总3</td>
        <td>汇总4</td>
        <td>汇总5</td>

    </tr>
    </tfoot>
</table>

qq_42786725

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
程序员Web前端学习Day2-标签学习

1.组合标签&lt;figure&gt; &lt;img src="../../img/f3_Android1.png" alt="图片加载失败"&gt; &lt;figcaption&gt; 安卓系统越来越流畅！ &lt;/figcaption&gt;&lt;/figure&gt;2.行级元素imgspanaqi
复制链接

扫一扫