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\) 上自行下载


浙公网安备 33010602011771号