网站上线流程 配合人员,网站开发实用技术第2版文档,做网站的cnfg,律师免费咨询本文翻译自 21 HTML Tips You Must Know About#xff0c;作者#xff1a;Shefali#xff0c; 略有删改。 在这篇文章中#xff0c;我将分享21个HTML技巧和代码片段#xff0c;可以提高你的编码技能。
链接联系人
使用HTML创建可点击的电子邮件、电话和短信链接#xf… 本文翻译自 21 HTML Tips You Must Know About作者Shefali 略有删改。 在这篇文章中我将分享21个HTML技巧和代码片段可以提高你的编码技能。
链接联系人
使用HTML创建可点击的电子邮件、电话和短信链接
!-- Email link --
a hrefmailto:nameexample.com Send Email /a!-- Phone call link --
a hreftel:1234567890 Call Us /a!-- SMS link --
a hrefsms:1234567890 Send SMS /a创建可折叠内容
如果您想在网页上包含可折叠内容可以使用details和summary标签。
details标签为隐藏内容创建了一个容器而summary标签提供了一个可点击的标签来切换该内容的可见性。
detailssummaryClick to expand/summarypThis content can be expanded or collapsed./p
/details使用语义化元素
为您的网站选择语义元素而不是非语义元素。使您的代码更有意义并改善结构可访问性和SEO。 表单元素
使用fieldset标签将表单中的相关元素分组使用legend标签和fieldset标签为fieldset标签定义标题。
这对于创建更有效和更易于访问的表单非常有用。
formfieldsetlegendPersonal details/legendlabel forfirstnameFirst name:/labelinput typetext idfirstname namefirstname /label foremailEmail:/labelinput typeemail idemail nameemail /label forcontactContact:/labelinput typetext idcontact namecontact /input typebutton valueSubmit //fieldset
/form增强下拉菜单
您可以使用optgroup标签将相关选项分组到select HTML标签中。当您使用大的菜单或一个长的选项列表时可以使用此选项。
selectoptgroup labelFruitsoptionApple/optionoptionBanana/optionoptionMango/option/optgroupoptgroup labelVegetablesoptionTomato/optionoptionBroccoli/optionoptionCarrot/option/optgroup
/select改善视频演示
poster属性可以与video元素一起使用以显示图像直到用户播放视频。
video controls posterimage.png width500source srcvideo.mp4 typevideo/mp4 /
/video支持多选下拉
您可以将multiple属性与input和select元素一起使用以允许用户一次选择/输入multiple值。
input typefile multiple /
select multipleoption valuejavaJava/optionoption valuejavascriptJavaScript/optionoption valuetypescriptTypeScript/optionoption valuerustRust/option
/select将文本显示为下标和上标
sub和sup元素可分别用于将文本显示为下标和上标。 创建下载链接
您可以将download属性与a元素一起使用以指定当用户单击链接时链接的资源会被下载而不会跳转地址。
a hrefdocument.pdf downloaddocument.pdf Download PDF /a定义相对链接的base URL
您可以使用base标记为网页中的所有相对URL定义base URL。
当你想为网页上的所有相对URL创建一个共享的 base URL 时这可以更容易地导航和加载资源。
headbase hrefhttps://shefali.dev target_blank /
/head
bodya href/blogBlogs/aa href/get-in-touchContact/a
/body控制图像加载
带有loading元素的img属性可用于控制浏览器如何加载图像。它有三个值“eager”“lazy”和“auto”。
img srcpicture.jpg loadinglazy控制翻译功能
您可以使用translate属性来指定元素的内容是否应该由浏览器的翻译功能进行翻译。
p translateno这段文字不需要翻译。
/p设置最大输入长度
通过使用maxlength属性您可以设置用户在输入字段中输入的最大字符数。
input typetext maxlength4设置最小输入长度
通过使用minlength属性您可以设置用户在输入字段中输入的最小字符数。
input typetext minlength3启用内容编辑
使用contenteditable属性指定元素的内容是否可编辑。它允许用户修改元素中的内容。
div contenteditabletrue你可以编辑这段文字
/div控制拼写检查
您可以将spellcheck属性与input元素、内容可编辑元素和textarea元素一起使用以启用或禁用浏览器的拼写检查。
input typetext spellchecktrue/无障碍访问
alt属性指定图像无法显示时的替代文本。始终为图片添加描述性的 alt 属性以提高可访问性和搜索引擎优化。
img srcpicture.jpg altDescription for the image设置跳转链接的目标行为
您可以使用target属性指定单击链接资源时的交互行为。
!-- 这是默认值在当前浏览器窗口或标签页中打开链接 --
a hrefhttps://shefali.dev target_selfOpen/a!-- 在一个新的浏览器窗口或标签页中打开链接 --
a hrefhttps://shefali.dev target_blankOpen/a!-- 在父标签页中打开链接如果存在的话 --
a hrefhttps://shefali.dev target_parentOpen/a!-- 在完整的浏览器窗口中打开链接 --
a hrefhttps://shefali.dev target_topOpen/a!-- 自定义如果存在具有相同名称的窗口或标签页则在该窗口中打开链接否则会创建一个新的窗口或标签页 --
a hrefhttps://shefali.dev targetframenameOpen/a展示附加信息
当用户将鼠标悬停在某个元素上时可以使用title属性提供有关该元素的附加信息。
p titleWorld Health OrganizationWHO/p接受特定文件类型
您可以使用accept属性指定服务器接受的文件类型仅适用于文件类型。它与input元素一起使用。
input typefile acceptimage/png, image/jpeg /优化视频加载
您可以通过使用带有preload元素的video属性来加快视频文件的加载速度以实现更流畅的播放。
video srcvideo.mp4 preloadautoYour browser does not support the video tag.
/video最后
今天分享的文章到此结束了21个html小技巧希望对你有帮助欢迎留言你知道的更多优化小技巧~ 看完本文如果觉得有用记得点个赞支持收藏起来说不定哪天就用上啦
专注前端开发分享前端相关技术干货公众号南城大前端ID: nanchengfe
