前端杂谈 · Web

HTML 基础重点

•̀.̫•́✧ · 7月26日 · 2020年本文1336字 · 阅读4分钟120

什么是 HTML?

HTML 全名是「超文本标记语言」(HyperText Markup Language),最初是欧洲核子研究中心为了即时分享研究成果而发明了 www 万维网和 HTML。

网页开发,涉及三种技术:HTML、CSS 和 JS。其中 HTML 是用于定义「网页的结构和内容」,CSS 是用于定义网页展示样式,JS 用于定义网页与用户的互动行为。

Example:

< !DOCTYPE html >
< html lang="en" >
< head >
    < meta charset="utf-8" >
    < title >Hello world< /title >
< /head >
< body >
    < p >Hello world< /p >
< /body >
< /html >

标签

HTML 之所以是标记语言,就是与之由不同的标签(tag)构成相关。

< title >网页标题< /title >

上面代码中, 就是一对标签。
标签是用于告诉浏览器,如何处理这段代码。标签的内容就是浏览器所要「渲染的、展示在网页上的内容」。
大多数标签都是成对出现,但也有的只有开始标签,没有结束标签,例如 标签。

< meta charset="utf-8" >

meta 标签主要是用于提示浏览器,用于做一些特殊处理。

元素

元素和标签,实质是同义词,只是使用场景不同。从源码角度来看是标签,从编码角度来看是元素。HTML 所有的元素分为块级(block)元素和行内元素(inline)。

  • 块级元素:独占区域,另起一行;
  • 行内元素:默认与其他元素同行

属性

属性(attribute)是标签的额外信息,使用空格与标签名和其他属性分隔。

< img src="demo.jpg" width="500" >

注意,属性名是大小写不敏感的,onclick 和 onClick 是同一个属性。

网页的基本标签

符合语法标准的网页,应该满足下面的基本结构。

< !DOCTYPE html >
< html lang="en" >
< head >
    < meta charset="utf-8" >
    < title >< /title >
< /head >
< body >
< /body >
< /html >

不管多复杂的网页,都是从上面这个基本结构衍生出来的。

 标签

网页的第一个标签通常是 ,表示文档类型,告诉浏览器如何解析网页。

< !doctype html >

一般来说,只要像上面一样简单生命,浏览器就会按照 HTML 5 的规则处理网页。

有时,该标签会采用完全大写的形式,以便区别于正常的 HTML 标签,因为  本质上不是标签,更像一个处理指令。

< !DOCTYPE html >

 标签

 标签是网页的顶层容器,也称为根元素(root element),其他元素都是它的子元素,一个网页只能有一个  标签。

该标签的 lang 属性,表示网页内容默认的语言。

< html lang="en" >

 标签

 标签是一个容器标签,用于放置网页的元信息。它的内容不会出现在网页上,而是为网页渲染准备。

 是  的第一个子元素。如果网页不包含 ,浏览器会自动创建一个。

 的子元素一般有下面七个:

  • < meta >:设置网页的元数据;
  • < link >:连接外部样式表;
  • < style >:放置内嵌的样式表;
  • < script >:引入脚本;
  • < noscript >:浏览器不支持脚本时,所要显示的内容;
  • < base >:设置网页内部相对 URL 的计算基准。
0 条回应