HTML5 常用标签-应用场景-图文详解（二）

最新推荐文章于 2023-02-13 16:05:11 发布
最新推荐文章于 2023-02-13 16:05:11 发布
阅读量2k 收藏 15
点赞数 10
分类专栏： 前端 文章标签： web前端 HTML标签 应用实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w1418899532/article/details/82780860
版权

摘要：
在HTML5常用标签-应用场景-图文详解（一）中记录了HTML骨架、头部标签、div、span、p、a等文本级标签和容器级标签。
下面为本文主要内容：

  • 图片标签：<img>
  • 列表标签：<ul>、<ol>、<dl>
  • 表格标签：<table>
  • 表单标签：<form>
  • 滚动字幕标签：<marquee>

  1. 图片标签

    img：代表的就是图片，是自封闭标签，也称为单标签。
    定义图片的语法：

    <img src="img/testimg.jpg">

    <注意>：HTML页面中不是直接插入图片，是插入图片的地址，要先把图片上传至服务器。
    img属性：

    • src：图片的路径（相对路径和绝对路径）

    • alt：为图像定义一串预备的可替换的文本。

    • title：提示性文本，鼠标悬停时出现的文本。

    • height：设置图像高度。

    • width：设置图像宽度。

    • border：给图片加边框，单位：像素，默认边框为黑色。

    • align：图片的水平对其方式，属性值可为：bottom（默认）、left、right、center、top。

    • Hspace：设置图片左右边距。

    • Vspace：设置图片上下边距。
      相对路径和绝对路径：

      • 相对路径：…/img/这种路径，从自己出发，找到被人。好处：不管站点拷贝哪里，html文件和图片的相对路径关系不变，都可以使用，但是文件和图片必须要在同一个服务器上。
        例如：
        问题：我的网页在C盘，图片却在D盘，能不能插入呢？
        答案： 用相对路径不能，用绝对路径也不能。

      • 绝对路径：形如http://开头的，完整的描述文件位置的路径。

      height、width、title属性举例：

      <img src="img/testimg.jpg" title="这是八仙花" height="300px" width="400px">

      效果如下：
      title属性
      Alt属性举例：
      代码
      显示
      align属性举例：

      1. 属性为空默认bottom：
      <body>
    你最<img src="img/testimg.jpg" align="" height="200px" width="300px">漂亮
</body>

      效果：
      默认属性
      2.left

      <body>
    你最<img src="img/testimg.jpg" align="left" height="200px" width="300px">漂亮
</body>

      效果：
      left
      3.center

      <body>
	你最<img src="img/testimg.jpg" align="left" height="200px" width="300px">漂亮
</body>

      效果：
      center
      4.right

      <body>
			你最<img src="img/testimg.jpg" align="left" height="200px" width="300px">漂亮
</body>

      效果：
      right
      5.top
      图片与文字顶端对齐。

      <body>
    你最<img src="img/testimg.jpg" align="top" height="200px" width="300px">漂亮
</body>

      效果：
      top
      注意：
      （1）如果要想保证图片等比例缩放，只设置width和height中其中一个。
      （2）如果想实现图文混排的效果，使用align属性，取值为left或right。

  • 列表标签
    列表标签分为三种：
    2.1 无序列表ul
    ul内字标签为li
    ul：unordered list 无序列表
    li：list item 列表项
    例如：

    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
 </ul>

    效果：
    ul实例

  • <li>标签必须被<ul>标签对包裹着才能使用，不能单独使用。

  • ul的作用：增加无序列表的含义，不是小圆点。

  • ul中 type=“属性值”：属性值：disc（默认的实心圆点）、square（实心方点）、circle（空心圆点）。

  • 举例：

    <ul type="disc">
            <li>实心圆点1</li>
            <li>实心圆点2</li>
            <li>实心圆点3</li>
        </ul>
        <ul type="square">
            <li>实心方点1</li>
            <li>实心方点2</li>
            <li>实心方点3</li>
        </ul>
        <ul type="circle">
            <li>空心圆点1</li>
            <li>空心圆点2</li>
            <li>空心圆点3</li>
        </ul>

    效果：
    type属性测试
    标签之间可以嵌套。例如：
    标签嵌套
    ul应用场景
    导航条一般都是用ul标签。如：
    ul应用场景

    2.2 有序列表ol****2.2 有序列表ol

    • ol：ordered list，有序列表。
    • ol里面子标签也为li，ol与ul只有语义不同，用法完全相同。
    • ol也有type属性，type=“属性值”，属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性，表示从几开始。
    • ol标签也是可嵌套的。其子标签只能是li，即li标签只能被ul、ol标签包裹。li是容器级标签。
    <ol>
        <li>实心圆点1</li>
        <li>实心圆点2</li>
        <li>实心圆点3</li>
    </ol>

    效果：
    ol
    属性举例：

    <ol type="1">
        <li>实心圆点1</li>
        <li>实心圆点2</li>
        <li>实心圆点3</li>
    </ol>
    <ol type="a">
        <li>实心圆点1</li>
        <li>实心圆点2</li>
        <li>实心圆点3</li>
    </ol>
    <ol type="A">
        <li>实心圆点1</li>
        <li>实心圆点2</li>
        <li>实心圆点3</li>
    </ol>
    <ol type="i">
        <li>实心圆点1</li>
        <li>实心圆点2</li>
        <li>实心圆点3</li>
    </ol>
    <ol type="I">
        <li>实心圆点1</li>
        <li>实心圆点2</li>
        <li>实心圆点3</li>
    </ol>

    效果：
    ol标签属性举例

    2.3 定义列表dl
    《dl》：definition list。

    • dt：definition title，定义列表的标题，dl下面这个标签时必须有的。

    • dd：definition description，列表项的描述，可有可无。

    • 注意：

      • -<dl> 的子元素只能是<dt> <dd>。

      • <dt> <dd>只能在<dl>标签里面被包裹使用。

      • 定义列表<dl>功能强大，使用到的场景极其多。
        for example:

         <dl>
        <dt>第一则小笑话</dt>
        <dd>父子二人看到一辆十分豪华的进口轿车。</dd>
        <dd>儿子不屑地对他的父亲说：</dd>
        <dd>“坐这种车的人， 肚子里一定没有学问！</dd>
        <dd>”父亲则轻描淡写地回答：</dd>
        <dd>“说这种话的人口袋里一定没有钱"，</dd>
        <dt>第二则小笑话</dt>
        <dd>父子二人看到一辆十分豪华的进口轿车。</dd>
        <dd>儿子不屑地对他的父亲说：</dd>
        <dd>“坐这种车的人， 肚子里一定没有学问！</dd>
        <dd>”父亲则轻描淡写地回答：</dd>
        <dd>“说这种话的人口袋里一定没有钱"，</dd>
        <dt>第三则小笑话</dt>
        <dd>父子二人看到一辆十分豪华的进口轿车。</dd>
        <dd>儿子不屑地对他的父亲说：</dd>
        <dd>“坐这种车的人， 肚子里一定没有学问！</dd>
        <dd>”父亲则轻描淡写地回答：</dd>
        <dd>“说这种话的人口袋里一定没有钱"，</dd>
    </dl>

      效果如下：
      dl例子

    • dl应用场景非常多。

    • dl就是定义一个列表。

    • 示例可以看出每个dd都是对dt的描述，自己占据一行。

    • 一个dl可以包含多个dt和dl，也可以一个只包含一个dt和dd。
      场景举例：
      小米商城最下方：
      小米dl应用
      html代码如下：

       <div class="footer-link">
        <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>
                <a href="">账户管理</a>
            </dd>
            <dd>
                <a href="">购物指南</a>
            </dd>
            <dd>
                <a href="">账户管理</a>
            </dd>
        </dl>
        <dl class="col-links">
            <dt>服务支持</dt>
            <dd>
                <a href="">售后政策</a>
            </dd>
            <dd>
                <a href="">自助服务</a>
            </dd>
            <dd>
                <a href="">相关下载</a>
            </dd>
        </dl>
        <dl class="col-links">
            <dt>线下门店</dt>
            <dd>
                <a href="">小米之家</a>
            </dd>
            <dd>
                <a href="">服务网点</a>
            </dd>
            <dd>
                <a href="">小米之家</a>
            </dd>
        </dl>
        <dl class="col-links">
            <dt>关于小米</dt>
            <dd>
                <a href="">了解小米</a>
            </dd>
            <dd>
                <a href="">加入小米</a>
            </dd>
            <dd>
                <a href="">投资者关系</a>
            </dd>
        </dl>
        <dl class="col-links">
                <dt>关于小米</dt>
                <dd>
                    <a href="">了解小米</a>
                </dd>
                <dd>
                    <a href="">加入小米</a>
                </dd>
                <dd>
                    <a href="">投资者关系</a>
                </dd>
        </dl>
        <dl class="col-links">
                <dt>关于小米</dt>
                <dd>
                    <a href="">了解小米</a>
                </dd>
                <dd>
                    <a href="">加入小米</a>
                </dd>
                <dd>
                    <a href="">投资者关系</a>
                </dd>
        </dl>
    </div>

      样式代码：

       .footer-link{
                    height:192px;
                    width:1226px;
                    border:1px solid #eee;
                    margin: 0 auto;
                    }
        .footer-link a{
                        text-decoration: none;
                        color:#757575;
                        }
        .footer-link .col-links{
                        float:left;
                        width:160px;
                        height:112px;
                        }
        .footer-link .col-links dd{
                        font-size:12px;
                        margin:10px 0 0;
                        }
        .footer-link .col-links dt{
                        font-size:14px;
                        color:#424242;
                        }

效果：
dldtdd应用实例

  • 表格标签
    表格标签使用<table>表示，表格是一行一行<tr>组成的，每一行是由列<td>组成的。
    表格常用标签：
<th>定义表格表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格的标题
<col>定义表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主题
<tfoot>定义表格的页脚

表格的<thead>``<tbody>``<tfoot>标签可写可不写。

  • 如果不写，浏览器按照代码从上到下的顺序解析表格，如果写了，浏览器按照<thead>``<tbody>``<tfoot>顺序解析。

  • 当表格内容多，数据量大的时候，建议使用<thead>``<tbody>``<tfoot>标签，内容可以一边获取一边显示。否则要等表格数据从服务器获取完毕才能看到内容。

    例如：创建一个四行三列的单元格。

    <table border="1">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>身高</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>170cm</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>20</td>
            <td>175cm</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>王五</td>
            <td>25</td>
            <td>185cm</td>
        </tr>
        </tfoot>
    </table>

    效果：
    表格实例
    单元格合并

    • rowspan：纵向合并单元格，两个单元格合并，就要删除多余的一个单元格。
    • colspan：横向合并单元格，同样有单元格被合并，就要有单元格被删除。
    • 例如：
      单元格合并实例
tomorrownan
关注
专栏目录
图文详解 DBMS 数据库管理系统三层架构体系（三级模式）《ClickHouse 实战：企业级大数据分析引擎》...
程序员光剑
12-07 1万+
引文计算机科学领域的所有问题，都可以通过添加一层中间层来解决。通过在用户和计算机中间添加一层逻辑层（概念模型层），于是就有了“数据库的三级模式”：数据库在三个级别 (层次)上进行抽象，使用...
HTML5笔记
darabiuz的博客
08-01 396
HTML5详解笔记1.浏览器http理解1.浏览器和服务器2.浏览器访问网页原理3.浏览器请求数据过程4.什么是url5.补充2.HTML1.认识HTML2.HTML发展史3.html结构理解4.字符集问题6.字符实体5.DTD文档声明7.❗❗各大标签介绍1. `1.浏览器http理解 1.浏览器和服务器 1. 什么是浏览器 像qq一样是安装在电脑上的软件 2. 浏览器功能 将网页渲染出来给用户查看 让用户能够通过浏览器和网页交互 （点击，输入，拖动等操作和网页交互） 五款主流浏览器（IE,chro
HTML5相关技术资料精选集
09-27
主要是FileAPI和cheatsheet。另外补充了css、samples。 * cheatsheet，包括html5标签（两个）、canvas和css3，共四个。 * css里除几个相关文档，另外是两个chm：css3.0参考手册和html标签大全（旧html元素）。 * samples里一个是用于补充drag&drop的，另外两个canvas绘制玩的。其中koch雪花是自个弄的
HTML5 标签使用场景
izhaong
04-19 446
优缺点： HTML4 ![201611221641399760png](https://img-blog.csdnimg.cn/img_convert/c9f910aa8d78bbf753186f1e8baa8371.png#align=left&display=inline&height=369&margin=[object Object]&name=201611221641399760.png&originHeight=369&originWidth=50
Html中的常用标签
windy8833的专栏
03-04 1697
1.：控制字体的各种属性     格式：文字     size：字体大小     color：字体颜色     face：字体名称；双击控制面板中的"字体"，可以查看可以引用的字体名称2.......：表示将指定的内容居中显示在页面中3.：换行4.：Html中的注释标记5.：在页面中加一条分割线     格式：     size：分割线的高度     w
HTML5 详细介绍 及应用实例
绝对秋香
10-27 1001
 HTML5 概况 什么是 HTML5   HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。 ...
HTML概述及应用
HXL521666的博客
09-17 508
「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。其实就是一个html文件（后缀名为html）
CSS-Cascading Style Sheet_层叠样式表_用法详解
qq_31455841的博客
09-26 2771
CSS Cascading Style Sheet 1. CSS 介绍 1. CSS 概念介绍 CSS 全称 Cascading Style Sheet 层叠样式表 1. 专门用来为HTML标签添加样式 2. 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等 3. 层叠属于CSS的三大特性之一 4. 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 2. CSS 使用目的 1. CSS 之前 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单
图文详解 video和audio元素的属性、事件及使用
alalasheep的博客
04-04 4381
集合类型定义 集合操作符 集合处理方法 集合类型应用场景
SpringMVC 图文详解（一）
qq_25083447的博客
03-28 3471
文章目录一、SpringMVC概述1.1、什么是三层架构1.2、什么是MVC1.3、什么是SpringMVC1.3.1、SpringMVC工作流程图1.3.2、SpringMVC架构图二、 SpringMVC入门案例2.1、环境准备2.2、案例编写2.3、@RequestMapping注解三、请求参数绑定3.1、请求参数绑定基本类型3.2、请求参数绑定实体类型3.3、解决中文乱码的过滤器 一、Sp...
HTML5常用标签-应用场景-图文详解（一）
tomorrownan的博客
09-17 4754
HTML全称为HyperText MackeUp Labguage,超文本标记语言，是一种描述性的标记语言。 一个HTML页面即网页就是由一个个标记组成，浏览器根据标记语言的规则去解释它。 HTML文件由&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;a
在图片上进行框选区域
qq_43592064的博客
05-08 3268
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>框选</title> ...
漂亮图表html,这9个精美的HTML5图表应用，让你的网页专业精确
weixin_36108931的博客
06-04 1776
提及图表应用，用HTML5和jQuery制作的网页图表更加方便和使用，而且无论是功能还是外观，定制起来都比较灵活。本文就向大家分享9个经典华丽的HTML5图表应用，也许对你的前端开发会有帮助，一起来看看吧。1、超酷HTML5 Canvas图表应用Chart.js这是一款基于HTML5Canvas的图表应用Chart.js，它的功能非常强大，有很多图表类型，包括折线图、柱状图、饼图、放射图等，你可以...
标签平台的业务应用场景
最新发布
weixin_35755823的博客
02-13 276
标签平台的业务应用场景非常广泛，常见的场景包括： 商品分类：在电商、零售等行业，使用标签可以方便地对商品进行分类和管理。 内容标签：在媒体、出版等行业，可以使用标签来标识文章、图片、视频等内容的主题和特点，以便用户快速找到自己感兴趣的内容。 客户分群：在市场营销、客户服务等行业，可以使用标签来对客户进行分群，以便更好地为不同群体提供服务。 数据分析：在数据分析和挖掘领域，标签可以用于数据的...
web字体和图标
我的博客
05-06 1479
web字体和图标 介绍 开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代已经过去。而且它的支持程度很好，甚至低版本ie也能支持 字体格式：不同浏览器所支持的字体格式不一样 .ttf格式：是windows和mac最常见的字体，是一种RAW格式，支持这种字体的浏览器有ie9+，fixfox3.5+，chrome4+，safari3...
Web前端H5之HTML标签总结（一）
雪域枫蓝的博客
11-13 2507
1、Web标准介绍 * web应用领域： PC端 移动端 * 网页介绍 ** 组成：文字、图片、按钮、视频、音频。。。。这些元素组成 ** web标准：制作网页的规范 结构标准（HTML） 表现标准（CSS:美化网页） 行为标准(JavaScript
Web初探-html-标记的属性
大碗宽面的博客
07-24 911
HTML 标记与 HTML 属性 在大多数 HTML 标记中都可以对属性控制，属性的作用是帮助 HTML 标记进一步控制 HTML 文件的内容，比如内容的对齐方式（如本例），文字的大小、字体、颜色，网页的背景样式，图片的插入，等等。其基本语法为：<标记名称 属性名 1=“属性值 1” 属性名 2=“属性值 2” …> 用 align 属性控制段落的水平位置 eg: <p al...
浅析标签应用现状及应用场景
weixin_34148456的博客
03-30 1068
近日，某知名研究所发布最新研究报告《2016—2021全球标签印刷发展态势》。该报告通过对全球标签市场的持续性跟踪与统计发现，2016年全球标签印刷市场总额为345亿美元。未来5年，该市场将以5.4%的平均速度持续增长，到2021年产值预计达到448亿美元。此外，该报告分析了标签市场的增长原因，主要是全球品牌商越来越重视标签防伪的作用。其次，消费者对速...
python列表排序sort和sorted
Zzzzzz_m的博客
10-13 196
sort是直接对原列表进行操作，更改原列表的排序； sorted不是直接对原列表进行操作，而是以返回值的形式返回一个排好序的列表。
S7-200应用实例详解：图文教程
"《S7-200应用实例(图文并茂)》是一本针对PLC S7-200系统的学习资料，适合初学者和有一定基础的工程师深入理解和实践。该书以图文并茂的方式，详细介绍了西门子S7-200系列PLC（Programmable Logic Controller）的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值