20 | {% if page.title %}{{ page.title | xml_escape }}{% else %}{{ site.title | 21 | xml_escape }} - {{ site.description

├── favicon.ico ├── favicon.png ├── index.md ├── _includes ├── footer.html ├── analytics.html ├── head.html ├── header.html └── share-page.html ├── .gitignore ├── _config.yml ├── .github └── FUNDING.yml ├── _layouts └── default.html ├── Gemfile ├── main.css └── README.md /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Amery2010/HEAD/HEAD/favicon.ico -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Amery2010/HEAD/HEAD/favicon.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% include_relative README.md %} 6 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS or Editor folders 2 | *.esproj 3 | *.sublime-project 4 | *.sublime-workspace 5 | .DS_Store 6 | .Spotlight-V100 7 | .Trashes 8 | ._* 9 | .cache 10 | .idea 11 | .project 12 | .settings 13 | .tmproj 14 | Desktop.ini 15 | Thumb.db 16 | Thumbs.db 17 | nbproject 18 | 19 | _site 20 | .jekyll-metadata 21 | .jekyll-cache 22 | .sass-cache 23 | -------------------------------------------------------------------------------- /_includes/analytics.html: -------------------------------------------------------------------------------- 1 | {% if site.microsoft_clarity %} 2 | 3 | 17 | 18 | {% endif %} 19 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Site settings 2 | title: " 元素的简单指南" 3 | description: "一份简单的元素使用指南" 4 | baseurl: "" # the subpath of your site, e.g. /blog/ 5 | url: "https://htmlhead.u14.app" # the base hostname & protocol for your site (no trailing slash) 6 | twitter_username: gpngfng227390 7 | github_username: Amery2010 8 | microsoft_clarity: lhi1t4k3f8 9 | exclude: [readme.md] 10 | sass: 11 | #style: compressed 12 | 13 | # Build settings 14 | markdown: kramdown 15 | 16 | # Compress HTML 17 | compress_html: 18 | clippings: all 19 | comments: [] 20 | endings: [p, li, td] 21 | ignore: 22 | envs: [] 23 | blanklines: false 24 | profile: false 25 | startings: [html, head, body] 26 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [Amery2010] 4 | # patreon: # Replace with a single Patreon username 5 | # open_collective: # Replace with a single Open Collective username 6 | # ko_fi: # Replace with a single Ko-fi username 7 | # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | # liberapay: # Replace with a single Liberapay username 10 | # issuehunt: # Replace with a single IssueHunt username 11 | # otechie: # Replace with a single Otechie username 12 | # custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | {% include head.html %} 7 | 8 | {% include header.html %} 9 |

10 |

11 |

12 | 13 | 26 | {% include analytics.html %} 27 | 28 | 29 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 13 | 17 | 18 | 19 | 20 | {% if page.title %}{{ page.title | xml_escape }}{% else %}{{ site.title | 21 | xml_escape }} - {{ site.description | xml_escape }} {% endif %} 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | # Hello! This is where you manage which Jekyll version is used to run. 3 | # When you want to use a different version, change it below, save the 4 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so: 5 | # 6 | # bundle exec jekyll serve 7 | # 8 | # This will help ensure the proper Jekyll version is running. 9 | # Happy Jekylling! 10 | gem "jekyll", "~> 4.2.0" 11 | # This is the default theme for new Jekyll sites. You may change this to anything you like. 12 | gem "minima", "~> 2.5" 13 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and 14 | # uncomment the line below. To upgrade, run `bundle update github-pages`. 15 | # gem "github-pages", group: :jekyll_plugins 16 | # If you have any plugins, put them here! 17 | group :jekyll_plugins do 18 | gem "jekyll-feed", "~> 0.12" 19 | end 20 | 21 | # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem 22 | # and associated library. 23 | platforms :mingw, :x64_mingw, :mswin, :jruby do 24 | gem "tzinfo", "~> 1.2" 25 | gem "tzinfo-data" 26 | end 27 | 28 | # Performance-booster for watching directories on Windows 29 | gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] 30 | 31 | # Webrick not installed by default in Ruby 3.0+ 32 | gem "webrick" -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | 51 | -------------------------------------------------------------------------------- /_includes/share-page.html: -------------------------------------------------------------------------------- 1 | 69 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --lightgray: #e0e0e0; 3 | --gray: #c0c0c0; 4 | --darkgray: #333; 5 | --blue: #4484f7; 6 | --blue-dark: #3d79e4; 7 | --white: #fff; 8 | 9 | --color-mode: "light"; 10 | --color-dark: #141414; 11 | --color-dark-alpha: rgba(0, 0, 0, 0.1); 12 | --color-light: #efefef; 13 | --color-light-alpha: rgba(255, 255, 255, 0.9); 14 | --color-primary: var(--blue-dark); 15 | 16 | --background: var(--white); 17 | --text-color: #141414; 18 | --header-background: #f2f2f2; 19 | --code-background: #f2f2f2; 20 | --button-background: var(--color-dark); 21 | --button-color: var(--color-light); 22 | --border-color: var(--color-dark-alpha); 23 | --section-border-color: var(--lightgray); 24 | --headings: var(--text-color); 25 | --footer-background-color: #fafafa; 26 | } 27 | 28 | @media (prefers-color-scheme: dark) { 29 | :root { 30 | --color-mode: "dark"; 31 | --color-primary: var(--blue-dark); 32 | --background: #111; 33 | --background: #161617; 34 | --background: #19191b; 35 | --text-color: #d6d6de; 36 | --text-color: #b5b5bb; 37 | --text-color: #efefef; 38 | --header-background: #222; 39 | --code-background: #282c34; 40 | --code-background: #262a31; 41 | --button-background: var(--color-light); 42 | --button-color: var(--color-dark); 43 | --border-color: var(--color-light-alpha); 44 | --section-border-color: #333333; 45 | --headings: var(--white); 46 | --footer-background-color: #1d1d1d; 47 | } 48 | } 49 | 50 | *, 51 | *::before, 52 | *::after { 53 | box-sizing: border-box; 54 | } 55 | 56 | body { 57 | background-color: var(--background); 58 | color: var(--text-color); 59 | font-family: system-ui, sans-serif; 60 | font-size: 16px; 61 | line-height: 1.5; 62 | margin: 0; 63 | padding: 0; 64 | } 65 | 66 | h1, 67 | h2, 68 | h3, 69 | h4, 70 | h5, 71 | h6 { 72 | color: var(--headings); 73 | font-weight: 600; 74 | } 75 | 76 | h1#-head, 77 | h1#-head + blockquote, 78 | h1#-head + blockquote + p { 79 | display: none; 80 | } 81 | 82 | a { 83 | color: var(--color-primary); 84 | text-decoration: none; 85 | transition: all 0.2s ease-in-out; 86 | } 87 | a:hover, 88 | a:focus { 89 | text-decoration: underline; 90 | } 91 | 92 | img { 93 | height: auto; 94 | max-width: 100%; 95 | vertical-align: middle; 96 | } 97 | 98 | ul { 99 | list-style: none; 100 | padding-left: 0; 101 | } 102 | ul.list-style-default { 103 | list-style: inherit; 104 | padding-left: 20px; 105 | } 106 | ul ul { 107 | padding-left: 20px; 108 | } 109 | 110 | blockquote { 111 | border-left: 3px solid var(--darkgray); 112 | font-style: italic; 113 | margin-left: 0; 114 | padding-left: 1em; 115 | } 116 | 117 | .container { 118 | margin: 0 auto; 119 | max-width: 800px; 120 | padding: 8px 16px; 121 | } 122 | 123 | .announcement { 124 | background-color: #000; 125 | color: #fff; 126 | padding: 1em; 127 | text-align: center; 128 | } 129 | .announcement a { 130 | border: none; 131 | color: #fff; 132 | padding: 0.8em 0; 133 | text-decoration: none; 134 | white-space: nowrap; 135 | } 136 | .announcement a:not(:first-child) { 137 | margin-left: 0.8em; 138 | } 139 | .announcement a:hover { 140 | color: var(--color-primary); 141 | } 142 | 143 | .site__header { 144 | background-color: var(--header-background); 145 | padding: 60px 0; 146 | position: relative; 147 | } 148 | .site__header h1, 149 | .site__header h2, 150 | .site__header h3, 151 | .site__header h4, 152 | .site__header h5, 153 | .site__header h6 { 154 | margin-top: 0; 155 | } 156 | 157 | .site__title { 158 | font-size: 40px; 159 | text-align: center; 160 | } 161 | .site__title > span:last-child { 162 | color: #acacac; 163 | } 164 | @media (min-width: 700px) { 165 | .site__title { 166 | font-size: 72px; 167 | text-align: left; 168 | } 169 | } 170 | 171 | .header-content { 172 | text-align: center; 173 | } 174 | @media (min-width: 700px) { 175 | .header-content { 176 | text-align: left; 177 | } 178 | } 179 | .header-link p { 180 | background-color: var(--background); 181 | border-radius: 8px; 182 | display: inline-block; 183 | padding: 1em; 184 | } 185 | 186 | /* GitHub link */ 187 | .github { 188 | height: 80px; 189 | width: 80px; 190 | position: absolute; 191 | right: 0; 192 | top: 0; 193 | transform: translateZ(0); 194 | z-index: 1; 195 | } 196 | .github__arm { 197 | transform-origin: 130px 106px; 198 | } 199 | @media (min-width: 320px) { 200 | .github:hover .github__arm { 201 | animation: octocat-wave 560ms ease-in-out; 202 | } 203 | } 204 | a.github, 205 | a.github:hover, 206 | a.github:focus { 207 | border-bottom: none; 208 | } 209 | @keyframes octocat-wave { 210 | 0%, 211 | 100% { 212 | transform: rotate(0); 213 | } 214 | 20%, 215 | 60% { 216 | transform: rotate(-25deg); 217 | } 218 | 40%, 219 | 80% { 220 | transform: rotate(10deg); 221 | } 222 | } 223 | /* END GitHub link */ 224 | 225 | .site__main { 226 | margin: auto; 227 | max-width: 800px; 228 | } 229 | 230 | /* .site__main p:first-of-type { 231 | font-size: 1.5em; 232 | } 233 | .site__main p:first-of-type a { 234 | border: none; 235 | } */ 236 | 237 | /* .site__main p:nth-of-type(1) { 238 | display: none; 239 | } */ 240 | 241 | p code { 242 | background-color: var(--code-background); 243 | /* background-color: #1e2127; */ 244 | /* background-color: #262a31; */ 245 | border-radius: 0.2em; 246 | padding: 0.15em 0.25em; 247 | } 248 | 249 | .highlight, 250 | pre, 251 | code { 252 | border-radius: 8px; 253 | } 254 | 255 | pre { 256 | overflow-x: auto; 257 | word-wrap: normal; 258 | white-space: pre; 259 | background-color: #f5f5f5; 260 | 261 | padding: 16px; 262 | font-size: 90%; 263 | line-height: 1.45; 264 | } 265 | 266 | code { 267 | /* border-radius: 0; */ 268 | padding: 0.2em 0; 269 | } 270 | 271 | .highlight { 272 | margin-left: 0; 273 | margin-right: 0; 274 | /* border-radius: 0; */ 275 | } 276 | 277 | /* select all... then select some */ 278 | /* https://codersblock.com/blog/using-css-to-control-text-selection/#select-all-then-select-some */ 279 | /* pre > code { 280 | -webkit-user-select: all; 281 | user-select: all; 282 | } 283 | pre > code:focus { 284 | animation: select 100ms step-end forwards; 285 | } 286 | @keyframes select { 287 | to { 288 | -webkit-user-select: text; 289 | user-select: text; 290 | } 291 | } */ 292 | 293 | /* #facebook.pluginButton { 294 | transform: scale(3.5); 295 | -ms-transform: scale(3.5); 296 | -webkit-transform: scale(3.5); 297 | -o-transform: scale(3.5); 298 | -moz-transform: scale(3.5); 299 | transform-origin: top left; 300 | -ms-transform-origin: top left; 301 | -webkit-transform-origin: top left; 302 | -moz-transform-origin: top left; 303 | -webkit-transform-origin: top left; 304 | } 305 | .pluginButtonIconSVG { 306 | height: 28px; 307 | width: 28px; 308 | } 309 | .plugin, 310 | .plugin button, 311 | .plugin input, 312 | .plugin label, 313 | .plugin select, 314 | .plugin td, 315 | .plugin textarea { 316 | font-size: 22px; 317 | } */ 318 | 319 | /* Code */ 320 | /* .highlight .hll { background-color: #ffc; 321 | .highlight .c { color: #999; } 322 | .highlight .err { color: #a00; background-color: #faa } 323 | .highlight .k { color: #069; } 324 | .highlight .o { color: #555 } 325 | .highlight .cm { color: #09f; font-style: italic } 326 | .highlight .cp { color: #099 } 327 | .highlight .c1 { color: #999; } 328 | .highlight .cs { color: #999; } 329 | .highlight .gd { background-color: #fcc; border: 1px solid #c00 } 330 | .highlight .ge { font-style: italic } 331 | .highlight .gr { color: #f00 } 332 | .highlight .gh { color: #030; } 333 | .highlight .gi { background-color: #cfc; border: 1px solid #0c0 } 334 | .highlight .go { color: #aaa } 335 | .highlight .gp { color: #009; } 336 | .highlight .gs { } 337 | .highlight .gu { color: #030; } 338 | .highlight .gt { color: #9c6 } 339 | .highlight .kc { color: #069; } 340 | .highlight .kd { color: #069; } 341 | .highlight .kn { color: #069; } 342 | .highlight .kp { color: #069 } 343 | .highlight .kr { color: #069; } 344 | .highlight .kt { color: #078; } 345 | .highlight .m { color: #f60 } 346 | .highlight .s { color: #d44950 } 347 | .highlight .na { color: #4f9fcf } 348 | .highlight .nb { color: #366 } 349 | .highlight .nc { color: #0a8; } 350 | .highlight .no { color: #360 } 351 | .highlight .nd { color: #99f } 352 | .highlight .ni { color: #999; } 353 | .highlight .ne { color: #c00; } 354 | .highlight .nf { color: #c0f } 355 | .highlight .nl { color: #99f } 356 | .highlight .nn { color: #0cf; } 357 | .highlight .nt { color: #2f6f9f; } 358 | .highlight .nv { color: #033 } 359 | .highlight .ow { color: #000; } 360 | .highlight .w { color: #bbb } 361 | .highlight .mf { color: #f60 } 362 | .highlight .mh { color: #f60 } 363 | .highlight .mi { color: #f60 } 364 | .highlight .mo { color: #f60 } 365 | .highlight .sb { color: #c30 } 366 | .highlight .sc { color: #c30 } 367 | .highlight .sd { color: #c30; font-style: italic } 368 | .highlight .s2 { color: #c30 } 369 | .highlight .se { color: #c30; } 370 | .highlight .sh { color: #c30 } 371 | .highlight .si { color: #a00 } 372 | .highlight .sx { color: #c30 } 373 | .highlight .sr { color: #3aa } 374 | .highlight .s1 { color: #c30 } 375 | .highlight .ss { color: #fc3 } 376 | .highlight .bp { color: #366 } 377 | .highlight .vc { color: #033 } 378 | .highlight .vg { color: #033 } 379 | .highlight .vi { color: #033 } 380 | .highlight .il { color: #f60 } */ 381 | 382 | /* .css .o, 383 | .css .o + .nt, 384 | .css .nt + .nt { color: #999; } */ 385 | 386 | /* 387 | Darkly Pygments Theme 388 | (c) 2014 Sourcey 389 | http://sourcey.com 390 | */ 391 | 392 | /* .highlight { 393 | white-space: pre; 394 | overflow: auto; 395 | word-wrap: normal; 396 | -moz-border-radius: 3px; 397 | -webkit-border-radius: 3px; 398 | border-radius: 3px; 399 | padding: 20px; 400 | background: #343642; 401 | color: #C1C2C3; 402 | } 403 | .highlight .hll { background-color: #ffc; } 404 | .highlight .gd { color: #2e3436; background-color: #0e1416; } 405 | .highlight .gr { color: #eeeeec; background-color: #c00; } 406 | .highlight .gi { color: #babdb6; background-color: #1f2b2d; } 407 | .highlight .go { color: #2c3032; background-color: #2c3032; } 408 | .highlight .kt { color: #e3e7df; } 409 | .highlight .ni { color: #888a85; } 410 | .highlight .c,.highlight .cm,.highlight .c1,.highlight .cs { color: #8D9684; } 411 | .highlight .err,.highlight .g,.highlight .l,.highlight .n,.highlight .x,.highlight .p,.highlight .ge, 412 | .highlight .gp,.highlight .gs,.highlight .gt,.highlight .ld,.highlight .s,.highlight .nc,.highlight .nd, 413 | .highlight .ne,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py,.highlight .ow,.highlight .w,.highlight .sb, 414 | .highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr, 415 | .highlight .s1,.highlight .ss,.highlight .bp { color: #C1C2C3; } 416 | .highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr, 417 | .highlight .nt { color: #729fcf; } 418 | .highlight .cp,.highlight .gh,.highlight .gu,.highlight .na,.highlight .nf { color: #E9A94B ; } 419 | .highlight .m,.highlight .nb,.highlight .no,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo, 420 | .highlight .il { color: #8ae234; } 421 | .highlight .o { color: #989DAA; } 422 | .highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi { color: #fff; } */ 423 | 424 | /* code syntax theme background color is too light */ 425 | .highlight, 426 | pre.highlight, 427 | .highlight pre, 428 | .highlight .hll { 429 | background: #1e2127 !important; 430 | } 431 | 432 | /* 433 | One Dark Syntax Pygments Theme 434 | https://github.com/mgyongyosi/OneDarkJekyll 435 | */ 436 | 437 | .highlight, 438 | pre.highlight { 439 | background: #282c34; 440 | color: #abb2bf; 441 | } 442 | 443 | .highlight pre { 444 | background: #282c34; 445 | } 446 | 447 | .highlight .hll { 448 | background: #282c34; 449 | } 450 | 451 | .highlight .c { 452 | color: #5c6370; 453 | font-style: italic; 454 | } 455 | 456 | .highlight .err { 457 | color: #960050; 458 | background-color: #1e0010; 459 | } 460 | 461 | .highlight .k { 462 | color: #c678dd; 463 | } 464 | 465 | .highlight .l { 466 | color: #98c379; 467 | } 468 | 469 | .highlight .n { 470 | color: #abb2bf; 471 | } 472 | 473 | .highlight .o { 474 | color: #abb2bf; 475 | } 476 | 477 | .highlight .p { 478 | color: #abb2bf; 479 | } 480 | 481 | .highlight .cm { 482 | color: #5c6370; 483 | font-style: italic; 484 | } 485 | 486 | .highlight .cp { 487 | color: #5c6370; 488 | font-style: italic; 489 | } 490 | 491 | .highlight .c1 { 492 | color: #5c6370; 493 | font-style: italic; 494 | } 495 | 496 | .highlight .cs { 497 | color: #5c6370; 498 | font-style: italic; 499 | } 500 | 501 | .highlight .ge { 502 | font-style: italic; 503 | } 504 | 505 | .highlight .gs { 506 | font-weight: 700; 507 | } 508 | 509 | .highlight .kc { 510 | color: #c678dd; 511 | } 512 | 513 | .highlight .kd { 514 | color: #c678dd; 515 | } 516 | 517 | .highlight .kn { 518 | color: #c678dd; 519 | } 520 | 521 | .highlight .kp { 522 | color: #c678dd; 523 | } 524 | 525 | .highlight .kr { 526 | color: #c678dd; 527 | } 528 | 529 | .highlight .kt { 530 | color: #c678dd; 531 | } 532 | 533 | .highlight .ld { 534 | color: #98c379; 535 | } 536 | 537 | .highlight .m { 538 | color: #d19a66; 539 | } 540 | 541 | .highlight .s { 542 | color: #98c379; 543 | } 544 | 545 | .highlight .na { 546 | color: #d19a66; 547 | } 548 | 549 | .highlight .nb { 550 | color: #e5c07b; 551 | } 552 | 553 | .highlight .nc { 554 | color: #e5c07b; 555 | } 556 | 557 | .highlight .no { 558 | color: #e5c07b; 559 | } 560 | 561 | .highlight .nd { 562 | color: #e5c07b; 563 | } 564 | 565 | .highlight .ni { 566 | color: #e5c07b; 567 | } 568 | 569 | .highlight .ne { 570 | color: #e5c07b; 571 | } 572 | 573 | .highlight .nf { 574 | color: #abb2bf; 575 | } 576 | 577 | .highlight .nl { 578 | color: #e5c07b; 579 | } 580 | 581 | .highlight .nn { 582 | color: #abb2bf; 583 | } 584 | 585 | .highlight .nx { 586 | color: #abb2bf; 587 | } 588 | 589 | .highlight .py { 590 | color: #e5c07b; 591 | } 592 | 593 | .highlight .nt { 594 | color: #e06c75; 595 | } 596 | 597 | .highlight .nv { 598 | color: #e5c07b; 599 | } 600 | 601 | .highlight .ow { 602 | font-weight: 700; 603 | } 604 | 605 | .highlight .w { 606 | color: #f8f8f2; 607 | } 608 | 609 | .highlight .mf { 610 | color: #d19a66; 611 | } 612 | 613 | .highlight .mh { 614 | color: #d19a66; 615 | } 616 | 617 | .highlight .mi { 618 | color: #d19a66; 619 | } 620 | 621 | .highlight .mo { 622 | color: #d19a66; 623 | } 624 | 625 | .highlight .sb { 626 | color: #98c379; 627 | } 628 | 629 | .highlight .sc { 630 | color: #98c379; 631 | } 632 | 633 | .highlight .sd { 634 | color: #98c379; 635 | } 636 | 637 | .highlight .s2 { 638 | color: #98c379; 639 | } 640 | 641 | .highlight .se { 642 | color: #98c379; 643 | } 644 | 645 | .highlight .sh { 646 | color: #98c379; 647 | } 648 | 649 | .highlight .si { 650 | color: #98c379; 651 | } 652 | 653 | .highlight .sx { 654 | color: #98c379; 655 | } 656 | 657 | .highlight .sr { 658 | color: #56b6c2; 659 | } 660 | 661 | .highlight .s1 { 662 | color: #98c379; 663 | } 664 | 665 | .highlight .ss { 666 | color: #56b6c2; 667 | } 668 | 669 | .highlight .bp { 670 | color: #e5c07b; 671 | } 672 | 673 | .highlight .vc { 674 | color: #e5c07b; 675 | } 676 | 677 | .highlight .vg { 678 | color: #e5c07b; 679 | } 680 | 681 | .highlight .vi { 682 | color: #e06c75; 683 | } 684 | 685 | .highlight .il { 686 | color: #d19a66; 687 | } 688 | 689 | .highlight .gu { 690 | color: #75715e; 691 | } 692 | 693 | .highlight .gd { 694 | color: #f92672; 695 | } 696 | 697 | .highlight .gi { 698 | color: #a6e22e; 699 | } 700 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🤯 HEAD 2 | 3 | > HTML `` 元素的简单指南 4 | 5 | [![贡献者](https://img.shields.io/github/contributors/joshbuchea/head.svg?style=for-the-badge)](https://github.com/joshbuchea/HEAD/graphs/contributors) 6 | [![CC0](https://img.shields.io/badge/license-CC0-green.svg?style=for-the-badge)](https://creativecommons.org/publicdomain/zero/1.0/) 7 | [![在 Mastodon 上关注 @joshbuchea](https://img.shields.io/badge/Follow_@joshbuchea-purple?logo=mastodon&logoColor=white&style=for-the-badge)](https://hachyderm.io/@joshbuchea) 8 | 9 | ## 目录 10 | 11 | - [最小推荐](#最小推荐) 12 | - [网页元素](#网页元素) 13 | - [Meta 标签](#Meta-标签) 14 | - [链接](#链接) 15 | - [网站图标](#网站图标) 16 | - [社交](#社交) 17 | - [Facebook Open Graph](#facebook-open-graph) 18 | - [Twitter Card](#twitter-card) 19 | - [Twitter Privacy](#twitter-privacy) 20 | - [Schema.org](#schemaorg) 21 | - [Pinterest](#pinterest) 22 | - [Facebook Instant Articles](#facebook-instant-articles) 23 | - [OEmbed](#oembed) 24 | - [QQ/微信](#qq微信) 25 | - [浏览器 / 平台](#浏览器--平台) 26 | - [Apple iOS](#apple-ios) 27 | - [Google Android](#google-android) 28 | - [Google Chrome](#google-chrome) 29 | - [Microsoft Internet Explorer](#microsoft-internet-explorer) 30 | - [国内浏览器](#国内浏览器) 31 | - [360 浏览器](#360-浏览器) 32 | - [QQ 移动浏览器](#qq-移动浏览器) 33 | - [UC 移动浏览器](#uc-移动浏览器) 34 | - [应用链接](#应用链接) 35 | - [其他资源](#其他资源) 36 | - [相关项目](#相关项目) 37 | - [其他格式](#其他格式) 38 | - [翻译](#-翻译) 39 | - [贡献](#-贡献) 40 | - [贡献者](#贡献者) 41 | - [作者](#-作者) 42 | - [翻译者](#翻译者) 43 | - [许可](#-许可) 44 | 45 | ## 最小推荐 46 | 47 | 以下是任何网页文档（网站/应用程序）的基本元素： 48 | 49 | ```html 50 | 51 | 52 | 57 | 页面标题 58 | ``` 59 | 60 | `meta charset` - 定义网站的编码，`utf-8` 是标准 61 | 62 | `meta name="viewport"` - 与移动响应相关的视口设置 63 | 64 | `width=device-width` - 使用设备的物理宽度（非常适用于移动设备！） 65 | 66 | `initial-scale=1` - 初始缩放，1 表示无缩放 67 | 68 | **[⬆ 返回顶部](#目录)** 69 | 70 | ## 网页元素 71 | 72 | 有效的 `` 元素包括 `meta`、`link`、`title`、`style`、`script`、`noscript` 和 `base`。 73 | 74 | 这些元素提供了关于文档如何被 Web 技术（例如浏览器、搜索引擎、爬虫等）感知和呈现的信息。 75 | 76 | ```html 77 | 82 | 83 | 84 | 85 | 页面标题 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 97 | 98 | 99 | 100 | 103 | 106 | ``` 107 | 108 | **[⬆ 返回顶部](#目录)** 109 | 110 | ## Meta 标签 111 | 112 | ```html 113 | 118 | 119 | 120 | 121 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 153 | 157 | 161 | 162 | 166 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 199 | 203 | 204 | 205 | 206 | ``` 207 | 208 | - 📖 [Google 理解的 Meta 标签](https://support.google.com/webmasters/answer/79812?hl=en) 209 | - 📖 [WHATWG Wiki: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions) 210 | - 📖 [维基百科上的 ICBM](https://en.wikipedia.org/wiki/ICBM_address#Modern_use) 211 | - 📖 [维基百科上的 Geotagging](https://en.wikipedia.org/wiki/Geotagging#HTML_pages) 212 | 213 | **[⬆ 返回顶部](#目录)** 214 | 215 | ## 链接 216 | 217 | ```html 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 287 | 288 | 289 | 295 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | ``` 310 | 311 | - 📖 [链接关系](https://www.iana.org/assignments/link-relations/link-relations.xhtml) 312 | 313 | **[⬆ 返回顶部](#目录)** 314 | 315 | ## 网站图标 316 | 317 | ```html 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | ``` 330 | 331 | - 📖 [所有关于网站图标（和触摸图标）的信息](https://bitsofco.de/all-about-favicons-and-touch-icons/) 332 | - 📖 [创建固定标签图标](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html) 333 | - 📖 [网站图标对照表](https://github.com/audreyr/favicon-cheat-sheet) 334 | - 📖 [图标和浏览器颜色](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/) 335 | 336 | **[⬆ 返回顶部](#目录)** 337 | 338 | ## 社交 339 | 340 | ### Facebook Open Graph 341 | 342 | > 大多数内容在 Facebook 上作为 URL 共享，因此重要的是使用 Open Graph 标记对网站进行标记，以控制内容在 Facebook 上的呈现方式。[有关 Facebook Open Graph 标记的更多信息](https://developers.facebook.com/docs/sharing/webmasters#markup) 343 | 344 | ```html 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | ``` 356 | 357 | - 📖 [Open Graph 协议](http://ogp.me/) 358 | - 🛠 使用 [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) 测试您的页面 359 | 360 | ### Twitter Card 361 | 362 | > 使用 Twitter Cards，您可以将丰富的照片、视频和媒体体验附加到推文中，帮助驱动流量到您的网站。[有关 Twitter Cards 的更多信息](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards) 363 | 364 | ```html 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 376 | ``` 377 | 378 | - 📖 [开始使用卡片 — Twitter Developers](https://dev.twitter.com/cards/getting-started) 379 | - 🛠 使用 [Twitter Card 验证器](https://cards-dev.twitter.com/validator) 测试您的页面 380 | 381 | ### Twitter Privacy 382 | 383 | 如果在您的网站中嵌入推文，Twitter 可以使用您网站的信息来为 Twitter 用户定制内容和建议。[有关 Twitter 隐私选项的更多信息](https://dev.twitter.com/web/overview/privacy#what-privacy-options-do-website-publishers-have)。 384 | 385 | ```html 386 | 387 | 388 | ``` 389 | 390 | ### Schema.org 391 | 392 | ```html 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | ``` 403 | 404 | **注意:** 这些 meta 标签需要在 `` 中添加 `itemscope` 和 `itemtype` 属性。 405 | 406 | - 📖 [开始使用 - schema.org](https://schema.org/docs/gs.html) 407 | - 🛠 使用[富媒体搜索结果测试](https://search.google.com/test/rich-results)来测试您的页面 408 | 409 | ### Pinterest 410 | 411 | Pinterest 允许您根据[他们的帮助中心](https://help.pinterest.com/en/business/article/prevent-saves-to-pinterest-from-your-site)阻止用户从您的网站保存内容。`description` 是可选的。 412 | 413 | ```html 414 | 419 | ``` 420 | 421 | ### Facebook Instant Articles 422 | 423 | ```html 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | ``` 433 | 434 | - 📖 [创建文章 - Instant Articles](https://developers.facebook.com/docs/instant-articles/guides/articlecreate) 435 | - 📖 [代码示例 - Instant Articles](https://developers.facebook.com/docs/instant-articles/reference) 436 | 437 | ### OEmbed 438 | 439 | ```html 440 | 446 | 452 | ``` 453 | 454 | - 📖 [oEmbed 格式](https://oembed.com/) 455 | 456 | ### QQ/微信 457 | 458 | 用户分享到 QQ 微信的网页将具有格式化的消息 459 | 460 | ```html 461 | 462 | 466 | 467 | ``` 468 | 469 | - 📖 [代码格式文档](http://open.mobile.qq.com/api/mqq/index#api:setShareInfo) 470 | 471 | **[⬆ 返回顶部](#目录)** 472 | 473 | ## 浏览器/平台 474 | 475 | ### Apple iOS 476 | 477 | ```html 478 | 479 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 507 | 508 | ``` 509 | 510 | - 📖 [配置 Web 应用](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) 511 | 512 | ### Google Android 513 | 514 | ```html 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | ``` 525 | 526 | ### Google Chrome 527 | 528 | ```html 529 | 533 | 534 | 535 | 536 | ``` 537 | 538 | ### Microsoft Internet Explorer 539 | 540 | ```html 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | ``` 550 | 551 | `browserconfig.xml`的最低要求的 xml 标记： 552 | 553 | ```xml 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | ``` 566 | 567 | - 📖 [浏览器配置模式参考](https://msdn.microsoft.com/en-us/library/dn320426.aspx) 568 | 569 | **[⬆ 返回顶部](#目录)** 570 | 571 | ## 国内浏览器 572 | 573 | ### 360 浏览器 574 | 575 | ```html 576 | 577 | 578 | ``` 579 | 580 | ### QQ 移动浏览器 581 | 582 | ```html 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | ``` 592 | 593 | ### UC 移动浏览器 594 | 595 | ```html 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | ``` 617 | 618 | - 📖 [UC 浏览器文档](https://www.uc.cn/download/UCBrowser_U3_API.doc) 619 | 620 | **[⬆ 返回顶部](#目录)** 621 | 622 | ## 应用链接 623 | 624 | ```html 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | ``` 638 | 639 | - 📖 [应用链接文档](https://developers.facebook.com/docs/applinks) 640 | 641 | **[⬆ 返回顶部](#目录)** 642 | 643 | ## 其他资源 644 | 645 | - 📖 [HTML5 样板文件文档：HTML](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md) 646 | - 📖 [HTML5 样板文件文档：扩展和自定义](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md) 647 | 648 | **[⬆ 返回顶部](#目录)** 649 | 650 | ## 相关项目 651 | 652 | - [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - 用于 `HEAD` 片段的 Atom 包 653 | - [Sublime Text HTML Head Snippets](https://github.com/marcobiedermann/sublime-head-snippets) - 用于 `HEAD` 片段的 Sublime Text 包 654 | - [head-it](https://github.com/hemanth/head-it) - 用于 `HEAD` 片段的 CLI 界面 655 | - [vue-head](https://github.com/ktquez/vue-head) - 为 Vue.js 操纵 `HEAD` 标签的元信息 656 | 657 | **[⬆ 返回顶部](#目录)** 658 | 659 | ## 其他格式 660 | 661 | - 📄 [PDF](https://gitprint.com/Amery2010/HEAD/blob/master/README.md) 662 | 663 | **[⬆ 返回顶部](#目录)** 664 | 665 | ## 🌐 翻译 666 | 667 | - 🇮🇩 [Bahasa](https://github.com/rijdz/HEAD) 668 | - 🇧🇷 [巴西葡萄牙语](https://github.com/Webschool-io/HEAD) 669 | - 🇨🇳 [中文（简体）](https://github.com/Amery2010/HEAD) 670 | - 🇩🇪 [德语](https://github.com/Shidigital/HEAD) 671 | - 🇮🇹 [意大利语](https://github.com/Fakkio/HEAD) 672 | - 🇯🇵 [日语](https://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html) 673 | - 🇰🇷 [韩语](https://github.com/Lutece/HEAD) 674 | - 🇷🇺 [俄语/Русский](https://github.com/Konfuze/HEAD) 675 | - 🇪🇸 [西班牙语](https://github.com/alvaroadlf/HEAD) 676 | - 🇹🇷 [土耳其语/Türkçe](https://github.com/mkg0/HEAD) 677 | 678 | **[⬆ 返回顶部](#目录)** 679 | 680 | ## 🤝 贡献 681 | 682 | **开启一个 issue 或一个 pull 请求来提出修改或补充。** 683 | 684 | ### 指南 685 | 686 | **HEAD**存储库由两个分支组成： 687 | 688 | #### 1. `master` 689 | 690 | 该分支包含在[htmlhead.u14.app](https://htmlhead.u14.app/)网站上反映的`README.md`文件。所有关于指南内容的更改应在此文件中进行。 691 | 692 | 请按照以下步骤进行拉取请求： 693 | 694 | {:.list-style-default} 695 | 696 | - 一次仅修改一个标记或一个相关的标记集 697 | - 在属性上使用双引号 698 | - 在自闭合元素中不要包含尾随斜杠 - HTML5 规范表示它们是可选的 699 | - 考虑包含支持您更改的文档的链接 700 | 701 | #### 2. `gh-pages` 702 | 703 | 该分支负责[htmlhead.u14.app](https://htmlhead.u14.app/)网站。我们使用[Jekyll](https://jekyllrb.com/)将`README.md`标记文件部署到[GitHub Pages](https://pages.github.com/)。所有与网站相关的修改应在此分支中进行。 704 | 705 | 在使用此分支之前，您可能会发现回顾[Jekyll 文档](https://jekyllrb.com/docs/home/)并了解 Jekyll 的工作方式会有所帮助。 706 | 707 | ### 部署到 Vercel 708 | 709 | 使用 Vercel 部署您自己的页面。 710 | 711 | [![使用 Vercel 进行部署](https://vercel.com/button)](https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2FAmery2010%2FHEAD&hasTrialAvailable=1&showOptionalTeamCreation=false&project-name=HEAD&framework=jekyll&totalProjects=1&remainingProjects=1) 712 | 713 | ## 🌟 贡献者 714 | 715 | 查看所有超级棒的[贡献者](https://github.com/joshbuchea/HEAD/graphs/contributors) 🤩 716 | 717 | ## 👤 作者 718 | 719 | **Josh Buchea** 720 | 721 | - GitHub: [@joshbuchea](https://github.com/joshbuchea) 722 | - Mastodon: [@joshbuchea@hachyderm.io](https://hachyderm.io/@joshbuchea) 723 | 724 | ### 翻译者 725 | 726 | **子丶言** 727 | 728 | - GitHub: [@Amery2010](https://github.com/Amery2010) 729 | - 网站: [@xiangfa.org](https://xiangfa.org) 730 | 731 | ## 💛 支持 732 | 733 | 如果这个项目对您或您的组织有帮助，请考虑直接支持我的工作： 734 | 735 | - 💛 [在 GitHub 上赞助我](https://github.com/sponsors/joshbuchea) 736 | - ⭐️ [在 GitHub 上给这个项目加星](https://github.com/joshbuchea/HEAD) 737 | - 🐙 [在 GitHub 上关注我](https://github.com/joshbuchea) 738 | - 🐘 [在 Mastodon 上关注我](https://hachyderm.io/@joshbuchea) 739 | 740 | 感谢所有给予帮助的人！🙏 741 | 742 | ## 📝 许可 743 | 744 | [![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/) 745 | 746 | **[⬆ 返回顶部](#目录)** 747 | --------------------------------------------------------------------------------

{{ site.title | xml_escape }}

一份简单的 <head> 元素使用指南