HTML基本知识_在html中<ul>是什么意思-优快云博客

本文链接：https://blog.youkuaiyun.com/2202_75695913/article/details/143751391

一、HTML是什么：

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

二、HTML的基本结构：

<!DOCTYPE html> //DOCTYPE: 文档声明

<html> //html: 标签告知浏览器其自身是一个 HTML 文档

<head></head> //head: 标签用于定义文档的头部（文档的描述信息）

<body></body> //body: 标签用于定义文档的主体（文档的主体内容）

</html>

三、常见编码格式：<meta charset="utf-8">

UTF-8	国际通用编码字符集，UNICODE的灵活版
GBK/GB2312	中文编码字符集
BIG5	中文繁体字符集
iso8859-1	西方欧洲语言字符集，通常叫做Latin-1
UNICODE	大字符集，包含了地球上所有语言的编码

四、HTML标签使用规则：

1、所有的HTML标签都必须使用尖括号包裹起来，例如：<head>

2、HTML标签通常都是成对出现，双标签必须需要有开始和结素标签，例如：<a></a>

3、HTML标签不区分大小写

4、所有的HTML双标签都可以进行嵌套，但是在这里面是不允许交叉嵌套的。

五、HTML常见的标签

1、基础标签：

标题：<h1>,<h2>.....<h6>用于定义标题段落

2、文本标签：

文本标签<p>,文字标签<b>,<strong>,<small>,<big>

3、布局标签：

行内文本：<span>,定义标签文字

4、链接标签：

<a>,用于创建超链接，href属性指定连接目标

5、图像标签<img>：

用于插入图片，src指定图片的路劲，alt属性用于描述图像

6、表单标签：

<form>,<label>,<button>,表单用于用户输入数据<input>用于文本输入，<button>用于提交按钮

7、表格标签：

<table>,<tr>,<td>,<th>,<table>:定义表格，<tr>:定义行，<td>定义单元格，<th>定义表头

8.语义化标签

举例：<header>, <footer>, <nav>, <section>, <article>

用处：这些标签帮助提升代码的可读性，利于SEO

SEO（Search Engine Optimization，搜索引擎优化）是一种通过优化网站的内容和结构，提升网站在搜索引擎中的自然排名和可见性的策略。SEO 的目的是使网站更容易被搜索引擎理解、索引和排名，从而吸引更多的自然流量。

六、HTML元素分类

1.行内元素（Inline Elements）

行内标签多个并排一行，宽高为内容大小，不独占一行，常见的多为文本内容相关的标签。

2.块级元素（Block-level Elements）

块标签独占一行，宽度默认为100%，可以设置宽高，垂直排列，常见的多为标题段落及布局相关的标签。

3.行内块级元素（Inline Block Elements)

行内块级元素的特性、不独占一行、可以设置宽高、再一行内水平排列、常见行内元素、无，只能通过display或者flex得到

七、块级元素与行内元素的对比

1、块级元素通常用于布局和大结构，行内元素用于局部样式。块级元素可以嵌套行内元素，但行内元素一般不能嵌套块级元素。

2、如何将行内元素变成块级元素：通过 CSS 的 display: block; 属性可以将行内元素转变为块级元素。

3、如何将块级元素变成行内元素：通过 CSS 的 display: inline; 属性可以将块级元素转变为行内元素。

4、行内块元素：display: inline-block;，这种元素既可以在一行内排列，又可以设置宽高，适合用于并排排列的按钮或小型容器。

八、HTML文档流

1、文档流定义：HTML文档流（Document Flow）是指在HTML文档中元素在布局时的自然顺序，是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终自上而下分成一行行，并在每行中从左至右的顺序排放元素。

2、特点：在正常的文档流中，元素按照它们在HTML文档中出现的顺序依次排列；从上到下，块级元素占据一行；行内元素从左到右排列，直到一行放不下，然后换行。

3、改变文档流的方式：

1、浮动（Float）：通过设置元素的float属性（如float: left;或float: right;），可以将元素从正常的文档流中移出，使其浮动在其他元素的左侧或右侧

2、绝对定位（Absolute Positioning）：通过设置元素的position: absolute;，可以将元素从文档流中完全移出，并相对于最近的已定位祖先元素（即position属性值为relative、absolute或fixed的元素）进行定位

3、相对定位（Relative Positioning）：通过设置元素的position: relative;，可以将元素相对于其在正常文档流中的位置进行偏移，而不影响其他元素的布局。相对定位的元素仍然占据其在文档流中的原始空间。

4、固定定位（Fixed Positioning）：通过设置元素的position: fixed，可以将元素固定在视窗的某个位置，即使页面滚动，该元素也不会移动。