javaweb（1）html

最新推荐文章于 2022-12-31 17:17:52 发布

[(-o-)]

最新推荐文章于 2022-12-31 17:17:52 发布

阅读量210

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/lijin786/article/details/105979555

版权

javaweb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML

什么是HTML？

HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。
超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”和存在媒体文件（也就是超越了普通文本文件）

HTML的发展历史(版本变迁)

HTML 的前身是 SGML 语言，SGML 的前身是 GML 语言。GML（Generalized Markup Language：通用标签语言）是一种 IBM 格式化文档语言，用于就其组织结构、各部件及其之间的关系进行文档描述。GML 将这些描述标记为章节、重要小节和次重要小节（通过标题的级来区分）、段落、列表、表等。GML 是 SGML（StandardGeneralized Markup Language，标准通用标记语言）的先驱和基础，SGML 是当今创建结构化文档描述语言规则的战略集合。
HTML于1990年出现，web之父 Tim Berners-Lee 发布了《HTML标签》的论文，借用SGML的标记语法。
IETF（互联网工程任务组）推出HTML2.0，并且在逐步的完善过程，不同的组织对于HTML的语法标记等，都有不同的处理模式，出现百家争鸣的现象。随着发展，W3C 组织代替IETF组织成为了新的HTML标准，后续HTML有了迅速的发展。至1999年，HTML4.01标准的发布，成为了HTML发展非常重要的一个里程碑，在web中大量使用，沿用至今。
此后，W3C组织发布XHTML1.0，期望以XML的标准来约束HTML更加的规范，对HTML进行了语法非常严格的规范，但是又没有增加新的标签或者特性。在某种程度上来说，这是好事，规范了HTML语法的标准。但是，接下来，W3C非(sang)常(xin)大(bing)胆(kuang)的推出了它的XHTML2.0，并且不向前兼容，以至于甚至不兼容HTML。这就是web的异常灾难了。
2004年，以Opera公司的Lan Hickson发起了在HTML上的扩展和web应用适配的活动，被W3C拒绝。于是Opera、Apple、Mozilla自发组织WAHTWG组织，开始就HTML的新标准进行自行维护，并依托于web forms2.0和web app 1.0标准，开始研发HTML5的语法标准。反观W3C在XHTML的道路上坎坷不断，终于在2010年前后，W3C颁布发表停止了XHTML2的继续维护。开始以WAHTWG的研究为基础，开发研发 HTML 5语法标准。
发展至今，HTML 5已经被大部分浏览器兼容，并且大量应用于web网站中。

HTML的编写准备

1.开发环境

HTML作为web开发的基石，一直以简单著称，所以开发HTML只需要简单的记事本工具即可，如： EditPlus、sublime、VSCode等等，当然主流的编程IDE绝大多数都是支持HTML的开发的，如：eclipse、IntelliJ     IDEA、pycharm等，当然也有专门前端开发的IDE--WebStorm、Hbuilder等，在开发的前期建议使用记事本工具，以便于练习代码的手感，等基础功打好之后，就可以使用这些IDE开发，提高开发的效率了。

2.运行环境

HTML是web页面的基石，所以运行环境就是主流的浏览器。建议使用Google公司的Chrome浏览器。

3.书写格

（1）建立一个HTML页面：

       第一步创建一个文本文件
       第二步修改文件的名称（包括后缀名xxx.html）
       第三步使用sublime、vscode、editPlus打开这个文件
       第五步编写代码

（2）代码内容：
HTML标签是页面的根标签
head标签表示的页面不可见部分：页面的属性：编码、书否刷新、作者、关键字。
body文本内容

（3）书写规范：
    标签必须成对出现。
    标签之间的父子关系通过缩进体现出来。

（4）编码问题：
   建议使用UTF-8，将软件设置默认编码为UTF-8，charset中的编码和文件的编码一致。

注意：程序中使用符号都是英文符号，不允许出现中文符号；HTML不区分大小写。

简单的HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<!-- 自结束标签  -->
		<!-- 当前网页的编码格式 -->
		<meta charset="UTF-8">
		<!-- 文本标题 -->
		<title>第一个页面的标题</title>
	</head>
	<body>
	<!-- 文本内容 -->
		这个就是一个页面，HTML ， I comming！！
	</body>
</html>

运行结果：

HTML的标签

标题标签：h1、 h2、 h3、 h4、 h5、 h6主要用来装饰标题。

段落标签：p

br标签用来换行

hr标签用来做水平分割线

常见的文本修饰标签：
b/strong：加粗效果
i/em：加斜
u：下划线
del：删除

div：标准块标签，主要用来布局
span：标准行内标签，主要用来修饰文本

代码示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>标签2</title>
	<style type="text/css">
	span {
		color: #23456e;

	}
	div{
		font-size: 20px;
		font-family: "黑体";
		color:#ff324d;
	}


	</style>
</head>
<body>
	<!-- 标题标签（1~6）-->
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<!-- 注意只有6级标签 -->
	<!-- 段落 P -->
	<!-- 换行 br -->
	<!-- 加粗 b -->
	<!-- 加斜 i  em -->
	<!-- 加下划线 u -->
	<!-- 删除 del -->
	<p>
	<b>集成测试</b>(Integration <del>Testing</del>) 是指根据实际情况对程序中已通过单元测试的单元采用适当的集成策略组装起来，检查各个单元之间的<u>接口</u>以及集成之后的功能是否正确。<br>
	<em>集成测试</em>也称为组装测试、联合测试、模块测试、子系统测试或组件测试。
	</p>
	<p><b>大爆炸式集成即非渐增式集成测试</b>( Big-Bang Integration Testing )，又称<i>大棒式集成</i>，先对每个子模块进行测试，然后将所有<span>模块全部集成起来一次性进行集成测试</span>。
	</p>
	<!-- 分割线标签 hr -->
	<hr>
	<!-- 标准块标签  div-->
	<!-- 标准行内标签 span -->
	<div>驱动器(Driver)</div>
	<div>桩(Stub)</div>
	<div>自顶向下</div>
</body>
</html>

运行结果：

pre：原样输出标签
sup：指数显示，上标
sub：下标显示

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>标签1</title>
</head>
<body>
	<h3>静夜思</h3>
	<pre>
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
	</pre>
	<hr>
	x<sup>2</sup>+y<sup>2</sup>=1<br>
	log<sub>2</sub>a=1
</body>
</html>

运行结果：

语义化标签：
article：文章
aside：边缘部分
header：页面的顶部内容
section：正文部分
footer：页面尾部

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>语义化标签</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		header {
			height: 200px;
			width: 100%;
			background-color: yellow;
		}
		section {
			height: 1000px;
			width: 100%;
			background-color: pink;
		}
		footer {
			height: 200px;
			width: 100%;
			background-color: blue;
		}
	</style>
</head>
<body>

	<header>
		床前明月光
	</header>

	<section>
		疑是地上霜
	</section>
	
	<footer>
		低头思故乡
	</footer>
</body>
</html>

运行结果：

HTML表格

[(-o-)]

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb（1）html

HTML什么是HTML？HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网...
复制链接

扫一扫

专栏目录