自行开发构建 Web UI：部分了解 HTML
Web 开发是当今最受欢迎的技能之一。它涉及创建可通过浏览器访问的用户友好且引人入胜的网站。成为 Web 开发人员的第一步是了解 HTML。
HTML（超文本标记语言）是任何网页的支柱。它是用于构建网页的标准语言，决定内容在浏览器中的显示方式。虽然页面的外观由 CSS (层叠样式表) 决定，其功能由 JS (Javascript) 决定，HTML 负责基本骨架或结构。
在深入学习这部分课程之前，了解您的旅程中将使用的著名和反复出现的术语非常重要。这些将帮助您随着我们的进展理解概念（也让作者更容易解释事情;-)）。
了解行话
- 编程语言：以计算机可以执行的特定语法（编程语言的方式）编写的一组指令。请记住，计算机只能理解二进制代码（1 或 0），现在，为了使计算机理解逻辑并找到权衡，我们（人类）创建了一种编程语言，以便可以轻松地我们编码，也让计算机理解它。
- 编译器：将用编程语言编写的代码翻译成计算机可以理解和执行的机器语言的工具。
- 语法：定义编程语言结构的规则。将其视为句子中单词的排列方式以使其有意义。
- 注释：代码中的注释，解释代码某些部分的作用。注释可以帮助其他开发人员（或未来的你）理解代码背后的逻辑。
-
DOM（文档对象模型）：DOM 是 HTML 文档的树状表示。 HTML 中的每个标签都成为该树中的一个节点。例如，如果您的 HTML 有一个 带有
的标签(paragraph) 在其中，浏览器创建一个主体节点，并以段落节点作为其子节点。
-
孩子们：随着你的进步，你就会明白这一点。元素嵌套在另一个元素内。例如，在 HTML 中，div 标签 () 内的段落标签 (
) 将被视为 div 的子级。
- 块级元素：随着您的进步，您将了解这个术语。该术语通常描述元素的特征，即它将占据全部可用宽度。
使用 HTML 启动
HTML 代表 超文本标记语言
超文本：指 HTML 将不同文档链接在一起的能力。
标记语言：使用标签来注释文本，定义文本在浏览器中的显示方式。
这是 HTML 文档的基本结构：
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <p>Hello, world!</p> </body> </html>登录后复制-
标签：在 HTML 中，标签用于定义元素。标签括在尖括号中，例如 或
。
元素：由开始标签和结束标签组成，其中可能包含内容。例如，
你好，世界！
是一个段落元素。
HTML 文档结构
每个 HTML 文档都遵循一个基本结构：
- : Declares the document type and version of HTML.
- : The root element that encloses all other HTML elements.
- : Contains meta-information about the document, such as the title and links to stylesheets.
-
: Sets the title of the webpage, displayed in the browser's title bar or tab. - : Provides metadata about the HTML document, such as character set, author, and viewport settings. It's a self-closing tag.
- : Embeds CSS code to style the HTML elements.
- <script></script>: Embeds JavaScript code for adding interactivity to the webpage.
- : Encloses the content that will be visible to users on the webpage.
Commonly Used HTML Elements
Here are some basic HTML elements you’ll use frequently:
- : Defines a paragraph.
- : A block-level element used to group other elements together.
- : An inline element used to group text for styling purposes.
-
: Represents the introductory content or navigational links of a section. -
to : Headings, with
being the highest level and
the lowest.
-
: Inserts a line break (self-closing tag — meaning there is no need to close the tag). - : Used to create an HTML form for user input.
- : Creates an input field, typically used within a form.
- : Creates a dropdown list.
- : Associates a text label with a form element.
-
: Defines a table.
-
: Defines a row in a table. -
: Defines a cell in a table row. -
: Defines a header cell in a table row. -
-
- : Defines a list item.
Creating Your First HTML File
To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:
- Open your text editor and type the following code:
<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> <h1>Example Number 1</h1> <p>Hello, world!</p> </body> </html>
登录后复制- Save the file with a .html extension (e.g., index.html)
- Open the file in your web browser to see your first HTML webpage in action!
- To inspect your code, press Ctrl + Shift + C in Google Chrome to open the Developer Tools and explore the DOM structure.
- Go to the network tab in the Developer Tools and refresh your browser tab.
You can find that there is a request in the name that you have saved as in this picture.
In the response tab, you will find the code that you have written as in the following picture
Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,
, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.
Creating a Table
Let’s take a step further by creating a simple table in HTML:
- Open the same HTML file and add the following code inside the tag:
<p>Table Example</p> <table> <tr> <th>Name</th> <th>Power</th> <th>Is Kurama Present</th> </tr> <tr> <td>Naruto</td> <td>Rasengan</td> <td>Yes</td> </tr> <tr> <td>Sasuke</td> <td>Sharingan</td> <td>No</td> </tr> </table>登录后复制- Save the file and refresh your browser to see the table displayed.
Notice the heading is being rendered by paragraph tag. Alternatively, you can also use
tag, which will center the heading of the table. Experiment with the caption tag and refresh to see the changes. Note that
tag should only be used immediately after the opening tag.
You’ve now successfully created a basic table in HTML. Feel free to experiment with additional rows and columns to get more comfortable with HTML syntax.
Conclusion
Congratulations on completing your first steps into web development with HTML! The key to mastering HTML is practice. Experiment with different elements, create your own webpages, and don’t be afraid to make mistakes — every error is a learning opportunity.
Remember, this is just the beginning. As you continue to build on this foundation, you’ll soon be able to create more complex and dynamic websites. Let’s make the web a better place, one line of code at a time.
本文由 Anantha Krishnan 撰写，他是一位在 IT 和机械工程领域拥有丰富经验的专业人士。拥有全栈开发背景以及对机械和电气系统的热情，Anantha Krishnan 现在专注于创建教育内容，以帮助其专业领域的初学者。
以上是自行开发构建 Web UI：部分了解 HTML的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
如何修复KB5055612无法在Windows 10中安装？4 周前 By DDD<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙4 周前 By 尊渡假赌尊渡假赌尊渡假赌<🎜>：种植花园 - 完整的突变指南3 周前 By DDD北端：融合系统，解释4 周前 By 尊渡假赌尊渡假赌尊渡假赌Mandragora：巫婆树的耳语 - 如何解锁抓钩3 周前 By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
See all articles
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
Python vs. JavaScript：比较用例和应用程序
Apr 21, 2025 am 12:01 AM
Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
