HTML所有元素介绍及初级事例

最新推荐文章于 2024-07-25 11:26:35 发布

2301_78977167

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1.9k

点赞数 49

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/2301_78977167/article/details/133425670

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML，全称Hyper Text Markup Language。它是前端开发的重要组成部分，是创建web结构的根基。

一、HTML基础标签

请注意：下列标签是HTML文件正常运行的必要元素！

1.<DOCTYPE>它是用来声明文档类型的，如果没有它浏览器将无法解析文档。此声明必须放在表头！

2.<html>它是定义HTML文档中的根元素，为<style>、<body>、<script>、<head>上一级元素。可以说你即使有了<DOCTYPE>声明，没有<html>照样无法正常显示元素。并且，可以在此元素中声明语言类型类如<html lang="en" >。

3.<head>它的内部是放置元数据的，例如<meta>、<link>、<title>。这三个标签后面再继续讲。文档标题、样式表、脚本等等都是在这里统一定义的。

4.<base>这个标签呢基本上不会有太多人知晓并使用，因为这个标签是规定默认链接或默认地址的。<base>是放在<head>内的元素哟

5.<meta>它定义HTML文件中元数据、文档字符集、关键词等重要内容。爱

6.<link>是链接外部的量或文件进行读取数据，以供下面的<body>下级元素使用。类如<div>(css)或是<script>(js)。

7.<script>全称Javascript。用来定义各个脚本的元素。内部为Javascript的代码，介绍这里就不多讲了，以后单独出一个文章。

通过以上七点的学习，我们可以制作出基础的HTML文件[示例]

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>我的网页</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <h1>欢迎来到我的网页！</h1>
</body>
</html>

字符编码

字符编码（Character encoding）也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉冲），以便文本在计算机中存储和通过通信网络的传递。常见的例子包括将拉丁字母表编码成摩斯电码和ASCII。其中，ASCII将字母、数字和其它符号编号，并用7比特的二进制来表示这个整数。通常会额外使用一个扩充的比特，以便于以1个字节的方式存储

字符集

它是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。计算机要准确的处理各种字符集文字，就需要进行字符编码，以便计算机能够识别和存储各种文字。中文文字数目大，而且还分为简体中文和繁体中文两种不同书写规则的文字，而计算机最初是按英语单字节字符设计的，因此，对中文字符进行编码，是中文信息交流的技术基础。

8.<title>表示网页中上方标题栏内的文字。虽说不是必要的，但是没有标题的网页总给人一种怪怪的感觉。

9.<body>如果没有它，就没有页面的所有元素显示

至此，基础(及重要)元素已经讲解完毕了

二、文本标签

1.<p>是新建一个段落，此段落指的不是分行，而是第一个<p>至第二个<p>的延续。

<p>一段文本</p><p>第二段文本</p>

一般使用<p>元素时，在一段上，不会强行的分成两个<p>元素。只有当特定链接或者要标记高亮或字体类时才会强行断开一行上的一个<p>元素，后面也会讲<p>元素内怎么进行更好的使用。

2.<h1>~<h6>此元素与<p>元素使用方法基本相同，不同点只在与文字大小。<h1>代表的是标题，也就是最高级文字大小。以此类推，<h6>就代表了最低级的文字大小啦。

3.<em>(与<i>)的作用是强调文本。通常用于斜体显示。

4.<strong>(与<b>)它定义的是更加强调的文本。一般用来加粗显示，可配合<font>、<p>标签使用。

5.<ins>(与<u>)它定义(添加)下划线文本。

6.<del>(与<s>)定义(添加)删除线文本。

请注意：上方的<em><strong><ins><del>的权重比<i><b><u><s>要大。但是使用时为了便捷，一般都会直接使用权重小的文本标签！

三、列表标签

1.<ul>定义的是无序列表，通常使用圆点作为此列表的标识。

2.<ol>定义了有序列表，通常使用数字作为此列表的标识。

3.<li>它定义一个列表项。作为<ul>和<ol>的子元素一起使用。

4.<dl>定义一个定义列表项。一般为描述名词及其对应的解释

请注意：<dt>定义名词，<dd>定义解释

四、超链接标签

1.<a>可以定义一个超链接。同时还包括锚点定位和电子邮箱地址。

href用于连接外(内)部链接。

如果为<a href="#"></a>即跳转至顶部

其它<a>元素用法后面继续讲

2.<img>它定义一张图片。并且可以继续作为超链接的目标。

src属性是用于指定图片的URL地址，通常有两种方式：

1.绝对路径："https…";"D:/…"

2.相对路径："…/…(.)jpg"

alt是一个很有用处的属性。它可以在无法浏览一张图片时，为用户提供文字显示(警告)，以便提示用户与开发者。

title属性。如果你将鼠标移到了它所在的位置时，图片将会显示文本，但不是alt属性那样如果没有图片才会显示文本，这个属性是会一直显示文本为您提供信息的

width与height定义宽度与高度

五、HTML特殊(占位)字符[标签]

1.&nbsp与&ensp是英文一格的占位符，通常为了编写方便都会使用这两个占位符的，但是也有一个中文占位符(一位为一汉字)，便是&emsp。

2.&it与&gt这俩一看就是兄弟俩，前者为大于，后者为小于

3.&copy简直就是整个网页傲娇的灵魂所在(也是该交版权费的日子了ꉂꉂ(ᵔᗜᵔ*))，这个字符就是一个版权符号[©️]

4.双引号 "

5.单引号 '

6."&" &

六、表格标签

1.<table>：它定义一个表格，包含多个行和列。

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
</table>

2.<th>：它定义表格的表头单元格，通常加粗居中显示。

<table>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
</table>

3.<caption>：它定义表格的标题，位于表格上方或下方。

<table>
  <caption>表格标题</caption>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  <tr>
<table>

4.<thead>、<tbody>、<tfoot>：它们分别定义表格的表头、正文和页脚部分，用于将表格内容分组。

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">表格页脚</td>
    </tr>
  </tfoot>
</table>

5.col、colgroup：它们定义表格列的属性，如宽度、颜色等。全部示例为:

<table>
  <colgroup>
    <col style="background-color: #ccc;">
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
  </tbody>
</table>

七、表单标签

1.<label>：它定义一个表单控件的标签，通常与<input>、<textarea>等控件配合使用。

2.<input>：它定义一个表单控件，例如文本框、复选框、单选按钮等。它的type属性用于指定控件类型。

3.<form>：它定义一个表单，包含一组控件，用于向服务器提交数据。例如：

<form action="submit.php" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="提交">
</form>

4.<select>、<option>：它们定义一个下拉列表框控件，用户可以从列表中选择一个选项。例如：

<label for="fruit">喜欢的水果：</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

其中定义一个选项，value属性指定选项的值，如果没有指定则默认为选项的文本。

5.<textarea>：它定义一个多行文本输入框控件，用于输入多行文本。例如：

<label for="message">留言：</label>
<textarea id="message" name="message"></textarea>

6.<button>：它定义一个按钮控件，用于触发脚本或提交表单。例如：

<button type="button" onclick="alert('Hello World!')">点击我</button>
<button type="submit">提交</button>

八、多媒体标签

1.<img>：它定义一个图片，用于向HTML页面中添加图片。

用法:<img src="image.jpg" alt="图片">

其中src属性指定图片的URL地址，alt属性指定当图片无法显示时显示的替代文本。

2.<audio>、<source>：它们定义一个音频播放器，用户可以播放音频文件（mp3、war 、ogg)。例如：

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  您的浏览器不支持HTML5音频播放器。
</audio>

关于媒体文件的知识点:

source定义音频文件

type属性指定文件类型

width和height属性指定视频播放器的宽度和高度。

其他属性：

autoplay : 值autoplay，自动播放（谷歌禁用）

loop ：值 loop 循环播放

controls ：值 controls 显示播放控件

muted :值muted,静音播放（解决谷歌不能自动播放）

preload ：两个可取纸auto(预加载)、none

3.<video>、<source>：它们定义一个视频播放器，用户可以播放视频文件。例如：

<video controls width="640" height="360" poster="/images/w3school.gif">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  您的浏览器不支持HTML5视频播放器。
</video>

敲重点！关于<video>、<source>的知识来啦！！:

source定义视频文件

type属性指定文件类型

poster加载等待的画面

九、其它标签

1.<div>、<span>：它们用于将HTML文档分成若干块或行，通常用于布局或样式控制。例如：

<div style="background-color: #ccc; width: 300px; height: 200px;">这是一个DIV</div>
<span style="color: red;">这是一个SPAN</span>

其中style属性用于指定样式，可以是CSS样式或内联样式。

2.<br>：换行标签

3.<hr>：水平线标签

4.<blickqoute>:长引用,主要用于引用古诗词等段落形式。块元素

5.<q>：短引用，引号，行内元素

6.<iframe>：它定义一个内嵌框架，用于在HTML文档中显示另一个网页。例如：
其中src属性指定要显示的网页的URL地址，width和height属性指定框架的宽度和高度。

<iframe src="http://www.example.com" width="600" height="400">
</iframe>

7.<script>：与<div>技术定位基本相同。Div与JavaScript都是外引语言，为支持HTML网页多样化而生，JS(JavaScript简称)以后将单独出一期共同了解一下JS技术对于HTML网页的重要性且会发布关于JS技术的示例！<script>一般在</body>前编写，有时也在<head>里进行引用外部JS文件供主html文件使用，当然也可以在html文件之中的</body>前编写JS编码。