HTML入门 (1)

561 阅读5分钟

什么是HTML?

  • HTML:HyperText Markup Language 超文本标记语言。
  • HTML不是一种编程语言,而是一种标记语言。HTML拥有许多用于描述一个网页内容和结构的标记标签(Markup Tag)

HTML的诞生:SGML&Tim Berners Lee

       1969年,IBM 的技术人员 Charles Goldfarh 和 Edward Mosher 等人一起发明了通用标记语言 GML(Generalized Marked Language)。它在各文档间共享一些类似的属性,允许文本编辑、检索与格式化等子系统共享文档。
       GML 的大部分内容被 IBM 和其他公司实现在主机时代的出版系统中,即使是现在,IBM 也仍在 80% 以上的文档中采用 GML,另外,图形通讯协会(GCA)也用此开发了用于排版的通用代码 GENCODE。1978年,新成立的 ANSI 机构之文本处理计算机语言委员会(CLPTC)和 GCA 的 GENCODE 委员会合作,在GML的基础上制定了 SGML 的第一份草案。
       1985年在英国成立了国际 SGML 用户组织,在1986年,SGML 成为国际标准ISO8879:信息处理标准通用标记语言(Information processing Text and office system Standard generalized markup language)。
       在80年代末,SGML 引起了包括 CERN 在内的一些组织的注意,1990年,World Wide Web 的发明者 Tim Berners Lee 选择了 CERN 使用的一组 SGML 的 DTD 标记标签,在最早的 WEB 浏览器和编辑器 NEXUS 中,他使用了这些标签和样式表进行排版,并增加了最重要的功能——链接,这就是HTML的前身,基于SGML的HTML是让 SGML 走向World Wide Web 的第一步。
       标准通用标记语言(Standard Generalized Markup Language,SGML)是现时常用的超文本格式的最高层次标准,是可以定义标记语言的元语言,甚至可以定义不必采用 <> 的常规方式。由于它的复杂,因而难以普及。
———————————————— 版权声明:本文为CSDN博主「userkang」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。 原文链接:blog.csdn.net/userkang/ar…


HTML的起手式?

  HTML文件主要由浏览器进行编译渲染,但是浏览器能识别的文档类型不仅仅只有HTML一种,所以HTML文档的最开头,我们需要和浏览器说明这个文档是一个HTML类型的文档。
   HTML文档类型声明不区分大小写的,下面是3个不同版本的HTML的文档声明。

// HTML5 文档类型声明
<!DOCTYPE html>

// HTML4.01 文档类型声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

// HTML1.0 文档类型声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

常用的章节标签

* 标题:<h1>~<h6>
* 章节:<section>
* 文章:<artical>
* 段落:<p>
* 页头:<header>
* 页脚:<footer>
* 主要内容:<main>
* 侧边栏/次要内容:<aside>
* 划分:<div>

  章节标签的使用最主要就是语义化,不同的内容用不同的标签,让代码富有阅读逻辑。

章节标签的使用


常用的内容标签

  • 锚点:<a> 可以在页面上定义一个锚点用于跳转页面位置;也能够指向一个网址,跳转网页

  • 语气强调:<em> 对文本语气起到一个强调的作用,字体变为斜体

  • 内容强调:<strong> 对文本内容起到一个强调的作用,字体变粗

  • 代码块:<code> 用于描述一段代码内容,字体等宽

  • 预格式化文本:<pre> 普通情况下,文本中的连续的空格,换行,TAB都会被当作1个空格,而在<pre>标签下的文本的连续的空格,换行,TAB则不会被忽略。

  • 行内引用:<q> 引用模块,display = inline;

  • 块状引用:<blockquote> 引用模块,display = block;


全局属性

什么叫全局属性?

  全局属性就是所有标签都拥有的属性。

1.class:样式

使用:<div class='color border'> 。class属性可以给标签指定一个样式的类,CSS、JS均能通过class来寻找到标签,赋予该标签样式或者功能。当class有多个值的时候,用空格隔开每个值。

2.contenteditable:可编辑

这是一个无值属性,当标签中出现这个属性的时候,该标签的内容就能够在页面现实中进行编辑。下面代码:通过给 <style> 一个 display:block 让其在页面中也能够现实(<style>必须在<body>中才能实现),赋予一个 contenteditable 属性让其在页面中可以编辑直接改变 .border的样式
<body>
  <style contenteditable style="display:block">
    .border{
      border:1px solid red;
      width: 100px;
      height: 100px;
    }
  </style>
  <div class="border"></div>
</body>

3.hidden:隐藏

这也是一个 无值属性。当标签出现这个属性的时候,其样式display属性的值会变成display:none

4.id:id

id属性作用也是便于CSS和JS的选择。非万不得已的情况下不建议使用id属性。id属性在CSS选择其中没有唯一性,即:2个id="HAHA"的标签会被CSS选择器同时选中。但id属性在JS中具有唯一性,当存在2个相同id时,操作这个id的 JS代码会报错。另外在JS中,可以直接使用id来进行获取元素,如:id.style.border = "1px solid red"

5.style:行内样式

可以使用style = ""来编辑行内样式,行内样式比内联样式,外联样式级别要高。

6.tabindex:tab切换索引

在网页中使用 tab键 能够切换到不同的部分,而 tabindex 属性则是控制这一行为的。
使用:<div tabindex=[number]>。当[number]在1~+∞范围时,tab的切换顺序,根据各标签[number]决定,越小越前,越大越后。其中有个2个特殊值:tabindex = 0 等于0的时候,该元素将是最后一个被tab到的。 tabindex = -1 等于-1时,该元素将永远不会被tab到。

7.title:标题

<div title=[value]> 当鼠标悬浮在拥有title属性的标签上一段时间后,会显示title设定的内容。