HTML 技巧

1.用于内联编辑的 contenteditable 属性

前端常用的输入文本内容便是input与textarea，但是有一些他们有一些局限性，比如input只能输入一行，textarea虽然可以通过设置rows属性来动态调整高度，但是他们都不能存在多种格式的内容，更不能有标签一样样式了。
浏览器对于一些dom元素有一个属性contenteditable可以快速将该元素变成可编辑的输入框

<div id="myInput" contenteditable="true">   
    这是一个子段落
</div>

contenteditable的缺陷

• 样式难以控制：使用 contentEditable 属性时，用户可以自由编辑文本内容，这可能会导致样式混乱或不一致，尤其在不同浏览器之间表现可能会有所不同。
• 操作dom困难，通过选区range操作选中区域进行修改元素来改变样式，会使编辑器内部元素结构混乱，没有一套标准，或者这套标准会一些缺陷
• 安全性问题：开启 contentEditable 属性可能会带来安全隐患，因为用户可以插入不安全的脚本代码或其他恶意内容，从而导致跨站脚本攻击（XSS）等安全漏洞。
• 兼容性问题：不同浏览器对 contentEditable 属性的支持程度各不相同，可能会导致页面在不同浏览器上表现不一致或出现兼容性问题。
• 性能问题：当页面中有大量元素设置为可编辑时，可能会影响页面的性能，导致页面加载缓慢或卡顿。
• 可访问性问题：对于一些特殊用户群体（如视力受损或使用辅助技术的用户），contentEditable 可能会影响页面的可访问性，导致他们无法正常使用页面。

市面上的很多编辑器其实就是基于contenteditable的属性封装改编的。

2. <input>属性

当用户在填写表格时，要确保他们提供了正确的信息。与其编写大量 JavaScript 代码，HTML5 有内置的方法可以检查这一点。可以使用 required、pattern 或 type="email" 等属性。

<form>
  <input type="email" required placeholder="Enter your email">
  <input type="text" pattern="[A-Za-z]+" title="Only letters allowed">
</form>

3.隐藏属性

有时，想隐藏页面上的某些内容，但又不想删除它。

<div hidden>这是隐藏的内容。。。</div>

4.inputmode 属性

通过 inputmode 属性，可以控制用户在移动设备上输入时看到的键盘。例如，如果想让用户输入数字，就可以确保他们获得数字键盘。

<input type="text" inputmode="numeric" placeholder="仅支持输入数字">

• "none"无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
• "text"使用用户本地区域设置的标准文本输入键盘。
• "decimal"小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。
• "numeric"数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
• "tel"电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。
• "search"为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。
• "email"为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email"> 。
• "url"为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url"> 。
• 如果没有设置这个属性，它的默认值是 "text"，表明使用本地的标准文本输入键盘。

5.  <datalist> 元素

• <datalist> 标签为 <input> 元素规定预定义选项的列表。
• <datalist> 标签用于为 <input> 元素提供“自动完成”功能。用户在输入数据时，将看到预定义选项的下拉列表。
• <datalist> 元素的 id 属性必须等于 <input> 元素的 list 属性（这会把它们绑定在一起）。

<label for="browser">请从列表中选择您的浏览器：</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

6.控制浏览器行为的 http-equiv 属性

<meta http-equiv="refresh" content="30">

让页面自己刷新，比如在新闻或天气网站上

原文地址：https://blog.csdn.net/liuxiaoqi_123/article/details/142751429

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！