首页 > 编程开发 > HTML/html5

HTML5中一些常用的元素与属性介绍

来自：互联网
时间：2020-09-30
阅读：

一、HTML5保留的常用元素

1、基本元素

HTML保留的基本元素有如下几个：

  • <!-- -->： 定义HTML注释

  • <html>：HTML5文档的根元素

  • <head>：定义HTML5文档的页面头部分

  • <title>：定义HTML5文档的标题

  • <body>：定义HTML5文档的主体部分

  • <style>：用于引入样式定义

  • <h1>到<h6>：定义标题一到标题六

  • <p>：定义段落

提示：几乎所有的HTML元素都可指定id、style和class属性，其中id属性用于为HTML元素指定一个唯一标识，该标识是通过DOM访问HTML元素的重要途径，class和style属性是CSS样式相关属性。

  • <br>：插入一个换行

  • <hr>：定义水平线

  • <div>：定义文档中的节，也就是我们说的区块，会占满一行

  • <span>：与<div>基本相似，定义的是一个行内标签样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本标签</title>
</head>
<body>
    <!-- 采用标题一到标题六来输出文本 -->
    <h1>疯狂Java讲义</h1>
    <h2>疯狂Android讲义</h2>
    <h3>轻量级Java EE企业应用实战</h3>
    <h4>疯狂XML讲义</h4>
    <h5>疯狂Ajax讲义</h5>
    <h6>经典Java EE企业应用实战</h6>
    <!-- 输出一条水平线 -->
    <hr />
    <!-- 使用三个span定义三节 -->
    <span>TOmcat</span><span>Jetty</span><span>Resin</span>
    <!-- 输出换行 -->
    <br />
    <!-- 使用三个div定义三节 -->
    <div>Tomcat</div><div>Jetty</div><div>Resin</div>
    <!-- 使用三个p定义三个段落-->
    <p>Tomcat</p><p>Jetty</p><p>Resin</p>
</body>
</html>

2、文本格式化元素

  • <b>：定义粗体文本

  • <i>：定义斜体文本

  • <em>：定义强调文本，实际效果与斜体文本差不多

  • <strong>：定义粗体文本

  • <small>：定义小号字体文本，通常用来标注免责声明、注意事项、法律规定和版权

  • <sup>： 定义上标文本

  • <sub>： 定义下标文本

  • <bdo>：定义文本显示方向，该标签可指定dir属性，属性值只能是ltr或rtl

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>格式化标签</title>
</head>
<body>
<span><b>加粗文本</b></span><br />
<span><i>斜体文本</i></span><br />
<span><b><i>粗斜体文本</i></b></span><br />
<span><em>被强调的文本</em></span><br />
<p><strong>加粗文本</strong></p>
<small><span>小号字体文本</span></small><br />
<div>普通文本<sup>上标文本</sup></div>
<span>普通文本<strong><sub>下标加粗文本</sub></strong></span><br />
<!-- 指定文本从左到右（正常情况）排列 -->
<bdo dir="ltr">从左到右排列的文本</bdo><br />
<!-- 指定文本从右向左排列 -->
<bdo dir="rtl">从右向左排列的文本</bdo><br />
</body>
</html>

3、语义相关元素

  • <abbr>：用于表示一个缩写，可指定title属性，该属性指定该缩写所代表的全称

  • <address>：用于表示一个地址，斜体显示文本。

  • <blockquote>：用于定义一段长的引用文本，浏览器会使用缩进的方式显示，该标签可指定cite属性，该属性指定该引用文本所引用的网址URL

  • <q>：用于定义一段短的引用文本，浏览器会为这段被引用的文本添加引号

  • <cite>：用于表示作品的标题，斜体显示

  • <code>：表示一段计算机代码

  • <dfn>：用于定义一个专业术语，浏览器会使用粗体或斜体显示

  • <del>：定义文档中被删除的文本。

  • <ins>：定义文档中插入的文本，浏览器通常会使用下划线显示

  • <pre>：表示该元素所包含的文本已进行了“预格式化”

  • <samp>：用于定义示范文本内容

  • <kdb>：用于定义键盘文本

  • <var>：用于表示一个变量。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>语义相关元素</title>
  </head>
  <body>
    <!-- 使用q表示一段短的引用文本 -->
    <p>疯狂Java的精神是<q cite="http://www.fkjava.org">
    疯狂源自梦想，技术成就辉煌。</q>这也是所有Java程序员的梦想</p>
    <div>
      <!-- 使用blockquote表示一段长的引用文本 -->
      <blockquote>
        景色无端五十铉，一炫一柱思年华。<br />
        庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br />
        沧海月明珠有泪，蓝田日暖玉生烟。<br />
        此情可待成追忆，只是当时已惘然。
      </blockquote>
      是唐朝诗人李商隐的代表作，诗中影藏着一种淡淡的忧伤，让人无法言说，但又无法释怀。
    </div>
    <p>
      <cite>《芙蓉镇》</cite>、<cite>《蓝风筝》</cite>
      是国内导演拍摄的最有思考深度的两部电影。
    </p>
    <p>
      下面定义了一个Java类：<br />
      <code>
        public class Cat<br />
        {<br />
          private int name = "garfield";<br />
        }<br />
      </code>
    </p>
    <!-- pre元素包含的内容是"预格式化"文本 -->
    <pre>
      public class Cat
      {
        private int name = "garfield";
      }
    </pre>
    <p>
      <!-- 使用abbr定义缩写 -->
      疯狂Java教育中心的缩写是：<abbr title="疯狂Java教育">fkjava</abbr>
      <!-- 使用address定义地址 -->
      疯狂软件地址是：<address>广州市天河区车坡大纲路4号冯弘大厦306-3011</address>
      <!-- 使用dfn定义专业术语 -->
      <p>
        <dfn>HTML</dfn>是一种广为人知的标记语言。
      </p>
      <p>
        可通过输入如下命令：<br />
        <kbd>list -l</kbd><br />
        在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。
      </p>
      <p>
        如果您在阅读疯狂Java体系图书时，遇到有任何无法理解的技术问题，<br />
        请登陆www.fkjava.org发帖提问，可按如下示例内容发帖：<br />
        <!-- 使用samp定义示范文本内容 -->
        <samp>
          我在阅读XXX图书的第X章、第X节时，遇到一个XXX问题，<br />
          错误提示信息是：XXX。
        </samp>
      </p>
      <!-- 使用var定义变量 -->
      <var>i</var>、<var>j</var>、<var>k</var>通常用于作为循环计数器变量。
      <!-- 使用del和ins表示修订 -->
      <p>Android是一个<del>开发</del><ins>开放</ins>式的手机、平板电脑操作系统</p>
      
    </p>
  
  </body>
</html>

4、超链接和锚点

HTML5保留了定义超链接的<a.../>元素，它有如下3个重要的属性：

  • href：指定超链接所关联的另一个资源

  • target：指定使用哪种框架来装载资源，有_self、_blank、_top、 _parent四个值

  • media：指定目标URL所引用的媒体类型，默认为all，它是HTML5新 增的属性

5、列表相关元素

  • <ul>：定义无序列表

  • <ol>：定义有序列表，该元素还可以指定以下三个属性：

start：指定列表项的起始数字

type：指定使用哪种类型的编号

reversed：该属性指定是否将排序反转

  • <li>：定义列表项目

  • <dl>：也用于定义列表，只能包含<dt>和<dd>两个子元素

  • <dt>：用于定义列表，只能包含<dd>子元素

  • <dd>：定义普通列表项

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>列表相关标签</title>
  </head>
  <body>
    <!-- 定义无序列表 -->
    <ul>
      <li>疯狂Java讲义</li>
      <li>轻量级Java EE 企业应用实战</li>
      <li>疯狂Android讲义</li>
    </ul>
    <!-- 定义有序列表 -->
    <ol start="2" type="I">
      <li>疯狂Java讲义</li>
      <li>轻量级Java EE 企业应用实战</li>
      <li>疯狂Android讲义</li>
    </ol>
    <!-- 定义列表 -->
    <dl>
      <!-- 定义标题列表项 -->
      <dt>疯狂Java体系</dt>
      <dd>疯狂Java讲义</dd>
      <dd>轻量级Java EE企业应用实战</dd>
      <dd>疯狂Android讲义</dd>
      <!-- 定义标题列表项 -->
      <dt>作者其他图书</dt>
      <dd>Struts 2.1 权威指南</dd>
      <dd>基于J2EE的Ajax宝典</dd>
    </dl>
  </body>
</html>

6、图像相关元素

HTML5保留了<img.../>元素在页面中定义图像，它是一个空元素，它必须制定以下两个属性：

  • src：指定图片文件所在的位置，可以是相对或绝对路径

  • alt：指定一段文本，作为图片的提示信息

<img>的两个可选属性：

  • height：图片高度

  • width：图片宽度

与<img>相关的标签：

  • <map>：定义图片映射

  • <area>：定义图片映射的内部区域

7、表格相关元素

<table>：用于定义表格，它可以指定如下属性：

  • cellpadding：指定单元格内容和单元格边框之间的间距

  • cellspacing：指定单元格时间的间距

  • width：指定表格的宽度

注意：HTML5建议将表格的所有属性都放到CSS中定义

  • <caption>：用于定义表格标题

  • <tr>：定义表格行

  • <td>：定义单元格，它可以指定如下几个属性：

  • colspan：指定该单元格跨多少列

  • rowspan：指定单元格可横跨的行数

  • height：指定该单元格的高度

  • width：指定该单元格的宽度

  • <th>：定义表格页眉的单元格

  • <tbody>：定义表格的主体

  • <thead>：定义表格头

  • <tfoot>：定义表格脚

注意：如果使用<thead.../>和<tfoot.../>标签，建议使用如下次序使用它们： <thead.../>、<tfoot.../>、<tbody.../>，浏览器会自动将<tfoot.../>呈现在最下面

  • <col>：该元素为表格中的一个或多个列指定属性值

  • <colgroup>：该元素用于为表格中的一个或多个列指定属性值

8、框架相关元素

HTML5不再推荐在页面中使用框架集，但保留了<iframe.../>元素，它有 一个属性src，该属性指定一个URL，指定该iframe将装载那个页面。

二、HTML5新增的通用属性

1、contentEditable属性

HTML5为大部分HTML元素增加了contentEditable属性，如果将该属性的值设为true，那么浏览器允许开发者直接编辑该HTML元素里的内容，并且它具有可继承性。

HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性，当元素可编辑则返回true，否则false。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>contentEditable属性</title>
  </head>
  <body>
    <!-- 直接指定contentEditable=“true”表明该元素是可编辑的 -->
    <div contenteditable="true" style="width: 500px; border:1px solid black">
      疯狂Java讲义
      <!-- 该元素的父元素有contentEditable=“true”，因此该表格也是可以编辑的 -->
      <table style="width: 420px; border-collapse: collapse;" border="1">
        <tr>
          <td>疯狂Java讲义</td>
          <td>疯狂Android讲义</td>
        </tr>
        <tr>
          <td>轻量级Java EE企业应用实战</td>
          <td>经典Java EE企业应用实战</td>
        </tr>
      </table>
    </div>
    <hr />
    <!-- 这个表格默认是不可编辑的，双击之后该表格变为 -->
    <table id="target" ondblclick="this.contentEditable=true" 
    style="width: 420px; border-collapse: collapse;" border="1">
      <tr>
        <td>Java</td>
        <td>Ruby</td>
      </tr>
      <tr>
        <td>C/C++</td>
        <td>Python</td>
      </tr>
    </table>
  
  </body>
</html>

2、designMode属性

designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode属性设置为on，则该页面上所有可支持contentEditable属性的元素都编程可编辑状态。

document.designMode = "on";

3、hidden属性

HTML5为所有元素提供一个hidden属性，如果某元素的hidden设为true， 则浏览器不显示该组件，且不保留该组件所占空间

<div id="target" hidden="true" style="height: 80px;">文字内容</div>
		<button onclick="var target=document.getElementById('target');
			target.hidden=!target.hidden;">显示/隐藏</button>

4、spellcheck属性

HTML5为<input.../>、<textarea.../>等元素增加了spellcheck属 性，该属性支持 true和false两个值，如果为true，则浏览器会对用户 的输入进行语法检。

<!-- 指定执行拼写检查 -->
<textarea spellcheck="true" rows="3" cols="40"></textarea>

三、HTML新增的常用元素

1、文档结构元素

  • <article>：该元素定义页面上一篇独立、完整的“文章”.

    <article.../>可以包含<header.../>作为头部

    <article.../>可以包含<footer.../>作为尾部

    <article.../>可以包含<section.../>作为文章的分段

    <article.../>可以包含<article.../>作为文章的附属文章

  • <section>：该元素用于对页面上的内容进行分块

    建议使用<h1>-<h6>作为<section.../>的标题

    <section.../>可以包含<article.../>

    <section.../>也可以包含<section.../>

注意：<article.../>和<section.../>很容易混淆，它们可以包含很多子元素，也可以相互嵌套。一般 使用<article.../>表达一篇独立、完整的文章，而使用<section.../>对页面内容进行分块。

  • <nav>：该属性用于定义页面上的“导航条”

  • <aside>：该属性用于定义页面内容的附属信息，推荐此属性配合CSS渲染成侧边栏

  • <header>：该属性主要为<article.../>定义头部信息

  • <hgroup>：该元素组织多个<h1>~<h6>这样的标题元素

  • <footer>：该元素主要为<article>定义脚注信息

  • <figure>：该元素用于表示一块独立的“图片区域”，它可以包含一个或多个由<img>元素组成的图片，除此之外，它还可以包含一个<figcaption>元素，用于表示该图片区域的标题

  • <figcaption>：通常放在<figure>元素里，用于表示图片区域的标题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5新增元素 - article</title>
    </head>
    <body>
        <article>
            <!-- 帖子的“头部” -->
            <header>
                <h1>学习Android，必须先学习Java吗？</h1>
                <div>作者：crazystu</div>
            </header>
            <p>
                学习Android，必须先学习Java吗？
                Android上的应用程序只能用Java编写吗？可以用C++吗？
            </p>
            <!-- 帖子的“回复”部分，用section元素表示 -->
            <section>
                <article>
                    <!-- 回复的头部 -->
                    <header>
                        <h2>还是得学习Java</h2>
                        <div>作者：kongyeeku</div>
                    </header>
                    <p>
                        虽然Android不一定要使用Java开发，还可以选择JavaScript<br />
                        或NDK开发，但Java毕竟是Android主要的开发语言，<br />
                        因此建议学习Android之前还是学习Java
                    </p>
                </article>
                <!-- 每一个article代表一个回复 -->
                <article>
                    <!-- 回复的头部 -->
                    <header>
                        <h2>Java是基础</h2>
                        <div>作者：kuan008</div>
                    </header>
                    <p>
                        Java是基础，学好Java再去学习Android事半功倍。
                    </p>
                </article>
            </section>
            <!-- 帖子的”脚注“ -->
            <footer>
                以上帖子和回复只代表个人观点，不代表疯狂Java联盟的观点或立场
            </footer>
        </article>
    </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5新增元素 - aside</title>
  </head>

  <body>
      <article>
        <!-- 帖子的头部 -->
        <header>
            <h1>学习Android，必须先学习Java吗？</h1>
            <div>作者：crazystu</div>
        </header>
        <p>
            学习Android，必须先学习Java吗？
            Android上的应用程序只能用Java编写吗？可以用C++吗？
        </p>
        <!-- 帖子的“回复”部分，用section元素表示 -->
        <section>
            <!-- 回复的头部 -->
            <header>
                <h2>还是得学习Java</h2>
                <div>作者：kongyeeku</div>
            </header>
            <p>
                虽然Android不一定要使用Java开发，还可以选择JavaScript<br />
                或NDK开发，但Java毕竟是Android主要的开发语言，<br />
                因此建议学习Android之前还是学习Java            
            </p>
        </section>
      </article>
  </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5新增结构元素 - figure</title>
    </head>
    
    <body>
        <figure style="border:2px solid black; padding:5px; width:500px;">
            <figcaption><b>疯狂Java体系图书</b></figcaption>
            <img src="images/java.png" alt="疯狂Java">
            <img src="images/android.png" alt="疯狂Android">
            <img src="images/ee.png" alt="轻量级Java EE">            
        </figure>
    </body>
</html>

2、语义相关元素

HTML5提供了以下两个语义相关的元素：

  • <mark>：用于显示页面中需要重点关注的内容，浏览器通常会使用黄色来标注，比如搜索结果中用户输入的关键字

  • <time>：用于显示被标注的内容是日期、时间或日期时间，该元素有一个datatime属性，用于向机器提供时间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新增的语义相关元素 - mark和time</title>
    </head>
    <body>
        <article>
            <header>
                <h2>疯狂软件即将引入<mark>HTML5</mark>相关课程</h2>
            </header>
            <p>
                <mark>HTML5</mark>是下一代的HTML规范。<br />
                <mark>HTML5</mark>即将把前端开发者从繁重的开发中解放出来<br />
                为了把握技术潮流的脉搏，疯狂软件教育计划在
                <time datetime="2012-04-21">2012年4月</time>引入<mark>HTML5</mark>相关课程
            </p>
        </article>
    </body>
</html>

<detAIls>：用于显示一段详细信息或某个主题的细节，通常它会跟<summary>元素结合使用，把<summary>放在<details>中，为其定义摘要信息，当用户点击摘要信息时，浏览器会显示出详细内容。目前只有Chrome浏览器支持这两个属性

<details>
    <summary>芙蓉镇</summary>
    《芙蓉镇》是一部极好的电影，每个中国人都不应该错过。
</details>

  • <meter>：用于表示一个已知最大值和最小值的计数仪表，它可以指定如下属性：

    value：指定计数仪表的当前值，默认为0

    min：指定计数仪表的最小值，默认为0

    max：指定计数仪表的最大值，默认为1

    low：指定计数仪表制定范围的最小值，它必须大于min

    high：指定计数仪表指定范围的最大值，它必须小于max

    optimum：指定计数仪表有效范围的最佳值

  • <progress>：用于表示一个进度条，它可以指定如下属性：

    max：指定进度条完成时的值

    value：指定进度条当前完成的进度值

四、HTML5头部和元信息

HTML5使用<head.../>元素定义文档头，该元素可以包含如下子元素：

  • <script>：该元素用于包含JavaScript脚本

  • <style>：该元素用于定义内部CSS样式

  • <link>：该元素用于链接外部CSS样式资源

  • <title>：该元素定义文档标题

  • <base>：该元素用于指定该页面中所有链接的基准链接

  • <meta>：该元素用于定义HTML页面的元数据，也就是一些name-value对，它可以指定如下属性

http-equiv：指定元信息的名称

name：指定元信息的名称，可以随意指定

content：指定元信息的值

<head>
    <title>我是标题</title>
    <meta name="author" content="Yeeku.H.Lee">
    <meta name="websit" content="http://www.xxx.org">
    <meta name="copyright" content="2001-2008 xxx.org">
    <meta name="Keywords" content="Java论坛， Java技术论坛">
</head>

http-equiv属性可以指定如下值：

Expires：指定页面的过期时间，一旦过期必须从服务器下载

<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008">

Progma：指定禁止浏览器从本地磁盘缓存中调阅页面内容

<meta http-equiv="Progma" content="no-cache">

Refresh：指定浏览器多长时间后自动刷新指定页面

<!-- 设置2秒后自动刷新本页面 -->
<meta http-equiv="Refresh" content="2" />
<!-- 设置2秒后自动刷新http://www.xxx.org -->
<meta http-equiv="Refresh" content="2;URL= / >

Set-Cookie：设置Cookie，如果网页过期，那么Cookie也将被删除

<meta http-equiv="Set-Cookie" content="name=value expires=Sat Sep 27 16:12:36 CST 2008, path=" />

content-Type：设置该页面的内容类型和所用的字符集

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

五、HTML5新增的拖放API

HTML5新增的拖放API，可以让HTML页面的任意元素变得可以被拖放，通过它可以开发出更友好的人机交互界面

1、启动拖动

在HTML5中，把需要拖动的元素的draggable属性设置为true，就表示它可以被拖动了，但此时它未携带数据，所以用户是看不到效果的，为了让拖动操作能携带数据，应该为被拖动元素的ondragstart事件指定监听器。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>可拖动的DIV</title>
</head>
<body>
<div id="source" style="width:80px;height:80px;border:1px 
solid black;background-color:#bbb;" draggable="true">可拖动的Div</div>

<script>
  var source = document.getElementById('source');
  source.ondragstart = function (evt) {
    evt.dataTransfer.setData('text/plain', 'www.xxx.org');
  } 
</script>
</body>
</html>

2、接受“放”操作

为了让document接受“放”操作，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为

document.ondragover = function (evt) {
  //取消事件的默认行为
  return false;
}

但Firefox和Chrome对此操作有不同的反应，所以需要对document的ondrop事件设置监听器

document.ondrop = function (evt) {
  //取消事件的默认行为
  return false;
}

下表是用户在拖放HTML元素时可能会触发的事件

HTML5中一些常用的元素与属性介绍

下面的代码实现了一个可以自由拖动的<div>元素

<!DOCTYPE html>
<html>
<head>
  <meat charset="utf-8">
  <title></title>
  <style>
    div#source {
      width: 80px;
      height: 80px;
      background-color: #bbb;
    }
  </style>
</head>
<body>
  <div id="source" draggable="true">可拖动Div</div>

  <script>
    var source = document.getElementById('source');
    source.ondragstart = function (evt) {
      evt.dataTransfer.setData('text/plain', 'www.baidu.com');
    }
    document.ondragover = function (evt) {
      return false;   //取消事件默认行为
    }
    document.ondrop = function (evt) {
      source.style.position = 'absolute';
      source.style.left = evt.pageX + 'px';
      source.style.top = evt.pageY + 'px';
      return false;      //取消事件默认行为
    }
  </script>
</body>
</html>
最新文章 相关文章

如何通过HTML/CSS 实现各类进度条的功能

需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用HTML和CSS样式来进行开发进度条功能

2024-10-14 19:55:08

HTML5中使用Noto Sans CJK字体的详细步骤

在HTML5中使用Noto Sans CJK字体的详细指南 在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK 是 Google 提供的一个优秀的免费字体系列，支持中文简体、繁体以及日文

2024-10-14 19:54:41

HTML5表单的自动验证、取消验证、自定义错误信息的操作

1、自动验证通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。 属性 说明 req

2024-10-14 19:54:32

HTML文本域如何设置为禁止用户手动拖动

在HTML中，文本域（textarea）通常允许用户通过拖拽其右下角来调整大小。然而，有时我们可能希望禁止这种手动拖动行为，以固定文本域的大小。要实现这一目标，可以使用CSS的resize属性

2024-10-14 19:54:20

Html去除a标签的默认样式的操作代码

Html去除a标签的默认样式,
a标签超链接字体默认蓝色带下划线;
去除可用:a{ text-decoration:none; color:inherit; cursor:auto;}测试代码<!DOCTYPE html><html la

2024-10-14 19:54:12

HTML、CSS和jQuery：构建一个漂亮的登录表单验证

HTML、CSS和jQuery：构建一个漂亮的登录表单验证在Web开发中，登录表单是一个常见的组件。用户在网站或应用程序中登录时，表单验证是确保安全性和准确性的重要步骤。本文将介绍如

2024-01-24 20:47:22

如何使用HTML和CSS实现一个固定侧边导航栏布局

导航栏是网页布局中非常重要的一部分，固定侧边导航栏布局是一种常见的设计模式。本文将介绍如何使用HTML和CSS来实现一个简单的固定侧边导航栏布局，并提供具体的代码示例。 HT

2024-01-24 20:47:05

如何在HTML中创建嵌套表格？

表格是网络开发的基本和关键方面，用于以有序且清晰的格式呈现信息。然而，在某些情况下可能需要呈现更复杂的数据，从而需要使用嵌套表。嵌套表是位于其他表格单元格内的表。在本

2023-09-09 22:34:31

在HTML中，如何设置拖放数据时是复制、移动还是链接？

使用 dropzone 属性设置是否复制、移动或链接拖动的数据。 复制 - 拖放将创建拖动元素的副本。 移动 - 拖动元素将移动到新位置。 链接 - 它创建指向拖动数据的链接尝试以下

2023-09-06 23:39:49

如何使用HTML5画布将DIV保存为带有扩展名的图像？

DIV 内容可以借助 JavaScript 中的 html2canvas() 函数保存为图像。 DIV 标签定义 HTML 文档中的一个部分。示例<div id = ”cpimg” style = ”padding:

2023-09-06 17:17:50

将HTML中的列数设置为跨度

我们在这篇文章中要执行的任务是在HTML中设置要跨越的列数。当使用<td>元素时，可以通过使用colspan属性来实现。因此，一个单独的表格单元格现在可以跨越多个列或宽度的单元格

2023-09-04 22:26:21

如何在HTML5中添加媒体播放器中使用的文本轨道？

使用 HTML5 中的 标签添加媒体播放器中使用的文本轨道。您可以尝试运行以下代码来了解如何添加 HTML5 媒体播放器中使用的文本轨道 -示例<!DOCTYPE HTML><html> <body>

2023-09-04 22:26:03

在HTML中设置有序列表的起始值？

使用start属性来设置HTML中有序列表的起始值，即：<ol start = " ">在上面添加您想要开始的位置的值。示例您可以尝试运行以下代码来实现start属性 -<!DOCTYPE html><html> <h

2023-09-04 22:23:45

html5手写签名的实现示例

前言业务中需要用户进行签字，如何让用户在手机端进行签字？
示例如下代码已分享至Gitee: https://gitee.com/lengcz/qianmingH5实现手写签字创建一个html页面<!DOCTYPE html><h

2023-07-31 21:51:05

html页面点击按钮实现页面跳转功能

html页面点击按钮实现页面跳转方法1、在button标签外嵌套一个a标签，利用超链接进行跳转；<a href="https://www.baidu.com/" target="_blank"> <button>进入baidu首页</button

2023-07-31 21:50:53

关于input type=&quot;file&quot;的及其files对象的深度解析

我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能但一般的做法只是简单的在表单中操作，我来研究一下深层东西想要了解它，就要知道它的内置对象

2023-07-31 21:50:44

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用

平时有时候用到div和css对网站界面进行重构,经常会用到标签ul ol li dl dt dd ,这些标签常用于列表显示内容.
学会这几个标签的用途,了解一下他们的区别,对网站代码和加载速

2023-05-29 12:03:44

html+css实现div居中的8种方法

水平居中1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;

2023-05-29 12:02:18

html5跟随鼠标炫酷动画欢迎页hovertreewelcome

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页，文字效果渐变，鼠标跟随出绚丽的条纹。html5炫酷网站引导页，鼠标跟随出特效。在线演示效果图index.htm<!DOCTYPE ht

2023-05-29 12:02:10

谈谈HTML注释的语法和应用技巧

HTML是一种非常流行的网页编程语言，它可以让网页变得生动、多彩。在编写HTML代码时，注释起到了至关重要的作用。本文将介绍HTML注释的作用、语法和应用技巧，以指导读者正确地使

2023-04-21 14:35:08

如何使用HTML设置文本格式和样式

HTML是一种标记语言，它被用于在Web浏览器中显示各种文本。使用HTML可以添加各种格式和样式，如插图、链接和列表等。在本文中，我们将介绍如何使用HTML设置文本格式和样式。HTML

2023-04-13 20:51:24

html怎么跳转页面？技巧分享

HTML跳转是指从一个网页链接跳转到另一个网页的过程，也可以是同一个页面内部的跳转，比如从文章的顶部跳转到底部。下面我们一起来看一下HTML跳转的方法和技巧。一、超链接跳转

2023-04-13 20:51:01

html怎么设置图片背景？背景属性介绍

在网页设计中，有时候我们需要使用图片作为背景来美化网页。HTML提供了多种方法来设置图片背景，本文将介绍使用CSS的background属性来设置图片背景的方法。一、使用background-

2023-04-13 20:49:50

几种常见的HTML与PDF转换方法

HTML与PDF是两种常见的文档格式，HTML用于在web浏览器中呈现内容，而PDF用于打印和文档共享。有时我们需要将HTML转换成PDF或将PDF转换成HTML以适应不同的需求。本文将介绍几种

2023-04-13 20:48:38

如何学习修改JS和HTML

Javascript和HTML是网页开发中最基础的两种语言，学习它们，将为你成为一名优秀的网页开发者打下坚实的基础。在本文中，我们将讨论如何学习修改JS和HTML。一、学习HTMLHTML是一种

2023-04-13 20:47:29

HTML5之高度塌陷问题的解决

所谓的高度塌陷，意即当给子元素设置浮动时，其父元素高度会丢失的情况。通过实际代码进行演示：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta ht

2022-06-08 21:58:30

html5+实现plus.io进行拍照和图片等获取

html5+官网地址使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源
说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过

2022-06-08 21:57:06

HTML中实现音乐或视频自动播放案例详解

由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码<audio src="../medio/花海.mp3" loop="loop" controls="contr

2022-05-28 21:18:45

面试中canvas绘制图片模糊图片问题处理

问题：canvas绘制图片，图片变模糊设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。
我拿下面一张

2022-05-10 21:40:46

使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)

该文章已经讲的特别细致了，该篇仅以此记录动效过程中各点的计算。1.feDisplacementMapfeDisplacementMap 实际上是一个位置替换滤镜，就是改变元素和图形的像素位置的。遍历原

2022-04-27 21:47:56

热点内容

网站制作favicon.ico最完美的方式
2020-04-15
html实现随机点名器的示例代码
2021-04-01
HTML中如何显示特殊字符(尖括号 “<”,">")？
2020-09-30
HTML/CSS实现逆序列表（列表编号倒序）
2020-09-30
HTML空（void）元素有哪些？
2019-11-10
自定义美化HTML5 video视频播放器界面样式
2018-08-26
html怎么设置文字向下
2021-02-25
html中隐藏A标签的文字并显示背景图片
2019-10-08
html怎么实现左右滑动导航栏
2020-08-25
html中onclick事件属性定义与用法
2019-10-04
返回顶部
顶部