什么是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网页。
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>
运行示例:
换行标签br/
HTML中<br/>可以对其进行换行操作。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的第一个标题</title> hello <br/> world </head> <body> </body> </html>
运行示例:
段落标签 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>
运行示例:
标题标签 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>
运行示例:
输入框 input
语法:
<input type="" name="" id="" value="" />
type用来设置输入框里面的输入的格式。
✨text:表示显示的就是我们输入的文本。
✨password:当我们输入的文本显示都是*和我们一般输入密码是一样的。
例如:
<input type="text" >
<input type="password" >
🌟name:一般用来给服务器传输数据。
🌟id:引用css等。
value:是输入框显示的提示内容。