#HTML学习日记02

最新推荐文章于 2024-08-27 15:45:31 发布
最新推荐文章于 2024-08-27 15:45:31 发布
阅读量118 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47741303/article/details/114918695
版权

列表
无序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
	<!--无序列表使用 `<ul>` 标签-->
		<h4>无序列表：</h4>
		<ul>
			<li>翠峰茉莉</li>
			<li>淘淘乌龙</li>
			<li>杨枝甘露</li>
		</ul>
	</body>
</html>

可戳：不同类型的无序列表-来源：菜鸟教程

有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
	<!--有序列表始于 `<ol>` 标签。-->
		<h4>有序列表</h4>
		<ol>
			<li>翠峰茉莉</li>
		<li>淘淘乌龙</li>
		<li>杨枝甘露</li>
		</ol>
		<ol start="50">
			<li>翠峰茉莉</li>
		<li>淘淘乌龙</li>
		<li>杨枝甘露</li>
		</ol>
	</body>
</html>

效果图：
在这里插入图片描述
可戳：不同类型的有序列表-来源：菜鸟教程
自定义列表

<!DOCTYPE html>
<html>
		<head> 
		<meta charset="utf-8"> 
		<title>自定义列表</title> 
		</head>
		<body>
		<!--自定义列表以 `<dl>` 标签开始。每个自定义列表项以 `<dt>` 开始。每个自定义列表项的定义以 `<dd>` 开始-->
		<h4>自定义列表：</h4>
		<dl>
		  <dt>翠峰茉莉</dt>
		  <dd>%半糖正常冰%</dd>
		  <dt>淘淘乌龙</dt>
		  <dd>%椰果*1常温%</dd>
		</dl>
		
		</body>
		</html>

效果图：
在这里插入图片描述
嵌套列表

<!DOCTYPE html>
	<html>
	<head> 
	<meta charset="utf-8"> 
	<title>嵌套列表</title> 
	</head>
	<body>
	
	<h4>嵌套列表：</h4>
	<ul><li>饮品</li>
	
	<ol>
		<li>翠峰茉莉</li>
	  <dd>%半糖正常冰%</dd>
	  <li>淘淘乌龙</li>
	  <dd>%椰果*1常温%</dd>
	</ol>
	<li>甜品</li>
	<ol>
		<li>黑森林</li>
		<dd>六寸</dd>
		<li>布朗尼</li>
		<dd>两块</dd>
	</ol>
	</ul>
	</body>
	</html>

效果图：
在这里插入图片描述
表格
第一个实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
			每一个表格从一个table标签开始。
			每个表格行从tr标签开始。
			每个表格的数据从td标签开始。
		</p>
	<h4>一列：</h4>
	<table border="1">
		<tr>
			<td>100</td>
		</tr>
	</table>
	<h4>一行三列：</h4>
	<table border="1">
		<tr>
			<td>100</td>
		<td>200</td>
		<td>300</td>
		</tr>
	</table>
	<h4>三行两列：</h4>
	<table border="3"><!--此处table border是指边框的粗细，如果不定义边框属性，表格将不显示边框。-->
		<tr>
			<td>100</td>
			<td>200</td>
		<td>300</td>
		</tr>
		<tr>
			<td>199</td>
			<td>299</td>
			<td>399</td>
		</tr>
	</table>
	</body>
</html>

效果图：
在这里插入图片描述
表格表头及表格标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格表头</title>
	</head>
	<body>
		
		<table border="1">
			<caption>哑舍</caption><!--表格的标题使用 <caption> 标签进行定义。-->
			<tr><!--表格的表头使用 <th> 标签进行定义。-->
				<th>一</th>
				<th>二</th>
			</tr>
			<tr>
				<td>鱼纹镜</td>
				<td>四季图</td>
			</tr>
			<tr>
				<td>香妃链</td>
				<td>锟铻刀</td>
			</tr>
		</table>
	</body>
</html>

效果图：
在这里插入图片描述
跨行或跨列的表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨列跨行表格</title>
	</head>
	<body>
		<h4>单元格跨两列</h4>
		<table border="2">
			<tr>
				<th>故事名称</th>
				<th colspan="2">人物</th>
			</tr>
			<tr>
				<td>种火人</td>
				<td>小雅</td>
				<td>许安昶</td>
			</tr>
			</table>
			<h4>单元格跨两行</h4>
			<table border="3">
				<tr>
					<th>故事名称</th>
					<td>种火人</td>
				</tr>
				<tr>
					<th rowspan="2">人物</th>
					<td>小雅</td>
				</tr>
				<tr>
					<td>许安昶</td>
				</tr>
			
		</table>
	</body>
</html>

效果图：
在这里插入图片描述

可戳：表格内嵌套其他标签-来源：菜鸟教程

单元格边距和间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h4>没有单元格边距和间距</h4>
		<table border="2">
			<tr>
				<th>故事名称</th>
				<td>种火人</td>
			</tr>
			<tr>
				<th>作者</th>
				<td>苏小晗</td>
			</tr>
		</table>
		<h4>有单元格边距和间距</h4>
		<!--cellsapcing控制单元格间距，cellpadding控制单元格边距-->
		<table border="1" cellspacing="10" cellpadding="15">
			<tr>
				<th>故事名称</th>
				<td>种火人</td>
			</tr>
			<tr>
				<th>作者</th>
				<td>苏小晗</td>
			</tr>
		</table>
	</body>
</html>

效果图：
在这里插入图片描述

容我想想ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【HTML笔记】样式--CSS、图像、表格
m0_47102213的博客
04-21 206
学习网站 ：菜鸟教程 添加链接描述 HTML样式 CSS ????CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS 外部引用 - 使用外部 CSS 文件 <!doctype html> <html> <he...
HTML/CSS学习记录（4）
Ascine的博客
07-11 374
HTML表格表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
用html做简单的日记,学习HTML日记
weixin_32123259的博客
06-07 1039
1。html>是什么意思?[1]DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。html5标准网页声明，原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html52. 开始标签结束标签3. 这是最外的一层中文编码目前在大部分浏览器中，...
html课题研究学习日记#25
weixin_47410720的博客
08-07 164
学习日记
html课题研究学习日记#21
weixin_47410720的博客
08-03 84
学习日记
html课题研究学习日记#9
weixin_47410720的博客
07-17 497
学习日记
html课题研究学习日记#15
weixin_47410720的博客
07-24 94
学习日记
html课题研究学习日记#4
weixin_47410720的博客
07-09 179
学习日记
html课题研究学习日记#2
weixin_47410720的博客
07-06 157
学习日记
html课题研究学习日记#1
weixin_47410720的博客
07-05 75
学习记录
我的HTML学习日记.zip
03-14
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html学习日记6_网站.rar
01-05
这个压缩包"html学习日记6_网站.rar"很可能是某位学习者在第六阶段关于构建网站的学习记录，其中可能包含了HTML代码示例、笔记或者小项目。"pre_html_04"这个文件名可能是指预HTML的第四个部分，暗示了这是一个关于...
Html学习日记
wang_zi_kang_UI的博客
12-28 201
html框架 html网页只有在这个框架内才会生效 一个简单的页面 <head></head>页面标题 <title></title>标题内容 <body></body>页面主体 <h1></h1>标题，有h1-h6，内容默认黑体，依次缩小 <hr/>横线，默认占一排，可编辑样式 <br/>重新开头，等于回车 <strong...
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 636
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
30分钟从零开始入门拿下 HTML
最新发布
Y_1215的博客
08-27 1194
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(二)
08-26 1210
CRUD中，如何做到全端通吃，基于ABP的Dto模块，通过对Dto的编辑，从而控制全部的前端内容，让数据的表格和数据的表单做到动态创建，动态验证等！
html文本文字中保留空格和换行
qq_41985405的博客
08-26 460
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
【HTML】模拟消息折叠效果【附源代码】
Young_Pro的博客
08-26 1176
通过 Html 搭配 CSS 和 JavaScript 模拟消息折叠效果，点击展开消息，再次点击即可收起消息
你没有使用过（但应该使用）的前 5 个 HTML 功能
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
08-26 759
TML 已经有了很大的发展，这些特性展示了它已经变得多么强大和灵活。通过将这些鲜为人知的元素合并到你的项目中，你可以创建响应速度更快、动态更动态且用户友好的网页，同时减少对外部库和框架的依赖。因此，请尝试这些 HTML 功能 — 你可能会惊讶于它们可以在多大程度上增强你的开发过程。
大数据开发shell学习日记
09-02
大数据开发中的shell学习日记可以包括以下内容： 1. 学习Linux命令和shell脚本：作为大数据开发者，在Linux下进行开发是常见的，因此了解一些基本的Linux命令和编写shell脚本的技能是必备的。 2. 学习Django：Django...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值