Marco Nie - html https://blog.niekun.net/category/html/ zh-CN Tue, 17 Dec 2019 14:25:00 +0800 Tue, 17 Dec 2019 14:25:00 +0800 HTML 特殊字符转义符号实体 https://blog.niekun.net/archives/798.html https://blog.niekun.net/archives/798.html Tue, 17 Dec 2019 14:25:00 +0800 admin 一些特殊符号需要显示在 HTML 上时，需要使用符号实体来表示：

常用符号转义

符号含义转义实体转义号
空格  
<小于号&lt;&#60;
>大于号&gt;&#62;
&和&amp;&#38;
"双引号&quot;&#34;
'单引号&apos;&#39;
¢分&cent;&#162;
£磅&pound;&#163;
¥元&yen;&#165;
€欧元&euro;&#8364;
©版权&copy;&#169;
®注册商标&reg;&#174;

更多符号

w3 教程：https://www.w3schools.com/HTML/html_entities.asp
希腊字符：https://www.w3schools.com/charsets/ref_utf_greek.asp
货币字符：https://www.w3schools.com/charsets/ref_utf_currency.asp
箭头符号：https://www.w3schools.com/charsets/ref_utf_arrows.asp
数学符号：https://www.w3schools.com/charsets/ref_utf_math.asp
更多杂类：https://www.w3schools.com/charsets/ref_utf_symbols.asp

]]> 1 https://blog.niekun.net/archives/798.html#comments https://blog.niekun.net/feed/category/html/archives/798.html javascript/css 强制更新 https://blog.niekun.net/archives/769.html https://blog.niekun.net/archives/769.html Mon, 16 Dec 2019 17:14:00 +0800 admin 当我们对网站做了修改，推送到远程服务器后，发现页面还是老样子。这是由于浏览器缓存的问题，html 页面一般会及时更新，但 JavaScript/css 脚本常常无法及时更新，这时候需要手动进行处理。

方法一：
在多数浏览器中，可以使用 CTRL + F5 快捷键强制刷新。一般能看到最新的结果。

方法二：
如果你使用 Google chrome 浏览器，则可以使用 debugger 禁止缓存: 右键 - inspect - Network - Disable cache

方法三：
在源码的 link/script 中修改如下：

<link rel="stylesheet" href="my-css-file.css?v=1">
<script src="my-js-file.js?v=1"></script>

主要是在文件后加上 ?v=1 类似的字符串。当然也可换成其他写法，如：?time=2019126 等。

下次更新文件时，将后缀修改成其他数字即可。这样的好处是你的用户们也可以同时收到最新更新。

参考链接：
https://stackoverflow.com/questions/3951187/javascript-file-not-updating-no-matter-what-i-do
https://stackoverflow.com/questions/3466989/what-does-appending-v-1-to-css-and-javascript-urls-in-link-and-script-tags-do

]]> 0 https://blog.niekun.net/archives/769.html#comments https://blog.niekun.net/feed/category/html/archives/769.html lightbox2 使用 https://blog.niekun.net/archives/768.html https://blog.niekun.net/archives/768.html Thu, 12 Dec 2019 22:03:00 +0800 admin 2019-12-16T12:30:16.png
lightbox 是一个JavaScript 库，用来在前端显示图片。它的特点是轻量，容易部署，适用于现代的浏览器。

官网：https://lokeshdhakar.com/projects/lightbox2/
GitHub 项目地址：https://github.com/lokesh/lightbox2
release 下载：https://github.com/lokesh/lightbox2/releases

下载

在发布页下载最新版本到本地或服务器：

wget https://github.com/lokesh/lightbox2/archive/v2.11.1.tar.gz
tar -zxvf v2.11.1.tar.gz

css/js 文件在解压包的 dist 目录下。

引用

在 html 的 <head> 标签栏内引用 css 文件：

<link href="path/to/lightbox.css" rel="stylesheet" />

在 html 结束前的 </body> 标签前引用 js 文件：

<script src="path/to/lightbox.js"></script>

lightbox2 的 js 需要 jQuery 1.7，所以确保 jQuery 在 lightbox 的 js 文件之前引用。

如果你没有安装 jQuery，可以使用预先包含了 lightbox 和 jQuery 的 js 文件 代替上面的 lightbox.js：

<script src="dist/js/lightbox-plus-jquery.js"></script>

使用

在图片链接内增加属性 data-lightbox 来激活 lightbox。

单图片显示

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

选项:
增加 data-title 属性，如果你想增加一个title.
增加 data-alt 属性，如果你想附加一个图片的属性.

多图片库

如果你有多张图片想要通过左右箭头切换显示，可以设置如下：

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

属性设置

如果想要修改默认的显示设置，可以引用 option method，例如：

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>

所有可设置的参数，可查看官网：https://lokeshdhakar.com/projects/lightbox2/

]]> 0 https://blog.niekun.net/archives/768.html#comments https://blog.niekun.net/feed/category/html/archives/768.html font awesome 使用 https://blog.niekun.net/archives/766.html https://blog.niekun.net/archives/766.html Thu, 12 Dec 2019 22:00:00 +0800 admin 2019-12-16T13:06:29.png

font awesome 是流行的 icon 图标库。最新版为 version 5

font awesome 分为付费版和免费版，付费版有 7020 个 icon，免费版有 1535 个 icon。
免费：brands.js solid.js
付费：regular.js light.js

官网：https://fontawesome.com/
GitHub 项目地址：https://github.com/FortAwesome/Font-Awesome
release 地址：https://github.com/FortAwesome/Font-Awesome/releases
w3 教程：https://www.w3schools.com/icons/fontawesome5_intro.asp

下载

在 GitHub 发布页下载最新版：

wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.12.0/fontawesome-free-5.12.0-web.zip
unzip fontawesome-free-5.12.0-web.zip

引用

在 html 的 <head> 标签内引用 免费的 js 文件：

  <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
  <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

或者加载 all.min.js 文件，内含所有基本的功能：

<script defer src="/your-path-to-fontawesome/js/all.min.js"></script>

使用

icon 图标常使用 <i> 或 <span> 标签来定义。

2019-12-16T13:54:18.png

修改图标大小

2019-12-16T14:01:36.png

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

也可以通过父级相对大小进一步调整大小属性：

2019-12-16T14:03:13.png

<div style="font-size: 0.5rem;">
  <i class="fas fa-camera fa-xs"></i>
  <i class="fas fa-camera fa-sm"></i>
  <i class="fas fa-camera fa-lg"></i>
  <i class="fas fa-camera fa-2x"></i>
  <i class="fas fa-camera fa-3x"></i>
  <i class="fas fa-camera fa-5x"></i>
  <i class="fas fa-camera fa-7x"></i>
  <i class="fas fa-camera fa-10x"></i>
</div>

图标宽度匹配

使用 class 类 fa-fw 使图标大小相匹配。

2019-12-16T14:06:11.png

<div style="font-size: 2rem;">
  <div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

修改图标颜色

2019-12-16T13:56:24.png

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fas fa-camera"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-camera"></i>
  </span>
</span>

动态图标

通过增加 class 属性 fa-spin 可使图标旋转起来，使用 fa-pulse 属性可使图标分 8 steps 进行旋转。
2019-12-16T14:10:04.png

<div class="fa-3x">
  <i class="fas fa-spinner fa-spin"></i>
  <i class="fas fa-circle-notch fa-spin"></i>
  <i class="fas fa-sync fa-spin"></i>
  <i class="fas fa-cog fa-spin"></i>
  <i class="fas fa-spinner fa-pulse"></i>
  <i class="fas fa-stroopwafel fa-spin"></i>
</div>

其他使用方法及功能参考教程的右边边栏项：https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

图标检索

使用一下网站进行图标搜索：

cheatsheet 官网：https://fontawesome.com/cheatsheet
搜索图标：https://fontawesome.com/icons/search

]]> 0 https://blog.niekun.net/archives/766.html#comments https://blog.niekun.net/feed/category/html/archives/766.html bootstrap 的使用 https://blog.niekun.net/archives/764.html https://blog.niekun.net/archives/764.html Thu, 12 Dec 2019 21:55:00 +0800 admin 2019-12-16T14:21:05.png

bootstrap 是全球最流行的前端框架，用来构建高响应，移动端优先的项目。

官网：https://getbootstrap.com/
GitHub 主页：https://github.com/twbs/bootstrap
release 页面：https://github.com/twbs/bootstrap/releases

下载

从官方发布页下载：

wget https://github.com/twbs/bootstrap/releases/download/v4.4.1/bootstrap-4.4.1-dist.zip
unzip bootstrap-4.4.1-dist.zip

引用

如果只想使用 bootstrap 的 css 特性，在 <head> 标签内 link：

    <link rel="stylesheet" href="path/to/bootstrap.min.css">

如果想要全套的交互响应功能，需要 jQuery，popper.js 框架和引用 bootstrap.js 文件,注意引用顺序不能乱，jQuery must come first, then Popper.js, and then our JavaScript plugins，将一下 script 放到结束符号 </body> 标签前：

<script src="path/to/jquery.min.js"></script>
<script src="path/to/popper.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>

jQuery：https://github.com/jquery/jquery
popper.js：https://github.com/popperjs/popper.js

使用

官方手册：https://getbootstrap.com/docs/4.4/getting-started/introduction/
w3 教程：https://www.w3schools.com/bootstrap4/

container 容器相关

https://getbootstrap.com/docs/4.4/layout/overview/

grid 栅格结构相关

https://getbootstrap.com/docs/4.4/layout/grid/

typegraphy 输入文字相关

https://getbootstrap.com/docs/4.4/content/typography/
https://getbootstrap.com/docs/4.4/components/badge/
https://getbootstrap.com/docs/4.4/utilities/text/

输入特殊字符相关

https://getbootstrap.com/docs/4.4/content/code/

table 表格相关

https://getbootstrap.com/docs/4.4/content/tables/

alert 报警框

https://getbootstrap.com/docs/4.4/components/alerts/

button 按键

https://getbootstrap.com/docs/4.4/components/buttons/
https://getbootstrap.com/docs/4.4/components/button-group/
https://getbootstrap.com/docs/4.4/components/dropdowns/
https://getbootstrap.com/docs/4.4/components/popovers/
https://getbootstrap.com/docs/4.4/components/tooltips/#examples

card 卡片模块

https://getbootstrap.com/docs/4.4/components/card/
https://getbootstrap.com/docs/4.4/utilities/stretched-link/

carousel 幻灯片

https://getbootstrap.com/docs/4.4/components/carousel/

collapse 折叠内容

https://getbootstrap.com/docs/4.4/components/collapse/

form 表格输入框格式相关

https://getbootstrap.com/docs/4.4/components/forms/
https://getbootstrap.com/docs/4.4/components/input-group/

list 相关

https://getbootstrap.com/docs/4.4/components/list-group/

modal 弹窗相关

https://getbootstrap.com/docs/4.4/components/modal/

nav 导航栏

https://getbootstrap.com/docs/4.4/components/navs/
https://getbootstrap.com/docs/4.4/components/navbar/
https://getbootstrap.com/docs/4.4/components/scrollspy/

页面导航栏

https://getbootstrap.com/docs/4.4/components/pagination/

progress 进度条

https://getbootstrap.com/docs/4.4/components/progress/

spinner 动态进度图标

https://getbootstrap.com/docs/4.4/components/spinners/

breadcrumb

2019-12-16T14:24:35.png

官网简介：https://getbootstrap.com/docs/4.4/components/breadcrumb/

breadcrumb 可以指明当前页面层级关系，使用 css 定义的符号进行分割。

2019-12-16T14:51:05.png

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

为了为障碍浏览提供方便，针对面包屑这样具备导航功能的模块，建议添加一个有意义的标签：aria-label="breadcrumb" 來描述 <nav> 元素，以及使用 aria-current="page" 到这组导航的最后一个项目，以标明当前页面名称（路径）。

修改默认分割符：

<style>
    .breadcrumb-item + .breadcrumb-item::before {
        content: ">";
    }
</style>

border 边缘

https://getbootstrap.com/docs/4.4/utilities/borders/

color 颜色

https://getbootstrap.com/docs/4.4/utilities/colors/

display 元素显示定义

https://getbootstrap.com/docs/4.4/utilities/display/
https://getbootstrap.com/docs/4.4/utilities/flex/

嵌入 iframe 元素

https://getbootstrap.com/docs/4.4/utilities/embed/

shadow 阴影

https://getbootstrap.com/docs/4.4/utilities/shadows/

sizing 宽度高度定义

https://getbootstrap.com/docs/4.4/utilities/sizing/

spacing 空间 padding 和 margin 的定义

https://getbootstrap.com/docs/4.4/utilities/spacing/

alignment 对齐

https://getbootstrap.com/docs/4.4/utilities/vertical-align/

]]> 0 https://blog.niekun.net/archives/764.html#comments https://blog.niekun.net/feed/category/html/archives/764.html