HTML实用技巧

最新推荐文章于 2022-10-06 11:00:37 发布
最新推荐文章于 2022-10-06 11:00:37 发布
阅读量87 收藏
点赞数
文章标签： html5
原文链接：https://markodenic.com/html-tips/
版权

这是一篇翻译文章，原文地址https://markodenic.com/html-tips/

  1. loading=lazy 属性
    性能技巧。使用loading=lazy属性去延迟加载图片，当用户滚动到图片位置时再加载图片。
<img src='image.jpg' loading='lazy' alt='Alternative Text'>
  1. 点击发邮件，打电话和发短信
<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>
  1. 有序列表的start属性
    在这里插入图片描述
  2. meter 元素
    你可以使用元素去展示数量，而不用js/css。
    在这里插入图片描述
  3. HTML原生搜索
    在这里插入图片描述
  4. fieldset元素
    You can use the element to group several controls as well as labels (
  5. Window.opener
    使用target="_blank"打开的新页面可以通过window.opener获得原来的页面。这可能会有安全和性能问题。可以通过设置rel="noopener"或rel="noreferrer"解决
<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>
  1. base元素
    可以使用base元素让所有的链接都在新的tab页打开，而不用去单独设置target="_blank"
<head>
   <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/">
    Free Code Tools
  </a>

  <p>
    Read more: <br><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
    MDN Documentation
    </a>
  </p>
</div>
  1. 刷新Favicon缓存
    要刷新网站的图标，你可以通过在文件名中添加?v=2来迫使浏览器下载一个新版本。
    这在生产环境中特别有用，可以确保用户获得新版本。
<link rel="icon" href="/favicon.ico?v=2" />
  1. spellcheck属性
    使用spellcheck属性定义是否可以检查元素的拼写错误。
    在这里插入图片描述
  2. 原生的HTML滑块
    使用创建滑块
    在这里插入图片描述
  3. HTML手风琴
    使用details元素创建HTML原生手风琴。
    在这里插入图片描述
  4. mark元素
    使用<mark>标签去高亮文本
    在这里插入图片描述
  5. download属性
    您可以在链接中使用download属性来下载文件，而不是导航到它。
<a href='path/to/file' download>
  Download
</a>
  1. 性能技巧
    使用.webp图像格式可以使图像更小，提高网站的性能。
<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture>
  1. 视频缩略图
    使用poster属性指定在视频下载时或用户点击播放按钮之前显示的图像。
<video poster="path/to/image">
  1. 原生搜索框
    使用type="search"把input变成搜索框
    在这里插入图片描述
轩辕啸天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
22个HTML5实用技巧
07-22
资源名称：22个HTML5实用技巧内容简介：HTML5 技巧一：当今科技发展的速度真惊人，稍不留神，就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜，我们将通过这篇文章向大家介绍一些HTML...
HTML使用技巧
07-30
HTML（HyperText Markup Language）是构建网页的基础语言，它的使用技巧是每个Web开发者必须掌握的核心技能。本篇文章将深入探讨一些HTML的实用技巧，帮助你更高效、更专业地创建和优化网页。 一、结构化文档 HTML...
HTML常用技巧
牛先森家的博客
06-02 157
HTML常用代码之：你不一定知道的技巧 将彻底屏蔽鼠标右键 ncontextmenu="window.event.returnValue=false" 可用于Table <table borderncontextmenu=return(false)><td>no</table> 取消选取、防止复制 <body nselectstart="retur...
8 个你可能不知道的 HTML 实用技巧
weixin_53999350的博客
10-06 227
会阻止浏览器翻译该内容。如果你不想翻译某个短语或单词，例如logo、公司或品牌名称，那就可以应用这个属性。属性，我们可以在视频加载时，或者在用户点击播放按钮之前，显示指定的缩略图。属性一样，我们也可以通过一些属性打开移动设备的摄像头以捕获图像。如果是电子邮件，则可以用逗号分隔。如果你希望在单击目标资源的链接时下载特定资源，那就添加。如果不指定图片，则默认使用视频的第一帧作为缩略图。这是一个标准属性，得到了大多数浏览器的支持。标签中指定允许用户上传的文件类型。属性指定待检查的语言。你可以使用HTML的。
HTML小技巧的一些小技巧
师远鹏
07-16 8216
1.怎样定义网页语言(字符集)?             在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以在HTML代码状态下找到:     把charset=gb2312改换成其它语言代码即可,比如英文harset=en.  2.怎样防止别人把你的网页放到框架里?
HTML实用小技巧
weixin_44460923的博客
12-10 258
html新手查漏补缺
html技巧
yangleibao的专栏
03-22 518
　　event.srcElement.tagName 　　event.srcElement.type 　　捕获释放 　　event.srcElement.setCapture();  　　event.srcElement.releaseCapture();  　　事件按键 　　event.keyCode 　　event.shiftKey 　　event.altKey 　　event.ctrlKey
HTML的复用技巧
12-13
HTML的复用技巧是网页开发中的一个重要概念，它旨在提高代码效率，减少重复编写相同或相似HTML代码的情况。由于早期的HTML文档不支持嵌套，开发者必须采用特定的方法来实现代码复用。以下是对这两种主要复用技术的...
html js的一些实用技巧
07-28
以下是一些关于"html js的一些实用技巧"的详细知识，这些技巧对于初学者来说尤其有价值。 1. **DOM4J**: DOM4J是一个Java库，用于处理XML文档。`dom4j目前最好据说.doc`可能详细介绍了DOM4J的高效性和灵活性，如...
java + html 编程技巧
最新发布
01-07
将Java与HTML结合使用，可以构建出功能强大的Web应用程序。本篇将深入探讨Java与HTML编程的一些关键技巧，帮助你提升开发效率和应用质量。 1. **Java基础知识**：Java是一种面向对象的语言，其特性包括平台独立性、...
HTML技巧
SUNOVO_S的博客
10-27 469
HTML技巧 1.上下居中 1.1 行高等于高度，即height=line-height /*1.居中方法一:模块高等于外层模块的高 设置文本 //height=line-height #box h1{ text-align: center; line-height: 300px; }*/ 1.2 让明确宽高的盒子水平垂直居中于父元素 /*2.（让明确宽高的盒子水平垂直居中于父元素，父元素需要有宽高）*/ #box h1{ width: 150px;
html小技巧
xuriliangjava的专栏
09-02 349
1、文件域file美化<input id="file" type="file">浏览器自带的文件域在各个浏览器展现不一致，并且不美观。通常我们需要自定义上传按钮的样式。方案1：文件域设置为透明，自定义按钮的样式刚好覆盖到上面。方案2：使用js来实现，绑定新按钮的点击事件，触发文本域的点击事件。<button onclick="document.getElementById("file").click
15-CSS样式设置技巧
蔷薇岛少年的博客
06-20 6327
15-1 水平居中设置——行内元素我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素
html小技巧（更新中。。。）
baidu_33548663的博客
08-02 743
1.margin padding 失效 inline水平元素的垂直margin是无效的！ 比如：&lt;span&gt;文字文字&lt;/span&gt; 此时，span是inline水平元素，此时对span进行margin会无效，img等例外的替换元素不算！ 解决方法：声明下display:inline-block行内块元素，或者换行display:block. 2. ul li 下的...
html技巧总结
文松杂谈
02-10 574
html技巧总结： 1. 显示代码：代码部分 2. 表格： table默认无边框，有间距，有边距 标题，位于表格上面居中显示 表头，加粗和td同级 跨行 跨列 能不能css来解决，html页面保存整洁，研究css的时候再考虑下 3. 文字滚动标签 marquee滚动效果 marquee滚动效果 body { } .scr
HTML——小技巧总结
soyanzhong的博客
11-23 1150
1、让超链接线面的下划线消失——”text-decoration:none” eg. <a style="text-decoration: none" class="test" href="http:\\www.baidu.com" target="_self">1231</a>效果：当鼠标放在该标签上时，“1231”内容不会有下划线出现
HTML5的22小技巧
DLQFHL的博客
06-24 282
1. 新的文档类型（Doctype） <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 上面这个既麻烦又难记的XHTML文档类型你还在使用吗？ 如果还是这样的话，现在该切换到新的HTML5文...
html 常用小技巧
前端博客
01-14 772
oncontextmenu=“window.event.returnValue=false” 将彻底屏蔽鼠标右键 no 可用于Table 2. 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. IE地址栏前换成自己的图标 6. 可以在收藏夹中显示...
ASP.NET MVC中HtmlHelper的使用技巧
这个方法用于开启一个表单，与@Html.EndForm()配合使用，形成完整的表单结构。可以指定控制器、动作和提交方法： ```html @Html.BeginForm("Action", "Controller", FormMethod.Post) @Html.EndForm() ``` 3. @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值