网站注册的账号怎么注销,如何百度推广,wordpress同步到微博,给企业做网站link 标签的主要属性及其作用
属性是否必填作用描述示例值rel是定义当前文档与链接资源的关系#xff08;必须属性#xff09;。常见值#xff1a;stylesheet, icon, preload, preconnect 等。relstylesheet reliconhref是指定链接资源的URL。href…link 标签的主要属性及其作用
属性是否必填作用描述示例值rel是定义当前文档与链接资源的关系必须属性。常见值stylesheet, icon, preload, preconnect 等。relstylesheet reliconhref是指定链接资源的URL。hrefstyles.css hrefhttps://example.com/icon.pngtype否指定链接资源的MIME类型。浏览器可能根据资源自动推断但建议明确指定。typetext/css typeimage/pngmedia否规定资源适用的设备/媒体类型如屏幕、打印等。mediascreen mediaprint and (max-width: 600px)sizes否当 relicon 时指定图标尺寸格式高度x宽度 或 any。sizes32x32 sizesanycrossorigin否定义请求资源的跨域模式CORS。可选值anonymous默认、use-credentials。crossoriginanonymousintegrity否提供资源的哈希值用于验证资源完整性防止篡改。格式sha384-...。integritysha384-oqVu...3Vgreferrerpolicy否控制请求资源时发送的Referer信息。可选值no-referrer, origin, unsafe-url 等。referrerpolicyno-referrerhreflang否指定链接资源的语言如 en, zh-CN。hreflangentitle否为链接资源提供额外信息常用于定义可选的样式表如 relalternate stylesheet。titleDark Theme
核心属性
1.rel 作用定义当前文档与链接资源的关系必填属性。 常见值 stylesheet链接 CSS 样式表最常用 icon链接网站图标如 Favicon preload预加载关键资源需配合 as 属性 preconnect提前与目标服务器建立连接优化性能 alternate链接到页面的替代版本如 RSS 订阅、多语言页面 canonical指定页面的规范 URLSEO 优化 manifest链接 Web 应用清单PWA 配置 示例 link relstylesheet hrefstyles.css
link relicon hreffavicon.ico rel 属性值分类表格
分类rel 值作用描述示例资源加载stylesheet链接外部CSS样式表。link relstylesheet hrefstyles.csspreload预加载关键资源需配合 as 属性指定类型。link relpreload hreffont.woff2 asfontprefetch预取未来可能需要的资源如下一页内容。link relprefetch hrefnext-page.htmlpreconnect提前与目标服务器建立连接DNS解析、TCP握手等。link relpreconnect hrefhttps://fonts.googleapis.comdns-prefetch提前解析目标域名的DNS性能优化。link reldns-prefetch href//cdn.example.commodulepreload预加载ES模块脚本。link relmodulepreload hrefapp.js图标与图片icon定义页面图标如Favicon。link relicon hreffavicon.ico typeimage/x-iconapple-touch-icon为iOS设备定义主屏幕图标。link relapple-touch-icon hrefapple-icon.png sizes180x180manifest链接Web应用清单PWA配置。link relmanifest href/site.webmanifestSEO与导航canonical指定页面的规范URL防止重复内容SEO问题。link relcanonical hrefhttps://example.com/main-pagealternate链接到页面的其他语言版本或其他格式如PDF。link relalternate hreflanges hrefhttps://example.com/es/prev / next定义分页导航的前一页或下一页。link relprev hrefpage1.html文档关系author链接到页面作者的介绍页面。link relauthor hrefhttps://example.com/aboutlicense链接到页面内容的许可证信息。link rellicense hrefhttps://creativecommons.org/licenses/by/4.0/help链接到帮助文档。link relhelp href/help.html交互与功能search链接到页面的搜索接口用于浏览器或插件集成。link relsearch href/search.xml typeapplication/opensearchdescriptionxmlnofollow告知搜索引擎不要追踪此链接通常用于用户生成内容。a href... relnofollow.../a注更多用于 a 标签安全与权限noopener防止通过 target_blank 打开的页面访问原页面的window.opener安全防护。a href... relnoopener.../a注更多用于 a 标签noreferrer请求资源时不发送Referer头隐私保护。a href... relnoreferrer.../a同上特殊用途pingback定义接收Pingback通知的服务器地址博客评论跟踪。link relpingback hrefhttps://example.com/xmlrpc.phpserviceworker注册Service WorkerPWA核心功能。link relserviceworker href/sw.js scope/
2.href 作用指定链接资源的 URL必填属性。 示例 link hrefprint.css relstylesheet mediaprint
资源类型与适配
3.type 作用指定资源的 MIME 类型非必需但建议显式声明。 常见值 text/cssCSS 文件。 image/x-iconICO 格式图标。 image/pngPNG 格式图标。 示例 link relstylesheet hreftheme.css typetext/css
4.media 作用指定资源适用的媒体/设备类型如屏幕、打印。 常用值 screen默认屏幕设备。 print打印预览模式。 媒体查询表达式如 (max-width: 600px)。 示例 link relstylesheet hrefmobile.css mediascreen and (max-width: 480px)
5.sizes 作用指定图标尺寸仅当 relicon 时有效。 格式 高度x宽度如 32x32。 any适配任意尺寸。 示例 link relicon hreficon-32.png sizes32x32
性能与安全
6.as 作用配合 relpreload 使用声明预加载资源的类型必需 常见值 scriptJavaScript 文件。 styleCSS 文件。 font字体文件。 image图片文件。 示例 link relpreload hreffont.woff2 asfont crossorigin
7.crossorigin 作用控制跨域请求的 CORS 配置。 值 anonymous不带凭据的请求默认。 use-credentials带凭据的请求如 Cookies。 示例 link relpreconnect hrefhttps://fonts.gstatic.com crossorigin
8.integrity 作用提供资源的哈希值用于验证完整性防止篡改。 格式sha256-...、sha384-...、sha512-...。 示例 link relstylesheet hrefhttps://cdn.example.com/lib.css integritysha384-oqVuAfXRKap...
9.referrerpolicy控制请求资源时发送的 Referer 头信息隐私保护。 作用 值no-referrer、origin、unsafe-url 等。 示例 link relstylesheet hrefthird-party.css referrerpolicyno-referrer
其他属性
10.hreflang 作用指定链接资源的语言如多语言页面。 示例 link relalternate hreflanges hrefhttps://example.com/es/
11.title 作用为链接资源提供额外描述如可切换的备用样式表。 示例 link relalternate stylesheet hrefdark.css titleDark Mode
12.disabled 作用禁用当前样式表需通过 JavaScript 动态操作。 示例 link relstylesheet hreftheme.css disabled
link 常见用途示例
1. 引入 CSS 样式表
link relstylesheet hrefstyles.css typetext/css mediascreen
2. 设置网站图标
link relicon hreffavicon.ico typeimage/x-icon sizes32x32
3. 预加载关键资源
link relpreload hrefhero-image.jpg asimage media(min-width: 800px)
4. SEO 规范链接
link relcanonical hrefhttps://example.com/main-page
link 注意事项 必填属性rel 和 href 必须同时存在。 性能优化 使用 preload 预加载关键资源但避免过度预加载。 结合 media 属性按需加载响应式样式。 安全性 对第三方资源使用 integrity crossorigin 防止篡改。 兼容性 preload 和 modulepreload 需现代浏览器支持IE 不支持。
link中referrerpolicy关于Referer补充
Referer来源信息 是 HTTP 请求头中的一个字段用于表示当前请求是从哪个页面或资源链接过来的。它是浏览器自动发送给服务器的一个信息帮助服务器了解用户的访问路径
核心概念 拼写问题 正确英文应为 Referrer但在 HTTP 标准中因历史错误拼写为 Referer少一个 r并沿用至今。 作用 告诉服务器用户是从哪个页面跳转过来的例如 用户点击网页 A 的链接打开网页 B则访问 B 的请求头中会包含 Referer: A的URL。 服务器可根据此信息进行流量分析、防盗链、安全验证等。 常见用途
场景说明流量统计分析用户来源如广告点击、外部引荐帮助优化营销策略。防盗链Hotlink阻止其他网站直接引用你的资源如图片、文件仅允许特定来源访问。安全验证检查请求是否来自合法页面如防止跨站请求伪造攻击。调试与日志记录用户行为路径辅助排查问题。
隐私与安全
1.隐私风险 Referer 可能泄露用户的浏览历史如 URL 中包含敏感信息。 例如从 https://example.com/user-profile 跳转的请求会暴露用户个人页面的 URL。
2.浏览器保护机制
Referrer-Policy通过 HTTP 头或 HTML 属性控制 Referer 的发送范围。
!-- 完全禁止发送 Referer --
meta namereferrer contentno-referrer
!-- 仅发送来源域名不包含路径 --
meta namereferrer contentorigin
3.安全场景限制从 HTTPS 页面跳转到 HTTP 页面时浏览器默认不发送 Referer防止敏感信息泄露
Referer 的发送规则
策略Referrer-Policy行为no-referrer完全不发送 Referer 信息。origin仅发送来源页面的域名如 https://example.com。strict-origin仅在 HTTPS→HTTPS 请求中发送来源域名。unsafe-url发送完整 URL包含路径和参数可能导致隐私泄露。
开发者注意事项
1.防盗链配置
在服务器如 Nginx中检查 Referer 头阻止非法来源访问资源
location /images/ {valid_referers none blocked example.com *.example.org;if ($invalid_referer) {return 403;}
}
2.控制 Referer 发送通过 HTML 或 HTTP 头设置策略
!-- 在 HTML 中设置 --
meta namereferrer contentorigin
3.调试工具查看使用浏览器开发者工具的 Network 面板查看请求头中的 Referer 字段
script 标签的主要属性及其作用
属性是否必需作用描述示例值注意事项src否指定外部 JavaScript 文件的 URL。srcapp.js srchttps://example.com/script.js与内联脚本互斥若同时存在内联代码会被忽略。type否定义脚本类型默认 text/javascript。支持 module、importmap 等现代类型。typemodule typeapplication/jsontypemodule 表示 ES6 模块需浏览器支持非标准类型需配合工具使用。async否异步加载脚本下载完成后立即执行不阻塞 HTML 解析。async仅对外部脚本有效多个 async 脚本执行顺序不确定。defer否延迟脚本执行直到 HTML 解析完成后按声明顺序执行。defer仅对外部脚本有效与 async 同时存在时async 优先。crossorigin否控制跨域请求的 CORS 配置可选 anonymous 或 use-credentials。crossoriginanonymous需与 integrity 配合使用以验证资源完整性。integrity否提供脚本的哈希值用于验证资源完整性格式如 sha384-...。integritysha384-oqVuAfXRKap...哈希不匹配时浏览器会拒绝执行需启用 CORS通过 crossorigin。nomodule否仅在不支持 ES6 模块的浏览器中执行用于回退兼容。nomodule现代浏览器会忽略此脚本需配合 typemodule 使用。referrerpolicy否控制请求时发送的 Referer 头信息可选 no-referrer、origin 等。referrerpolicyno-referrer适用于隐私保护场景如第三方脚本。charset否已废弃指定外部脚本的字符编码如 UTF-8。charsetUTF-8现代浏览器通常忽略此属性推荐通过 HTTP 头或 meta 标签设置编码。language否已废弃早期用于声明脚本语言如 JavaScript。languageJavaScriptHTML5 已废弃由 type 属性替代。
script 关键属性对比
属性组合加载行为执行顺序适用场景无 async/defer立即加载并执行阻塞 HTML 解析。按文档顺序立即执行。需立即操作的脚本如 DOM 操作。async异步加载加载完成后立即执行。执行顺序不确定。独立无依赖脚本如统计代码。defer异步加载HTML 解析完成后按声明顺序执行。按文档顺序延迟执行。依赖 DOM 或有严格顺序要求的脚本。typemodule默认启用 defer可显式添加 async。类似 defer 或 async。ES6 模块化开发。
1.src 作用指定外部 JavaScript 文件的 URL。 是否必需可选如果省略需在标签内直接编写代码。 示例 script srcapp.js/script 注意 如果同时使用 src 和标签内代码内联代码会被忽略。 可以是绝对路径或相对路径。
2.type 作用定义脚本的 MIME 类型或模块类型。 常见值 text/javascript默认值可省略。 module表示脚本为 ES6 模块支持 import/export。 importmap定义模块导入映射需现代浏览器支持。 application/json内联 JSON 数据非可执行脚本。 示例 script typemodule srcmodule.js/script 注意 旧浏览器可能不支持 module 类型需结合 nomodule 回退。 非标准类型如 text/coffeescript需配合解析工具使用。
3.async 作用异步加载并执行脚本不阻塞 HTML 解析。 值布尔属性存在即生效。 示例 script async srcanalytics.js/script 注意 仅对 src 引入的外部脚本有效。 执行顺序不确定适用于无依赖的脚本如统计代码。
4.defer 作用延迟脚本执行直到 HTML 解析完成后、DOMContentLoaded 事件前执行。 值布尔属性存在即生效。 示例 script defer srcmain.js/script 注意 仅对 src 引入的外部脚本有效。 多个 defer 脚本按声明顺序执行。 与 async 不可同时使用若同时存在async 优先
5.crossorigin 作用控制跨域请求的 CORS 设置。 值 anonymous请求不带凭据默认。 use-credentials请求带凭据如 Cookie。 示例 script crossoriginanonymous srchttps://cdn.example.com/lib.js/script 注意 需配合 integrity 属性验证资源完整性时使用。 若跨域脚本未启用 CORS可能无法捕获错误详情。
6.integrity 作用提供脚本的哈希值验证资源完整性防止篡改。 格式sha256-...、sha384-...、sha512-...。 示例 script integritysha384-oqVuAfXRKap... srchttps://cdn.example.com/lib.js/script 注意 需与 crossorigin 属性一起使用。 若哈希不匹配浏览器会拒绝执行脚本。
7.nomodule 作用在支持 ES6 模块的浏览器中跳过此脚本用于旧浏览器回退。 值布尔属性存在即生效。 示例 script nomodule srclegacy.js/script
script typemodule srcmodern.js/script 注意 现代浏览器会忽略带有 nomodule 的脚本。 用于为旧浏览器提供兼容代码。
8.referrerpolicy 作用控制请求脚本时发送的 Referer 头信息。 值no-referrer、origin、unsafe-url 等。 示例 script referrerpolicyno-referrer srchttps://third-party.com/script.js/script 注意 适用于需要保护用户隐私的场景如第三方脚本。
9.script 补充说明
9.1 执行顺序控制 无 async/defer立即加载并执行阻塞 HTML 解析。 async异步加载加载完成后立即执行执行顺序不确定。 defer异步加载按声明顺序在 DOM 就绪后执行。
9.2 模块化开发
!-- 现代浏览器执行此脚本 --
script typemodule srcapp.js/script
!-- 旧浏览器执行此脚本 --
script nomodule srclegacy.js/script
9.3 安全性建议 使用 integrity crossorigin 增强第三方脚本的安全性。 避免内联脚本中的敏感数据如 API 密钥。
9.4 性能优化 将脚本放在 body 底部或使用 defer/async 减少阻塞。 预加载关键脚本 link relpreload hrefcritical.js asscript
meta标签的作用
meta 标签用于定义 HTML 文档的元数据metadata不会直接显示在页面上但为浏览器、搜索引擎和其他服务提供关键信息例如字符编码、视口设置、SEO 优化等;
核心属性总表
属性作用值类型示例注意事项charset定义文档的字符编码字符编码名称如 UTF-8、ISO-8859-1meta charsetUTF-8必须放在文档头部且一个文档只能有一个 charset。name定义元数据的名称与 content 配合使用预定义或自定义的元数据名称如 viewport, descriptionmeta nameviewport contentwidthdevice-width常见名称见下方详细表格。content定义元数据的具体内容与 name 或 http-equiv 配合使用根据 name 或 http-equiv 的值决定内容格式meta namedescription content这是一个示例页面必须与 name 或 http-equiv 同时使用。http-equiv模拟 HTTP 响应头的功能如刷新页面、兼容性设置预定义的 HTTP 头名称如 refresh, X-UA-Compatiblemeta http-equivrefresh content5部分功能已被现代浏览器废弃如 set-cookie。
charset 属性HTML5 推荐方式
属性值说明charsetUTF-8现代标准编码支持所有语言和符号推荐使用。charsetISO-8859-1拉丁字母编码如英文、西欧语言逐渐被 UTF-8 取代。charsetGBK汉字扩展编码支持简体中文和部分繁体中文。charsetGB2312早期简体中文字符集GBK 的子集。charsetBIG5繁体中文字符集用于台湾、香港地区。charsetUTF-1616 位编码存在大小端问题兼容性较差不推荐。
name 属性详细值表
name 值作用content 值格式示例viewport控制移动端视口行为widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalablenometa nameviewport contentwidthdevice-width, initial-scale1.0description页面描述SEO 优化文本建议 150 字符以内meta namedescription content学习前端开发的教程keywords页面关键词SEO 优化逗号分隔的关键词列表meta namekeywords contentHTML, CSS, JavaScriptrobots控制搜索引擎爬虫行为index/noindex, follow/nofollow, noarchive 等组合meta namerobots contentindex, followauthor声明页面作者作者姓名或联系方式meta nameauthor contentJohn Doegenerator声明页面生成工具如 CMS 系统工具名称meta namegenerator contentWordPressreferrer控制 Referer 信息的发送no-referrer, origin, unsafe-url 等meta namereferrer contentno-referrertheme-color设置浏览器地址栏或 PWA 主题颜色颜色值十六进制或 CSS 颜色名meta nametheme-color content#4285f4format-detection禁用移动端自动识别如电话号码、邮箱telephoneno, emailno, datenometa nameformat-detection contenttelephoneno
常见 name 属性与 content 值对照表
name 属性content 值示例说明descriptioncontent页面描述内容网页描述用于SEO优化。keywordscontent关键词1, 关键词2, 关键词3网页关键词逗号分隔对SEO作用已减弱。authorcontent作者名声明页面作者。viewportcontentwidthdevice-width, initial-scale1.0控制移动端视口缩放必填。robotscontentindex, follow控制搜索引擎爬虫行为index/noindex, follow/nofollow等。theme-colorcontent#ffffff设置浏览器主题颜色支持十六进制或RGB。generatorcontentWordPress 6.0声明页面生成工具。og:titlecontent社交媒体标题Open Graph协议用于社交媒体分享标题如Facebook。og:descriptioncontent社交媒体描述Open Graph协议用于社交媒体分享描述。twitter:cardcontentsummary_large_imageTwitter卡片类型控制分享显示样式。
常见 http-equiv 属性与 content 值对照表
http-equiv 属性content 值示例说明refreshcontent5; urlhttps://example.com页面自动刷新或跳转5为秒数可省略URL仅刷新。Content-Typecontenttext/html; charsetUTF-8声明文档类型和字符编码HTML5已推荐改用 meta charset。X-UA-CompatiblecontentIEedge强制IE使用最新内核渲染页面。Content-Security-Policycontentdefault-src self内容安全策略CSP限制资源加载来源。default-stylecontent样式表标题指定页面默认样式表需配合 link 使用。
http-equiv 属性详细值表
http-equiv 值作用content 值格式示例refresh自动刷新或跳转页面秒数;url目标地址meta http-equivrefresh content5; urlhttps://example.comX-UA-Compatible强制 IE 使用指定渲染模式IEedge使用最新引擎meta http-equivX-UA-Compatible contentIEedgeContent-Security-Policy定义内容安全策略CSP策略指令如 default-src selfmeta http-equivContent-Security-Policy contentscript-src selfContent-Type声明文档类型和字符编码已废弃推荐用 charsettext/html; charsetUTF-8meta http-equivContent-Type contenttext/html; charsetUTF-8set-cookie设置 Cookie已废弃推荐使用 HTTP 头namevalue; expires日期; path/meta http-equivset-cookie contentuserJohn; expiresThu, 01 Jan 2024 00:00:00 GMT
其他特殊属性
属性作用值类型示例property用于 Open Graph / Twitter Cards 等社交媒体元数据需配合 contentog:title, twitter:card 等meta propertyog:title content页面标题itemprop微数据Microdata标记需配合 Schema.org 词汇自定义属性名meta itempropname content示例产品scheme定义 content 值的格式已废弃格式名称如 ISBN, datemeta schemeISBN content12345
注意事项 必填属性 charset 或 http-equivContent-Type 必须至少存在一个推荐使用 charset。 优先级冲突 若同时使用 http-equivContent-Security-Policy 和 HTTP 头浏览器会优先采用 HTTP 头。 兼容性 theme-color 仅在部分浏览器中生效Chrome、Firefox。 X-UA-Compatible 仅对 IE 有效。 废弃属性 scheme、http-equivset-cookie 已废弃不建议使用。
常用场景示例
1. 基础 SEO 优化
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
meta namedescription content专业的编程教程网站
meta namekeywords content编程, 前端, HTML
meta namerobots contentindex, follow
2. 社交媒体分享
meta propertyog:title content示例页面
meta propertyog:description content这是一个示例页面
meta propertyog:image contenthttps://example.com/image.png
meta nametwitter:card contentsummary_large_image
3. 安全策略
meta http-equivContent-Security-Policy contentdefault-src self
meta namereferrer contentno-referrer
