zoukankan      html  css  js  c++  java
  • 固定模板详解

    第一个页面

    一、基础模板

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>第一个页面</title>
        </head>
        <body>
            
        </body>
    </html>
    

    二、模板解读

    • DOCTYPE:指定文档类型,规定html标签语法
    • html:文档根标签,标注着文档(页面)的开始与结束
    • head:文档头标签,可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息
    • body:文档主体标签,包含文档所有文本与超文本内容
    • title:文档tag标题标签,设置文档tag的标题内容

    v_hint:html标签的lang属性值 en | zh(zh-cn)

    三、其他核心模板标签

    1、meta(元标签)

    字符编码
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    SEO
    <meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
    <meta name="description" content="80字以内的一段话,与网站内容相关">
    移动适配
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    

    2、link(链接标签)

    外联样式表
    <link rel="stylesheet" type="text/css"  href="style.css" />
    文档tag图标
    <link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />
    

    3、style(样式标签)

    内联样式表
    <style></style>
    

    4、script(脚步标签)

    <script type="text/javascript"></script>
    

    v_test:设置简单的新浪模板

    固定模板代码详解

    文档类型; 标签语法为h5
    h5语法特点

    1.不区分大小写
    2.有很多系统标签,一般都具有语义
    3.可以随意定义自定义标签
    4.h5内容不保留空白字符(制表符)
    5.提倡小写
    

    <!doctype html>
    html:文档根标签

    html只有一儿一女:head,body,所以可以省略缩减 html语法中没有明确规定缩减规则,但从美观可读性出发,开发者要严格遵循缩减 包含内容:样式表,脚本,元信息,内嵌代码块
    <!-- 字符编码 -->
    <meta charset="utf-8" />
    <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> -->
    
    <!-- SEO --> 
    <meta name="keywords" content="培训,Python培训,IT培训,peixun" /> 
    <meta name="description" content="老男孩皇家培训机构" />
    
    <!-- 移动适配 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <!-- tag图片 -->
    <!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
    <link rel="shortcut icon" type="image/x-icon" href="icon.png">
    
    <title>第一个页面</title>
    
  • 相关阅读:
    2 安装驱动出现异常
    1 Yoga3 系统装机总结.
    6 关于 Oracle NULL栏位和PL./SQL执行实验
    4 C#和Java 的比较
    3 委托、匿名函数、lambda表达式
    2 跨线程访问控件InvokeHelper类
    2 跨线程访问控件InvokeHelper类
    1 Winform 异步更新控件
    1 Winform 异步更新控件
    C# DataTable的詳細用法
  • 原文地址:https://www.cnblogs.com/fxc-520520/p/9675033.html
Copyright © 2011-2022 走看看