2021-03-28

最新推荐文章于 2021-08-10 20:29:07 发布

新人小刘

最新推荐文章于 2021-08-10 20:29:07 发布

阅读量74

点赞数

本文链接：https://blog.csdn.net/m0_54059832/article/details/115289449

版权

HTML学习总结

一.何为HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

二. HTML文档结构

HTML文档结构一般包括包括标记（Html）、头部（Head）、主体（Body）三部分。
标记< html>：说明该文件是用超文本标记语言来描述的，它是文件的开头，而则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
头部：表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
主体：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。如下：
在这里插入图片描述

三.HTML组成

HTML使用标记来注明文本图片等内容，如head、body、p等（每个标记都应该有双尖括号，但这里使用将看不见标记）。
而HTML是由一个个HTML元素组成的，一个元素一般由一对标签构成。
for example：
在这里插入图片描述

HTML元素

HTML元素有以下分类：
1.块级元素
特点：
占据其父元素（容器）的整个空间；会新起一行；
可以包含行内元素和其他块级元素。
常用：<h1>, <pre>, <ul>, <table>，<div>
2.内联元素
特点：
1）和其他元素都在一行上
2）元素的高度、宽度以及顶部和底部边距不可设置
3）元素的宽度就是它包含的文字或图片的宽度，不可改变
常用：<span>, <input>, <td>, <a>, <img>
3.空元素
特点：只有一个标签，通常用来在此元素位置插入或嵌入一些东西
如<br>, <hr>, <input>, <img>, <a>

元素属性

元素是可以有相关属性的。属性包括元素的额外信息，信息不会在浏览器中显示。
示例如下：
在这里插入图片描述
一个属性必须包含如下内容：

1、一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2、属性名称，后面跟着一个 = 号。
3、一个属性值，由一对引号 “” 引起来。

四、重要标签

超链接 a

没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。

超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：

1、href即为要跳转去的地址 URL（Uniform Resorce Locator)
2、target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3、超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->

图片及文件路径 img

在页面插入一张图片如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：

1、src属性为要显示图片文件的位置 URL，即图片文件的路径
2、alt属性当获取图片出现问题时显示的文字（占位符）
3、可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：

例子	解释
< img src=“picture.jpg”>	该图片文件与当前文档在同一目录中
< img src="./images/picture.jpg">	该图片文件在当前目录下的images目录中
< img src="…/picture.jpg">	该图片文件在上一级目录中

四、其他

预设格式

如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

<!-- pre标签中的内容将保持格式不变 -->
<pre>
              我如果爱你——
              绝不象攀援的凌霄花，
              借你的高枝炫耀自己；

              我如果爱你——
              绝不学痴情的鸟儿，
              为绿荫重复单调的歌曲；

              也不止像泉源，
              常年送来清凉的慰藉；

              也不止像险峰，
              增加你的高度，衬托你的威仪。

              甚至日光。
              甚至春雨。

              不，这些都还不够！
              我必须是你近旁的一株木棉，
              作为树的形象和你站在一起。

              根，紧握在地下，
              叶，相触在云里。

              每一阵风过，
              我们都互相致意，
              但没有人，
              听懂我们的言语。

              你有你的铜枝铁干，
              像刀，像剑，
              也像戟；

              我有我红硕的花朵，
              像沉重的叹息，
              又像英勇的火炬。

              我们分担寒潮、风雷、霹雳；
              我们共享雾霭、流岚、虹霓。
              仿佛永远分离，
              却又终身相依。

              这才是伟大的爱情，
              坚贞就在这里：
              爱——
              不仅爱你伟岸的身躯，
              也爱你坚持的位置，足下的土地。
</pre>

特殊字符
在一些情况下需要显示"< p>< /p >"等类似符号时，需要使用特殊字符来代替相应字符，特殊字符参考：ISO-8859-1 字符实体手册.