Web前端技术HTML

article/2025/8/19 5:10:19

HTML(Hyper Text Markup Language)

目录

一、什么是HTML?

二、为什么需要HTML?

三、HTML标签

四、HTML文档结构

五、HTML标签属性

1、标签的语法

2、注意事项

3、常用标签


一、什么是HTML?

HTML指的是超文本标记语言Hyper Text Markup Language),是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过文本文件中添加标记符,可以告诉浏览器如何显示其中的内容。

二、为什么需要HTML?

网页的本质是将远程服务器上的文件内容显示到当前主机上。

为了将内容按照我们定义的语义进行处理,所以就需要通过HTML将文本内容进行标记,而标记后的内容将按照规定的语义进行处理。

三、HTML标签

HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的语义,所以HTML部分是整个前端的基础。

HTML标记标签通常被称为HTML标签(HTML tag)

1、HTML标签都是有英文的尖括号(即‘<’和‘>’)包围的关键词,eg:<html>、<body>

2、HTML标签通常情况下是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个‘/’,开始标签和结束标签之间的就是标签的内容。

3、有的标签功能比较简单,使用一个标签即可,这种标签叫做自闭合标签。eg:<br/>、<img/>

四、HTML文档结构

1、<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档(HTML5是HTML的第五个版本) 

2、<html></html>称为根标签,所有的网页标签都在<html></html>中

3、<head></head>标签用于定义文档的头部,它是在所有头部元素的容器

4、在<body>和</body>标签之间的内容是网页的主要内容,最终会在浏览器中显示出来

例子解释

1、<html> 与 </html> 之间的文本描述网页

2、<body> 与 </body> 之间的文本是可见的页面内容

五、HTML标签属性

1、标签的语法

<标签名 属性1="值" 属性2="值" ......>内容部分</标签名>

<标签名 属性1="值" 属性2="值" ....../>(自闭合标签)

eg:<a href='http://www.baidu.com'>百度</a>

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么必须使用单引号。

eg:name='Bill "HelloWorld" Gates'

2、注意事项

1)标签是不会显示出来的

2)HTML标签不区分大小写,但通常使用小写

3)标签只是用来做语义标识而不负责控制样式,样式由css来控制

4)HTML中有部分标签是可以嵌套的,如:<div><p>段落</p></div>,但不能交叉。

5)注释<!--这是注释内容-->

3、常用标签

1)<html>、<body>、<head>

2)<title>网页标题

3)<p>段落

4)<a>超链接

5)<input>表单元素的标签

6)<br/>换行符

7)<div>容器标签

8)<img>图片


http://chatgpt.dhexx.cn/article/LgG34u9S.shtml

相关文章

前端技术概述

目录 一、开发框架 1、C/S架构&#xff08;Client-Server&#xff09; 2、B/S架构&#xff08;Browser-Server&#xff09; 二、前端术语 1、渲染 2、Front-end&#xff08;前端开发&#xff09; 3、Back-end&#xff08;后端开发&#xff09; 三、HTML的DOM结构 四、…

如何写前端技术方案文档?

大厂技术 高级前端 Node进阶 点击上方 程序员成长指北&#xff0c;关注公众号 回复1&#xff0c;加入高级Node交流群 前言 百度百科对计算机软件的的定义为&#xff1a;“计算机软件( Software&#xff0c;也称软件)是指计算机系统中的程序及其文档&#xff0c;程序是计算任务…

前端技术体系与发展计划

为什么会想起来整理这么一套东西 最近和很多已经工作了的同学聊天&#xff0c;发现大家都遇到了很多的问题或者说是烦恼。整理了一下&#xff0c;大体可以分为两个大的种类&#xff1a; 关于前端技术体系的问题关于技术能力发展的问题 从这些问题中&#xff0c;我抽出来几个…

前端技术发展历程

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 随着互联网的不断发展…

前端技术简介

声明&#xff1a;本文转载自http://www.lvyestudy.com/les_hj/hj_1.1.aspx&#xff0c;如需要了解更多关于前端的知识&#xff0c;请查看该链接 在HTML入门教程学习之前&#xff0c;我们有必要跟大家讲一下网站开发的一些知识。了解这些知识&#xff0c;对你以后网站开发之路如…

2020 年前端技术发展盘点

2020 年已经结束&#xff0c;这一年里面因为疫情&#xff0c;生活和工作中大家都有受到一定的影响。但是在 2020 年里面前端技术的发展依然没有停止脚步。 而我们作为前端开发者&#xff0c;必定需要对技术的更新换代有所了解。虽然我们不需要去学习所有新出来的技术。但是时刻…

前端技术(html)

目录 一、HTML 1. 概念 2. 快速入门 3. 开发工具 HBuilder 3.1 HBuilder介绍 3.2 HBuilder下载 3.3 HBuilder的安装与使用 3.4 使用HBuilder创建项目 4. HTML文档的基本结构 4.1 基本结构 4.2 HTML注释 5. HTML中常用标签 5.1.文本标签 5.2 图片标签 5.3列表标签 5.4…

【狂神说Java】Vue学习笔记01:前端知识体系

本文根据B站【狂神说Java】vue系列视频整理&#xff0c;如需观看视频&#xff0c;请点击链接跳转 【狂神说Java】Vue视频 2、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走&#xff0c;其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带…

SUMO安装及环境变量设置

sumo安装 1.打开sumo官网&#xff0c;进入下载界面 2.解压安装包 3.打开bin文件&#xff0c;创建sumo-gui和netedit快捷方式 SUMO环境变量配置 1.右击我的电脑&#xff0c;点击属性 2.点击高级系统设置&#xff0c;环境变量 3.在用户变量的path&#xff0c;加入以下变量 4.…

Python pip保姆级环境变量设置

1.打开系统中的高级系统设置 2.点击环境变量 3.在系统变量区域&#xff0c;选中path&#xff0c;点击编辑进入编辑页面。 4.将python Scripts文件夹所在位置复制粘贴到变量值中&#xff0c;注意名称之间有分号。 5.winr cmd回车&#xff0c;输入pip出现以下页面说明设置成功。…

MySQL数据库环境变量设置

1、鼠标左键&#xff0c;点击设置 2、出现一个框&#xff0c;在框里&#xff0c;填写&#xff0c;高级系统设置&#xff0c;确定 3、打开了高级系统设置&#xff0c;点击红圈圈着的“环境变量” 4、出现一个新的小弹框&#xff0c;点击path&#xff0c;&#xff08;路径的意思&…

Mac设置环境变量

环境变量是电脑操作系统中常用的一些变量&#xff0c;作用类似于将一些常用命令所在的文件夹位置预先告诉操作系统&#xff0c;当以后需要用到这些命令时&#xff0c;操作系统就自动来这些位置取。 例如&#xff0c;常见的Java开发中配置的相关环境变量&#xff1a;PATH&#…

python环境变量设置(win10为例)

C站发表的第一个文章啊&#xff0c;话就不多说了。 &#xff08;PS&#xff1a;我也是小白&#xff0c;注册C站第一天&#xff0c;冒个泡&#xff09; win10教程&#xff08;只有win10电脑&#xff09; 先放一张我自己总结的教程 &#xff08;PS&#xff1a;应该够清楚了&a…

npm环境变量设置

使用npm命令提示: npm 不是内部或外部命令&#xff0c;也不是可运行的程序 在安装nodejs时候&#xff0c;有时候我们会把它安装在d盘或别的盘时&#xff0c;经常会遇到npm环境变量没有配好&#xff0c;需要自己手动去配置。 在安装完nodejs后输入node --version查看安装是否成功…

Centos7环境变量设置

Centos7环境变量设置 最近&#xff0c;我从cnaaa.com上购买了云服务器&#xff0c;开通了centos系统。 1、环境变量的含义 程序&#xff08;操作系统命令和应用程序&#xff09;的执行都需要运行环境&#xff0c;这个环境是由多个环境变量组成的。 2、环境变量的分类 1&am…

Pycharm的环境变量设置

Pycharm的环境变量设置 最开始是由于在系统终端上安装mujoco_py遇到了需要添加环境变量的问题&#xff0c;在添加完系统环境变量后&#xff0c;在终端可以使用mujoco_py&#xff0c;而在手动打开的Pycharm窗口中却仍需配置环境变量&#xff0c;查阅资料后发现有如下两种方法解…

ug更改java的环境变量_UG中的语言环境变量设置

原标题&#xff1a;UG中的语言环境变量设置 今天与大家分享怎样更改UG中的语言环境变量&#xff0c;语言的更改经常要用&#xff0c;特别是在英语和中文之间切换。 在Windows的操作系统中&#xff0c;UG软件的工作路径是由系统注册表和环境变量来设置的。安装UG后&#xff0c;会…

【环境变量设置】Windows环境变量设置

啊没错是写anaconda的时候顺便着写的2333 以win10系统为例&#xff0c;打开“此电脑”的属性。 在属性中&#xff0c;下拉找到“高级系统设置”。 选择环境变量 找到系统变量中的Path&#xff0c;双击打开即可修改了。

配置 Windows 环境变量的方法

配置 Windows 环境变量的方法 笔者的环境&#xff1a; Windows 10 教育版 配置 Windows 中的环境变量是为了某些命令在 CMD 中可以被识别以及用于多应用之间的交互。 配置 Windows 环境变量的具体操作流程如图&#xff08;请顺着图片用鼠标点击画红圈部分&#xff09;&#xf…