###01- 表单
- **form标签 表单用来提交数据**
- **action** 要提交的网址,默认是当前网页- **method** 请求 提交方式- 默认get请求 - post请求- 切换请求方式时注意缓存问题- **label标签**
- for属性如果设置的值和 input标签中设置的id属性值一样就可以实现点击label让对应的input成为焦点
- **输入框的两个常用属性：**
- **placeholder** 占位提示文字
- **outline:none** 输入框的边框
- **input标签中的type属性值介绍:**
type值 |含义
---|---
**text** |文本输入框
**password** |密文 密码文本输入框
**radio** |单选 需要设置name属性值一样才能单选 默认选择checked
**checkbox** |多选按钮 默认选择 checked
**file** |选择文件
**submit** | 提交 注册按钮
**reset** | 重置按钮
**button** |普通按钮
- **select** 下拉列表'选择列表'新的标签
- **option** 选项
-**textarea标签** 多行文本输入框
###02-搜索条案例
-文本距离盒子有一定间距时优先考虑使用文字缩进text-indent,如果用内边距还要考虑盒子模型问题
- **文本输入框默认有边框和内边距**
- **按钮也有默认边框**
- 默认元素会以文字基线"文字底部"来进行元素对齐,用浮动可以解决让元素不以文字基线对齐,也可以解决元素之间默认间距问题
- cursor:pointer 设置鼠标在元素上的样式为小手
###03-块元素特点
-块元素，也可以称为行元素，布局中常用的块标签如：div、p、ul、li、h1~h6等等都是块元素，它在布局中的行为特点:
-1.独霸一行
-2.宽度默认和父元素一样宽
-3.支持所有样式如margin padding等
###04-块元素的样式重置
-有些标签是包含默认的样式的:
-p标签：含有默认外边距
-ul：含有默认外边距和内边距，以及条目符号
-h1~h6标签：含有默认的外边距和字体大小
-body标签：含有默认的外边距
- 实际开发中，为了便于布局我们会把带有默认样式的标签样式清除掉,这个做法就叫样式重置.
```
/* 清除标签默认的外边和内边距 */
body,p,h1,h2,h3,h4,h5,h6,ul{
margin:0px;
padding:0px;
}
/* 清除标签默认条目符号 */
ul{
list-style:none;
}
/* 将h标签的文字大小设置为默认大小 */
h1,h2,h3,h4,h5,h6{
/* 和父元素的字体一样大 默认16 */
font-size:100%;
/* 根据实际需求来加 */
font-weight:normal;
}
```
###05-行内元素的特点
-内联元素，也可以称为行内元素，布局中常用的标签如：a、span等等都是内联元素，它们在布局中的行为:
-1.宽高默认和内容决定
-2.排列在一行,当遇到父元素的边界会自动换行
-3.不支持宽高 margin上下 padding上下有问题
-4.代码换行后行内元素之间有小间隙
-5.行内元素设置文本水平对齐无效,但可以设置他们的父元素的text-align实现子元素水平对齐
###06-行内元素的样式重置
-其他内联元素"面试前最好看看它们的语义"
```
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;
}
```
-解决内联元素间隙的方法:
-1、去掉内联元素之间的换行
-2、将内联元素的父级设置font-size为0，内联元素自身再设置具体的font-size
###07-行内元素布局菜单案例
-行内元素设置文本水平对齐无效,但可以设置他们的父元素的text-align实现子元素水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-注册表单</title>
<style>
textarea{
/* 不让多行文本输入框调整大小 */
resize: none;
}
</style>
</head>
<body>
<!-- alt/option + shift + f 代码格式化/对齐-->
<h3>注册表单</h3>
<!-- 表单它的主要功能就是向服务器提交数据 -->
<!-- action属性用来设置提交数据的路径 -->
<!-- method属性默认不写就是get请求, post -->
<!-- name属性是用来提交数据的键 value是提交数据时候的值 -->
<form action="" method="">
<p>
<label for="">用户名:</label>
<input type="text" name="user">
</p>
<p>
<label for="">密 码:</label>
<input type="password" name="psw">
</p>
<p>
<label for="">性 别:</label>
<!-- 要想实现单选要给标签加一个name属性而且name的值要一样 键要一样 -->
<input type="radio" name="sex" checked value="0">男
<input type="radio" name="sex" value="1">女
</p>
<!-- checked 默认选中 -->
<p>
<label for="">爱 好:</label>
<input type="checkbox" checked>帅哥
<input type="checkbox">美女
<input type="checkbox">唱歌
<input type="checkbox">学习
</p>
<p>
<label for="">靓 照:</label>
<input type="file">
</p>
<p>
<label for="">籍 贯:</label>
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
</p>
<p>
<label for="">个人简介:</label>
<textarea rows="10" cols="10"></textarea>
</p>
<p>
<input type="submit" value="提 交">
<input type="reset" value="重 置">
<input type="button" value="普通按钮">
</p>
</form>
</body>
</html>
###08-行内块元素的特性
-内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
-1.元素排列一行
-2.宽度默认有内容决定
-3.元素间有默认间距
-4.支持宽高 marign padding等所有样式
-5.子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
-display属性是用来设置元素的类型及隐藏的，属性的值有：
-1、none 元素隐藏且不占位置
-2、block 元素以块元素显示
-3、inline 元素以内联元素显示
-4、inline-block 元素以内联块元素显示
###09-行内块分页导航案例
-把li和a都转换成inline-block
- 为了动态性,可以确定子元素的尺寸,父元素的尺寸有子元素撑起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02-搜索框案例</title>
<style>
/* 行内元素与行内元素之间默认有小间距问题 还有就是排在一行的元素默认以文字底部对齐 */
/* input标签弄出来的这些元素它们有默认的边框 默认的内边距 */
.searchbar{
width: 602px;
height: 42px;
/* background-color: gold; */
margin: 50px auto 0px;
}
.input_text{
width: 500px;
height: 40px;
border: 1px solid #10ad10;
/* 文字缩进 */
text-indent: 10px;
/* 文本输入框清除高亮效果 */
outline: none;
/* 清除文本输入框的默认内边距 */
padding: 0px;
float: left;
}
.sub{
width: 100px;
height: 42px;
background-color: #10ad10;
font-size: 20px;
color: white;
/* 此地用浮动解决了两个问题 清除了行内元素之间的默认间距 清除了文字底部对齐问题*/
float: left;
border: 0px;
padding: 0px;
cursor: pointer;
}
</style>
</head>
<body>
<form class="searchbar">
<input type="text" class="input_text" placeholder="请输入要搜索的内容">
<input type="submit" value="搜 索" class="sub">
</form>
</body>
</html>
###10-浮动元素的特性
-如果要实现子元素在父元素中水平居中时不能用浮动
- 元素浮动特点:
-1.只有左和右浮动
-2.浮动元素遇到父元素或其他元素都会停下来
-3.浮动后块元素也会排在一行,宽度会默认有内容决定,相邻元素一行排不下之后会自动换行
-4.块元素和行内元素浮动后会自动转换为浮动特性的行内块元素
-浮动可以解决的问题:
-1.行内元素及行内块元素之间间距问题
-2.垂直外边距不再合并
-3.margin-top塌陷问题
- 4.排列一行的元素默认以文字基线对齐的问题
