[HTML/HTML5]1 HTML文档设置

2018-06-24 00:37:25来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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),属性通常放在元素名之后、尖括号结束符之前。

1 <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:表示在浏览器窗口中要显示的页面内容。
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>My First HTML Page</title>
5 </head>
6 <bode>
7 This is a very basic HTML page.
8 </body>
9 </html>

  (1)doctype

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

1 <!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文件中添加注释

  注释格式如下:

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于sass的安装

下一篇:深入理解及应用Position