一.HTML的基本构成

1.<!DOCTYPE html>文档类型声明

　　　　<!--HTML的文档类型声明。声明这个文件是HTML5文件，让浏览器按照HTML5准备进行解析显示。文档类型声明在HTML文件中，必须要有，而且必须写在文件最上方。如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明bug。-->

<!--注释：文档类型声明是写给程序员看的，网页中不会显示。html中的注释快捷键：Ctrl+/ -->

2.<head></head>部分

head作用：

用于描述网页的一些关键信息。比如网页的配置，设置，关键字等等……这些信息，大多在浏览器看不到，但是对网页的解析至关重要！

（1） meta标签，用于描述网页的各种信息

其中<mete chaset="utf-8"/> 设置网页的编码格式为UTF-8。

【设置网页的字符集编码格式：】

         GB2312：简体中文的编码格式。
         GBK：扩展的国标码。比国标码多了更多的编码格式。
         utf-8：万国码。可以兼容绝大多数国家的语言。
 
[了解]：
          HTML4.01之前，声明字符集编码的格式：
                <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
代码示例：
               <meta charset="utf-8" />
 

（2）设置网页的关键字，有助于搜索引擎的搜索。

          name="keywords"表示这个mete标签设置的是网页的关键字；
          content=""表示关键字的详细信息，多个关键字，用英文逗号分隔；
代码示例：
      <meta name="keywords" content="H5网页开发"/>
 

（3）设置网页的描述信息，搜索引擎搜索时，标题下面的一段文字！非常重要！

name="description"表示这个mete标签设置的是网页的描述信息；
contet=""表示描述信息的详细内容！！！
代码示例：
      <meta name="description" content="这是我在杰瑞教育开发的第一个网页！"
 
<!--title:网页的标题，显示在浏览器选项卡上面的文字-->
代码示例：
     <title>这是我的第一个网页！！</title>

<link>标签link链接网页的小图标：网页选项卡上的小图片

       ①rel="icon"表示当前link的作用，是链接网页图标；
       ②href=""表示图片地址
   <link/>自闭合标签，也叫空标签。
代码示例：
    <link rel="icon" href="img/QQ.jpg" />

3.<body></body>部分

 

H5入门——HTML部分的更多相关文章

  1. H5入门-xhtml+css2-第01节

    <!-- 声明版本号,DOCTYPE html是html5版本 --> <!DOCTYPE html> <!-- 声明网页语言 en-英文 zh-中文 zh-cn中文 - ...

  2. H5入门须知

    ---恢复内容开始--- 首先,让我们来了解一下H5是做什么的,H5全称为“超文本标记语言”.是对网页进行编辑的技术.H5运用Hbulider进行网页编辑.网页可以分为三部分分别是title(主题)u ...

  3. H5入门

    1.基本骨架 <!DOCTYPE html> <html> <head><title>标题</title><meta charset= ...

  4. H5入门基础（一）

    我们还是围绕这几个问题来学习: 1.什么是H5? 2.为什么要用H5? 3.怎么用H5? 1.什么是H5? ♦HTML是指超文本标记语言(Hyper Text Markup Language). ♦H ...

  5. 快速入门cocos2d-x jsbinding

    如果你是一个cocos2d-x的老手,那你可以忽略这篇博文,如果你是一个接触过javascript,想通过HTML5做游戏的,但是苦于不知道如何下手,那么这篇博文可能会帮到你. cocos2dx-js ...

  6. 阿里云服务器搭建web项目小结

    前言 最近恰好有时间,自己搞了个云服务器试着搭建了个网站,遇到了一些问题,通过踩坑也涨了一些经验,遂记录一二,与后来者分享. 正文 1.博主用的阿里云服务器,为什么用它呢?一个是恰逢双十一,有优惠:另 ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 移动H5开发入门知识，CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  9. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

随机推荐

  1. SQL检测开始日期 结束日期 是否存在交叉

    检测开始日期 结束日期 是否存在交叉 "+tj+" and ((starttime>="+starttime+" and starttime<=&q ...

  2. 15套java架构师、集群、高可用、高可扩 展、高性能、高并发、性能优化Redis、ActiveMQ、Nginx、Mycat、Netty、Jvm大型分布式项目实战视频教程

    * { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩 展 ...

  3. AppDelegate减负之常用三方封装 - 友盟推送篇

    之前分享过集成友盟推送的方法, 需要的朋友可以查看一下链接: http://www.cnblogs.com/zhouxihi/p/6533058.html 一般开发中我们比较多使用的三方有友盟推送, ...

  4. Linux实战教学笔记13:定时任务补充

    第十三节 定时任务补充 标签(空格分隔): Linux实战教学笔记 ---[更多资料点我查看][1] 1,生产环境常用Crontab专业实例 1.1书写crontab定时任务多个基本要领 1.1.1 ...

  5. phpstorm,webstorm取消自动保存并标识修改的文件为星星标记

    a.取消自动保存是去掉一下两个勾选. b.标记星星要勾选下面的选项.

  6. gulp 入门指南

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率. 在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都 ...

  7. 页面异步请求会保留原有的js内容

    最近在开发前端的时候发现一个问题,这个问题应该是很多前端开发人员都容易忽视的一个问题,但却是一个很重要的问题. 就是在开发一个页面的时候,在使用某个函数时,这个函数可以正常使用,便会认为这个页面中定义 ...

  8. peoplesoft function PSTREENODE 通过 deptid 获得部门树 全路径 名称

    create or replace function getUnitFullName(deptid in varchar) return varchar2 is r ); c int; n ); m ...

  9. （转载）Oracle10g 数据泵导出命令 expdp 使用总结(一)

    原文链接:http://hi.baidu.com/edeed/item/890626ef6f6d9d265b2d646f Oracle10g 数据泵导出命令 expdp 使用总结(二)Oracle10 ...

  10. 构建混合应用方式之 - Azure混合连接

    前面介绍了通过WCF中继构建混合应用的方式,由于对WCF的依赖,使得其使用有一定的局限性,基本上只适用于本地服务是WCF的.NET应用.而混合连接则弥补了这一块的缺陷,除了支持原有WCF中继的功能之外 ...