HTML基础教程（大纲＋详细内容）

最新推荐文章于 2024-11-09 19:20:14 发布

我爱凉音

最新推荐文章于 2024-11-09 19:20:14 发布

阅读量856

点赞数 24

文章标签： html 前端

本文链接：https://blog.csdn.net/2402_82646957/article/details/142743976

版权

1，什么是html

忽略那些专有名词，不那么专业的讲，html就是一种文档，一种内含文字、图形、声音、表格、链接等多种要素的文档，通常它的展现方式就是网页。

2，html的基本结构

2.1 html的语法框架

<!doctype html>   
<html> 

        <head> 

        </head>                

        <body>                

   </body>                

</html>

2.2 html的语法结构

2.2.1标签（类似于游戏中的职业）

通常来说，标签就是封装好的变量，每一个标签都有相对于的功能，其书写格式都是用<>括起来。

通常来说，标签都有开始标签<>和结束标签</>。结束标签主要是为了明确标签的影响内容，明确标签与标签之间的关系，是包含与被包含，还是并列，亦或是无关系。

2.2.2属性（类似于游戏中的身体属性）

标签是用来规定代码是什么信息，而属性就是用于显示和控制这些信息。

属性的组成方式为：属性名="值"，一个标签内有多个属性，属性之间用空格隔开

<标签名属性名="值" 属性名="值"> 受标签影响的内容 </标签名>

2.2.3元素（类似于游戏中的存档）

元素不仅包含标签本身，还包含被标签影响的内容。

<h1>凉音</h1> 这就是一个元素

3.html的基础语法

3.1文档标签

1. `<p>`：段落标签。用于定义文本的一个段落。浏览器会在段落的前后自动添加一些空白，以区分不同的段落。

示例：
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2. `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`：标题标签。用于定义HTML文档的标题。`<h1>`是最高级别的标题，`<h6>`是最低级别的标题。浏览器默认会以不同的字体大小显示这些标题。

示例：
<h1>这是一个标题 1</h1>
<h2>这是一个标题 2</h2>
<h3>这是一个标题 3</h3>

3. `<b>` 和 `<strong>`：加粗文本。`<b>` 仅仅使文本加粗显示，而 `<strong>` 则强调文本的重要性，对搜索引擎优化（SEO）来说，`<strong>` 可能更有意义。

示例：
<b>加粗文本</b>
<strong>强调文本</strong>

4. `<i>` 和 `<em>`：斜体文本。`<i>` 仅仅使文本以斜体显示，而 `<em>` 则强调文本。

示例：

<i>斜体文本</i>
<em>强调文本</em>

5. `<br>`：换行标签。它是一个空标签，用于在不需要新段落的情况下插入一个换行符。

示例：

这是第一行。<br>这是第二行。

6. `<hr>`：水平线标签。用于在网页中插入一条水平线，通常用于分隔内容。

示例：

<p>这是一段内容。</p>
<hr>
<p>这是另一段内容。</p>

3.2图像标签

HTML图像标签使用<img>标签来定义，主要属性包括：

src: 图像的路径或URL。
alt: 图像的替代文本，当图像无法显示URL。
alt: 图像的替代文本，当图像无法显示时展示。
width和height: 图像的宽度和高度（可选）。

示例：< img class=" long-press-able-img " src="image.jpg" alt="示例图像" width="500" height="300">

3.3超链接

7. `<a>`：超链接标签。用于创建从一个页面链接到另一个页面的链接。

示例：

<a href="https://www.example.com">访问Example</a>

3.4列表标签

HTML列表标签包括：

<ol>：定义有序列表。
<ul>：定义无序列表。
<li>：定义列表项，用于<ol>或<ul>中。
<dl>：定义定义列表。
<dt>：定义定义列表中的术语。
<dd>：定义定义列表中的术语描述。

3.5表格标签

HTML表格标签包括：

<table>：定义表格。
<tr>：定义表格行。
<th>：定义表格头部单元格，默认加粗并居中。
<td>：定义表格普通单元格。
<caption>：定义表格标题。
<thead>：分组表格头部内容。
<tbody>：分组表格主体内容。
<tfoot>：分组表格尾部内容。