HTML基础知识详解-CSDN博客

本文链接：https://blog.csdn.net/qq_52206533/article/details/115434386

文章目录

1.何为html?
2.文档解析
2.4属性
3.html注释
4.实体引用
5.常见的元素介绍
- 5.1`
  `到 `
  `
- 5.2`
  `
- 5.3列表
- 5.4超链接
- 5.5块级无语义元素：
- 5.6内联无语义元素：``

1.何为html?

HTML(Hyper Text Markup Language),html不是一门编程语言，而是一种告知浏览器如何组织页面的标志语言。html可复杂，可简单，一切取决与开发者。它由一系列的元素（elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（tags)可以为一段文字或者一张图片，或添加超链接等等操作。

2.文档解析

2.1文档分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习html</title>
</head>
<body>
<p>111111111111<\p>
<p>222222222222<\p>
</body>
</html>

在这里插入图片描述

说明：

开始标签：包含元素名称（上例为p),被左、右角号所包围，表示元素从这里开始或是从这里开始起作用；
与开始标签相似，只是其在元素之前包含了一个斜杠，这表示这元素的结尾；
元素的内容，上述例子中111111111 222222222就是所输入的文本本身；
开始标签，结束标签与内容相结合，便是一个完整的元素。

2.1嵌套元素

可以把元素放到其他元素之中——这被称为嵌套。

<p>我爱我的<strong>祖国</strong></p>

这里使用标签，来强调祖国这一内容。

2.2块级元素和内联元素

2.2.1块级元素

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>

2.2.2内联元素

<strong>第一句话</strong>
<strong>第二句话</strong>
<strong>第三句话</strong>
<strong>第四句话</strong>

块级元素在页面中默认是以块的形式展示，更多的是表示一类段落的语义；
内联元素不会导致文本换行，更多的表示一个词，一句话等语义。

2.3空元素

不是所有的元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：<img>是用来在元素<img>所在位置插入一张指定的图片，就没有结束标签。

<img src="img/QQ图片20210404144029.jpg",height="599" width="477">

2.4属性

元素可以是拥有属性的，如下面的p标签，元素里面有属性，键被称为属性名，值被称为属性值。
在这里插入图片描述
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述的例子中，我们指定了id这个属性。他的值是pid,还指定了class这个属性，他的值是c1和c2。
一个属性必须包含如下内容：

一个空格，在属性和元素名称之间（如果有一个或多个属性，就与前一个属性之间有一个空格。）
属性名称，后面跟着一个等于号。
一个属性值，由一对引号""引起来。（可以是单引号，也可以是双引号）

3.html注释

为了将一段html的内容置为注释，需要将其用特殊的记号<! --和-- >包括起来，比如：

<p>我在注释外</p>
<!--<p>我在注释内</p>-->

4.实体引用

在html中，字符<,>,",'和&都是特殊字符，他们都是html语法自身的一部分，那么如何将这些特殊字符插入你的文本之中呢？不如说实在自己的文本之中插入& 或者小于号，但是并不想让浏览器认为是代码，该怎么办呢？
此时我们必须使用字符引用——表示字符的特殊编码，他们可以在哪些情况下使用，每个字符引号以符号&开始，以分号;结束。
常用的实体引入如下：

原义字符	等价字符引用
<	<是小于(little)的意思
>	>是大于（great）的意思
"	&quote;quote是引号的意思
’	'apos是单引号的意思
&	&amp是and符的意思

示例：

<p>html中用<p>来定义段落</p>
<p>html中用&lt;p&gt;来定义段落</p>

5.常见的元素介绍

5.1`<h1>`到 `<h6>`

<h1>这是我的第一个标题</h1>
<font size="6">这是6号字体</font>
<h2>这是我的第二个标题</h2>
<font size="5">这是5号字体</font>
<h3>这是我的第三个标题</h3>
<h4>这是我的第四个标题</h4>
<h5>这是我的第五个标题</h5>
<h6>这是我的第六个标题</h6>

5.2`<p>`


```html
<p>第一段</p>

5.3列表

无序列表：<ul>
有序列表：<ol>
列表项目：<li>

<ul>
    <li>吃早饭：油条</li>
    <li>吃午饭：米饭</li>
    <li>吃晚饭：面条</li>
</ul>

<ol>
    <li>吃早饭：油条</li>
    <li>吃午饭：米饭</li>
    <li>吃晚饭：面条</li>
</ol>

5.4超链接

<a href="https://editor.csdn.net/md?articleId=115434386">我的博客</a>

绝对路径和相对路径:网页url的绝对路径格式是：
http://域名或ip:端口号/应用上下文路径/服务资源路径
注意事项：
url资源大小写区分敏感
string.equals大小写区分敏感
string.equalsIgnoreCase大小写区分不敏感
1.html和1是不同的url资源。

5.5块级无语义元素：

无语义元素，通常用来组织内容，方便之后通过css或者js对其进行布局或者操作。

<!--<p>某个板块</p>-->
<div>
    <h2>.....</h2>
    <p>///////</p>
</div>
<!--<p>另外一个个板块</p>-->
<div>
    <h2>.....</h2>
    <p>///////</p>
</div>

5.6内联无语义元素：`<span>`

<p>大家一起往前<span>冲</span>啊！</p>