java Web-HTML标签（1）

最新推荐文章于 2024-07-24 21:11:51 发布

新时代的农民工

最新推荐文章于 2024-07-24 21:11:51 发布

阅读量150

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/jxcncb/article/details/108455048

版权

预习检查：
HTML是什么？
HTML（HyperText Mark-up Language，是超文本标记语言或超文本链接标示语言），是目前网络上应用最广泛的语言，也是构成网页文档的主要语言。
HTML文档的基本结构是什么？
基本结构：head头部部分和body主体部分。
作业：
第一题：
在这里插入图片描述

首先分析需要用到哪些标签：

<h1></h1>
<h2></h2>
<hr />   <!--列表项-->
<p></p>

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>唐诗三百首</title>
	</head>
	<body>
		<h1>唐诗三百首</h1>
		<hr />
		
		<h2>目录</h2>
		<p>第一首：静夜思</p>
		<p>第二首：忆江南</p>
		<p>第三首：长恨歌</p>
		<hr />
		
		<h2>静夜思</h2>
		<p>作者：李白</p>
		<p>床前明月光，疑是地上霜。举头忘明月，低头思故乡。</p>
		<hr />
		
		<h2>【李白简介】</h2>
		<p>李白，字太白，号青莲居士，自称与李堂皇室同宗，祖籍陇西成纪（今甘肃天水附</p>
		<p>近），剩余暗喜碎叶（遗址在今库尔吉斯坦国境内的阿克别西姆）。五岁随父迁居</p>
		<p>绵州彰明县......</p>
	</body>
</html>

实现效果：
在这里插入图片描述
第二题：

在这里插入图片描述

首先分析需要用到哪些标签：

<h1></h1>
<h2></h2>
<hr />

<ul>    <!--无序列表标签-->
<li></li>
</ul>

<dl>    <!--定义描述标签-->
<dt>
<dd></dd>
</dt>
</dl>

<ol>   <!--有序列表标签-->
<li></li>
</ol>

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用于布局的块级标签</title>
	</head>
	<body>
		<h1>商品信息</h1>
		<h2>产品类别</h2>
		<hr />
		
		<ul>
			<li>数码</li>
			<ul>
				<li>笔记本</li>
				<li>手机</li>
				<li>家电</li>
			</ul>
			<li>美容</li>
			<li>服装</li>
		</ul>
		<hr />
		
		<dl>
			<dt>联想电脑</dt>
			<dd>产品型号：联想IdeaPad 7450A-TEU（NBA纪念版）</dd>
			<dd>价格：4999元</dd>
			<dd>所在地：北京</dd>
		</dl>
		<hr />
		
		<h2>购物流程</h2>
		<ol>
			<li>确认购买信息</li>
			<li>付款到贵美</li>
			<li>确认收货</li>
			<li>付款给商家</li>
			<li>双方评价</li>
		</ol>
	</body>
</html>

实现效果：
在这里插入图片描述第三题：

首先分析需要用到哪些标签：

<h1></h1>
<img src="图片地址" alt="提示文字" title="提示文字" />
<p></p>

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img和span标签练习</title>
	</head>
	<body>
		<h1>促销信息</h1>
		<img src="img/maotai.jpg" alt="飞天茅台，好喝不贵" title="飞天茅台，好喝不贵" />
		<p>拍卖飞天茅台</p>
		<p>酱香突出，幽雅细腻，空杯留香</p>
		<p>跳楼疯抢价<span style="color: red;font-size: 70px;">10</span>元起</p>
	</body>
</html>

实现效果：
在这里插入图片描述实现了一个相类似的的，图不一样，但是换汤不换药。

新时代的农民工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java Web-HTML标签（1）

预习检查：HTML是什么？HTML（HyperText Mark-up Language，是超文本标记语言或超文本链接标示语言），是目前网络上应用最广泛的语言，也是构成网页文档的主要语言。HTML文档的基本结构是什么？基本结构：head头部部分和body主体部分。作业：第一题：首先分析需要用到哪些标签：<h1></h1><h2></h2><hr /> <p></p>
复制链接

扫一扫