首页 > 其他分享 >什么是 HTML?前端入门基础教程,带您全面认识HTML

什么是 HTML?前端入门基础教程,带您全面认识HTML

时间:2022-09-21 16:02:49浏览次数:76  
标签:Web 入门 标签 元素 HTML 文档 基础教程 属性

HTML 或超文本标记语言 允许 Web 用户使用元素、标签和属性创建和构造部分、段落和链接。然而,值得注意的是,HTML 不被视为一种编程语言,因为它不能创建动态功能。

 

 

HTML有很多用例,即:

 

 

  1. 网页开发。开发人员使用 HTML 代码来设计浏览器如何显示网页元素,例如文本、超链接和媒体文件。

  2. 互联网导航。由于 HTML 被大量用于嵌入超链接,因此用户可以轻松地在相关页面和网站之间导航和插入链接。

  3. 网络文档。HTML 使组织和格式化文档成为可能,类似于 Microsoft Word。

    还值得注意的是,HTML 现在被视为官方 Web 标准。万维网联盟 (W3C)维护和开发 HTML 规范,同时提供定期更新。

 

 

本文将介绍 HTML 的基础知识,包括它的工作原理、优缺点以及它与 CSS 和 JavaScript 的关系。

 

 

什么是 HTML?

 

 

HTML(代表超文本标记语言)是构成大多数网页和在线应用程序的计算机语言。超文本是用于引用其他文本片段的文本,而标记语言是告诉 Web 服务器文档的样式和结构的一系列标记。

 

 

HTML 是如何工作的

 

 

html文件

 

 

平均网站包含几个不同的 HTML 页面。例如,主页、关于页面和联系页面都将具有单独的 HTML 文件。

 

 

HTML 文档是以 .html 或 .htm 扩展名结尾的文件。Web 浏览器读取 HTML 文件并呈现其内容,以便互联网用户可以查看它。

 

 

html元素的三个部分

 

 

所有 HTML 页面都有一系列 HTML 元素,由一组标签和属性组成。HTML 元素是网页的构建块。标签告诉 Web 浏览器元素在哪里开始和结束,而属性描述元素的特征。

 

 

元素的三个主要部分是:

 

 

  • 开始标签 - 用于说明元素开始生效的位置。标签用左尖括号和右尖括号包裹。例如,使用开始标签 <p> 创建一个段落。

  • 内容——这是其他用户看到的输出。

  • 结束标签 - 与开始标签相同,但在元素名称前有一个正斜杠。例如,</p> 结束一个段落。

 

 

这三个部分的组合将创建一个 HTML 元素:

 

 

<p>这是在HTML中添加段落的方法。</p>

 

 

HTML 元素的另一个关键部分是它的属性,它有两个部分——名称和属性值。名称标识用户想要添加的附加信息,而属性值给出进一步的说明。

 

 

例如,添加紫色和 font-family verdana 的样式元素将如下所示:

 

 

< p style= "color:purple;font-family:verdana" >这是在HTML中添加段落的方法。< /p >

 

 

另一个属性,HTML 类,对于开发和编程来说是最重要的。class 属性添加了可以作用于具有相同类值的不同元素的样式信息。 例如,我们将对标题 <h1> 和段落 <p> 使用相同的样式。样式包括背景颜色、文本颜色、边框、边距和填充,在 .important 类下。要在 <h1> 和 <p> 之间实现相同的样式,请在每个开始标记后添加 class=”important”:

 

 

<html>
<head>
<style>
.important {
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

 

 

大多数元素都有一个开始标签和一个结束标签,但有些元素不需要结束标签即可工作,例如空元素。这些元素不使用结束标签,因为它们没有内容:

 

 

< img src= "/" alt= "图像" >

 

 

这个图像标签有两个属性——一个src属性,图像路径,和一个alt属性,描述性文本。但是,它没有内容,也没有结束标签。

 

 

最后,每个 HTML 文档都必须以 <!DOCTYPE> 声明开头,以告知 Web 浏览器文档类型。使用 HTML5,doctype HTML public 声明将是:

 

 

< !DOCTYPE html >

 

 

最常用的 HTML 标签和 HTML 元素

 

 

目前,有 142 个 HTML 标签可用于创建各种元素。尽管现代浏览器不再支持其中一些标签,但学习所有可用的不同元素仍然是有益的。

 

 

本节将讨论最常用的 HTML 标签和两个主要元素——块级元素和内联元素。

标签:Web,入门,标签,元素,HTML,文档,基础教程,属性
From: https://www.cnblogs.com/fy123abcd/p/16715891.html

相关文章

  • HTML语义化标签 有哪些?
    html每个标签都有自己的含义,语义化是指使用语义恰当的标签,是页面结构更清晰,页面元素有含义,让人容易理解常见的有:header:定义页面的展示区域,通常包含logo,导航,搜索......
  • java去掉html标签,只留文本内容
    publicstaticStringdelHTMLTag(StringhtmlStr){StringregEx_script="<script[^>]*?>[\\s\\S]*?<\\/script>";//定义script的正则表达式StringregE......
  • [踩坑回顾]html不使用浏览器缓存
    开发过程中遇到版本发布之后需要修改页面静态资源的问题,但由于初版没有设置不使用浏览器缓存,只好更换了页面地址。建议以后开发都在<head>中加上:<metahttp-equiv="......
  • 2022 年 5 个用于 Web 开发的最佳 HTML 和 CSS 课程
    2022年5个用于Web开发的最佳HTML和CSS课程互联网已成为我们日常生活的重要组成部分,不断发展以连接全球越来越多的人。但是要了解现代网络的运作方式,您不仅需......
  • html篇
    BS架构和http协议bs架构的服务端和客户端来模拟http请求服务端.py#-*-encoding:utf-8-*-#@time:2022/9/1611:20#@author:Maxs_huimportsockets=socke......
  • PyQt完整入门教程
    PyQt完整入门教程https://blog.csdn.net/baidu_37503452?spm=1000.2115.3001.53431、GUI开发框架简介19年来,一直在做AndroidROM相关测试,也有了一定的积累;20年......
  • dotnet OpenXML 解析 PPT 图表 面积图入门
    本文告诉大家如何使用OpenXML解析PPT的图表,以面积图为入门例子告诉大家OpenXML的存储在PPT里面,有强大的图表功能,可以联动Excel展示数据。在PPT里面的图表和E......
  • Linux入门
    一、Linux介绍1、Linux的优点,优势一切都是一个文件,连配置文件都储存在文本中,方便增删改查系统中拥有小型,单一用途的程序当遇到复杂任务,通过不同功能用途的程序组合起......
  • JAVA入门基础_从零开始的培训_Redis
    目录Redis能够为我们解决什么问题Redis的下载与安装前台启动(不推荐)与后台启动常用五大数据类型Redis键常用命令(key)4个数据库操作命令String字符串命令String的内存结构Li......
  • Salesforce推出多项人才入门培养计划,可免费申请!
     在过去十年中,Salesforce一直专注于为其生态系统培养熟练的人才。秉持着这一初衷,Salesforce于2014年推出了Trailhead学习平台,现已达到2000多万枚徽章,Trailhead也由学习S......