HTML入门

最新推荐文章于 2024-11-17 20:29:19 发布

我淦

最新推荐文章于 2024-11-17 20:29:19 发布

阅读量493

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_51087836/article/details/115011156

版权

文章目录

一、什么是HTML？
二、HTML文档结构
三、总结

一、什么是HTML？

HTML全称 “ Hyper Text Markup Language ” ，意思是超文本标记语言。它是一种用于定义内容结构的标记语言，其中包含了许多的标签，用这些标签来构建网页，同时将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。因而HTML文档也叫做 web 页面。
超文本是指用超链接的方法，将文字，图片等信息组织在一起的网状文本。超链接则是指从一个网页指向一个目标的连接关系，当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

二、HTML文档结构

HTML基本结构如下图：
在这里插入图片描述
如图所示，一个HTML文档包含文档声明以及页面内容，页面内容由各种元素组成。网络上有很多不同的文件，<!DOCTYPE>声明能够正确声明HTML的版本，浏览器就能正确显示网页内容。

1、HTML元素

（1）基本元素

元素一般由一对HTML标签（tag）构成。
如下图是一个用于展示段落的元素：
在这里插入图片描述
元素（Element）由开始标签、结束标签和内容组成。

开始标签（Opening tag）：包含元素的名称（本例为 p）、左右角括号，表示元素的开始。
结束标签（Closing tag）：与开始标签相差一个斜杠，表示元素的结尾。
内容（Content）：即元素的内容，本例中就是所输入的文本本身。

（2）空元素

一般来说，元素都拥有开始标签、结束标签和内容。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入或嵌入一些东西，如 < br >, < hr >, < input >, < img >, < a > 等等。

< br >：换行
< hr >：水平分割线
< input >：输入框
< img >：图片及文件路径
< a >：超链接

（3）区块元素

区块元素在浏览器显示时，通常会以新起一行来开始（和结束）。如：< h1 >, < pre >, < ul >, < table >，< div > 等。

< h1 >：标题
< pre >：预设格式
< ul >：无序列表
< table >：表格
< div >：分割文档

（4）内联元素

内联元素是在一行中挨个进行显的示，不会新起一行。如： < span >, < input >, < td >, < a >, < img > 等。

（5）特殊字符

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，详情见ISO-8859-1 字符实体手册。

2、HTML标签

< html > < /html >：< html >元素包含了整个网页，表示整个网页是从< html >这里开始的，然后到< /html >结束。
< head > < /head >：< head >元素代表页面的“头”，定义一些特殊内容，这些内容在浏览器是不可见的，它包括你想在搜索结果中出现的关键字和页面描述，CSS样式等。
< body > < /body >：body标签代表页面的“身”，定义了网页展示的内容，在浏览器是可见的。后续标签都是在 < body >标签内部的各种标签。
< h1 > < /h1 >：表示标题，HTML 提供了从大到小6级标题，分别是：< h1 > ~ < h6 >。在页面中，搜索引擎用标题来索引页面的内容。

注意：不能使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。

< p > < /p >：表示插入段落文字，可进行嵌套。
< !-- 和 – > : < !-- 和 – >包括起来的内容表示注释，用来对代码的工作进行注释，在浏览器中也是不可见的。

在 code 软件中，输入Ctrl + /即可快捷的进行注释！

< a > < /a >：表示超链接，任何东西都可以加上超链接，一般文字和图片较多。
示例超链接语法：

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

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

< img >：表示图片及文件路径。

（1）图片绝对路径语法：

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

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

（2）图片相对路径语法：
在这里插入图片描述

< table > < /table >：表示显示表格，表格标签中 < tr > 表示行， < td > 表示行中的单元，< th > 是表头的单元（将会加粗显示）。
< li >< /li >：表示列表。
列表语法示例：

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

1.无序列表使用 < ul >标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
2.有序列表使用 < ol > 标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

< form > < /form >：表示表单，当网站需要获取一些信息如用户名、密码等时，我们就需要使用表单来让用户填写或选择。
< pre > < /pre >: 预设格式，pre标签中的内容将保持格式不变。如果你想在网页中展示一首诗或一些特别格式的文本，可以用pre标签。