前端 —— HTML

最新推荐文章于 2025-12-15 13:00:22 发布

原创最新推荐文章于 2025-12-15 13:00:22 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML

HTML 文档是由 HTML 元素（标签）定义的，HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息。

html元素类型分为三类

块级元素（block level element）、内联元素（又叫行内元素、inline element）和内联块级元素。

块级元素特性
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。即一个块级元素占一行。也就是说，浏览器通常会在 div 元素前后放置一个换行符。
2、元素的高度、宽度、行高以及顶和底边距都可设置。即可以设置 margin 和 padding。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
```
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、
<table>、<address>、<blockquote> 、<form>
```
设置display:block，可以将元素转换块级元素。
内联元素特性
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
```
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
```
设置display:inline，可以将块状元素转换为内联元素
内联块级元素特性：（同时具备内联元素、块级元素的特性）
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置！
```
常用的内联块状元素有：
<img>、<input>
```
设置 display:inline-block，可以将元素设置为内联块级元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 行内元素s1、s2 -->
    <span>
        行内元素s1，
    </span>
    <span>
        行内元素s2，
    </span>
    <!-- 块级元素d1、d2 -->
    <div>
        一个块级元素d1，占一行
    </div>
    <div>
        一个块级元素d2，占一行
    </div>
    <!-- 行内元素a1、a2 -->
    <a href="#">
        行内元素a1，但在上一个块级元素后面，也就另起一行。
    </a>
    <a href="#">
        行内元素a2
    </a>
</body>
</html>

在这里插入图片描述
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。<div> 元素的另一个常见的用途是文档布局。

HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。span没有结构上的意义，只是单纯的应用样式。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。span可以作为div的子元素，但div不能是span的子元素。

事件

在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。

事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。

1、Window 事件属性：针对 window 对象触发的事件（应用到 <body> 标签）。（<body οnlοad=“load()”>）
2、Form 事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）。（<form action=“demo_form.asp” οnsubmit=“checkForm()”>）
3、Keyboard 事件：由键盘触发的事件。（<input type=“text” οnkeydοwn=“displayResult()”>）
4、Mouse 事件：由鼠标或类似用户动作触发的事件。（<button οnclick=“copyText()”>Copy Text）
5、Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）。