html笔记

HTML 基础

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.

实例

7136d8e227c18f95d5079d86d75c7feff439f192.png@656w_74h_!web-article-pic.webp

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

实例

4905f145f313489e1daca893dd6e22ac7baeca2f.png@656w_100h_!web-article-pic.webp

HTML 链接

HTML 链接是通过标签<a> 来定义的.

实例

4d42e6d0ea499b0337c34b66eafbc22104fe1a34.png@656w_100h_!web-article-pic.webp

HTML 图像

HTML 图像是通过标签 <img>来定义的.

实例

bc01f74e290387457111aecbe1e9c8655a122ba9.png@656w_104h_!web-article-pic.webp

HTML 元素

HTML 文档由 HTML 元素定义。

HTML 元素

3c25e7c4df4fc36110027a802d5e6e2777611744.png@656w_110h_!web-article-pic.webp

开始标签常被称为起始标签(opening tag)结束标签常称为闭合标签(closing tag)。

HTML 元素语法

  • HTML 元素以开始标签起始

  • HTML 元素以结束标签终止

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

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

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

  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

fe4ad48202fa705213e504bedcc683e4c74c4388.png@656w_108h_!web-article-pic.webp

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p>元素:

bd3986ff93920bddcab2f0a89bb122c96a9a2d09.png@656w_154h_!web-article-pic.webp

<body>元素:

eb97a9eba9aa2454948e48107ef32d6de2de6663.png@656w_116h_!web-article-pic.webp

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签<body>以及一个结束标签 </body>
元素内容是另一个 HTML 元素(p元素)。

<html>元素:

854349f8b2987f0586e513e71bf19a9a614fb1d7.png@656w_178h_!web-article-pic.webp

<html>元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>.
元素内容是另一个 HTML 元素(body元素)。

不要忘记结束标签

即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:

a9cc57d6171ec033ee51f0937d99fd431bd65f62.png@656w_70h_!web-article-pic.webp

以上实例在浏览器中也能正常显示,因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

c38b82e88bd67470722becebd5e278e0bae332f6.png@656w_102h_!web-article-pic.webp

HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

注意:

  • 一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签。(尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合)

  • 标签写法要用小写字母(有些版本对大小写可认为相同,而xhtml中强制使用小写)

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

  • HTML 元素可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述于开始标签

  • 属性总是以名称/值对的形式出现,比如:name=“value”。

属性实例

HTML 链接由 <a>标签定义。链接的地址在 href 属性中指定:                

5e79499a4da105fdb25211830e399d5c125bc011.png@656w_80h_!web-article-pic.webp 

HTML 属性常用引用属性值

d6fd5451f4dfa85c2d1a8478ab7693f5372d3655.png@656w_72h_!web-article-pic.webp

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

HTML 全局属性

b7cdbd9f0c5426691d8e5222857584b0c05060e4.png@656w_456h_!web-article-pic.webp

HTML 标题

在 HTML 文档中,标题很重要。

HTML 标题

标题(Heading)是通过<h1> - <h6>标签进行定义的。

<h1>定义最大的标题。<h6> 定义最小的标题。
**

标题大小与字体大小的关系
1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。

标题很重要

1bfcecf58be1e2d3688b65aefa2e8dc2ce06dfeb.png@656w_84h_!web-article-pic.webp

HTML 水平线

<hr>标签在 HTML 页面中创建水平线。

hr元素可用于分隔内容。

实例

3673a2e294d453403f454b2f93c012af76e3f7b9.png@656w_98h_!web-article-pic.webp

HTML 注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释写法如下:

814fcdf6a9917e2a189b6d69585a10210bdfa6be.png@656w_122h_!web-article-pic.webp

HTML 标签参考手册

071feaeff692bbbd1b850c154e27e5047ec48d40.png@656w_166h_!web-article-pic.webp

HTML 段落

HTML 可以将文档分割为若干段落。

HTML 段落

段落是通过<p>标签定义的。

实例

bb202423bd1dc0d2caeee0898b85a14b33c7c4a4.png@656w_112h_!web-article-pic.webp

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:

实例

b2a23fe0f5ed356e2106baad7ed48384233d60af.png@656w_110h_!web-article-pic.webp

HTML 输出- 使用提醒

实例:

HTML 格式化标签

此例演示如何在一个 HTML 文件中对文本进行格式化

此例演示如何使用 pre 标签对空行和空格进行控制。

此例演示如何在 HTML 文件中写地址。

此例演示如何实现缩写或首字母缩写。

此例演示如何改变文字的方向。

此例演示如何实现长短不一的引用语。

此例演示如何标记删除文本和插入文本。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值