{"id":920,"date":"2015-08-04T17:36:59","date_gmt":"2015-08-04T09:36:59","guid":{"rendered":"https:\/\/ai.zhousir.top\/?p=920"},"modified":"2026-08-18T12:58:43","modified_gmt":"2026-08-18T04:58:43","slug":"html5%e5%ae%9e%e4%be%8b%e4%b9%8b%e5%a9%9a%e5%ba%86%e7%95%8c%e9%9d%a2","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=920","title":{"rendered":"Html5\u5b9e\u4f8b\u4e4b\u5a5a\u5e86\u754c\u9762"},"content":{"rendered":"
\n
\n

\u5e7f\u4e49\u7684 HTML5<\/strong> \u662f HTML\u3001CSS \u548c JavaScript \u7684\u7ec4\u5408\uff0c\u66f4\u9002\u5408\u79fb\u52a8 Web\u3002\u4e24\u5927\u7279\u70b9\uff1a\u5f3a\u5316\u7f51\u9875\u8868\u73b0\uff1b\u8865\u4e0a\u672c\u5730\u6570\u636e\u5e93\u4e00\u7c7b\u5e94\u7528\u80fd\u529b\u3002\u672c\u4f8b\u5148\u505a\u5a5a\u5e86 H5 \u9875\uff0c\u518d\u7528 WebView<\/code> \u5d4c\u8fdb Android\u3002<\/p>\n<\/blockquote>\n

<\/p>\n

\n

\u4e00\u3001\u6548\u679c\u4e0e\u5207\u56fe<\/span><\/h2>\n

\u5a5a\u5e86\u9875\u9762\u6548\u679c\u56fe\uff1a<\/p>\n

\"QQ\u255c\u256a\u2550\u255d20150804172049\"<\/a><\/p>\n

\u6309\u754c\u9762\u51c6\u5907\u56fe\u7247\u8d44\u6e90\uff1a<\/p>\n

\"QQ\u255c\u256a\u2550\u255d20150804172717\"<\/a><\/p>\n\n\n\n\n\n\n\n\n
\u6587\u4ef6<\/th>\n\u804c\u8d23<\/th>\n<\/tr>\n<\/thead>\n
weding.html<\/td>\n\u9876\u680f\u5012\u8ba1\u65f6\u3001\u56db\u5bab\u683c\u5165\u53e3\u3001\u9875\u811a\u627f\u529e\u65b9<\/td>\n<\/tr>\n
mycss.css<\/td>\n\u9152\u7ea2\u5e95\u3001\u7edd\u5bf9\u5b9a\u4f4d\u8bdd\u7b52\u4e0e\u5929\u6570\u3001\u6d6e\u52a8\u5bab\u683c<\/td>\n<\/tr>\n
activity_weding_layout.xml<\/td>\n\u5168\u5c4f WebView<\/td>\n<\/tr>\n
WedingActivity.java<\/td>\n\u53bb\u6807\u9898\u680f\u540e loadUrl<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

\u4e8c\u3001\u9875\u9762\u4ee3\u7801 weding.html<\/span><\/h2>\n

viewport<\/code> \u9002\u914d\u624b\u673a\u7f29\u653e\uff1b\u5916\u5c42 #680011<\/code> \u9152\u7ea2\u5e95\u3002\u9876\u680f\u53e0\u80cc\u666f\u56fe\u548c\u8bdd\u7b52\uff0c\u5012\u8ba1\u65f6\u7edd\u5bf9\u5b9a\u4f4d\u5728\u53f3\u4e0b\uff1b\u4e2d\u95f4\u56db\u5f20\u5165\u53e3\u56fe\uff1b\u9875\u811a\u94fe\u5230\u627f\u529e\u65b9\u300c\u6210\u90fd\u5e78\u798f\u516c\u793e\u5a5a\u5e86\u516c\u53f8\u300d\u3002<\/p>\n

<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<head>\n    <title>\u5a5a\u5e86\u4e3b\u9875<\/title>\n    <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, minimum-scale=1.0, maximum-scale=2.0,user-scalable=yes\">\n    <!--<meta name=\"viewport\" content=\"width=640, initial-scale=0.5,maximum-scale=0.5\" \/>-->\n    <meta name=\"apple-mobile-web-app-capable\" content=\"YES\">\n    <link rel=\"stylesheet\" href=\"mycss.css\" type=\"text\/css\" \/>\n<\/head>\n<body bgcolor=\"#680011\">\n    <div class=\"wrapcontain\" style=\"width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;\">\n        <div class=\"imgTop\">\n            <img class=\"imgtop_bg\" src=\".\/img\/index_top_bg.png\" \/>\n            <img class=\"imgtop_lb\" src=\".\/img\/index_microphone.png\"\/>\n            <h3 class=\"p3\">\n                <p id=\"sp11\" class=\"sp1\">\u79bb\u6211\u4eec\u5a5a\u793c<\/p>\n                <p class=\"sp2\">\u8fd8\u6709<span class=\"sp3\">35<\/span>\u5929<\/p>\n            <\/h3>\n        <\/div>\n        <div class=\"imgShow\">\n            <img src=\".\/img\/index_yaoqinghan.png\" \/>\n            <img src=\".\/img\/index_zhufuqiang.png\" \/>\n            <img src=\".\/img\/index_yaoyiyao.png\" \/>\n            <img src=\".\/img\/index_hunsha.png\" \/>\n        <\/div>\n        <div class=\"footer\">\n            <a href=\"###\">\u5a5a\u793c\u627f\u529e\u65b9:\u6210\u90fd\u5e78\u798f\u516c\u793e\u5a5a\u5e86\u516c\u53f8<img src=\".\/img\/redRightarrow.png\" \/><\/a>\n        <\/div>\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n
\n
\u4e09\u3001\u6837\u5f0f mycss.css<\/span><\/h2>\n
.imgTop<\/code> \u76f8\u5bf9\u5b9a\u4f4d\uff1b\u8bdd\u7b52\u7edd\u5bf9\u5b9a\u4f4d\u5728\u5de6\u4e0a\uff1b\u5012\u8ba1\u65f6\u6587\u5b57 #ffeeac<\/code> \u8d34\u53f3\u4e0b\u3002\u5bab\u683c\u6bcf\u5f20 145\u00d7110\uff0c\u5de6\u6d6e\u52a8\u3002<\/p>\n
.imgTop {\n    width: 320px;\n    margin-left: -10px;\n    margin-right: -10px;\n    min-height: 200px;\n    position: relative;\n    border-bottom: 1px solid #ffeeac;\n}\n.imgTop .imgtop_bg { width: 100%; }\n.imgTop .imgtop_lb {\n    margin-top: 10px;\n    margin-left: 10px;\n    position: absolute; left: 10px; top: 10px;\n}\n.p3 {\n    width: 118px;\n    height: 22px;\n    padding: 30px;\n    position: absolute;\n    right: 10px;\n    bottom: 0px;\n}\n.sp1 { font-size: 10px; color: #ffeeac; }\n.sp2 { font-size: 10px; color: #ffeeac; text-align: right; }\n.sp3 { font-size: 20px; }\n.imgShow {\n    width: 320px;\n    height: 210px;\n    overflow: hidden;\n    margin-left: -10px;\n    margin-top: 14px;\n}\n.imgShow img {\n    width: 145px;\n    height: 110px;\n    display: inline-block;\n    float: left;\n    margin-left: 10px;\n    margin-bottom: 10px;\n}\n.footer { margin-top: 14px; text-align: center; }\n.footer a { color: #92192d; font-size: 14px; }\n.footer img {\n    width: 20px;\n    display: inline-block;\n    position: relative;\n    top: 2px;\n    margin-left: 8px;\n}<\/code><\/pre>\n
\n
\u56db\u3001\u5d4c\u8fdb Android WebView<\/span><\/h2>\n
\u5e03\u5c40 activity_weding_layout.xml<\/code>\uff1a<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"vertical\" >\n    <WebView\n        android:id=\"@+id\/weding_webview\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\" \/>\n<\/LinearLayout><\/code><\/pre>\n
WedingActivity<\/code> \u53bb\u6389\u6807\u9898\u680f\u540e\u52a0\u8f7d\u4e0a\u9762\u5b9e\u73b0\u7684\u7f51\u9875\uff1a<\/p>\n
public class WedingActivity extends Activity {\n    private WebView mWebView;\n    private String url = \"http:\/\/www.warmtel.com\/html\/weding.html\";\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        requestWindowFeature(Window.FEATURE_NO_TITLE);\n        setContentView(R.layout.activity_weding_layout);\n        mWebView = (WebView) findViewById(R.id.weding_webview);\n        mWebView.loadUrl(url);\n    }\n}<\/code><\/pre>\n
\n
\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1aH5 \u8d1f\u8d23\u8868\u73b0\uff0cAndroid \u7528\u5168\u5c4f WebView loadUrl \u5373\u53ef\u628a\u5a5a\u5e86\u9875\u5d4c\u8fdb App\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
\u5e7f\u4e49\u7684 HTML5 \u662f HTML\u3001CSS \u548c JavaScript \u7684\u7ec4\u5408\uff0c\u66f4\u9002\u5408\u79fb\u52a8 Web\u3002\u4e24\u5927\u7279\u70b9\uff1a\u5f3a\u5316 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[201],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/920"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=920"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/920\/revisions"}],"predecessor-version":[{"id":924,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/920\/revisions\/924"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}