C3-初识HTML

最新推荐文章于 2022-06-19 16:51:57 发布

陌~晓

最新推荐文章于 2022-06-19 16:51:57 发布

阅读量90

点赞数

本文链接：https://blog.csdn.net/weixin_51963604/article/details/117933654

版权

本文介绍了HTML的基础知识，包括基本结构和常见标签，以及如何使用HTML创建带有交替颜色的表格。此外，通过示例展示了如何在富文本编辑器中插入JavaScript以实现弹窗功能。接着，利用CSS盒子模型创建了一个复杂的页面布局，通过调整div的样式实现了特定图形的展示。这是一个将HTML、CSS和JavaScript结合应用的实例。

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

初步了解HTML

HTML是互联网三大基石(HTML、HTTP、URL)之一，我们学习前先明白HTML是一种专门对网页信息进行规范化展示的语言，HTML是一门超文本表记语言，所谓的超文本是指文本信息、图片、声音、视频、超链接等，而标记则是标签的体现

HTML的基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

可以知道HTML分为约束文档，头部信息…，展示信息…，以及用于标识的标签
其中头部信息head是用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

而body标签定义了文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等

HTML常见的标签

HTML中标签，按结构来分，可分为单标签，和双标签，单标签如
，双标签如

而且标签元素按照属性不同也有不一样的功能，下面，将利用一张思维导图，介绍常见的标签。
HTML常见的标签

任务：使用富文本编辑器

任务简介

首先在富文本编辑器中随便输入一段文本
然后，在源码模式下，查看内容是如何转变为带标签的文本的，都带了哪些HTML标签
最后，修改源码，实现编辑器没有的功能，例如让表格隔行变色，加入JavaScript按钮，实现弹窗功能

任务过程

简单输入helllo,world,查看源码

可以看到源码是被一个段落标签包围的

2.按照html的知识，我们在源码查看页面，输入下面的程序可以得到隔行换色的表格

<table border="1px">
  <tbody>
	<tr height="50px" align="center" bgcolor="red">
    	<td width="100px">大一</td>
      	<td width="100px">学数学</td>
    </tr>
  	<tr height="50px" align="center" bgcolor="yellow">
    	<td width="100px">大二</td>
      	<td width="100px">学编程</td>
    </tr>
    <tr height="50px" align="center" bgcolor="red">
    	<td width="100px">大三</td>
      	<td width="100px">学算法</td>
    </tr>
    <tr height="50px" align="center" bgcolor="yellow">
    	<td width="100px">大四</td>
      	<td width="100px">社会</td>
    </tr>
</tbody></table>

在这里插入图片描述
3. 这里我们要了解JavaScript的引入方式，JS的引入方式共有三种，行内引入，内部引入，以及外部引入
想要增加按钮，我们只需要一个input标签，并将他改为type类型，设定javascript的就好

<input type="button" value="弹窗" onclick="alert(&quot;行内引入JavaScript&quot;)">

在这里插入图片描述
任务至此完成，其实也就是对HTML一点点小小的应用，但是没有JavaScript的网页终究缺少了灵魂

扩展任务

任务说明

用CSS盒子模型完成下列图形

在这里插入图片描述
这涉及到CSS盒子的布局
这里我就直接上代码了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS盒子模型</title>
		<style type="text/css">
			div{
				border: 3px solid #AAAAAA;
				text-align: center;
				background-color: #C5D08E;
				margin:0 auto;
			}
			.div_1{
				margin:20px 20px 20px 20px;
			}
			.div_2{
				width: 225px;
				height:175px;
				line-height: 175px;
				z-index: 1;
				background-color:#F3A464 ;
			}
			#div_main{
				width:1060px;
				height:690px;
				overflow:hidden;
				background-color: #FCDD9C;
				border: 6px solid #AAAAAA;
				position: relative;
			}
			#div1{
				width: 310px;
				height:150px;
				line-height: 150px;
			}
			#div2{
				width: 310px;
				height: 470px;
				line-height: 470px;
			}
			#div3{
				width: 675px;
				height:255px;
				line-height: 255px;
				z-index:1;
				position:absolute;
				top:0px;
				right:0px;	
			}
			#div4{
				width:340px;
				height:370px;
				line-height: 370px;
				position:absolute;
				bottom:0px;
				left:340px;	
			}
			#div5{
				width:305px;
				height:175px;
				line-height: 175px;
				position:absolute;
				top:275px;
				right:0px;	
			}
			#div6{
				width:305px;
				height:175px;
				line-height: 175px;
				position:absolute;
				bottom:0px;
				right:0px;	
			}
			#div7{
				position:absolute;
				top:40px;
				left:20px;	
			}
			#div8{
				position:absolute;
				right:20px;	
				top:-107.5px;
			}
			#div9{
				position:absolute;
				bottom: -87.5px;
				left:20px;
			}
		</style>
	</head>
	<body>
		<div id="div_main">
 			<div id="div1" class="div_1">
				1
			</div>
			<div id="div2" class="div_1">
				2
			</div>
			<div id="div3" class="div_1">
				3
				<div id="div7" class="div_2">
					7
				</div>
				<div id="div8" class="div_2">
					8
				</div>
			</div>
			<div id="div4" class="div_1">
				4
				<div id="div9" class="div_2">
					9
				</div>
			</div>
			<div id="div5" class="div_1">
				5
			</div>
			<div id="div6" class="div_1">
				6
			</div>
		</div>
	</body>
</html>

陌~晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
C3-初识HTML

任务一：使用富文本编辑器任务简介首先在富文本编辑器中随便输入一段文本然后，在源码模式下，查看内容是如何转变为带标签的文本的，都带了哪些HTML标签最后，修改源码，实现编辑器没有的功能，例如让表格隔行变色，加入JavaScript按钮，实现弹窗功能任务过程简单输入helllo,world,查看标签发现标签是我们查看输入下面的程序可以得到隔行换色的表格<table border="1px"> <tbody> <tr height="50px" ali
复制链接

扫一扫