HTML 学习心得

前言

超文本标记语言 \(HyperText Markup Language\) 简称 \(HTML\),本质上是是一种用来结构化 \(Web\) 网页及其内容的标记语言。

也算不上编程语言,是一种用于定义内容结构的标记语言,是由一堆堆的元素组成。

正文

下面才是正文啦

\(HTML\) 基础

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

网络上有很多不同的文件,如果能够正确声明 \(HTML\) 的版本,浏览器就能正确显示网页内容。这个可自行百度

一般常用的就是下面的这一个

<!DOCTYPE html>

\(HTML\) 的代码一般是呈现下面的一种形式

由白色框住的 \(body\) 部分才是真正显示的部分

而且

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

\(\bullet\ HTML\) 标签是由尖括号包围的关键词,比如 \(<html>\)

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

\(\bullet\) 标签对中的第一个标签是开始标签,第二个标签是结束标签

\(\bullet\) 开始和结束标签也被称为开放标签和闭合标签

说的有点模糊?举个例子,直接复制进来就成网页了。。以后的例子都用图片

\(example1\)

\(\bullet\ <html>\)\(</html>\) 之间的文本描述网页

\(\bullet\ <body>\)\(</body>\) 之间的文本是可见的页面内容

\(\bullet\ <h1>\)\(</h1>\) 之间的文本被显示为标题

\(\bullet\ <p>\)\(</p>\) 之间的文本被显示为段落

\(HTML\) 的标题

\(HTML\) 中是以 \(Heading\) 的缩写 \(<h1>-<h6>\) 来定义标题的

举个例子

\(example2\)

由此可见在 \(h\) 之后的数字决定了字体的大小(数字越小,字体越大)

\(HTML\) 段落

\(HTML\) 中段落是以 \(Paragrath\) 的缩写 \(<p>\) 来定义的

\(example3\)

由此也可知在 \(HTML\) 中段落都是等地位,一致的

\(HTML\) 链接

\(HTML\) 的链接是由 \(<a>\) 来定义的

\(example4\)

其中 \(href\) 属性中指定链接的地址,挖个坑回头补

变成伪代码

自行按照提示编写吧

\(HTML\) 图像

\(HTML\) 的图像是由 \(<img>\) 定义的

\(example5\)

其中 \(src\) 的属性为图像名称,\(width\) 的属性为宽度,\(legth\) 的属性为长度

记得代码与图片一定要在同一目录下才可以显示

\(HTML\) 元素

\(HTML\) 元素指的是从开始标签(\(start\ tag\))到结束标签(\(end\ tag\))的所有代码。

开始标签常被称为开放标签(\(opening\ tag\)),结束标签常称为闭合标签(\(closing\ tag\)

其实就是前文中所用到的 \(<html>\)\(</html>\) 之类以尖括号括起来的语句

下面阐述下 \(HTML\) 元素的语法

\(HTML\) 元素语法

\(\bullet\ HTML\) 元素以开始标签起始

\(\bullet\ HTML\) 元素以结束标签终止

\(\bullet\) 元素的内容是开始标签与结束标签之间的内容

\(\bullet\) 某些 \(HTML\) 元素具有空内容(\(empty\ content\)

\(\bullet\) 空元素在开始标签中进行关闭(以开始标签的结束而结束)

\(\bullet\) 大多数 \(HTML\) 元素可拥有属性

就是类似与一个栈空间的东西

\(Besides\) 元素之间是可以嵌套的

\(example6\)

在本例中,\(<p>\)\(</p>\) 之间的元素就嵌套在了 \(<body>\)\(</body>\) 的元素之间

\(HTML\) 的属性

\(HTML\) 标签可以拥有属性。属性提供了有关 \(HTML\) 元素的更多的信息。

属性总是以名称/值对的形式出现,比如:\(name="value"\)

属性总是在 \(HTML\) 元素的开始标签中规定。

换而言之,属性就是对一个标签使用的说明

\(example7\)

如代码之中的 \(yellow\)\(center\) 就分别是 \(bgcolor\)\(align\) 的属性

在常规下属性值常用双引号括住

但若属性值中有双引号则必须用单引号括住

例:name='Bill "HelloWorld" Gates'

其中 \(Bill\) "\(HelloWorld\)" \(Gates\) 就是属性值

\(HTML\) 标题的延申

在标题中可用 \(<hr />\) 对标题进行分割,还可以在标题边用 \(<!-- -->\) 一个注释,让它更好阅读

\(example 8\)

\(ps:\) 注释是不会出现在网页里的

\(HTML\) 段落的延申

除了标题之外,段落也有一个用 \(<br />\) 进行分割的方式

\(example9\)

这样就可以将一行切割成不同的部分了。

\(HTML\) 样式

\(style\) 属性用于改变 \(HTML\) 元素的样式。

\(style\) 功能强大,成功取代了 \(bgcolor\)\(align\)

\(example10\)

其中 \(background-color\) 为所在区块颜色

\(tsxt-align\) 为字的位置

\(font-family\) 为字体

\(color\) 为字的颜色

\(font-size\) 为字体大小

后言

话不说太多,这仅仅是 \(Web\) 网页设计的一小步

“盖余之勤且艰若此”

继续努力吧

补充

文中例子都可在我的 \(github\) 上自行下载

\(examples\)

posted @ 2024-03-24 08:44  zsfzhjf  阅读(45)  评论(0)    收藏  举报