JavaWeb（1）之HTML

最新推荐文章于 2024-07-07 17:03:48 发布

A.夕阳

最新推荐文章于 2024-07-07 17:03:48 发布

阅读量475

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/qq_43581078/article/details/105280220

版权

本文介绍了HTML的基础知识，包括HTML的定义、作用、语言特征。通过实例展示了如何创建和编写HTML，如字体标签、格式化标签、图片、列表、超链接、表格等基本标签的使用，并探讨了HTML表单的元素及其属性。此外，还提到了HTML文件的扩展名、浏览器解析HTML的过程以及URL编码的重要性。

摘要由CSDN通过智能技术生成

HTML

HTML是什么？有什么作用？

HTML: (Hyper Text Markuplanguage)超文本标记语言。

文本:相当于记事本里写的文字。展示信息

超文本:超越了文本仅仅展示信息的功能范畴。泛指:图片、有样式的文字、点击跳转页面的文字。

语言:工具

标记:标签。

HTML是由标签所组成的语言，能展示超文本效果。

HTML是用来写网页的，是设计页面的基础。

HTML的入门案例

步骤1：创建文件，后缀名改为html或htm。
在这里插入图片描述
步骤2：用记事本打开，并编写文字。

步骤3：用浏览器打开。

这样打开和普通的记事本区别不大，为什么那？
因为想要实现超文本编辑，是需要加标签和属性的。
font：标签
color=“ ”：属性
red：属性值
在这里插入图片描述
这样就将字体变成了红色

关于HTML的语言特征

HTML语言是由头和体组成

这是最标准的HTML格式，以后都要使用这样的格式。

<html>
   <head>
     <title>标题</title>
   </head>
   <body>需要展示给用户看的信息内容</body>
</html>

< html >是HTML页面的开始，就相当于java类大括号。
< head >是页面的头部，存放的都是网页的说明性内容，例如标题。
< body >是页面的身体，需要展示给用户看的信息内容
示例：
在这里插入图片描述
和以前的内容是没什么变化，但是已经有了标题。

HTML文件的扩展名为html或者htm。Htm是老的命名规范，html 的新的。
HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
HTML标签通常由开始标签和结束标签组成。例如:< font >内容体< /font >，开始标签和结束标签之间的内容叫做内容体。
HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如: < br/ > 自关闭。
HTML标签不区分大小写，为了方便阅读，建议使用小写。
HTML标签是有属性的，格式为:属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号，建议使用双引号。
HTML标签建议包裹嵌套，不建议交叉嵌套。
包裹嵌套：
html标签完全包裹了head标签

<html>
	<head>
	</head>
</html>

交叉嵌套：
交叉嵌套是不允许使用的

<html>
	<head>
</html>
	</head>

使用HBuilder编写HTML

安装
 使用

HTML的基本标签

字体标签和格式化标签

字体标签：< font >

字体标签，用于展示效果中修饰文字样式。
< font >属性名=”属性值”>文字< /font >

size:控制字体大小.最小1~最大7。如果设置范围不在1~7之间，设置无效。

color: 控制字体颜色.使用英文设置(例如: red,blue…) 。

face: 控制字体类型。只能设置系统字库中存在的字体类型。
示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>

	<body>
		hello
		<font size="7" color="red" face="楷体">world</font>
	</body>

</html>

运行结果：
在这里插入图片描述

格式化标签

现在有一页代码是李白的静夜思：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		静夜思 
		李白 
		床前明月光, 
		疑是地上霜。 
		举头望明月，
		低头思故乡。
	</body>

</html>

运行结果：
但是在运行时就变成了一整换，并没有段落，怎么办，向下看。
在这里插入图片描述

换行标签：< br/ >

HTML源码中换行，浏览器解析时会自动忽略。

换行标签，用于展示效果中换行。
示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		静夜思<br /> 
		李白 <br /><br />
		床前明月光, 
		疑是地上霜。 
		举头望明月，
		低头思故乡。
	</body>

</html>

运行结果：
一个标签就是一行
在这里插入图片描述

段落标签：< p >

段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行。

align:段落内容的对齐方式。
默认是left，内容居左。
Right居右。
Center居中。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		静夜思<br /> 
		李白 <br /><br />
		床前明月光,
		<p>疑是地上霜。</p>
		<p align="center">举头望明月,</p>
		<p align="right">低头思故乡。</p>
	</body>

</htm