标签: HTML5

  • HTML特殊转义字符对照表

    HTML特殊转义字符对照表

    字符十进制转义字符
    ""
    &&&
    <&#60;&lt;
    >&#62;&gt;
    不断开空格(non-breaking space)&#160;&nbsp;
    字符十进制转义字符字符十进制转义字符字符十进制转义字符
    ?&#161;&iexcl;Á&#193;&Aacute;á&#225;&aacute;
    &#162;&cent;Â&#194;&circ;â&#226&acirc;
    &#163;&pound;Ã&#195;&Atilde;ã&#227;&atilde;
    ¤&#164;&curren;Ä&#196;&Aumlä&#228;&auml;
    &#165;&yen;Å&#197;&ring;å&#229;&aring;
    |&#166;&brvbar;Æ&#198;&AElig;æ&#230;&aelig;
    §&#167;&sect;Ç&#199;&Ccedil;ç&#231;&ccedil;
    ¨&#168;&uml;È&#200;&Egrave;è&#232;&egrave;
    ©&#169;&copy;É&#201;&Eacute;é&#233;&eacute;
    a&#170;&ordf;Ê&#202;&Ecirc;ê&#234;&ecirc;
    ?&#171;&laquo;Ë&#203;&Euml;ë&#235;&euml;
    ?&#172;&not;Ì&#204;&Igrave;ì&#236;&igrave;
    /x7f&#173;&shy;Í&#205;&Iacute;í&#237;&iacute;
    ®&#174;&reg;Î&#206;&Icirc;î&#238;&icirc;
    ˉ&#175;&macr;Ï&#207;&Iuml;ï&#239;&iuml;
    °&#176;&deg;Ð&#208;&ETH;ð&#240;&ieth;
    ±&#177;&plusmn;Ñ&#209;&Ntilde;ñ&#241;&ntilde;
    2&#178;&sup2;Ò&#210;&Ograve;ò&#242;&ograve;
    3&#179;&sup3;Ó&#211;&Oacute;ó&#243;&oacute;
    &#180;&acute;Ô&#212;&Ocirc;ô&#244;&ocirc;
    μ&#181;&micro;Õ&#213;&Otilde;õ&#245;&otilde;
    ?&#182;&para;Ö&#214;&Ouml;ö&#246;&ouml;
    ·&#183;&middot;&times;&#215;&times;÷&#247;&divide;
    ?&#184;&cedil;Ø&#216;&Oslash;ø&#248;&oslash;
    1&#185;&sup1;Ù&#217;&Ugrave;ù&#249;&ugrave;
    o&#186;&ordm;Ú&#218;&Uacute;ú&#250;&uacute;
    ?&#187;&raquo;Û&#219;&Ucirc;û&#251;&ucirc;
    ?&#188;&frac14;Ü&#220;&Uuml;ü&#252;&uuml;
    ?&#189;&frac12;Ý&#221;&Yacute;ý&#253;&yacute;
    ?&#190;&frac34;Þ&#222;&THORN;þ&#254;&thorn;
    ?&#191;&iquest;ß&#223;&szlig;ÿ&#255;&yuml;
    À&#192;&Agrave;à&#224;&agrave; 
  • ASCII对照表

    ASCII值控制字符ASCII值控制字符ASCII值控制字符ASCII值控制字符
    0NUT32(space)64@96
    1SOH33!65A97a
    2STX3466B98b
    3ETX35#67C99c
    4EOT36$68D100d
    5ENQ37%69E101e
    6ACK38&70F102f
    7BEL39,71G103g
    8BS40(72H104h
    9HT41)73I105i
    10LF42*74J106j
    11VT43+75K107k
    12FF44,76L108l
    13CR4577M109m
    14SO46.78N110n
    15SI47/79O111o
    16DLE48080P112p
    17DCI49181Q113q
    18DC250282R114r
    19DC351383S115s
    20DC452484T116t
    21NAK53585U117u
    22SYN54686V118v
    23TB55787W119w
    24CAN56888X120x
    25EM57989Y121y
    26SUB58:90Z122z
    27ESC59;91[123{
    28FS60<92/124|
    29GS61=93]125}
    30RS62>94^126`
    31US63?95_127DEL
    NUL空VT 垂直制表SYN 空转同步
    STX 正文开始CR 回车CAN 作废
    ETX 正文结束SO 移位输出EM 纸尽
    EOY 传输结束SI 移位输入SUB 换置
    ENQ 询问字符DLE 空格ESC 换码
    ACK 承认DC1 设备控制1FS 文字分隔符
    BEL 报警DC2 设备控制2GS 组分隔符
    BS 退一格DC3 设备控制3RS 记录分隔符
    HT 横向列表DC4 设备控制4US 单元分隔符
    LF 换行NAK 否定DEL 删除
    ASCII值控制字符ASCII值控制字符ASCII值控制字符ASCII值控制字符
    0NUT32(space)64@96
    1SOH33!65A97a
    2STX3466B98b
    3ETX35#67C99c
    4EOT36$68D100d
    5ENQ37%69E101e
    6ACK38&70F102f
    7BEL39,71G103g
    8BS40(72H104h
    9HT41)73I105i
    10LF42*74J106j
    11VT43+75K107k
    12FF44,76L108l
    13CR4577M109m
    14SO46.78N110n
    15SI47/79O111o
    16DLE48080P112p
    17DCI49181Q113q
    18DC250282R114r
    19DC351383S115s
    20DC452484T116t
    21NAK53585U117u
    22SYN54686V118v
    23TB55787W119w
    24CAN56888X120x
    25EM57989Y121y
    26SUB58:90Z122z
    27ESC59;91[123{
    28FS60<92/124|
    29GS61=93]125}
    30RS62>94^126`
    31US63?95_127DEL
    NUL空VT 垂直制表SYN 空转同步
    STX 正文开始CR 回车CAN 作废
    ETX 正文结束SO 移位输出EM 纸尽
    EOY 传输结束SI 移位输入SUB 换置
    ENQ 询问字符DLE 空格ESC 换码
    ACK 承认DC1 设备控制1FS 文字分隔符
    BEL 报警DC2 设备控制2GS 组分隔符
    BS 退一格DC3 设备控制3RS 记录分隔符
    HT 横向列表DC4 设备控制4US 单元分隔符
    LF 换行NAK 否定DEL 删除
    ASCII值控制字符ASCII值控制字符ASCII值控制字符ASCII值控制字符
    0NUT32(space)64@96
    1SOH33!65A97a
    2STX3466B98b
    3ETX35#67C99c
    4EOT36$68D100d
    5ENQ37%69E101e
    6ACK38&70F102f
    7BEL39,71G103g
    8BS40(72H104h
    9HT41)73I105i
    10LF42*74J106j
    11VT43+75K107k
    12FF44,76L108l
    13CR4577M109m
    14SO46.78N110n
    15SI47/79O111o
    16DLE48080P112p
    17DCI49181Q113q
    18DC250282R114r
    19DC351383S115s
    20DC452484T116t
    21NAK53585U117u
    22SYN54686V118v
    23TB55787W119w
    24CAN56888X120x
    25EM57989Y121y
    26SUB58:90Z122z
    27ESC59;91[123{
    28FS60<92/124|
    29GS61=93]125}
    30RS62>94^126`
    31US63?95_127DEL
    NUL空VT 垂直制表SYN 空转同步
    STX 正文开始CR 回车CAN 作废
    ETX 正文结束SO 移位输出EM 纸尽
    EOY 传输结束SI 移位输入SUB 换置
    ENQ 询问字符DLE 空格ESC 换码
    ACK 承认DC1 设备控制1FS 文字分隔符
    BEL 报警DC2 设备控制2GS 组分隔符
    BS 退一格DC3 设备控制3RS 记录分隔符
    HT 横向列表DC4 设备控制4US 单元分隔符
    LF 换行NAK 否定DEL 删除
  • Bootstrap 一行拆成5列 代码示例 图文教程

    Bootstrap 一行拆成5列 代码示例 图文教程

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。

    它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分,使用col-md-6即可;要3等分,使用col-md-4即可;但如果我们要5等分或者8等分怎么办呢?下面的示例是bootstrap五等分布局:

    <style>
    .col-xs-2-half, .col-sm-2-half, .col-md-2-half, .col-lg-2-half{ position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
    @media ( min-width : 768px) { .col-sm-2-half{ width: 20%; float: left; } }
    @media ( min-width : 992px) { .col-md-2-half{ width: 20%; float: left; } }
    @media ( min-width : 1200px) { .col-lg-2-half{ width: 20%; float: left; } }
    </style>

    在需要的地方加上 class="col-lg-2-half" 即可。

  • font-spider利器对webfont网页字体压缩使用  图文教程

    font-spider利器对webfont网页字体压缩使用 图文教程

    为什么要使用字蛛?

    由于中文的字体体积太大,一般都是几M以上。英文字体文字部分由26个字母组成,所以字体文件通常不会太大;而中文汉字数量总共约有九万左右, 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据,常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小,参照现在中国的网络环境,显然不适合在项目中使用。

    原理:

    1.爬行本地 html 文档,分析所有 css 语句
    2.记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器
    3.通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本
    4.找到字体文件并删除没被使用的字符
    5.编码成跨平台使用的字体格式

    简而言之:就是爬出你项目中所使用的文字保留起来,删除没被使用到的文字,并重新打包。

    安装

    npm install font-spider -g

    使用

    hyheilizhitij(汉仪黑荔枝体简)

    1.通过font-face引入我们下载好的文件

    @font-face{
    			font-family: 'myfont';
    			src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
    			font-weight: normal;
    			font-style: normal;
    		}
    

    2.使用自定义字体

    .test{font-family: 'myfont';}

    3.执行font-spider命令压缩字体
    运行font-spider命令 ,页面依赖的字体将会自动压缩好,原 .ttf 字体会备份

    font-spider ./index.html

    压缩之前是1753.24 KB大小,压缩之后大小4.796 KB
    Original size: 1753.24 KB
    File fonts/HYHeiLiZhiTiJ.ttf created: 4.796 KB

    完整代码

    <div class="test">
    		账号未登录
    	</div>
    	<style>
    		@font-face{
    			font-family: 'myfont';
    			src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
    			font-weight: normal;
    			font-style: normal;
    		}
    		.test{
    			font-family: 'myfont';
    		}
    	</style>

  • ul在div中居中显示

    ul在div中居中显示

    ul在div中居中显示,不啰嗦了直接上css代码:

    .nav {
        text-align: center;
    }
    .nav ul {
        display: inline-block;
        height: 15px;
        vertical-align: top;
    }
    .nav ul li {
        display: inline-block;
    }

  • HTML 禁止在手机浏览器中缩放

    HTML 禁止在手机浏览器中缩放

    在HTML的页面head中加入禁止缩放,代码如下:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

  • jQuery 添加 required 必填属性      图文教程

    jQuery 添加 required 必填属性 图文教程

    现在大部分主流浏览器均已支持required属性,那么我们如何使用javascript添加required属性呢,下面我们记录一下jQuery的代码

    $('#id').attr("required", "true");
    

  • JQuery 如何获取select选中的值 图文教程

    JQuery 如何获取select选中的值 图文教程

    html代码

    <select id="ddl">
    <option value="100" emoney="12" >选项1</option>
    <option value="200" emoney="13" >选项2</option>
    <option value="300" emoney="14" >选项3</option>
    </select>

    Javascript代码部分

    //获取属性emoney的值
    var iteValue = $("#ddl").find("option:selected").attr("emoney");
    console.log('emoney的值:' + iteValue);
    //获取选中项的value
    var itemValue1 = $("#ddl").val();
    console.log('Value:' + itemValue1);
    //获取选中项的文本值
    var itemText = $("#ddl option:selected").text();
    console.log('Text:' + itemText);
    //获取选中项的文本值
    var itemText1 = $("#ddl").find("option:selected").text();
    console.log('Text:' + itemText1);

  • jQuery插件 — Cookie插件jquery.cookie.js 使用实例

    jQuery插件 — Cookie插件jquery.cookie.js 使用实例

    Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下,还可以存储用户的登录信息,使得用户在访问网站时不必每次都键入这些信息

    使用方法:

    引入jquery.cookie.js

    <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>  
    <script src="scripts/jquery.cookie.js" type="text/javascript"></script>

    使用方法

    新添加一个会话 cookie

    $.cookie('the_cookie', 'the_value');

    注:当没有指明 cookie有效时间时,所创建的cookie有效期默认到用户关闭浏览器为止,所以被称为

    “会话cookie(session cookie)”。

    创建一个cookie并设置有效时间为 7天:

    $.cookie('the_cookie', 'the_value', { expires: 7 });

    注:当指明了cookie有效时间时,所创建的cookie被称为“持久 cookie (persistent  cookie)”。 

    创建一个cookie并设置 cookie的有效路径:

    $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

    注:在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突) 。 

    读取cookie:

    $.cookie('the_cookie'); // cookie存在 => 'the_value'
    $.cookie('not_existing'); // cookie不存在 => null

    删除cookie,通过传递null作为cookie的值即可:

    $.cookie('the_cookie', null);

    将cookie写入文件

    var COOKIE_NAME = 'username';  
        if( $.cookie(COOKIE_NAME) ){  
            $("#username").val(  $.cookie(COOKIE_NAME) );  
        }  
        $("#check").click(function(){  
            if(this.checked){  
                $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10, domain: 'jquery.com', secure: true });  
                //var date = new Date();  
                //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期  
                //$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });  
            }else{  
                $.cookie(COOKIE_NAME, null, { path: '/' });  //删除cookie  
            }  
        });

    参数设置

    expires: (Number | Date)      有效期,可以设置一个整数作为有效期(单位:天),也可以设置一个日期对象作为Cookie的过期日期。如果指定日期为负数,那么此cookie将被删除;如果不设置或者设置为null,那么此cookie将被当作Session Cookie处理,并且在浏览器关闭后删除

    path:  (String)          Cookie的路径属性,默认是创建该cookie的页面路径

    domain: (String)     Cookie的域名属性,默认是创建该cookie的页面域名

    secure: (Boolean)  如果设为true,那么此cookie的传输会要求一个安全协议,例如HTTPS

    jquery.cookie.js

    /**
     * Cookie plugin
     *
     * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     *
     */
    /**
     * Create a cookie with the given name and value and other optional parameters.
     *
     * @example $.cookie('the_cookie', 'the_value');
     * @desc Set the value of a cookie.
     * @example $.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});
     * @desc Create a cookie with all available options.
     * @example $.cookie('the_cookie', 'the_value');
     * @desc Create a session cookie.
     * @example $.cookie('the_cookie', null);
     * @desc Delete a cookie by passing null as value.
     *
     * @param String name The name of the cookie.
     * @param String value The value of the cookie.
     * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
     * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
     *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
     *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
     *                             when the the browser exits.
     * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
     * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
     * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
     *                        require a secure protocol (like HTTPS).
     * @type undefined
     *
     * @name $.cookie
     * @cat Plugins/Cookie
     * @author Klaus Hartl/klaus.hartl@stilbuero.de
     */
    /**
     * Get the value of a cookie with the given name.
     *
     * @example $.cookie('the_cookie');
     * @desc Get the value of a cookie.
     *
     * @param String name The name of the cookie.
     * @return The value of the cookie.
     * @type String
     *
     * @name $.cookie
     * @cat Plugins/Cookie
     * @author Klaus Hartl/klaus.hartl@stilbuero.de
     */
    jQuery.cookie = function(name, value, options) {
        if (typeof value != 'undefined') { // name and value given, set cookie
            options = options || {};
            if (value === null) {
                value = '';
                options.expires = -1;
            }
            var expires = '';
            if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == 'number') {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
                } else {
                    date = options.expires;
                }
                expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
            }
            var path = options.path ? '; path=' + options.path : '';
            var domain = options.domain ? '; domain=' + options.domain : '';
            var secure = options.secure ? '; secure' : '';
            document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
        } else { // only name given, get cookie
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    };
  • 在Python3 Django框架 模板中如何使用条件判断?

    在Python3 Django框架 模板中如何使用条件判断?

    老季在本篇记录一下在Django的开发中,如何在模板中使用if判断条件。

    views.py

    # view 文件
    def func(request):
        ...
        return render(request,"index.html",{
            'current_user':"alex",
            'user_list':['alex','eric',
            'user_dict':{'k1':'v1','k2':'v2'}]
        })

    .html 模板

    # html 文件
    <html>
        ....
    <body>
        <div>{{current_user}}</div>
        <a>{{ user_list.0}}</a>
        # 条件判断
        {% if age %}
            <a> 有年龄<a>
        {% else %}
            <a> 无年龄<a>
        {% endif %}
        # 嵌套条件判断
        {% if age %}
            <a> 有年龄<a>
        {% if age > 16 %}
            <a>老男人<a>
        {% else %}
            <a>小男孩<a>
        {% else %}
            <a> 无年龄<a>
        {% endif %}
        <body>
    </html>
  • Python3 Django admin后台中设置某个字段可以选择显示H5自定义颜色的选项卡

    Python3 Django admin后台中设置某个字段可以选择显示H5自定义颜色的选项卡

    场景需求

    在Django的项目开发中,如何在后台设置将某个字段使用H5的自定义颜色选择器,实现效果如下图所示:

    可以根据HTML5自定义颜色的设置自定义显示。

    这边我们记录一下如何才能实现

    安装Python扩展

    在终端中执行如下命令

    pip install django-colorfield
    python .\manage.py collectstatic

    设置 settings.py

    打开 settings.py ,将 colorfield 添加到 INSTALLED_APPS 配置中

    models.py 中使用

    from django.db import models
    from colorfield.fields import ColorField
    class ComputerRoom(models.Model):
        name = models.CharField(max_length=256,verbose_name = "名称")
        abbr = models.CharField(max_length=128, blank=True, null=True,verbose_name = "缩写")
        type = models.CharField(max_length=256,verbose_name='类型', choices=typeChoices)
        color = ColorField(default='#FF0000',verbose_name='显示颜色')

    然后在Django后台打开对应的模块就可以看到颜色选择器了。

  • django输出html内容

    django输出html内容

    最近在学习django,于是就用django做了一个简单的网站,用来练手,具体功能就是从网上抓取数据,然后放到我的网站上面,但是遇到一个问题就是django无法输出html格式的内容,只能以字符串的形式输出:

    data = '<h1>hello world</h1>'
    <p>{{ data }}</p>

    我们目的是输出的是:

    hello world

    但是结果输出的是:

    <h1>hello world</h1>

    在网上搜了好久,终于找到解决办法:

    对于单个变量使用django的过滤器,告诉Django这个字符串不用进行HTML转义,方法如下:

    data | safe

    对于一段模板内容可以使用autoescape标签,比如:

    {% autoescape off %}
         {{ data }}
     {% endautoescape %}

    off 的意思是关闭对html的转义,而将off替换成on就表示进行html转义,默认进行html转义

    注意:autoescape 具备继承性的,如果在父模版中定义了,则在子模版对应内容部分也存在此属性

    我们可能会疑问,django为什么要将这些字符转义,而不是按原本html的内容输出呢?
    我们举个例子:
    需要用户输入用户名来注册,这个用户输入了用户名为:

    <script type="text/javascript">alert('hello');</script>

    假设他输入的长度合法,而且django也确实没显式提供什么特殊字符转换方法,那么每次在网页上面显示的时候,岂不是每次都弹出一个窗口,那么不是就很不安全啦。
    为了解决这个问题,django默认将所有特殊的字符都转换成在html上面可以显示的内容,而不再包含转义功能!于是,也就出现了上面我想输出而输出而输出不了html的内容。

WeChat