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. 简单介绍MR21和MR22

    MR21和MR22都可以用来调整价格,MR21是更改的单个物料的价格,MR22更改的是库存总价值,所以MR21可以更改移动平均价(V)或标准价(S)的物料价格.MR22只能更改移动平均价(V)的物料价 ...

  2. 使用netty4.x客户端接收较大数据量报文时发生的读取不完整bug修复记录

    1.先说问题 背景:服务是运行在Linux上的安全网关提供的,TCP协议发送 通过二进制编码的xml字符串 报文,报文头的第一个字段是int类型的表示字节序标记,第二个字段是int类型的表示整个报文长 ...

  3. ImportError: cannot import name 'check_arrays'

    from sklearn.utils.validation import check_arrays 执行 from sklearn.utils.validation import check_arra ...

  4. java比较版本号

    java比较版本号,比如1.0.3和1.2.1相比较考虑到可以用String的compareTo()方法,代码如下: public class MainClass { public static vo ...

  5. 前端之CSS（一）

    一.什么是CSS CSS是Cascading Style Sheets,层叠样式表,高大上的说法是用来控制网页数据的表现,可以使网页的表现与数据内容分离.通俗来讲,就是用各种盒子的堆叠实现我们想要的H ...

  6. STM32 MX Cube生成的工程中 使用printf向Uart发送数据

    1. 在main函数前面添加: int fputc(int ch,FILE *f){ uint8_t temp[1]={ch}; HAL_UART_Transmit(&huart1,temp, ...

  7. oracle杀用户建用户改密码脚本

    # ******************************** # * dba_oracle_awr.sh # ******************************** # Usage: ...

  8. Socket TCP之keepalive

    摘自: http://machael.blog.51cto.com/829462/211989/

  9. 6.Swift协议|扩展|访问权限|异常调试|类型转换|运算函数|ARC|类类型初试化器|值类型初始化器

    1. 协议(Protocol):与OC之间唯一不同的是Swift中的协议不管是属性还时方法全部是必须实现的 /** protocol*/ protocol FullNamed { /** 计算属性申明 ...

  10. Qt 设计师手册

    Qt设计师(Qt Designer)是使用Qt部件(Widgets)设计和使用图形用户界面(GUI)的工具.它允许我们以所见即所得的方式构建和定制自己的窗口(Windows)或对话框(Dialogs) ...