HTML学习总结

最新推荐文章于 2024-10-04 22:04:56 发布

Mirecz

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量325

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Mirecz/article/details/114795320

版权

HTML学习总结

一、HTML

一、HTML

1、简介

HTML是超文本标记语言，全称英文名为HyperText Markup Language。是一种用于创建网页的标准标记语言，HTML 运行在浏览器上，由浏览器来解析。

2、具体介绍

（1）文档

①使用VS code，在该文本编辑器下创建文件，文件的后缀名为html。（开始练习文件数量较少，如果涉及项目工程，需养成良好习惯，将文件按照一定方式分文件放置！）
②HTML元素：HTML由许多元素组成，元素一般由一对标签构成，常见的有：<head>,<title>,<body>,<p>,<div>,<img>,<span>,<nav>等等。
一个元素是由三个部分组成：开始标签、内容、结束标签组成。
③HTML文档(一般情况结构大致如下)：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

（2）HTML文档说明

①注释：。
②空元素：没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
③HTML 元素以开始标签起始，HTML 元素以结束标签终止。
④HTML属性：一个空格，在属性和元素名称之间；属性名称，后面跟着一个 = 号；一个属性值，由一对引号 “” 引起来。

（3）标题

①标题是通过 <h1> - <h6>（从大到小）标签进行定义的。
例如：

<h1>这是一个1标题。</h1>
<h2>这是一个2标题。</h2>

②搜索引擎使用标题进行索引页面内容。
③ h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3…
④HTML水平线：通过<hr>标签建立水平线进行分割。

（4）文本格式

①HTML使用标签来对输出的文件进行格式输出，但是使用比较少，如果需要进行美化，会使用CSS来进行。
②常见文本格式标签：

<em>	着重文字
<i>	    斜体字
<small>	小号字
<strong>加重语气
<sub>	下标字
<sup>	上标字
<ins>	插入字
<del>	删除字
。。。。。。

（5）超链接

①HTML 使用超级链接与网络上的另一个文档相连，点击即可跳转。
②超链接可以是字、词、图像等。
③语法：<a href="url">链接文本</a>
说明：href即为要跳转去的地址 URL；
④例：

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

href即为要跳转去的地址 URL；target属性为_blank表示在新的页面打开超链接；超链接标签包含的内容，供用户点击。
⑤锚点：也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
⑥说明：使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可，元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4，超链接中的地址需要有#符号。

（6）图片

①在网页中显示图像，图像由<img> 标签定义。
②语法：<img src="url" alt="some_text">
③说明：src属性为要显示图片文件的位置 URL，图片文件的路径；alt属性当获取图片出现问题时显示的文字（占位符）。
④ 对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度。

（7）文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
== 一般推荐使用相对路径==

（8）表格

①将表格在网页中呈现，使用相应的标签即可。
②例：

  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

Firstname	Lastname	Age
Jill	Smith	50
Eve	Jackson	94

<tr>表示行, <td>表示行中的单元, <th>是表头的单元.
③表格标签：

标签	描述
`<table>`	定义表格
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<caption>`	定义表格标题
`<colgroup>`	定义表格列的组
`<col>`	定义用于表格列的属性
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚