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. Redis的Replication(复制)

    文件并发(日志处理)--队列--Redis+Log4Net 分布式中使用Redis实现Session共享(二) http://www.cnblogs.com/stephen-liu74/archive ...

  2. Write Your software base on plugin(C/C++ ABI)

    一个软件,如果把所有的功能写进C++源码,维护,扩展,编译都特别麻烦. 共享库后缀名.Linux -> .so  Windows -> .dll 关于动态符号显示问题,具体可以看系统的AP ...

  3. windows+caffe(五)——实例2MNIST图片

    1. 数据集 MNIST手写体数据.bmp图片:训练集60K张28*28的,测试集10K张28*28的: 训练集: 测试集: 下载地址: 2. 读取图片名称与标签,保存到trainlist.txt与t ...

  4. Prince2七大流程之项目准备

    Prince2七大流程之项目准备     今天我们正式进入七大流程的第一个流程学习,项目准备流程.决定项目是否值得做,是否值得启动.通过回答"是否有一个可交付的.值得做的项目?"这 ...

  5. quick-cocos2d-x 实现在lua里面完成android支付宝的接入

    quick-cocos2d-x 实现在lua里面完成android支付宝的接入 一.支付宝注册是很麻烦的一个过程,本文就不解释了,想了解的去官网看下注册流程.然后下载他们的sdk-WS_SECURE_ ...

  6. Java 异常处理 练习2

    建立exception包,建立Bank类,类中有变量double  balance表示存款,Bank类的构造方法能增加存款,Bank类中有取款的发方法withDrawal(double dAmount ...

  7. asp.net调用客户端WebBrowser 进行网站地址截屏

    在asp.net网站中,如果要实现,在文本框中输入一个URL地址,就把该网页的页面整屏截下来,这段时间一直在研究这一块,在网上查了好多资料.自己又整合了一下. 其实也不是想象中的那么难.主要是通过调用 ...

  8. [原]excel启动时死锁

    项目中遇到的一个死锁问题!   代码大概如下: 调用SetWinEventHook安装了进程内钩子,dll注入到excel进程后,专门开启一个线程来分发监听到的事件信息,并在该线程内会获取IAcces ...

  9. Error: Bootstrap's JavaScript requires jQuery错误

    引入bootstrap时会出现的问题:boostrap下拉菜单无效,浏览器报Uncaught Error: Bootstrap's JavaScript requires jQuery错误, 解决办法 ...

  10. android 加载网络图片

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...