列表
有序列表
<ol type="I" start="10">
<li>123</li>
<li>234</li>
<li>345</li>
</ol>
无序列表
<ul type="square">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
自定义列表
<dl>
<dt><img src="123.png" alt=""></dt>
<dd>我的基本信息</dd>
</dl>
列表的属性
ul{
/* 配置颜色 */
background-color: rgb(100, 100, 100);
/* 带透明度的颜色配比 */
background-color: rgba(100, 100, 100, 0.4);
/* 16进制写法 */
background-color: #ffffff;
/* 背景图片 */
background-image: url(1.jpg);
/* 背景颜色平铺 */
background-repeat: repeat;
/* 背景图片的定位(背景图到边框的距离) */
background-position: 20px 20px;
background-position: 20% 20%;
}
表格
<table border="1" width="500"
align="center"
bordercolor="red"
bgcolor="yellow"
cellspacing="0"
cellpadding="20"
>
<tr align="center" valign="middle">
<td colspan="2" rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
表单
<form action="" method="post">
用户信息:<input type="text" placeholder="请输入你的用户名" name="username">
<input type="submit" value="登录">
</form>
单选框
<h1>做一个单选框</h1>
<div>
<input type="radio" name="radio1" checked="checked">非常满意<br/>
<input type="radio" name="radio1">满意<br/>
<input type="radio" name="radio1"> 不满意<br/>
<input type="radio" name="radio1">非常不满意<br/>
</div>
<div>
<input type="radio" name="bbb" id="man">
<label for="man">男</label>
</div>
<div>
<input type="radio" name="bbb" id="woman">
<label for="woman">女</label>
</div>
做一个复选框
<h1>做一个复选框</h1>
<div>
<div>你的兴趣爱好是什么</div>
<div>
<input type="checkbox" name="aaa">抽烟
<input type="checkbox" name="aaa">喝酒
<input type="checkbox" name="aaa">烫头
</div>
</div>
图片按钮
<div>
<input type="image" src="sub.jpg">
</div>
禁用功能
<div>
<button disabled>注册</button>
</div>
只读功能
<div>
<input type="text" readonly value="222">
</div>
下拉菜单
<div>
<div>性别</div>
<select name="sex" multiple>
<option value="man" selected>男</option>
<option value="woman">女</option>
</select>
</div>
多行文本框
<h1>多行文本域</h1>
<div>
<textarea cols="30" rows="10" placeholder="输入内容"></textarea>
</div>
字段集(边框中留出一段开口,用来写字段名)
<fieldset>
<legend>性别</legend>
<input type="radio" name="aa"> nan
<input type="radio" name="aa"> nv
</fieldset>
表单的增强(特殊格式的输入框)
<audio src="123" controls loop autoplay muted></audio>
<video src="123.mp4" controls loop autoplay muted poster="./post.jpg"></video>
<form>
<input type="color" name="color">
<input type="submit">
</form>
<form>
<input type="email" name="email">
<input type="submit">
</form>
<form>
<input type="url" name="url">
<input type="submit">
</form>
<form>
<input type="tel" name="tel">
<input type="submit">
</form>
<form>
<input type="range" name="range" min="10" max="100" step="10" value="50">
<input type="submit">
</form>
<form>
<input type="number" name="number" min="10" max="100" step="10" value="50">
<input type="submit">
</form>
<form>
<input type="search" name="search">
<input type="submit">
</form>
<form>
<input type="date" name="date">
<input type="month" name="month">
<input type="week" name="week">
<input type="submit">
</form>
<input type="text" list="mylist">
<datalist id="mylist">
<option value="手机"></option>
<option value="手表"></option>
<option value="手环"></option>
<option value="电话"></option>
<option value="电脑"></option>
</datalist>
<form action="">
<div>
用户名:<input type="text" autofocus required multiple pattern="[0-9][A-Z]">
</div>
</form>