一、列表
列表是信息资源的一种展示形式,使信息结构化、条理化
1、无序列表
- 没有顺序,每个
<li></li>
标签独占一行(块元素) - 默认
<li></li>
标签项前面有个实心小圆点 - 每一项平级
语法格式如下
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
2、有序列表
- 有顺序,每个
<li></li>
标签独占一行(块元素) - 默认
<li></li>
标签项前面有顺序标记 - 一般用于排序类型的列表
语法格式如下
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
3、自定义列表
- 没有顺序,每个
<dt></dt>、<dd></dd>
标签独占一行(块元素) - 默认没有标记
- 一般用于一个标题下有一个或多个列表项的情况
语法格式如下
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dd>樱桃</dd>
</dl>
4、列表样式
控制标记:list-style-type
- none:无标记符号
- disc:实心圆,默认类型
- circle:空心圆
- square:实心正方形
- decimal:数字
<dl list-style-type:none>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dd>樱桃</dd>
</dl>
二、表格
1、表格基本语法
简单通用、结构稳定,表格结构如下
- 一对
<tr></tr>
标签代表一行 - 一对
<th></th>
标签代表首行 - 一对
<td></td>
标签代表一列
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">学生成绩</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
2、合并单元格
(1)合并列:colspan
- 合并 n 列
<td colspan="n">...</td>
(2)合并行:rowspan
- 合并 n 行
<td rowspan="n">...</td>
三、表单
1、表单基本标签<form></form>
所有表单元素放在表单基本标签中,标签基本属性:
- name:表单名
- method:表单提交方式(get、post)
- action:提交目的地
2、<input />
标签属性
- 表单元素属性:type
- 文本宽度:size
- 输入的最大字符数:maxlength
- 元素的初始值:value
<input name="name" size="12" type="text" class="input" id="fname" value="123456" maxlength="6">
type属性值
(1)文本框:text
- 用于输入文本
(2)密码框:password
- 以密码形式输入文本,隐藏输入信息
(3)单选按钮:radio
- 在给出的按钮中做单选
- 注意 name 相同
- checked 为默认选择项
<input type="radio" name="gen" class="input" value="男" checked/>男
<input type="radio" name="gen" class="input" value="女" />女
(4)复选框:checked
- 多项选择
- 注意 name 相同
- checked 为默认选择项
<p>
爱好:
<input type="checkbox" name="interest" value="sports" checked/>运动
<input type="checkbox" name="interest" value="talk"/>聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
</p>
(5)下拉框:select
- 下拉框选择值
- selected 为默认选择项
<p>
<select name="bmon" id="" size="1">
<option value="" selected>[选择月份]</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</p>
(6)按钮:reset
- 重置按钮(清空表单中以填好的信息)
<input type="reset" name="butRest" value="reset按钮">
(7)按钮:submit
- 提交按钮,提交表单信息
<input type="submit" name="butSubmit" value="submit按钮">
(8)按钮:button
- 普通按钮
<input type="button" name="butButton" value="button按钮" onclick="alert(this.value)">
<button class="btn">按钮</button>2
(9)图片按钮:image
- 图片按钮
- src 为图片路径
- width、height 设置图片按钮大小
<input type="image" src="images/1.jpg" width="300" height="200">
(10)多行文本域:textarea
- 用于输入多行文本内容
- cols 列数
- rows 行数
<textarea name="showText" cols="30" rows="10">自行、活泼...</textarea>
(11)文件域:file
- 用于选择本地文件
<input type="file" name="files"/>
(12)邮箱:file
- 自动验证邮箱格式是否正确
<p>
邮箱:
<input type="email" name="email">
</p>
(13)网址:url
- 自动验证网址格式是否正确
<p>
请输入网址:
<input type="url" name="url">
</p>
(14)数字:number
- 自动验证输入数字是否符合条件
- min:允许的最小值
- max:允许的最大值
- step:合法的数字间隔
<p>
请输入数字:
<input type="number" name="num" min="0" max="100" step="10" />
</p>
(15)滑块:range
- 滑块选择数字大小
- value:默认位置
- min:允许的最小值
- max:允许的最大值
- step:合法的数字间隔
<p>
<input type="range" name="range" min="0" max="100" step="10"/>
</p>
(16)搜索框:search
<p>
<input type="search" name="sousou"/>
</p>
(17)隐藏域:hidden
- readonly:只读(input属性)
- disable:禁用(input属性)
<p>
<input type="hidden" value="666" name="userid" />
</p>
(18)表单标注
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
<label for="pass">标注文本</label>
<input type="password" name="pass" id="pass">
四、CSS3高级选择器
1、层次选择器
(1)后代选择器:body p{...}
- body下所有子元素p都被选择
(2)子选择器:body>p{...}
- body下一级中子元素p都被选择
(3)相邻兄弟选择器:.active+p{...}
- 并列相邻的一个元素
(4)通用兄弟选择器:.active~p{...}
- 同级中的所有元素
2、结构伪类选择器
(1)p:first-child{...}
- 第一个子元素的元素 P
(2)p:last-child{...}
- 最后一个子元素的元素 P
(3)E F:nth-child(n){...}
- 选择父级元素E的第n个子元素;关键字为even(偶)、odd(奇)
(4)E:first-of-type
- 选择父元素内具有指定类型的第一个E元素
(5)E:last-of-type
- 选择父元素内具有指定类型的最后一个E元素
(6)E F:nth-of-type(n)
- 选择父元素内具有指定类型的第n个F元素
3、属性选择器
(1)a[id]{...}
- 选择匹配具有属性 id 的 a 元素
(2)a[id=first]{...}
- 选择匹配具有属性 id 的 a 元素,并且属性值为 val
(3)a[id^=f]{...}
- 选择匹配元素 a,且 a 元素定义了属性 id,其属性值是以 val 开头的任意字符串
(4)a[id$=t]{...}
- 选择匹配元素 a,且 a 元素定义了属性 id,其属性值是以 val 结尾的任意字符串
(5)a[id*=ir]{...}
- 选择匹配元素 a,且 a 元素定义了属性 id,其属性值包含了 val 的任意字符