前端系列——html与css介绍及（三）

html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签 定义整体的表单区域

• action属性 定义表单数据提交地址
• method属性 定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

• type属性
  • type=“text” 定义单行文本输入框
  • type=“password” 定义密码输入框
  • type=“radio” 定义单选框
  • type=“checkbox” 定义复选框
  • type=“file” 定义上传文件
  • type=“submit” 定义提交按钮
  • type=“reset” 定义重置按钮
  • type=“button” 定义一个普通按钮
  • type=“hidden” 定义一个隐藏的表单域，用来存储值
• value属性 定义表单元素的值
• name属性 定义表单元素的名称，此名称是提交数据时的键名

4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项

注册表单实例

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
	<option value="0">北京</option>
	<option value="1">上海</option>
	<option value="2">广州</option>
	<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>

表单常用样式、属性及示例

• outline 设置input框获得焦点时，是否显示凸显的框线，一般设置为没有,比如：outline:none;
• placeholder 设置input输入框的默认提示文字。

例图：

块元素类型及特性

块元素特性

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6等等都是块元素，它在布局中的行为：

• 支持全部的样式
• 如果没有设置宽度，默认的宽度为父级宽度100%
• 盒子占据一行、即使设置了宽度

其他块元素

1、有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

<ol>
	<li>列表文字一</li>
	<li>列表文字二</li>
	<li>列表文字三</li>
</ol>

2、定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：

<h3>前端三大块</h3>
<dl>
	<dt>html</dt>
	<dd>负责页面的结构</dd>

	<dt>css</dt>
	<dd>负责页面的表现</dd>

	<dt>javascript</dt>
	<dd>负责页面的行为</dd>

</dl>

包含默认样式的块元素

上面讲的块标签中，有些标签是包含默认的样式的，这个含默认样式的有

• p标签：含有默认外边距
• ul、ol标签：含有默认外边距和内边距，以及条目符号(小圆点或者编号)
• h1~h6标签：含有默认的外边距和字体大小
• dl、dd标签：含有默认外边距
• body标签：含有默认的外边距

实际开发中，我们会把这些默认的样式在样式定义开头清除掉，清除掉这些默认样式，方便我们写自己的定义的样式，这种做法叫样式重置。

/* 清除标签默认的外边和内边距 */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
	margin:0px;
	padding:0px;
}

/* 清除标签默认条目符号 */
ul,ol{
	list-style:none;
}

/* 将h标签的文字大小设置为默认大小 */
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	/* 根据实际需求来加   */
	font-weight:normal;
}

##内联元素类型及特性

内联元素特性

内联元素，也可以称为行内元素，布局中常用的标签如：a、span等等都是内联元素，它们在布局中的行为：

• 不支持宽、高、margin上下、padding上下
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

解决内联元素间隙的方法

1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

其他内联元素

1、<em> 标签 行内元素，表示语气中的强调词
2、<i> 标签 行内元素，表示专业词汇
3、<b> 标签 行内元素，表示文档中的关键字或者产品名
4、<strong> 标签 行内元素，表示非常重要的内容

包含默认样式的内联元素

• a标签：含有的下划线以及文字颜色
• em、i标签：文字默认为斜体
• b、strong标签：文字默认加粗

实际开发中，对这些标签进行样式重置。

/* 去掉a标签默认的下划线 */
a{
	text-decoration:none;
}
/* 去掉标签默认的文字倾斜 */
em,i{
	font-style:normal;
}
/* 去掉标签默认的文字加粗(按实际需求) */
b,strong{
	font-weight:normal;
}

例如：

内联块元素类型及特性、元素转换

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 盒子并在一行
• 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化：

display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

例图：