转行学前端的第 2 天 : 学习HTML内容

2,667 阅读5分钟

我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。

今日学习目标


昨天了解了html,今天准备学习一下昨天写的html具体结构含义,又是适合学习的一天,加油,小又又!!!!


HTML标签学习


HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如 <p>

<标签>


难道只要是由尖括号加关键词的内容,都可以做标签?

<小又又>  这样是不是也算,小又又也是一个HTML标签~~~~~

HTML 标签通常是成对出现的,比如 <b></b>

成对让我想到了筷子,筷子成双成对才能用,看来html标签也是开始和结束都在,才能用,这年头什么都有成双成对,可怕。

标签对中的第一个标签是开始标签,第二个标签是结束标签


这句话有点不太理解,上面说标签通常成对出现,这里却说了第一个,和第二个,让我感觉还能有第三个标签,

开始和结束标签也被称为开放标签和闭合标签


奇怪为啥这个标签名字还要有两个?


HTML元素学习

包含开始HTML标签,元素内容与结束HTML标签的就是HTML元素。

<标签>内容</标签>

<p>这是一个段落。</p>

但是教程上又说,"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。(疑惑,为啥这又是同样的意思)感觉有点开始迷糊了


Web 浏览器了解


Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/9/1715f1dbbe27e8af~tplv-t2oaga2asx-image.image)


HTML结构学习

昨天编辑的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我是小又又</h1>
<p>大家好</p>

</body>
</html>
  • 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

通用声明

  • HTML5
  • HTML 4.01
"http://www.w3.org/TR/html4/loose.dtd">
  • XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


在HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML,因此不要求引用 DTD。

感觉声明方式好多种啊,啊啊啊啊

如果正确声明了,就能正确显示内容,那如果不小心写错了呢?会显示什么,好奇


<html> 元素


是 HTML 页面的根元素。

不太懂根元素是什么意思。


<head> 元素


包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8

元(meta)数据 ???? 这又是什么
网页编码格式???


<title> 元素


描述了文档的标题

标题?那这个和我写公众号文章的文章标题是一个意思吗?


<body> 元素


包含了可见的页面内容

可见的内容?那这个要重点记一下!!!


<h1> 元素


定义一个大标题

标题?怎么又来了一个标题?


<p>元素


定义一个段落

段落?那这个和我写公众号文章的文章段落是一个意思吗?


今日学习名词

名称 名词解析
HTML 标签 由尖括号包围的关键词
开始标签 标签对中的第一个标签是开始标签
结束标签 标签对中的第二个标签是结束标签
Web浏览器 Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
<html>元素 HTML 页面的根元素
<head>  元素 包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素 描述了文档的标题
<body> 元素 包含了可见的页面内容
<h1> 元素 定义一个大标题
<p> 元素 定义一个段落
DTD 文档类型声明
SGML Standard Generalized Markup Language 标准通用标记语言

今日小尝试



为啥我的小又又标签显示的好奇怪??


今日学习总结


今日心情


今日学习了好多新名词,有些让我有些迷糊,希望明天学习到更多东西~~~

本文使用 mdnice 排版