web_0206

最新推荐文章于 2023-11-13 09:03:37 发布

monuo5659

最新推荐文章于 2023-11-13 09:03:37 发布

阅读量145

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/monuo5659/article/details/104197586

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、列表

无序列表
有序列表
自定义列表

概念：结构里面装着结构，样式一致的一种文字或图表，称为列表。

特点：整齐，整洁，有序。相对于图表来说，组合度更高。

1.1无序列表

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水果</p>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>橘子</li>
		</ul>
	</body>
</html>

注意：<ul></ul>里面只能包含<li></li>。不建议包含<p></p>等。<li></li>里面无论你是放表格还是放图片都是可以的。

无序列表是用得比较多的标签，要特别注意一下。

无序列表中比较重要的一个type属性

<ul type="disc"></ul> type默认是实心圆
<ul type="square"></ul> 是方块
<ul type="circle"></ul> 是空心圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			
		</style>
	</head>
	
	<body>
		<p>无序列表,默认是实心圆</p>
		<ul>
			<li>苹果</li>
			<li>橘子</li>
			<li>香蕉</li>
		</ul>
		<p>无序列表中,type="square"中是指列表前为方块</p>
		<ul type="square">
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ul>
		<p>无序列表中,type="circle"是空心圆</p>
		<ul type="circle">
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ul>
	</body>
</html>

1.2有序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			
		</style>
	</head>
	<body>
		水果销量排行
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ol>
	</body>
</html>

1.3自定义列表

<dl><dt><dd></dd></dt></dl>,自定义列表是比较常见的一个列表。

<!DOCTYPE  html>

<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			
		</style>
	</head>
	<body>
		<dl>
			
			<dt>北京市<dt>
			<dd>昌平区</dd>
			<dd>海淀区</dd>
			<dd>东城区</dd>
			<dd>西城区</dd>
			<dt>天津市</dt>
			<dd>xx区</dd>
			<dd>yy区</dd>
			<dd>st区</dd>
		</dl>
	</body>
</html>

2、表单标签

input控件，语法：

<input type="属性值" value="初始默认值" >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			
		</style>
	</head>
	
	<body>
		用户名：<br />
		<input type="text" value="请输入用户名" name="username">
		<br />
		密码：<br />
		<input type="password" name="password">
		<br />
		<input type="button" value="提交">
	</body>
</html>

value属性，就是默认的字符。

type属性，是用于定义类型的。

name属性是给输入的内容取一个名字，后台对于数据便于区分。

checked默认选中状态。

type的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--text属性-->
		用户名：<br />
		<input type="text" value="请输入您的用户名" name="username"><br />
		密码：<br />
		<!--密码属性-->
		<input type="password" name="psd"><br />
		<!--按钮属性-->
		<input type="button" value="提交"><br />
		<!--单选属性-->
		男：<input type="radio" name="sex" checked="checked"><br />
		女：<input type="radio" name="sex" />
		<!--多选属性-->
		爱好:<br />
		足球<input type="checkbox" name="hobby" checked="checked"/><br />
		篮球<input type="checkbox" name="hobby" /><br />
		乒乓<input type="checkbox" name="hobby" /><br />
		<br />
		<!--提交submit属性-->
		<input type="submit" /><br />
		<!--图片提交属性-->
		<input type="image" src="images/lijizhuche.PNG"><br />
		<!--文件上传属性-->
		<input type="file">
	</body>
</html>