完整教程：前端学习-HTML

2025-09-28 22:13 tlnshuju 阅读(0) 评论(0) 收藏举报

前端学习-HTML

前言
一、HTML是什么？
二、HTML标签
- 1.HTML常见标签
- 2、HTML事件
- 3、HTML DOM
- 4、HTML DOM 对象 - 方法和属性
总结

前言

如果有非技术人员问你，HTML5是什么，你会怎么回答？

有人会说：新的HTML规范；给浏览器暴露了许多新的接口，干以前不能干的事；加了很多新的效果…问的人其实并不明白他想问的真正问题，回答的人貌似明白，但又好像少了点什么。新的接口、炫酷的效果，首先回答的人自己就是晕晕乎乎，什么是HTML5、CSS、DOM、JS，大部分的前端开发者每天都在用这些，但很少有人思考他们之间的关系。

一、HTML是什么？

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，注意HTML 不是一种编程语言，而是一种标记语言 (markup language)。

标记语言是一套标记标签 (markup tag)，而HTML 使用标记标签来描述网页。

本文主要介绍HTML常用标签以及相应标签的时间，最后介绍DOM结构。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

浏览器负责解析html文件内容并展示。

二、HTML标签

HTML 标签是由尖括号包围的关键词，比如 <html>。

HTML 标签通常是成对出现的，比如 <b> 和 </b>。

标签对中的第一个标签是开始标签，第二个标签是结束标签。

开始和结束标签也被称为开放标签和闭合标签。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

标签可以拥有属性/事件，属性/事件总是以名称/值对的形式出现，比如：name=“value”，属性/事件有全局熟悉/事件（可用于任何 HTML 元素）。

1.HTML常见标签

<!DOCTYPE>标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于标签之前。此声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
<h1>-<h6>标签
<h1> - <h6> 标签被用来定义 HTML 标题。<h1>定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
<a>标签
<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<div>标签
<div> 标记的是块级元素，html元素分为行内元素（<a>、<b>）和块级元素(<div>),区别在于：

 1.行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。3.行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

<span>标签
<span>标签被用来组合文档中的行内元素，你如果希望两个元素排在一行内显示，就使用span标签，如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异例如：
<span>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</span>
我的母亲有蓝色的眼睛，我的父亲有碧绿色的眼睛。
<p>标签：段落标签
<b>标签：定义粗体的文本。
也可以使用 CSS 的 “font-weight” 属性设置粗体文本。例如：
<b>这是一个加粗文本</b> ------这是一个加粗文本
<label>标签：标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label>标签的 for 属性应当与相关元素的 id 属性相同
<img>标签：定义 HTML 页面中的图像。有两个必需的属性：src(规定显示图像的 URL) 和 alt(规定图像的替代文本)。
<input>标签：用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<table>标签：标签定义 HTML 表格，一个 HTML 表格包括<table>元素，一个或多个<tr>、<th>以及 <td>元素。<tr> 元素定义表格行，<th>元素定义表头，<td> 元素定义表格单元。
<li>标签：定义列表项目，<li> 标签可用在有序列表（<ol>）、无序列表（<ul>）和菜单列表（<menu>）中。
<form>标签：用于创建供用户输入的 HTML 表单。包含一个或多个如下的表单元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>

2、HTML事件

onload 事件
onload 属性在文档对象加载完成后触发。onload 通常使用于元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)。
onunload 事件
onunload 属性会在页面下载时触发（或者浏览器窗口已关闭）。onunload 在用户从页面导航离开时发生（通过点击链接、提交表单或者关闭浏览器窗口等等）。
注意：如果您重载页面，也会触发 unload 事件（以及 onload 事件）
onresize 事件
onresize 发生于对象被调整大小时。常用于浏览器窗口被调整尺寸时。
onhashchange 事件
onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发
锚部分的实例：指定当前 URL 为
http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。
你可以使用以下方式调用事件:
1、通过设置Location 对象的 location.hash 或 location.href 属性修改锚部分。
2、使用不同书签导航到当前页面（使用"后退" 或"前进"按钮）
3、点击链接跳转到书签锚
onblur 事件
onblur 属性在元素失去焦点时触发。onblur 常用于表单验证代码（例如用户离开表单字段）

<input type="text" name="fname" id="fname" onblur="upperCase()">

提示：onblur 属性与 onfocus 属性相反。

onfocus 事件
onfocus 属性在元素获得焦点时触发。onfocus 常用于 <input>、<select> 以及 <a>。

<input type="text" id="fname" onfocus="setStyle(this.id)">

onsubmit 事件
onfocus 属性在提交表单时触发。onsubmit 属性只在 <form> 中使用。

<form action="demo_form.asp" onsubmit="checkForm()">

onclick 事件
onclick 属性由元素上的鼠标点击触发。ondblclick 属性在鼠标双击元素时触发。

<button onclick="copyText()">Copy Text</button>

3、HTML DOM

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：DOM(Document Object Model) 将 HTML 文档表达为树结构。
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
DOM节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：