后端码农谈前端(HTML篇)第一课:HTML概述

简介:

一、什么是HTML?

HTML不是编程语言,是用来描述网页文档(页面结构)的一种标记语言;

HTML指超文本标记语言(Hyper Text Markup Language),之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。;

HTML规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器 (IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

二、HTML是什么样的?

简单地来说,HTML的语法就是给文本加上表明文本含义的标签(Tag),让用户(人或程序)能对文本得到更好的理解。

下面是一个最简单的HTML文档:

<html>
  <head>
    <title>第一个Html文档</title>
  </head>
  <body>
    欢迎访问<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>! 
 
  </body>
</html>

所有的HTML文档都应该有一个<html>元素,<html>元素可以包含两个部分:<head>和<body>。

<head>元素用于包含整个文档的一般信息,比如文档的标题(<title>元素用于包含标题),对整个文档的描述,文档的关键字等等。

文档的具体内容就要放在<body>元素里。<a>元素用于表示链接,在浏览器(如IE,Firefox等)中查看HTML文档时,点击<a>标签括起来的内容时, 通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>元素的href属性指定。上面的<a href=http://hanzhaoxin.cnblogs.com/>中,href属性的值就是http://hanzhaoxin.cnblogs.com/。

三、HTML文档可以包含哪些内容 ?

通过不同的标签,HTML文档可以包含不同的内容,比如文本,链接,图片,列表,表格,表单,框架等。 

  • 文本 :HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观,可以说明文本是引用自其它的地方,等等等等。 
  • 链接 :链接用来指出内容与另一个页面或当前页面某个地方有关。 
  • 图片 :图片用于使页面更加美观,或提供更多的信息。 
  • 列表 :列表用于说明一系列条目是彼此相关的。 
  • 表格 :表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。 
  • 表单 :表单通常由文本输入框,按钮,多选框,单选框,下拉列表等组成,使HTML页面更有交互性。 
  • 框架 :框架使页面里能包含其它的页面。 

四、对于HTML我会说哪些概念?

文档:HTML文档俗称网页。

标签:用尖括号包围的关键词我们成为标签。通常HTML标签成对出现,如:<a>、</a>。

  • 开始标签:标签对中的第一个标签是开始标签,也成为开放标签。如<a>。
  • 结束标签:标签对中的第二个标签是结束标签,也成为闭合标签。如</a>。

元素:我们把匹配的标签对以及它们包围的内容称为元素。即(元素 = 开始标签 + 内容 + 结束标签)。如:<a href="http://hanzhaoxin.cnblogs.com/">我的博客</a>。

  • 块级元素:在浏览器默认显示时以新行来开始(和结束)的元素。
  • 内联元素:又称行内元素,在浏览器默认显示时在同一行按从左至右顺序显示,不单独占一行的元素。

属性:开始标签中那些以名称/值对的形式出现的内容,我们称之为属性。如上例中:href="http://hanzhaoxin.cnblogs.com/"。(href是属性名称,"http://hanzhaoxin.cnblogs.com/"是属性值)。

作者: 韩兆新
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
分类:  [07]Web前端

本文转自韩兆新博客博客园博客,原文链接:http://www.cnblogs.com/hanzhaoxin/p/4324436.html,如需转载请自行联系原作者
目录
相关文章
|
10月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
939 1
|
6月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
280 5
|
12月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
619 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
11月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
613 70
|
10月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
544 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
9月前
|
人工智能 监控 前端开发
AI工具:前端与后端的终极对决?谁将成为新时代的宠儿?
深入探讨AI工具对前端和后端开发的具体影响、各自的机遇与挑战,并分析未来开发者如何驾驭AI,实现能力跃迁。
538 0
|
12月前
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
410 2
前端uin后端php社交软件源码,快速构建属于你的交友平台
|
监控 前端开发 Java
构建高效Java后端与前端交互的定时任务调度系统
通过以上步骤,我们构建了一个高效的Java后端与前端交互的定时任务调度系统。该系统使用Spring Boot作为后端框架,Quartz作为任务调度器,并通过前端界面实现用户交互。此系统可以应用于各种需要定时任务调度的业务场景,如数据同步、报告生成和系统监控等。
622 9
|
前端开发 NoSQL Java
【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
本文介绍了如何配置和启动基于Java的若依(RuoYi)项目,涵盖后端和前端的详细步骤。首先,准备Redis、MySQL以及IDE(如Idea和VS)。接着,通过GitHub获取代码并导入到IDE中,执行必要的SQL文件和配置数据库密码。然后,启动Redis并进行相关配置。最后,按照前端配置步骤克隆前端代码库,打开终端执行命令完成前端配置。整个过程详细记录了每一步的操作,帮助开发者顺利部署若依项目。 如果你觉得有帮助,请点赞、关注和收藏,这将是我持续分享的动力!
7218 4
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
1064 4