IDEA Variables in live templates

最新推荐文章于 2024-08-08 15:36:12 发布

weixin_33878457

最新推荐文章于 2024-08-08 15:36:12 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

文章标签：开发工具 json 移动开发

原文链接：https://juejin.im/post/5caeecf7e51d456e6d13345c

本文档详细介绍了HTML5移动端开发的基本模板，包括了页面编码、标题、关键词、描述、视口设置等元信息，以及CSS重置样式、响应式布局和JavaScript基本用法。通过该模板，开发者可以快速搭建移动设备友好的网页界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人操作习惯

-----HTML-----

<mhtml>

<!DOCTYPE HTML>
<html>
<head>
    <!--申明当前页面的编码集-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--网页标题-->
    <title>HTML5移动端开发模板</title>
    <!--网页关键词-->
    <meta name="keywords" content="" />
    <!--网页描述-->
    <meta name="description" content="" />
    <!--适配当前屏幕-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!--禁止自动识别电话号码-->
    <meta name="format-detection" content="telephone=no" />
    <!--禁止自动识别邮箱-->
    <meta content="email=no" name="format-detection" />
    <!--iphone中safari私有meta标签,
        允许全屏模式浏览,隐藏浏览器导航栏-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--iphone中safari顶端的状态条的样式black(黑色)-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="text/css">
    /*reset 重置*/
    body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
    td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
    li{list-style:none;vertical-align:top;}
    table{ border-collapse:collapse;}
    textarea{resize:none;overflow:auto;}
    img{ border:none; vertical-align:middle;}
    em{ font-style:normal;}
    a{ text-decoration:none;}
    a,input{
    -webkit-appearance: none;/*屏蔽阴影*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    /*ios android去除自带阴影的样式*/
    }
    a, img {
    /* 禁止长按链接与图片弹出菜单 */
    -webkit-touch-callout: none; 
     
    }
    html, body {
    /* 禁止选中文本(如无文本选中需求,此为必选项) */
    -webkit-user-select: none;  
    user-select: none;
    }
    /*public*/
    html {
    font-size : 20px;
    }
    @media only screen and (min-width: 401px){
    html {
    font-size: 25px !important;
    }
    }
    @media only screen and (min-width: 428px){
    html {
    font-size: 26.75px !important;
    }
    }
    @media only screen and (min-width: 481px){
    html {
    font-size: 30px !important; 
    }
    }
    @media only screen and (min-width: 569px){
    html {
    font-size: 35px !important; 
    }
    }
    @media only screen and (min-width: 641px){
    html {
    font-size: 40px !important; 
    }
    }
    body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif; 
    overflow-x:hidden; overflow-y:auto; font-size:0.7rem;
    }
    .clear{zoom:1;}
    .clear:after{content:''; display:block; clear:both;}
    .fl{float:left;}
    .fr{float:right;}
    .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}
    </style>
</head>
<body>
    <div>
        <div>这是一个移动端开发模板哟!</div>
    </div>
</body>
</html>复制代码

wid

width:复制代码

hei

height:复制代码

<scri

<script type='text/javascript' src='' charset='utf-8'></script>复制代码

style

<style></style>复制代码

-----CSS-----

mal

margin-left:复制代码

mar

margin-right:复制代码

bgc

background-color:
复制代码

@media

@media only screen and (min-width: ) {   

}复制代码

-----JavaScript-----

conse

console.log("");复制代码

if

if(){
    
}复制代码

$

$("").复制代码

docb

document.getElementById('')复制代码

ajax

$.ajax({    
     url:'',
     type:'POST', //GET    
        async:true,  //false    
        data:{        
        name:'joking',        
        age:21    
    },    
        timeout:5000,    //超时时间    
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text    
        beforeSend:function(xhr){        
            console.log(xhr)        
            console.log('发送前')    },    
        success:function(data,textStatus,jqXHR){        
            console.log(data)；    
        },    
        error:function(xhr,textStatus){        
            console.log('错误'，xhr.responseText)；        
            console.log(xhr)；        
            console.log(textStatus)；    
        }
}) 复制代码

sessget

window.sessionStorage.getItem("");复制代码

sessset

window.sessionStorage.setItem("","");复制代码

loca

window.location.href = ".html";复制代码

-----PHP-----

vard

var_dump();复制代码