Java Web——前端HTML入门

目录

HTML&CSS3&JavaScript简述

1. HTML概念

2. 超文本

3. 标记语言

4. HTML基础结构

5. HTML基础词汇

6. HTML语法规则

7. VS Code 推荐使用的插件

8. 在线帮助文档


HTML&CSS3&JavaScript简述

HTML 主要用于网页主体结构的搭建,像一个毛坯房

CSS 主要用于页面元素美化,对毛坯房进行精装修


JavaScript 主要用于页面元素的动态处理,在房屋中添加各种智能设备和系统,响应用户的点击事件,或者在用户滚动页面时显示或隐藏某些元素,这些都需要 JavaScript 来实现。


1. HTML概念

HTML5是HTML的最新版本,它在2008年发布,结合了HTML4.01的相关标准并进行了更新和改进,以适应现代网络的需求。HTML5包含了许多不同的技术,这些技术在互联网上得到了广泛应用,并且提供了更好的网络应用功能。与旧的技术相比,HTML5的语法更加清晰,并且它还可以支持SVG内容,使得处理网页中的多媒体内容更加容易。此外,HTML5还引入了一些新元素,对原有的一些功能进行了改进和标准化。最终在2014年,W3C发布了HTML5的最终版本。


2. 超文本

HTML文件本质上是文本文件,而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式,这就是超文本的含义——本身是文本,但是呈现出来的最终效果超越了文本。


3. 标记语言

HTML是一种标记语言,不是编程语言。它没有编程语言的复杂功能,只是通过简单的标签来定义网页的结构和内容,每个标签都有固定的含义和显示效果。HTML很简单,每个标签都有它固定的含义和确定的页面显示效果。

  • 双标签: 标签是通过一组尖括号+标签名的方式来定义的
<p>Hello world</p>

这个例子中使用了一个p标签来定义一个段落,<p>叫开始标签,</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体,也简称:标签体

  • 单标签
<input type="text" name="username" />

  • 属性
<a href="http://www.xxx.com">show detail</a>

href="网址" 就是属性,href是属性名,"网址"是属性值


4. HTML基础结构

<!DOCTYPE html>  
<html>  
<head>  <title>我的第一个网页</title>  
</head>  
<body>  <!--一个简单的示例代码--> <h1>欢迎来到我的网页</h1>  <p>这是一个段落。</p>  
</body>  
</html>

  1. 文档声明:<!DOCTYPE html> 是HTML5的文档声明,它告诉浏览器这个文档使用的是HTML5的标准。
  2. 根标签:<html> 和 </html> 是HTML文档的根标签,其他所有标签都需要位于这对标签之间。
  3. 头部元素:<head> 和 </head> 标签定义了文档的头部。在头部中,我们使用了 <title> 标签来设置网页的标题。这个标题会显示在浏览器的标签页上。头部还可以包含其他元素,如样式链接、脚本链接等。
  4. 主体元素:<body> 和 </body> 标签定义了网页的主体内容。这部分内容会在浏览器窗口中显示出来。在示例中,主体包含了一个一级标题 <h1> 和一个段落 <p>。
  5. 注释:在HTML代码中,可以使用 <!-- --> 来添加注释。注释的内容不会在浏览器中显示,用于添加一些说明或备注。

这个简单的示例展示了HTML文档的基本结构,包括文档声明、根标签、头部元素、主体元素和注释。通过学习和使用更多的HTML标签和属性,你可以创建更丰富和复杂的网页内容。


5. HTML基础词汇

标签(Tag)

  • 在HTML中,标签是用于标识和定义网页元素的关键词。标签通常成对出现,由一个开始标签和一个结束标签组成,结束标签前有一个斜杠(/)。例如,<p> 是段落标签的开始标签,</p> 是段落标签的结束标签。这样的标签称为双标签。
  • 有些标签单独出现,不需要结束标签,称为单标签。例如,<br> 是一个换行标签,它单独出现,表示在文本中换行。

属性(Attribute)

  • 属性是HTML标签的一部分,用于提供更多关于标签的信息。它们通常出现在开始标签中。
  • 属性用于定义标签的一些特征或设置,例如颜色、大小、链接目标等。它们由属性名和属性值组成,中间用等号连接。例如,在<a href="https://www.example.com">中,href是一个属性名,它指定了链接的目标地址。

文本(Text)

  • 在HTML中,文本是指双标签中间的内容,它可以是文字、空格、换行等任何可见的内容。
  • 文本是网页上实际显示给用户的内容,可以包含各种文本元素和文本格式。通过在文本周围使用不同的HTML标签,我们可以控制文本的样式、布局和其他视觉效果。

元素(Element)

  • 元素是经过浏览器解析后,由标签、属性和文本组成的完整结构。它是HTML页面的构建块。
  • 一个元素可以包含其他元素,形成一个层次结构。例如,一个<div>元素可以包含一个<p>元素和一些文本,形成一个块级元素,其中包含一段文本。

这些概念是HTML的基础,理解它们对于学习和应用HTML非常重要。通过合理地使用各种HTML标签、属性和文本内容,我们可以创建出结构清晰、样式美观的网页。


6. HTML语法规则

1. 根标签有且只能有一个

  • HTML文档只能有一个根标签,即<html>,它包裹着整个HTML文档的内容。其他所有标签都应位于根标签之内。

2. 无论是双标签还是单标签都需要正确关闭

  • 双标签需要正确闭合,即在结束位置使用相应的结束标签。例如,<p>标签需要使用</p>来闭合。
  • 单标签则不需要结束标签,但它们在闭合时可能包含斜杠。例如,<br/>标签用于换行。

3. 标签可以嵌套但不能交叉嵌套

  • 在HTML中,标签可以嵌套在其他标签中,以形成层次结构。但是不允许交叉嵌套,即一个标签不能完全包含在另一个标签的中间部分。

以下是一个不符合规则的交叉嵌套例子:

<b><i>这是错误的交叉嵌套</b></i>

正确的嵌套方式应该是:

<b><i>这是正确的嵌套</i></b>

4. 注释语法为 ,注意不能嵌套

  • HTML中的注释使用<!---->包围,注意在这之间不能再次嵌套注释。

5. 属性必须有值,值必须加引号,H5中属性名和值相同时可以省略属性值

  • HTML标签的属性必须指定一个值,并且这个值必须用引号包围。但在HTML5中,当属性名和值相同时,可以省略属性值。例如,<input type="text" disabled="disabled">可以简写为<input type="text" disabled>

6. HTML中不严格区分字符串使用单双引号

  • 在HTML中,可以使用单引号或双引号来包围属性的值,两者的效果是相同的。例如,<a href="example.com"><a href='example.com'>是等价的。

7. HTML标签不严格区分大小写,但是不能大小写混用

  • HTML标签不区分大小写,<p><P>是等效的。但是在同一个文档中,不能大小写混用,否则会出现错误。

8. HTML中不允许自定义标签名,强行自定义则无效

  • 在HTML中,不能使用自定义的标签名。所有标签都应使用HTML标准中定义的标签名。如果使用了自定义的标签名,浏览器将不会识别它,并且将其视为无效内容。

7. VS Code 推荐使用的插件

  • Auto Rename Tag 自动修改标签对插件
  • Chinese Language Pack 汉化包
  • HTML CSS Support HTML CSS 支持
  • Intellij IDEA Keybindings IDEA快捷键支持
  • Live Server 实时加载功能的小型服务器
  • open in browser 通过浏览器打开当前文件的插件
  • Prettier-Code formatter 代码美化格式化插件
  • Vetur VScode中的Vue工具插件
  • vscode-icons 文件显示图标插件
  • Vue 3 snipptes 生成VUE模板插件
  • Vue language Features Vue3语言特征插件

8. 在线帮助文档

提供丰富的编程和前端开发教程的一个好用的教程网址

w3school 在线教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/189618.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

低价寄快递寄件微信小程序 实际商用版 寄快递 低价寄快递小程序(源代码+截图)前后台源码

盈利模式 快递代下CPS就是用户通过线上的渠道&#xff08;快递小程序&#xff09;&#xff0c;线上下单寄快递来赚取差价&#xff0c;例如你的成本价是5元&#xff0c;你在后台比例设置里面设置 首重利润是1元&#xff0c;续重0.5元&#xff0c;用户下1kg的单页面显示的就是6元…

Go 14岁了

今天我们庆祝Go开源十四周年&#xff01;Go度过了美好的一年&#xff0c;发布了两个功能齐全的版本和其他重要的里程碑。 我们在2月份发布了Go 1.20&#xff0c;在8月份发布了Go 1.21&#xff0c;更多地关注实现改进而不是新的语言更改。 在Go 1.20中&#xff0c;我们预览了配置…

【论文精读】DMVSNet

今天读的是一篇发表在ICCV 2023上的文章&#xff0c;作者来自华中科技大学。 文章地址&#xff1a;点击前往 项目地址&#xff1a;Github 文章目录 Abstract1 Introduction2 Relative Work3 Motivation3.1 Estimated bias and interpolated bias3.2 One-sided V.S. Saddle-shap…

Android修行手册-POI操作Excel实现超链接并且变为蓝色

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…

黑洞路由的几种应用场景

第一种在内网中产生环路&#xff1a; 这种核心交换机上肯定写一条默认路由 0.0.0.0 0 10.0.0.1 出口路由要写一条192.168.0.0 16 10.0.0.2 如果出口路由访问一条不存在的内网网段&#xff0c;又或者访问的那台终端停机了&#xff0c;那就会产生三层环路&#xff0c;数据包在…

如何导出PPT画的图为高清图片?插入到world后不压缩图像的设置方法?

期刊投稿的时候&#xff0c;需要图片保持一定的清晰度数&#xff0c;那么我们怎么才能从PPT中导出符合要求的图片呢&#xff1f; 对于矢量图绘图软件所画的图&#xff0c;直接导出即可。 而PPT导出的图片清晰度在60pi&#xff0c;就很模糊。 整体思路&#xff1a; PPT绘图——…

初识-Servlet (第一个 Servlet 程序详解)

Servlet 是什么? Servlet 是一种实现动态页面的技术. 是一组 Tomcat 提供给程序员的 API, 帮助程序员简单高效的开发一个 web app. 静态页面就只是单纯的 html 动态页面则是 html 数据 第一个 Servlet 程序 我们写一个 hello world 预期写一个 Servlet 程序, 部署到 Tomca…

基于SpringBoot+Vue的在线学习平台系统

基于SpringBootVue的在线学习平台系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 用户界面 登录界面 管理员界面 摘要 本文设计并实现了一套基于Spri…

计算机毕业设计选题推荐-校园交流平台微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

什么是代理IP池?如何判断IP池优劣?

代理池充当多个代理服务器的存储库&#xff0c;提供在线安全和匿名层。代理池允许用户抓取数据、访问受限制的内容以及执行其他在线任务&#xff0c;而无需担心被检测或阻止的风险。代理池为各种在线活动&#xff08;例如网页抓取、安全浏览等&#xff09;提高后勤保障。 读完…

ubuntu下tensorrt环境配置

文章目录 一、Ubuntu18.04环境配置1.1 安装工具链和opencv1.2 安装Nvidia相关库1.2.1 安装Nvidia显卡驱动1.2.2 安装 cuda11.31.2.3 安装 cudnn8.21.2.4 下载 tensorrt8.4.2.4 二、编写CMakeLists.txt三、TensorRT系列教程 一、Ubuntu18.04环境配置 教程同样适用与ubuntu22.04…

2023.11.13 hive数据仓库之分区表与分桶表操作,与复杂类型的运用

目录 0.hadoop hive的文档 1.一级分区表 2.一级分区表练习2 3.创建多级分区表 4.分区表操作 5.分桶表 6. 分桶表进行排序 7.分桶的原理 8.hive的复杂类型 9.array类型: 又叫数组类型,存储同类型的单数据的集合 10.struct类型: 又叫结构类型,可以存储不同类型单数据的集合…

按键编程 pal库和标准库

按钮的电路设计 电路的搭建 原理与编程 创建了两个变量 用来捕捉按键的状态 先让两个变量都为1 previous和current都为1 &#xff08;按键没按下&#xff09; 然后让current去捕捉按键的状态通过读gpioA的pin0 如果为0就是按键按下 如果为1就是按键没按下 然后赋值给current …

asp.net core weapi 结合identity完成登录/注册/角色/权限分配

1.安装所需要的nuget包 <PackageReference Include"Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version"6.0.24" /><PackageReference Include"Microsoft.EntityFrameworkCore" Version"6.0.24" /><PackageR…

layui 表格(table)合计 取整数

第一步 开启合计行 是否开启合计行区域 table.render({elem: #myTable, url: ../baidui/, page: true, cellMinWidth: 100,totalRow:true,cols: [[ //表头//{ type: checkbox },{ type: checkbox,totalRowText: "合计" },//合计行区域{ field: id, align: center,…

改进YOLO系列 | YOLOv5/v7 引入Super Token Sampling ViT | 《CVPR 2023 最新论文》

论文地址:https://arxiv.org/abs/2211.11167 代码地址:https://github.com/hhb072/STViT 视觉变换器已经在许多视觉任务中取得了令人印象深刻的性能。然而,它在捕捉浅层的局部特征时可能会受到高度冗余的影响。因此,引入了局部自注意力或早期卷积,这些方法牺牲了捕捉长距…

js案例:打地鼠游戏(打灰太狼)

效果预览图 游戏规则 当灰太狼出现的时候鼠标左键点击灰太狼加10分&#xff0c;小灰灰出现的时候鼠标左键点小灰灰击减10分&#xff0c;不点击不减分不加分。 整体思路 1.把获取背景图片中每个地洞的位置&#xff0c;把所有位置放到一个数组中。 2.封装随机数函数&#xff0c;随…

CnosDB 在最近新发布的 2.4.0 版本中增加对时空函数的支持。

CnosDB 在最近新发布的 2.4.0 版本中增加对时空函数的支持。 概述 时空函数是一种用于描述时空结构和演化的函数。它在物理学、数学和计算机科学等领域中都有广泛的应用。时空函数可以描述物体在时空中的位置、速度、加速度以及其他相关属性。 用法 CnosDB 将使用一种全新的…

【ATTCK】MITRE Caldera - 测试数据泄露技巧

CALDERA是一个由python语言编写的红蓝对抗工具&#xff08;攻击模拟工具&#xff09;。它是MITRE公司发起的一个研究项目&#xff0c;该工具的攻击流程是建立在ATT&CK攻击行为模型和知识库之上的&#xff0c;能够较真实地APT攻击行为模式。 通过CALDERA工具&#xff0c;安全…

几种解决mfc140.dll文件缺失的方法,电脑提示mfc140.dll怎么办

电脑提示mfc140.dll缺失&#xff0c;如果你不去处理的话&#xff0c;那么你的程序游戏什么都是启动不了的&#xff0c;如果你想知道有什么方法可以解决那么可以参考这篇文章进行解决&#xff0c;今天给大家几种解决mfc140.dll文件缺失的方法。电脑提示mfc140.dll也不用担心解决…