【学习笔记】JavaWeb入门篇—HTML(一)

简介: 【学习笔记】JavaWeb入门篇—HTML(一)

什么是HTML?

HTML的全称为超文本标记语言(Hyper Text Markup Language),是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。


HTML也是一种解释型语言,和Java这种强类型语言不同,HTML这种解释型语言具有容错性。在Java这种强类型语言中如果出现一些语法,编译等bug的话Java程序就不会跑起来,而HTML则不一样,就算一些地方有错误它在跑的时候也不会停止运行,而是直接展现出来。所以一般HTML找bug是十分痛苦的哈哈哈。


我们经常看到的一些网站、网页都是使用HTML写出来。我们就拿csdn网页版举一个例子,通过f12查看csdn的网页源码,我们能看到是由很多的HTML的标签构建而成,最终组成这个csdn网页。

image.png

image.png


HTML的基础结构



通过上图我们能看到一个HTML的基本结构,<!DOCTYPE html>为声明文档,一个HTML文件中由<html>开始由</html>结束,且由页头(<head></head>)和页身(<boby></boby>)组成。<title>则为网页的标题,meta表示设置网页的编码格式。


HTML的基本标签

head标签

什么是head标签?

🌟根据百度百科:head标签是作用于网页的头部,它的内容不会在正文中显示出来。


head内部标签

✨head元素包含了所有的头部标签元素,在head中你可以插入脚本(scripts),样式文件(CSS),及各种meta信息,可以添加到头部区域的元素为。


✨title定义网页的标题(浏览器工具栏标题,搜素引擎结果页面标题,收藏夹标题)。


✨meta 用来定义页面的特殊信息(页面关键字,页面描述) ,描述了一些基本的元数据。


✨link 定义了文档与外部资源之间的关系,通常用来引入外部样式(css文件) 。


✨ style用来定义元素的css样式。


✨script 用来定义页面的JavaScript 代码 也可用来引入文件。


✨base可以用来统一设置当前页面上的超链接的跳转方式 使用了 标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。


boby标签

什么是boby标签?

🌟百度百科:body标签意思是 人为地把页面分了头,身体使html结构更清晰 。


一般后续的讲解都是围绕着boby里面的标签来讲解的。


基本标签详解

网页标题

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>我的第一个标题</title>
  </head>
  <body>
  </body>
</html>


运行示例:

image.png



换行标签br/

HTML中<br/>可以对其进行换行操作。


<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>我的第一个标题</title>
  hello
  <br/>
  world
  </head>
  <body>
  </body>
</html>


运行示例:


image.png

段落标签 p

HTML中<p>表示段落标签。


<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>我的第一个标题</title>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <p>段落4</p>
  </head>
  <body>
  </body>
</html>


运行示例:

image.png



标题标签 h1 - h6

✨HTML中由h1 - h6表示标题。且从大到小。


<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>我的第一个标题</title>
  <h1>标题一</h1>
  <h2>标题二</h2>
  <h3>标题三</h3>
  <h4>标题四</h4>
  <h5>标题五</h5>
  <h6>标题六</h6>
  </head>
  <body>
  </body>
</html>


运行示例:

image.png



输入框 input

语法:


<input type="" name="" id="" value="" />


type用来设置输入框里面的输入的格式。


✨text:表示显示的就是我们输入的文本。


✨password:当我们输入的文本显示都是*和我们一般输入密码是一样的。


例如:


<input type="text" >

image.png



<input type="password" >

image.png



🌟name:一般用来给服务器传输数据。


🌟id:引用css等。


value:是输入框显示的提示内容。

image.png




目录
相关文章
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
61 19
|
1月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
25 0
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
50 13
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
2月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
3月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
3月前
|
移动开发 开发者 HTML5
构建你的首个个人网站:HTML基础入门
【8月更文挑战第29天】在数字化时代,拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤,使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签,页面结构,以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都提供了一条清晰的路径,帮助你开始你的网站开发之旅。
|
5月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
42 3
|
5月前
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
73 1