【学习笔记】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




相关文章
|
4月前
|
前端开发 容器
javaweb实训第一天上午——HTML和CSS(3)
类选择器 所有的标签都有一个class属性 我们为这个class设定一个值,然后再写选择器来匹配这一个值、
41 0
|
17天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
19 0
webgl学习笔记3_javascript的HTML DOM
|
3月前
|
Web App开发
某教程学习笔记(一):04、HTML基础
某教程学习笔记(一):04、HTML基础
14 0
|
8月前
|
前端开发 编译器 Linux
JavaWeb第二章:HTML和CSS的知识制作静态网页
JavaWeb第二章:HTML和CSS的知识制作静态网页
68 0
|
4月前
|
XML 前端开发 JavaScript
javaweb实训第一天上午——HTML和CSS(2)
4.7 列表标签 列表标签分为有序列表与无序列表: 4.7.1无序列表 代码格式
238 0
|
4月前
|
Web App开发 开发框架 前端开发
javaweb实训第一天上午——HTML和CSS(1)
1.课程介绍 1.Html认识; 2.Html简单使用; 3.Html常用标签; 4.Css认识 5.Css使用
71 0
|
5月前
|
前端开发 BI 开发者
Javaweb之HTML,CSS的详细解析
新浪新闻-正文实现 2.3.2.1 正文排版 2.3.2.1.1 分析 整个正文部分的排版,主要分为这么四个部分: 1). 视频 (当前这种新闻页面,可能也会存在音频)
49 0
|
5月前
【JavaWeb学习】—手托html页面和在浏览器中输入地址访问的背后不同原因(十一)
【JavaWeb学习】—手托html页面和在浏览器中输入地址访问的背后不同原因(十一)
|
8月前
|
前端开发 JavaScript 算法
网络结构与HTML学习笔记
网络结构与HTML学习笔记
154 0
网络结构与HTML学习笔记
|
8月前
HTML学习笔记(二)
HTML学习笔记(二)
29 0