Web技术基础之HTML

  HTML是超文本标记语言(HyperText Markup Language)的简称,是一种用于创建网页的标准标记语言。目前HTML5是HTML最新的修订版本,其设计目的是为了在移动设备上支持多媒体。
 
  “超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网,并将其与他人创建的页面相链接,你就成为了万维网的积极参与者。
 
  HTML 是构成 Web 页面的基本框架。它定义了网页内容的含义和结构。除 HTML 以外的其它前端文本技术通常用来添加网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。浏览器中的任何网页背后都是解析HTML 文档而来的,只要在网页上鼠标右键->查看源代码(用控制台工具也可)就可看到该文档。
 
  HTML以及 CSS(Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。
 
  由于已经在 VScode 中安装了open in browser插件,因此在 VScode 的编辑区点击鼠标右键选择将该文件在浏览器中打开(也可使用插件在本地浏览器打开相关服务查看效果)
 
  HTML 使用”标记”(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标记包含一些规定的”元素”如 等等。整个 HTML 就由一个个元素组成(可以嵌套),而元素则一般由一对标签(tag)构成。
 
  开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。内容(Content):元素的内容,本例中就是所输入的文本本身。元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
 
  : 声明文档类型。出于历史原因需要,现在可有可无。: <html>元素。这个元素包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中。: <head>元素。这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。:这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。:指定页面的图标,出现在浏览器标签上。:设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。: <body>元素。包含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等。
 
  注释是被浏览器忽略的并且不会显示在网页当中,它允许我们描述代码是如何工作及其作用是什么。HTML中的注释语句用包括起来, 比如:
 
  提示: 在 VScode 软件中,输入即可快捷的进行注释!
 
  注意: HTML 不区分标签的大小写,但建议全部使用小写!
 
  一般来说,元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入(嵌入)一些东西,如等等,我们称其为空元素。
 
  提示: 上面的代码中<br>元素放到<p>元素之中——这称作嵌套!
 
  元素是可以有相关属性的。属性包含元素的额外信息,这些信息不会在浏览器中显示出来。
 
  一个属性由如下内容构成:
 
  1.在属性和元素名称之间由一个空格分隔。(多个属性之间也有一个空格。)
 
  2.属性名称后面接 号。
 
  3.好后接属性值,由一对引号 引起来。
 
  HTML 提供了从大到小共6级标题,分别是:。在页面中,标题非常重要,原因如下:
 
  搜索引擎用标题来索引页面的内容用户习惯以标题来决定是否查看该页面
 
  提示: 一级标题最醒目,应该用于页面的主标题,其次为二级标题…
 
  注意: 不要因为希望醒目,试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。
 
  常用文本格式标签:
 
  高亮 删除线 或下划线 或细体 粗体 斜体
 
  注意: 除本节介绍的这些标签可用于文本的格式外,其它标签都不建议用来进行格式的设置,如:等标签皆为不推荐使用的。HTML 是用来表现页面内容而不是对页面进行修饰的,专门的页面美化需要使用CSS 。
 
  语法:
 
  说明:
 
  为要跳转去的地址URL(Uniform Resorce Locator),target属性为表示在新的页面打开超链接(默认是在当前页面打开即)
 
  锚点
 
  锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。
 
  先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。
 
  注意:
 
  1.元素的id值必须是唯一的,也即页面不能再有其它元素的id值为A1
 
  2.超链接的地址需要有号
 
  说明:
 
  属性为要显示图片文件的位置 URL,即图片文件的路径,属性当获取图片出现问题时显示的文字(占位符)
 
  文件路径
 
  为获取图片文件,我们需要指定该文件位于何处,这称为文件路径。文件路径有相对路径和绝对路径两种。
 
  上面的例子使用的是绝对路径。表示该图片文件与当前文档在同一目录中,表示该图片文件在当前目录下的images目录中,表示该图片文件在上一级目录中。
 
  代码中,表示行, 表示行中的单元, 是表头的单元(其中表头将会加粗显示)
 
  无序列表
 
  无序列表使用<ul>标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle,实心方块square以及不出现标志。
 
  有序列表
 
  有序列表使用标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A,小写字母a,罗马字母i等
 
  当网站需要获取我们的一些信息如:用户名、密码等时,我们就需要使用表单(form)来让用户填写或选择。参考:HTML 表单和输入
 
  提交时,表单中没有name属性的元素将不会提交,有name属性的元素其value的值将提交给服务器。
 
  HTML 的元素可以以称为或 的方式进行显示。
 
  区块元素
 
  区块元素在浏览器显示时,通常会以新行来开始(和结束)。如:等。内联元素
 
  内联元素相反,他们总是一个接一个进行显示,不会新起一行。如: 等。预设格式pre标签
 
  用于在在网页中展示一首诗或文本。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61651.shtml

张贴在2