1.1  创建HTML文件

　　本质上，HTML文件就是具有下列两个特征的简单文本文件：

  • HTML文件的扩展名为.html或者.htm。文件扩展名是一个缩写，它可将文件正确地关联到需要访问它的程序或工具。
  • HTML文件由标记（tag）组成。标记就是用于告诉计算机如何显示页面内容的命令或程序。

　　命名规范：

  • 统一使用一种扩展名，以免使自己、浏览器或用户产生混淆。
  • 一些Web服务器区分大小写，因此当命名或引用文件名时请注意，要保持文件名大小写统一。
  • 使用只包含字母字母和数字的简单文件名。请不要使用除连字符（-）和下划线（_）之外的其它空格、标点符号和特殊字符。

1.2  描述并应用基本的HTML文档格式

　　HTML元素的功能是告诉浏览器如何在页面上显示内容。HTML元素具有一个开始标记和结束标记，用于告诉浏览器标记指令从哪里开始，到哪里结束。

　　HTML标记都放在一对尖括号中（<>），并且带有一定的语义，因此很容易识别它们。

1.2.1  元素的类型

　　HTML元素主要分为下列几类：

  • 文档设置。该类型的元素指的是那些建立一个基本的HTML页面所需的元素。例如：html、head、title和body都属于该类元素。
  • 文本级语义元素。这一类型的元素帮助浏览器理解文本内容片段背后的语义。
  • 区块元素。该类型的元素用于对较大块的内容进行分区，并分割页面。
  • 分组元素。该类型的元素用于对较小块的内容进行分区，比如列表和段落。
  • 嵌入元素。图片、音频和视频，以及其它交互性元素。
  • 表格元素。对于可以简单地排列在一起的表格化数据，表格元素非常有用。
  • 表单元素。所有用于开发Web表单的元素都属于表单元素。

　　除了这些基本的分类外，HTML元素还可以分为块级元素（block-level）和行级元素（inline），行级元素也称为文本级元素（text-level）。

　　一般来说，块级元素与行级元素存在下列关键差异：

  • 块级元素可以包含其它块级元素，也可以包含行级元素。
  • 默认情况下，块级元素被格式化为以一个空行开始。
  • 块级元素在页面上的样式是“盒模型”。

　　与之相反，行级元素无法包含其它块级元素，并且不以一个新行作为开始。此外，无法采用与格式化块级元素相同的方法来完全格式化行级元素。

1.2.2  标记的类型

　　HTML标记分为两类：第一类标记用于标识元素的开始(<>)，另一类标记用于标识元素的结束(</>)。

　　HTML并不要求所有元素都同时具备开始标记和结束标记，某些元素只有一种类型的标记(<br>)。这种类型的元素通常被认为是空元素，因为他们单独使用，并不包含任何内容。

1.2.3  属性

　　很多HTML标记都有可以自定义的附加选项，这些选项称为属性（attribute），属性通常放在元素名之后、尖括号结束符之前。

 <img src="mypicture.jpg" width="100" height="100" alt="A photo of me">

1.2.4  必不可少的标记

　　所有HTML页面都应该具有doctype、html、head、title和body标记。

  • doctype：告诉浏览器页面遵循哪一组标准。
  • html：表示整个HTML页面。
  • head：表示页面的标志信息，比如页面标题(title)，该信息将被传送给浏览器和搜索引擎。
  • title：定义页面标题，该标题将显示在浏览器窗口顶部，并在搜索引擎中列出。
  • body：表示在浏览器窗口中要显示的页面内容。
 <!DOCTYPE html>

 <html>

 <head>

     <title>My First HTML Page</title>

 </head>

 <bode>

 This is a very basic HTML page.

 </body>

 </html>

　　（1）doctype

　　doctype元素用于告诉浏览器在文档中使用的编码或脚本语言属于哪一种类型。在HTML5之前的版本中，该元素向浏览器明确应该使用HTML还是XHTML来解析Web页面。在HTML5中。W3C极大简化了doctype元素，这使得doctype元素的作用在某种程度上不再明显。在HTML5中，只需在每个页面的顶部包含下面简洁的标记代码，就可以避免浏览器使用较旧的解析方法来分析页面：

 <!DOCTYPE html>

　　（2）html

　　html元素用于包含所有其余的HTML元素。除了html元素和doctype元素外，页面中的其它所有HTML元素都应放在<html>和</html>标记中间。

　　（3）head

　　head元素用于告诉浏览器与页面有关的信息，而不是用于包含要在页面上显示的内容。在<head>和</head>标记之间，还可以包含其它一些元素以说明与页面有关的信息：

  • title定义页面的标题。
  • meta定义页面的附加信息，比如在该页面中使用哪一种字符集。
  • style定义内部样式表信息。
  • link定义一个指向外部文件的链接，在处理当前页面时需要用到该外部文件。
  • script定义非HTML的脚本内容。

　　（4）body

　　body元素包含了用于定义页面显示内容的所有HTML元素，其中包含了格式化文本所需的标记、链接和图片等。

1.3  在HTML文件中添加注释

　　注释格式如下：

 <!-- 在新产品推出后请注意更新该页面 -->

[HTML/HTML5]1 HTML文档设置的更多相关文章

  1. Springlake-02 权限&文档设置&Role设置&Folder设置&登录

    1. 权限 有3个默认的权限用户: 1.System Owner so 管理员权限全部:Type Setup; Group Setup; Form Setup; Role Setup; Share R ...

  2. Sublime Text 3安装Package Control快速建立html5和xhtml文档

    Sublime Text 3安装Package Control快速建立html5和xhtml文档 先关闭Sublime text 3:第1步:下载sublime_package_control-mas ...

  3. C# 给PDF文档设置过期时间

    我们可以给一些重要文档或者临时文件设置过期时间和过期信息提示来提醒读者或管理者文档的时效性,并及时对文档进行调整.更新等.下面,分享通过C#程序代码来给PDF文档设置过期时间的方法. 引入dll程序集 ...

  4. IT兄弟连 HTML5教程 HTML文档主体标记body

    在HTML的<body>和</body>标记中定义文档的主体,包含文档的所有内容(比如文本.超链接.图像.表格和列表等等).<body>标签有自己的属性,设置< ...

  5. Html5 部分帮助文档 未完待续

     W3cSchoolH5帮助文档 Video属性 视频播放效果 Video标签 src视频得目录 controls属性提供添加 播放 和音量控件 当然呢 不设置宽和高得话 视频会很大 Video还可以 ...

  6. netcore webapi帮助文档设置

    如何建 .netcore webapi 项目这个就不说了,这个都没有没必要看下去. 我这里是.netcore 2.0,虽然没测过1.0的,但想来差不多. 1.Nuget Packages安装,使用程序 ...

  7. office2007word文档设置多级目录

    office本来不是很难,关键就是经验吧,直入主题. 文档结构图设置了四级,但是目录始终只显示三级,郁闷了好久,网上看的也不靠谱,方法如下: 引用-目录-插入目录 弹出插入目录设置后,修改级别为最大, ...

  8. HTML5学习之文档结构和语义（一）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. html5 兼容参考文档 与 浏览器hack兼容参考文档

    移动端兼容参考文档 http://mobilehtml5.org/ 浏览器hack http://browserhacks.com/ 附上部分截图

随机推荐

  1. 关于strlen误用的一点记录

    今天帮一个朋友查一个错误,是运行时报vector iterator incompatible,一般这种问题是向量和迭代器的类型不兼容,或者是进行迭代器判等时前后向量的结构发生变化,如erase操作之后 ...

  2. C# 中的委托和事件（转载）

    引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...

  3. JNI ReferenceTable overflow

    今天在小米设备上遇到如下问题 10-15 17:04:36.899: W/dalvikvm(2767): ReferenceTable overflow (max=512) 10-15 17:04:3 ...

  4. 初试Node —— node.js的安装

    可以在这里查看最新版本: http://nodejs.org/download/ 在Mac下安装相当简单,只需要下载Mac OS X Installer (.pkg),然后一路下一步即可. 在Linu ...

  5. selenium查找ifame其中的元素

    废话不多说,直接上代码 from selenium import webdriver browser = webdriver.xx() browser.get(url) browser.swith_t ...

  6. 通过正则表达式实现简单xml文件解析

    这是我通过正则表达式实现的xml文件解析工具,有些XHTML文件中包含特殊符号,暂时还无法正常使用. 设计思路:常见的xml文件都是单根树结构,工具的目的是通过递归的方式将整个文档树装载进一个Node ...

  7. windows系统nginx配置root绝对路径的问题

    看了下logs下面的error.log文件,发现路径有问题,修改了conf配置,把root的路径反斜杠要用两个反斜杠进行转义,再次运行正常了.

  8. C#:额外知识点

    6.写入.输出二进制数据(指定地址 与 内存交互数据) public void WriteSerialize(object data, int offset, int length) { Binary ...

  9. PRINCE2的思维结构

    PRINCE2的思维结构   PRINCE是PRoject IN Controlled Environment(受控环境下的项目管理)的简称.PRINCE2是这种方法的第二个重要版本,由英国政府商务部 ...

  10. DP专题训练之HDU 1087 Super Jumping!

    Description Nowadays, a kind of chess game called "Super Jumping! Jumping! Jumping!" is ve ...