Web前端-HTML学习笔记二

一、文本格式化标签

<b>加粗		
<i>斜体		
<del>删除体	
<sup>上标	
<sub>下标	
<pre>预定义列表

二、列表标签

1.定义列表
<dl>
	<dt>分类项目</dt>
	<dd>分类详情项</dd>
</dl>

2.有序列表
<ol>
	<li>块级标签</li>
</ol>
type:	1：数字序号	i/I：罗马文字	a/A：字母序号

3.无序列表
<ul>
	<li>块级标签</li>
</ul>
type:	circle：空心圆		square：正方形		disc：空心圆（默认）

4.预定义列表
<pre></pre>
(保留排版符号 空格 回车符)

三、表格标签

1.语法
<table>
	<tr>
		<td>单元格<td>
		<td>单元格<td>
		<td>单元格<td>
	</tr>
</table>

2.table
<table align="水平居中：left/right/center"
		border="单元格边框 1/1px"
		cellspacing="单元格之间的距离 0/1px"
		cellpadding="单元格与内容的距离 0/10px"
		width="表格整体宽度，默认均分到每个单元格：%/100/100px"
		height="表格整体高度，默认均分到每个单元格：%/100/100px"
		bgcolor="表格的背景颜色：red/#FF00FF/rgb(00,00,00)"
>
</table>

3.tr属性
<tr align="水平对齐：left/right/center"
 	valign="垂直对齐：top/bottom/middle"
	bgcolor="表格的背景颜色：red/#FF00FF/rgb(00,00,00)"
></tr>
>
4.td属性
<td width="宽度：100px/30%"
 	align="水平对齐：left/right/center"
 	valign="垂直对齐：top/bottom/middle"
 	bgcolor="表格的背景颜色：red/#FF00FF/rgb(00,00,00)"
 	rowspan="跨行：数字2"，上下合并
 	colspan="跨列：数字3"，左右合并
>
</td>

5.完整表格结构
<table width="30%" alidn="center" cellspacing="0" cellpadding="0" border="1">
	<caption><h1>完整表格结构</h1></caption>
	<tr>
		<td>学号</td>
		<td>姓名</td>
		<td>班级</td>
	</tr>
</table>

四、表单form

1. form 属性
   method
	提交方式 get：1.地址栏显示数据 2.数据小于1KB
		    post：1.地址栏不显示数据 2.数据大小无限制
   action：
	处理数据的位置（服务器后台/页面）
	
2. 表单标签
（1）input type：
	text：文本框，单行的输入字段
	password：密码框，输入密码字段（隐藏密码）
	checkbox：复选框（多选）
	radio：单选按钮(name一致)
	number：只能输入数字
	range：滑块（数字）
	image：图片形式的提交按钮
	email：邮箱框，会自动验证邮箱格式
	url：链接地址，自动验证链接地址格式
	submit：提交按钮（表单中，拥有name属性的表单元素的value数据）
	reset：重置按钮（恢复到表单的初始状态）
	button：普通按钮（可提交）
	date：日历框
	file：文件上传，浏览按钮（post方式）
	hidden：隐藏的输入字段
（2）select：下拉列表
	<select>
		<optgroup>选项分组
			<option>选项</option>
		</optgroup>
	</select>
（3）textare：多行文本域
	<textare cols="列数" rows="行数"></textare>
	
3. 表单属性
	name 设置表单数据的key
	value 设置表单数据的value
	size input的字符单位宽度
	maxlength 允许的最大字符个数
	checked input的单选和多选（默认选中）
	selected select的默认选中项
	
4. 表单状态
	hidden 页面隐藏，提交时仍有效
	readonly 只读模式，不可修改
	disabled 禁用模式，不提提交数据
	
5. 表单的标注（方便用户输入数据）
	<fieldset>
		<legend>表单标题</legend>
	</fieldset>
	<label for="id">鼠标光标聚焦到输入框</label>
	tabindex="1" 用户填写数据时，可通过tab去聚焦到指定位置
	
6. 表单的简单验证
	placeholder 友好提示，输入内容后自动消失
	required 必填项，当前输入框不能为空，否则提交失败
	pattern 必须符合正则表达式的规则，否则提交失败

五、内联框架

1. iframe：src导入其他页面
	配合a标签进行页面导航
	<iframe name="" src="url" frameborder="0" scrolling="no"></iframe>
	<a target="内联框架的name" href="url"></a>