HTML 学习心得

前言

超文本标记语言 $H y p e r T e x t M a r k u p L a n g u a g e$ 简称 $H T M L$ ，本质上是是一种用来结构化 $W e b$ 网页及其内容的标记语言。

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

正文

下面才是正文啦

$H T M L$ 基础

$<! D O C T Y P E >$ 声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明 $H T M L$ 的版本，浏览器就能正确显示网页内容。这个可自行百度

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

<!DOCTYPE html>

$H T M L$ 的代码一般是呈现下面的一种形式

由白色框住的 $b o d y$ 部分才是真正显示的部分

而且

$H T M L$ 标记标签通常被称为 $H T M L$ 标签 ( $H T M L t a g$ )。

$∙ H T M L$ 标签是由尖括号包围的关键词，比如 $< h t m l >$

$∙ H T M L$ 标签通常是成对出现的，比如 $$ 和 $$

$∙$ 标签对中的第一个标签是开始标签，第二个标签是结束标签

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

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

$e x a m p l e 1$

$∙ < h t m l >$ 与 $< / h t m l >$ 之间的文本描述网页

$∙ $ 与 $$ 之间的文本是可见的页面内容

$∙ < h 1 >$ 与 $< / h 1 >$ 之间的文本被显示为标题

$∙ $ 与 $$ 之间的文本被显示为段落

$H T M L$ 的标题

在 $H T M L$ 中是以 $H e a d i n g$ 的缩写 $< h 1 > - < h 6 >$ 来定义标题的

举个例子

$e x a m p l e 2$

由此可见在 $h$ 之后的数字决定了字体的大小（数字越小，字体越大）

$H T M L$ 段落

$H T M L$ 中段落是以 $P a r a g r a t h$ 的缩写 $$ 来定义的

$e x a m p l e 3$

由此也可知在 $H T M L$ 中段落都是等地位，一致的

$H T M L$ 链接

$H T M L$ 的链接是由 $< a >$ 来定义的

$e x a m p l e 4$

其中 $h r e f$ 属性中指定链接的地址,挖个坑回头补

变成伪代码

自行按照提示编写吧

$H T M L$ 图像

$H T M L$ 的图像是由 $$ 定义的

$e x a m p l e 5$

其中 $s r c$ 的属性为图像名称, $w i d t h$ 的属性为宽度， $l e g t h$ 的属性为长度

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

$H T M L$ 元素

$H T M L$ 元素指的是从开始标签（ $s t a r t t a g$ ）到结束标签（ $e n d t a g$ ）的所有代码。

开始标签常被称为开放标签（ $o p e n i n g t a g$ ），结束标签常称为闭合标签（ $c l o s i n g t a g$ ）

其实就是前文中所用到的 $< h t m l >$ 与 $< / h t m l >$ 之类以尖括号括起来的语句

下面阐述下 $H T M L$ 元素的语法

$H T M L$ 元素语法

$∙ H T M L$ 元素以开始标签起始

$∙ H T M L$ 元素以结束标签终止

$∙$ 元素的内容是开始标签与结束标签之间的内容

$∙$ 某些 $H T M L$ 元素具有空内容（ $e m p t y c o n t e n t$ ）

$∙$ 空元素在开始标签中进行关闭（以开始标签的结束而结束）

$∙$ 大多数 $H T M L$ 元素可拥有属性

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

$B e s i d e s$ 元素之间是可以嵌套的

$e x a m p l e 6$

在本例中， $$ 与 $$ 之间的元素就嵌套在了 $$ 与 $$ 的元素之间

$H T M L$ 的属性

$H T M L$ 标签可以拥有属性。属性提供了有关 $H T M L$ 元素的更多的信息。

属性总是以名称/值对的形式出现，比如： $n a m e = " v a l u e "$ 。

属性总是在 $H T M L$ 元素的开始标签中规定。

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

$e x a m p l e 7$

如代码之中的 $y e l l o w$ 与 $c e n t e r$ 就分别是 $b g c o l o r$ 与 $a l i g n$ 的属性

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

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

例：name='Bill "HelloWorld" Gates'

其中 $B i l l$ " $H e l l o W o r l d$ " $G a t e s$ 就是属性值

$H T M L$ 标题的延申

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

$e x a m p l e 8$

$p s :$ 注释是不会出现在网页里的

$H T M L$ 段落的延申

除了标题之外，段落也有一个用 $$ 进行分割的方式

$e x a m p l e 9$

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

$H T M L$ 样式

$s t y l e$ 属性用于改变 $H T M L$ 元素的样式。

$s t y l e$ 功能强大，成功取代了 $b g c o l o r$ 与 $a l i g n$

$e x a m p l e 10$

其中 $b a c k g r o u n d - c o l o r$ 为所在区块颜色

$t s x t - a l i g n$ 为字的位置

$f o n t - f a m i l y$ 为字体

$c o l o r$ 为字的颜色

$f o n t - s i z e$ 为字体大小

后言

话不说太多，这仅仅是 $W e b$ 网页设计的一小步

“盖余之勤且艰若此”

继续努力吧

补充

文中例子都可在我的 $g i t h u b$ 上自行下载

$e x a m p l e s$

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

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 一个随意的目录

· C++ 的基本语法

· HTML（HyperText Markup Language）

· HTML超文本标记语言1

· HTML 使用教程

公告

昵称： zsfzhjf
园龄： 1年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

神樂的杂物间

HTML 学习心得

前言

正文

$H T M L$ 基础

$H T M L$ 的标题

$H T M L$ 段落

$H T M L$ 链接

$H T M L$ 图像

$H T M L$ 元素

$H T M L$ 元素语法

$H T M L$ 的属性

$H T M L$ 标题的延申

$H T M L$ 段落的延申

$H T M L$ 样式

后言

补充

公告

搜索

常用链接

随笔档案

阅读排行榜

神樂的杂物间

HTML 学习心得

前言

正文

HTML 基础

HTML 的标题

HTML 段落

HTML 链接

HTML 图像

HTML 元素

HTML 元素语法

HTML 的属性

HTML 标题的延申

HTML 段落的延申

HTML 样式

后言

补充

公告

搜索

常用链接

随笔档案

阅读排行榜

$H T M L$ 基础

$H T M L$ 的标题

$H T M L$ 段落

$H T M L$ 链接

$H T M L$ 图像

$H T M L$ 元素

$H T M L$ 元素语法

$H T M L$ 的属性

$H T M L$ 标题的延申

$H T M L$ 段落的延申

$H T M L$ 样式