当前位置：首页 > news >正文

【JavaWeb】之HTML(对HTML细节的一些总结)

news 2025/9/2 6:50:16

大家天天开心！

文章目录

前言
一、HTML的简介
二、HTML运行方式
三、html 的标签/元素-说明
四、表单注意事项
总结

前言

首先我们在把Java基础学习完之后，我们就要进行网站方面的开发了，我们要了解网页的组成，而网页的组成有HTML,CSS,JavaScript 所以我们就要从HTML开始了，下面我们开始进行学习。

一、HTML的简介：

首先我们要知道HTML 是什么：

1. HTML（HyperText Mark-up Language）即超文本标签语言(可以展示的内容类型很多)

2. HTML 文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等

3. HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的韩顺平Java 工程师信息，而主体则包含所要说明的具体内容

注意：HTML 文件本质上是一种标记语言（markup language），它本身并不“运行”，而是由浏览器解析并呈现。

浏览器内部的工作过程如下：

加载文件：当你在浏览器中输入网址时，浏览器向服务器发送请求以获取 HTML 文件。当文件被传送到浏览器后，浏览器会开始解析这个 HTML 文件。
解析 HTML：浏览器首先解析 HTML 文件的内容，浏览器内置的 HTML 解析器将 HTML 标签及其内容转换成 DOM（文档对象模型）树。DOM 树表示页面的结构和内容，类似于树状结构，每个标签都变成了一个 DOM 节点。
解析 CSS：浏览器还会解析页面中引用的 CSS（层叠样式表）文件，CSS 用于定义 HTML 元素的外观样式。浏览器将 CSS 规则应用于 DOM 树中的相应元素，形成渲染树。
执行 JavaScript：如果 HTML 文件中包含 JavaScript 代码，浏览器的 JavaScript 引擎（如 Chrome 的 V8 引擎）会执行它们。JavaScript 可以操作 DOM 和 CSSOM（CSS 对象模型），也可以更新页面的内容或交互行为。
渲染页面：浏览器结合 DOM 和 CSSOM 构建渲染树。渲染树是页面视觉内容的表示，浏览器根据渲染树来确定如何在屏幕上绘制页面。接下来，浏览器会进行布局和绘制，将页面呈现给用户。
事件监听和交互：当用户与页面交互时（例如点击按钮、输入文本等），浏览器会根据 JavaScript 的事件监听机制触发相应的事件，可能会引发页面的更新或动画效果等。

总结来说，HTML 文件通过浏览器的渲染过程被解析、样式化、执行脚本，最终在屏幕上呈现页面，并能响应用户的交互。

二、HTML运行方式：

1.本地运行：

2.远程运行：

注意事项：

1.HTML文件不需要编译，直接由浏览器进行解析执行

2.可以选择的浏览器，是你电脑安装有的浏览器,如果没有安装这个浏览器，会报错

三、html 的标签/元素-说明：

1. HTML 标签用两个尖括号”<>”括起来

2. HTML 标签一般是双标签，如和前一个标签是起始标签, 后一个标签为结束标签

3. 两个标签之间的文本是html元素的内容

4. 某些标签称为"单标签",因为它只需单独使用就能完整地表达意思,如<br/>和<hr/>

5. HTML 元素指的是从开始标签到结束标签的所有代码。

标签使用细节：

1.标签不能交叉嵌套

2.标签必须正确关闭

3.注释不能嵌套

4. html 语法不严谨。有时候标签不闭合，属性值不带””也不报错

font字体标签：

例：在网页上显示北京，并修改字体为微软雅黑，颜色为蓝色

font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)

(1)color属性修改颜色 (2)face属性修改字体

标题标签：

超链接标签：

超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

无序列表：

有序列表：

图像标签：

.img标签可以在html页面上显示图片

表格标签：

基本语法：

实例：

表格标签-跨行跨列表格：

细节：

实例：

 <table border="1px" bordercolor="#E87EFA" cellspacing="0"width="400px"><tr><td align=center colspan="3">星期一菜谱</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小葱豆腐</td><td>炒白菜</td></tr><tr><td rowspan=2>荤菜</td><td>油闷大虾</td><td>海参鱼翅</td></tr><tr><td>红烧肉<img width="100px" src="../2.png"/></td><td>烤全羊</td>
</tr></table>

form表单介绍：

模拟登录演示：

细节：

 <h1>登录系统</h1><formaction="ok.html"method="get">
用户名:<input type="text"name="username"><br/>
密码:<input type="password"name="username"><br/>
<input type="submit" value="登录"> <input type="reset"value="重新填写"></form>------ok.html----
<!DOCTYPEhtml><html lang="en"><head><metacharset="UTF-8"><title>登录成功</title></head><body><h1>恭喜你，登录OK</h1></body></html>