Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性

简介: Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性

一、什么是HTML?


HTML语言,即超文本标记语言,是来制作网页页面的语言,对网页的内容进行编写,决定了网页的结构,可以通过编写HTML并打开浏览器进行解析,另外在敲代码时不区分大小写。


二、标签


(一)标签、元素的定义


我们把HTML标记的文字或者图片称为标签,它是由尖括号"<>"包围标签的名称而成的,即尖括号之间是标签的名称。

标签分为开始标签和结束标签,它们是成对出现的,开始标签和结束标签之间是内容,标签和内容一起就叫做元素,我们称其为HTML的一个元素。

1667053022038.jpg

比如上面这个元素的开始标签名称为title,结束标签为/title,其内容是教学管理信息服务平台。


(二)标签的嵌套


标签可以嵌套,但要注意外层标签要完全包含内层标签这样才是正确的标签嵌套关系。比如< A >< B >< /B >< /A >中,标签A中就完全嵌套了标签B;下图的< header >和< /header >也是嵌套了其它的标签:

1667053033133.jpg


(三)标签的属性


除了给标签加上标签名称外,还可以给标签加上相应的属性,在标签的名称后面跟属性名称,通过赋值符号"=",来对属性进行赋值。

属性可以有多个,多个属性之间用空格隔开区分,且多个属性的先后顺序是没有关系的,不影响结果。

1667053042744.jpg

例如上图的< input type=“hidden” id=“sessionUserKey” value=“193001060112” >中,其标签名为input,它有三个属性,分别为属性1:type、属性2:id、属性3:value,同时其双引号中代表其不同属性对应的不同值1、值2、值3。


(四)父元素、子元素、兄弟元素


父元素、子元素、兄弟元素很容易理解,我们通过以下html语言来讲解,如下:

<html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>

这里的< head > < /head >和< body > < /body >都在< html >< /html >之间并同级存在,称为兄弟元素,且它们都是子元素被父元素即最外层的< html >< /html >包围。


三、HTML DOM树


<html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>


HTML可以用文档对象模型(DOM)来描述,可以将其转换成下图的一个模型:

1667053101267.jpg

相关文章
|
8天前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
62 25
|
26天前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
55 6
|
前端开发 程序员 Android开发
好程序员web前端培训分享HTML元素强制不换行
好程序员web前端培训分享HTML元素强制不换行,HTML 中 nowrap是用来强制不换行的   在排版中   对包裹plain text的标签使用nowrap属性即刻实现强制不换行.   如:   强制不换行   强制不换行   在使用div的超文本中   把div,h1,section,na...
1303 0
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
213 3
|
1月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
2月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
232 45
|
2月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
44 7
|
2月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
53 2