HTML-基本概念

HTML（HyperText Markup Language，超文本标记语言）：定义Web内容的含义和结构。

超文本主要指的就是超链接（网页之间的连接）
超出文本内容限制：可以添加图片、声音、动画、多媒体等内容
超级链接：可以从一个文件跳转到另一个文件，实现世界各地主机文件之间链接
标记，标注方式在浏览器上显示文本、图片和其他内容。这些标记（标签）叫做"element"。不同的标记，会被识别成不同的内容。
大小写不敏感，推荐写小写。

HTML基本结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

HTML、XML都是一种标记语言。
<!DOCTYPE> 是为了链接到一个页面标签书写规则的文件，用于识别和规范文档标签。
这个外部规则文档的格式是DTD，里面描述了页面标签的书写规则。（Spring框架 XML 格式配置 Bean 文件中就有类似的内容。）
此处的<!DOCTYPE html>表示使用HTML5的规则。
<html></html>包裹网页的所有内容，是网页的根元素。
<head></head>
这部分的内容不会直接显示到网页中，不是页面的内容。
主要包括一些关键字、网页在搜索时的描述信息、CSS文件链接、字符集信息...
<meta charset="UTF-8">
表示网页使用UTF-8字符编码方式。
<meta>元素：网页的元数据。
<title></title>
网页标题。添加书签时，<title>的内容会作为书签名。
<body></body>
内容会被解析并渲染到网页上。

基本概念

1、元素(element)

通常将元素按照HTML标签中标签数量分为：单标签、双标签。

双标签：开始标签、内容、结束标签

<!--
<p>：开始标签
</p>：结束标签
xxxxxx：内容
<p>xxxxxx</p>：元素（Element）
-->
<p>xxxxxx</p>

单标签：开始即结束。主要用于在文档中插入或者嵌入一些内容。叫做空元素(void element)。

<a href=""/>
<a href="">

没有关闭标签（单标签不写/、双标签不写结束标签，大多数浏览器也能正常显示，但是不是推荐的写法。）

2、属性(attributes)

属性描述的是当前标签内容中未包含的信息，是HTML元素提供的附加信息。

特点：

在开始标签中进行描述，用于添加附加信息
格式：属性名=属性值
- 多个属性空格隔开
- 属性值用引号包裹(通常在HTML中使用双引号)

<!--属性：class="my-p"-->
<p class="my-p">xxxxx</p>

常见属性：

src：图片路径、文件路径。
href：外链资源，用于a、link等标签。
width、height：元素宽度、高度。
特殊属性：没有写值的属性（布尔属性），这种属性只要写了，就表示是true；不写，表示false。
JS中的行内事件同样也是属性。

<!--值：要么是空字符串，要么是属性名本身-->
<input type="text" disabled="disabled"/>

<!--输入框，不能输入文本-->
<input type="text" disabled/>
<!--输入框，可以输入文本-->
<input type="text"/>

<!--JS行内事件-->
<button onclick="fn">点击</button>

3、常用标签

3.1、标题标签

<!--浏览器会放大和加粗文本，并在前后添加间距-->
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>

要将标题标签用于标题显示，突出内容的重要性，而不是仅仅用于放大和加粗文本。
标题标签可以作用于搜索引擎来编制网页结构和内容的索引；另外，标题标签可以用于呈现文档结构，让用户更加清晰快速地浏览网页。

3.2、段落标签

<!--浏览器会自动在段落的前后添加空行-->
<p>这是一个段落</p>
<p>这是另一个段落</p>

3.3、本质

HTML标签更多的是提供一种语义化的内容。内置的HTML标签本身所具有的页面中展示的样式结构，其本质是浏览器在解析对应的标签时，会在它上面加一些默认样式。
样式结构最终是通过CSS来实现的。

HTML空格、特殊字符、注释

HTML中多个空格、tab制表符都只会在页面上显示一个空格。

特殊字符：

大于、小于：> 【>】、< 【<】
&：&
©：©
空格： 
引号：""、''

注释：

posted @ 2024-12-08 16:22 我是bee 阅读(78) 评论(0) 收藏举报

刷新页面返回顶部