html常用标签及页面布局分析

mzmm403
355 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天

超链接标签

image-20220616150444725.png

超链接

  • 文本超链接标签
  • 图像超链接标签
<!-- 文本超链接-->
<a href='www.baidu.com'>点击我跳转到百度</a>
<!--图像超链接跳转-->
<a href='path'>
    <img src="path" alt="" title="悬停文字" width="300" height="300"/>
</a>
  • herf：表示跳转到某个地方（必填）
  • target属性
    • _blank ：跳转时打开另一个网页进行跳转
    • _self：跳转时在自己原来的网页下直接进行跳转
  • name：可以指定a标签一个名字

锚链接

  1. 需要一个标记
  2. 转到标记
<!--锚链接-->
<!--做标记-->
<a nname="top">顶部</a>
<!--转到链接-->
<a href="#top">回到顶部</a>

功能性链接

  • 邮件链接（mailto）
<a href="mailto:1727328835@qq.com">点击联系我</a>
  • QQ链接

可以使用qq推广获取对应的链接代码

效果如下：

image-20220616152547036.png

块元素和行内元素

块元素

  • 无论内容多少，该元素都独占一行
  • 例如（p、h1-h6....）

行内元素

  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • 例如（a、strong、em....）

列表标签

什么是列表

  • 列表就是信息资源一种展现形式。它可以使信息结构化和条理化，并以列表的样式显现出来，以便浏览者能更快捷的获取相对应的信息

列表分类

  • 无序列表
  • 有序列表
  • 自定义列表
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

)

image-20220616154509706.png

  • 应用范围：试卷，问答 ...
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

image-20220616154517337.png

  • 应用范围：导航，侧边栏
<dl>
    <dt>学科</dt>
    
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dt>位置</dt>
    
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>

  • dl：标签

    dt：列表名称

    ddL：列表内容

image-20220616155027314.png

  • 应用范围：公司网站底部

表格标签

为什么使用表格

  • 简单通用
  • 结构稳定
<table border='1xp'>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
  • table：表格标签
  • tr：行标签
  • td：列标签
  • border：表格边框

image-20220616160904983.png

跨行跨列操作

  • 跨列
<table border='1xp'>
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
  • colspan：参数为多少列

image-20220616162259023.png

  • 跨行
<table border='1xp'>
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
  • rowspan：参数为跨了多少行

image-20220616162406451.png

媒体元素

视频元素

  • video
<video src="path" controls autoplay></video>
  • src：资源路径（必填）
  • controls：控制条
  • autoplay：自动播放

音频元素

  • audio
<audio src="path" controls></audio>
  • src：资源路径（必填）
  • controls：控制条
  • autoplay：自动播放

页面结构分析

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚步区域的内容（用于整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容
avatar
文章
阅读
粉丝