IT

2022-10-13
HTML5基本元素

New : HTML5 新属性：

accesskey 设置访问元素的键盘快捷键。

class 规定元素的类名（classname）

contenteditableNew 规定是否可编辑元素的内容。

contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素，出 现上下文菜单

data-*New 用于存储页面的自定义数据

dir 设置元素中内容的文本方向。

draggableNew 指定某个元素是否可以拖动

dropzoneNew 指定是否将数据复制，移动，或链接，或删除

hiddenNew hidden 属性规定对元素进行隐藏。

id 规定元素的唯一 id

lang 设置元素中内容的语言代码。

spellcheckNew 检测元素是否拼写错误

style 规定元素的行内样式（inline style）

tabindex 设置元素的 Tab 键控制次序。

title 规定元素的额外信息（可在工具提示中显示）

translateNew 指定是否一个元素的值在页面载入时是否需要翻译

阅读更多

2022-10-13
glyphicon和font awesome字体图标的混合使用导致样式混乱

原则上字体文件的混合使用不会出现混乱，或页面出现乱码标识，框框等问题，如果出现了这种问题，可以从以下几种方式去排查。

1).对应css文件引用路径不对
2).只是引用了css，却没有添加对应的fonts文件夹【字体文件】
3). css文件与字体文件的相对路径不对
4).网站中自定义了全局 font,或font-family 导致 字体文件显示不出来

阅读更多

2022-10-13
HTML5的主要功能构成

HTML5主要以下功能构成：

Canvas (2D和3D)
Channel消息传送
Cross- document消息传送
Geolocation
MathML
Microdata
Server-Sent Events
Scalable Vector Graphics (SVG)
WebSocket API及协议
Web Origin Concept
Web Storage
Web SQL database
Web Workers
XMLHttpRequest Level 2

阅读更多

2022-10-13
响应式导航

以下是实现HTML5响应式导航的一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<head>
    <title>响应式导航</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            margin: 0;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
        }

            .topnav a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                .topnav a:hover {
                    background-color: #ddd;
                    color: black;
                }

            .topnav .icon {
                display: none;
            }

        @media screen and (max-width: 600px) {
            .topnav a:not(:first-child) {
                display: none;
            }

            .topnav a.icon {
                float: right;
                display: block;
            }

            
            .container {
                display: inline-block;
                cursor: pointer;
            }

            
            .bar1, .bar2, .bar3 {
                width: 35px;
                height: 5px;
                background-color: #333;
                margin: 6px 0;
                transition: 0.4s;
            }

            .change .bar1 {
                -webkit-transform: rotate(-45deg) translate(-9px, 6px);
                transform: rotate(-45deg) translate(-9px, 6px);
            }

            .change .bar2 {
                opacity: 0;
            }

            .change .bar3 {
                -webkit-transform: rotate(45deg) translate(-8px, -8px);
                transform: rotate(45deg) translate(-8px, -8px);
            }
        }

        @media screen and (max-width: 600px) {
            .topnav.responsive {
                position: relative;
            }

                .topnav.responsive .icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                }

                .topnav.responsive a {
                    float: none;
                    display: block;
                    text-align: left;
                }
        }
    </style>
    <script type="text/javascript">
        function myFunction(iconid) {
            iconid.classList.toggle("change");
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</head>
<body>
    <div class="topnav" id="myTopnav">
        <a href="#home">主页</a>
        <a href="#news">新闻中心</a>
        <a href="#contact">联系我们</a>
        <a href="#about">关于</a>
        <a href="javascript:void(0);" style="font-size:15px;" class="icon">
            <!--&#9776;-->
            <div class="container" onclick="myFunction(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </a>
    </div>
    <div style="padding-left:16px">
        <h2>标题</h2>
        <p>内容</p>
    </div>
</body>
阅读更多

2022-10-13
路径中的点“./”、“../”、“/”代表的含义

./ 代表当前目录

../ 代表上一层目录

/ 代表根目录

阅读更多
浏览 次 |

© 2023 南疆 with help from Hexo and Twitter Bootstrap. Theme by Freemind.

container-narrow --> ▲