ご存知のとおり、今日のモバイル インターネットの普及により、基本的にすべての若者が携帯電話を使用して Web サイトの情報を閲覧したり、携帯電話を使用してショッピング サイトで商品の支払いをしたことがありますが、そのような Web ページがどのように変更されるかについて考えたことはありますか?今日はこの問題について説明します
読者は基本的な知識を持っている必要があります
1. HTML と CSS の使用に習熟していること
2. HTML5 と CSS3 を深く理解している必要はありません
3.および jquery スクリプト言語
上記の基本的な知識がない場合は、オンラインで他の関連する教育投稿を探すことをお勧めします。そうしないと、次の学習についていけない可能性があります
まず、HTML の特殊な構文について説明します。HTML を初めて使用する方はこれまで見たことがないかもしれませんが、専門家の方はこのモジュールをスキップしてください
次に、この図から始めましょう:
この写真は皆さんもご存知かと思いますが、これは淘宝網のタイトルバーです。ここで非常に目を引くのがこのアイコンです。これがどのように作られているかご存知ですか?
まず、淘宝網のロゴアイコンを準備する必要があります。これは、Baidu のダウンロード アドレスから直接ダウンロードできます
ダウンロードが完了したら、画像の形式を ico 形式に変換する必要があります。変換ツールをオンラインで使用します。アドレス
が生成されたら、画像をダウンロードし、名前を taabaoLogo に変更して、新しい HTML プロジェクトを作成します。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" ></head><body> </body></html>
操作の結果は次のとおりです。
この例から、この効果はステートメントに基づいて達成できることがわかりますが、実際の使用では、別のステートメントを追加する必要があります。コードは次のとおりです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > <link rel="icon" style="image/x-icon" href="taobaoLogo.ico"></head><body> </body></html>
ここで、注意深い読者は、効果は同じであるため、なぜわざわざこれを行う必要があるのかを尋ねるかもしれません。詳細については、この記事を参照してください。したがって、ここで冗長にする必要はありません
一般的に、このロゴは。アイコンはタイトルに使用するだけでなく、配置することもできます お気に入りに使用するには、追加されたタイトルバーの rel="短いアイコン" を rel="ブックマーク" に変更するだけです
<link rel="bookmark" style="image/x-icon" href="taobaoLogo.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<!--开启对web app的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /><!--主要是正对苹果手机将数字自动识别为号码--> <meta name="format-detection" content="telephone=no" />
<!-- 忽略识别邮箱，主要是针对安卓手机会自动将符合邮箱格式的字符串识别为邮箱地址--><meta content="email=no" name="format-detection" /><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /><!-- 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html --><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- UC强制全屏 --><meta name="full-screen" content="yes"><!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC应用模式 --><meta name="browsermode" content="application"><!-- QQ应用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no">
window.scrollY window.scrollX
ユーザーによるテキストの選択を禁止します
-webkit-user-select:none
ボックスサイジングについて簡単に説明しましょう
。例: モバイル レイアウトの場合、通常、Web ページを適応的に処理するためにパーセンテージを使用します。これをアダプティブ レイアウトと呼びます。効果を左右に 1 ピクセルずつインデントしたい場合があります。自動 レイアウトに適応すると画面が引き伸ばされ、結果として水平スクロール バーが表示されます。これはモバイル Web ページを開発する場合にはタブーであるため、現時点ではボックス サイズ設定によって問題が解決されます。具体的な文法の詳細については、http: / /www.w3school.com.cn/cssref/pr_box-sizing.asp
box-sizing 属性から、box に関連する別の属性を考えます。それが box-shadow です
box-shadow
これは属性ですがモバイル Web ページではあまり一般的ではありませんが、モバイル Web ページでは比較的一般的ですが、この機能が導入されてから、Wangmen は特定の要素を作成できるようになりました。 Web ページをより 3 次元化し、以前は実現できなかった効果を実現します。詳細については、http://www.w3school.com.cn/cssref/pr_box-shadow の代わりに、ASP
Web ページの読み込み時にすべての画像に HTTP リソース リクエストが必要なため、画像は 1 回のリクエストのトラフィックを削減するためにエンコードされ、それによって Web サイトの読み込み速度が向上します。これはオンライン コーディングを使用して実現できます。ツール、アドレス:
http://www.fishlee.net/Tools/GetImageBase64Code#codeResult
在HTML5中支持一些移动的新特性
在HTML5出现之后，有一些新的事件
执行事件的顺序：touchstart>touchmove>touchend>touchcanel>click
从上面的顺序我们不难分析出：在点击的时候，click会发生延迟，这样的延迟一般是300ms。
<!-- 选择照片 --><input type=file accept="image/*"><!-- 选择视频 --><input type=file accept="video/*">
ios —- android
type email
type url
type search
默认的移动浏览器是不会开启动画效果硬件加速的，但是这样的效果在低端的安卓手机中可能会出现意想不到的反效果
动画加速可以采用，下列代码
.div { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */}设置placeholder时候 focus时候文字没有隐藏
input:focus::-webkit-input-placeholder{ opacity: 0;}::-webkit-scrollbar{ opacity: 0;}除此之外，还有像HTML5 中的API和重力感应事件等等的新特性的加入，使得HTML5网页的开发变得越发的多功能性，但是这些在今天的布局上局不讲了，以后还会继续讨论下去
布局方法
在手机网页开发中，由于是基于webkit引擎开发的，所以我们可以大量的使用HTML5特性进行开发，布局上为了达到适屏的效果，我们需要进行采用的一般是百分比的布局，但是也是有一些布局较为特殊，这个我们就不讨论了，后续会有一篇讲解布局实例的文章，敬请期待
特别说明如需转载请注明出处，同时如果你觉得赞，请为我点一下“推荐”，你的鼓励是我前进的动力
参考文献
Meta 标签与搜索引擎优化
移动web问题小结
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
