前端学习vol.1 HTML2

留白

前端学习vol.1 HTML2

有序列表ordered list<ol>

先上一个演示文本

<p>
	最喜欢的水果是什么呢？
</p>
<ol type="1" reversed="reversed" start="2">
	<li>橘子</li>
	<li>橙子</li>
	<li>柚子</li>
</ol>

ol是有序列表标签，它的子元素只能是li，有序表中li的父元素也只能是ol，但是li的子元素可以是ol，这就代表着有序表可以嵌套。

ol的常用属性有：
1、type。表示列表的序号形式，可以是1（阿拉伯数字）、a/A（英文字母）、i/I（希腊字母）。示例中使用的是“1”。
2、start。表示列表序号的开始位置，不论是哪种序号形式，开始位置只需要写数字即可。示例中使用的是“2”，代表序号从2开始。
3、reversed。表示正反序，不写该属性默认正序，示例中使用的是“reversed”代表反序。

页面展示内容如下👇

有序表ol使用场景并不多，因为有个功能强大的无序表ul可以满足各种需求。

无序列表unordered list<ul>

先上一个演示文本

<div class="navigation">
	<ul>
		<li>发现</li>
		<li>摄影师</li>
		<li>活动</li>
		<li>部落</li>
		<li>售图</li>
		<li>元视觉</li>
		<li>创意洞察</li>
	</ul>	
</div>

同上，ul是无序列表标签，它的子元素只能是li，无序表中li的父元素也只能是ul，但是li的子元素可以是ul，这就代表着无序表也可以嵌套。

ul的常用属性
type。表示列表的符号形式，可以是默认的disc实心圆、square方块、circle空心圆。

ul无序表可以通过定义样式来适应多个场景的布局，特别是对于并列关系的导航栏，几乎全部是使用ul无序表来完成的。比如👇

（配合css调整样式即可）

定义列表definition list<dl>

先上一个演示文本

<ul>
	<li>
		<dl>
			<dt>购物指南</dt>
			<dd>购物流程</dd>
			<dd>会员介绍</dd>
			<dd>生活旅行/团购</dd>
			<dd>常见问题</dd>
			<dd>大家电</dd>
			<dd>联系客服</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>配送方式</dt>
			<dd>上门自提</dd>
			<dd>211限时达</dd>
			<dd>配送服务查询</dd>
			<dd>配送费收取标准</dd>
			<dd>海外配送</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>支付方式</dt>
			<dd>货到付款</dd>
			<dd>在线支付</dd>
			<dd>分期付款</dd>
			<dd>邮局汇款</dd>
			<dd>公司转账</dd>
		</dl>
	</li>
</ul>

dl的子元素只能是dt和dd，所以dt和dd的父元素只能是dl。

dt是列表标题，dd是列表项，dd用来描述dt。dd和dt都是容器标签。应用场景👇

输入标签（文本框）<input>

先上一个演示文本

			<form>
				姓名：<input type="text" value="poipoi626" ><br>
				昵称：<input value="不准写昵称" disabled=""><br>
				密码：<input type="password" value="" size="50"><br>
				性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
						<input type="radio" name="gender" id="radio2" value="female" >女<br>
				爱好：<input type="checkbox" name="love" value="eat">拍照
						<input type="checkbox" name="love" value="sleep">登山
						<input type="checkbox" name="love" value="bat">读书
				<br>
				<input type="submit" value="提交">
			</form>

input标签用于接收用户输入内容，再由form表单将这些信息与服务器交互。二者需要组合使用。

input的常用属性有：
1、type。表示输入的文本类型，默认是text，还有密码password、提交submit、单选按钮radio、多选按钮checkbox、重置reset。
2、value。表示文本框内填写的默认内容。
3、name。表示单选或者多选内容的概括，相同的name属性囊括一组单选/多选按钮。
4、disabled文本框只读，属性值不写。size表示文本框可以显示的字符。checked默认选择的按钮。

演示应用👇

表单标签<form>

先上一个演示文本

			<form action="#" method="GET" id="login">
				<p>
					username: <input type="text" name="username" value="username">
				</p>
				<p>
					password: <input type="password" name="password" value="password">
				</p>
				<p>
					sumbit:<input type="submit" />
				</p>
			</form>

表单收集用户信息，用于与服务器的交互。

form的常用属性有：
1、action。表示填写的表单将提交到哪里。
2、method。表示表单的提交方式，有get和post方式。后续在Ajax中会有具体体现。
3、name。表示表单的名称。
4、id。表示表单的名称，用于控制表单。

演示应用👇