一、表单标签
二、div和span
三、css基础
四、css选择符
五、组合选择器
六、伪类选择符
一、表单标签
1.表单标签（form）
表单标签是用来收集在这个标签内的信息
name属性：区分不同的表单
method：表单中信息的提交方式。一般用get或者post
<form name="userInfo" method="get/post" action="">
属性与属性之间用空格隔开
2、input标签
<input type="text" name="username" value="用户名" placeholder="请输入用户名" readonly="readonly" />
input标签是单标签，在需要使用value值时，将input放在form标签中。
type：不同的值对应不同的信息
value：具体的值
placeholder：占位符
a、文本框输入
value就是输入框中输入的内容
placeholder在input作为文本输入框的时候才有用
maxlength:设置输入框能输入最多的字符的个数
<input type="text" name="username" value="用户名" placeholder="请输入用户名" readonly="readonly" />
<!-- 密码输入框 -->
<input type="password" name="password" value="123456" placeholder="请输入密码" maxlength="8" />
b、单选按钮
name属性必须设置，并且同一组选项的name的值必须一样
设置value属性用于提交信息
checked属性的值设置为checked让按钮处于选中状态
<input type="radio" name="sex" value="boy" checked="checked" /><span>男</span>
<input type="radio" name="sex" value="girl"/><span>女</span>
c、复选框
name属性必须设置，并且同一组选项的name的值必须一样
设置value属性用于提交信息
checked属性的值设置为checked让按钮处于选中状态
普通按钮
<input type="button" value="获取验证码" disabled="disabled" />
图片提交按钮
<input type="image" src="./images/luffy2.png"></input>
文件域
<input type="file" name='icon'></input>
提交按钮：将表单中的内容以name=value的形式进行提交，提交到form标签中的action属性对应的地址下面
<input type="submit">
重置按钮：对所在的表单中的内容进行重置(回到最初的状态)
<input type="reset">
3、select标签
下拉菜单
selected:通过属性值设置为selected，设置默认选项
<select name="nation">
<option>Ameican</option>
<option>Australia</option>
<option selected="selected">Japan</option>
</select>
4、多行文本框（textarea）
a.常规标签
b.输入框里面的内容，在标签的内容中设置
c.rows：设置一屏能看到最多的行数
d.cols: 设置列数
<textarea name="yijian" cols="10" rows="5">意见...</textarea>
二、div和span标签
1、div标签
div标签是一个无语义的标签，主要是用来对网页的内容进行分块管理。是块标签
2、span标签
文本结点。需要在一些特点的标签后面显示一些说明性文字时使用
<span>用户名:</span><input type="text"></input>
三、css基础
1、css语法
选择符{属性:属性值; 属性:属性值;}
说明：
a.选择符: 确定设置样式的对象
b.属性： 属性是CSS的核心，确定需要修改的是什么样式。CSS中有大概150多个属性
c.属性值： 属性对应的具体的值。注意：大小相关的值是整数+px
常用的属性：color(字体颜色)、background-color(背景颜色)、width(宽度)、height(高度)
2、样式的创建
a. 内联样式
将样式表写在标签内部作为标签的属性值(style属性),style属性的值中是CSS代码
b. 内部样式
将样式表写在head标签中style标签中
c. 外部样式
将样式表写在一个css文件中(后缀是.css的文件)，在html中通过link标签去引入。
四、css选择符
选择符的作用:获取需要设置样式的标签对象
CSS的选择符有十几种，包括：属性(元素)选择符、id选择符、class选择符、通配符、群组选择符、包含选择符、伪类选择符等
五、组合选择器
1、群组选择符
通过逗号将不同的单选择符连接在一起作为选择符。同时选中所有用逗号分开的的选择符
h1,#p1,.text{
background-color: yellow;
}
2、包含选择器
通过空格将不同的单选择符连接在一起作为选择符。
通过前面的选择符依次往后面查到被包含的选择符，直到找到最后一层为止，最后一层的选择符才是最终被选中的标签
div div p{
color: red;
}
div .text{
font-size: 40px;
}
</style>
</head>
<body>
<div>
<div>
<h1>我是标题</h1>
<p id="p1">我是段落1</p>
</div>
<p>我是段落2</p>
<div>
</div>
</div>
<p class="text">我是段落4</p>
<div>
<div>
<p>我是段落3</p>
</div>
<p class="text">我是段落2</p>
<img src="images/luffy2.png">
</div>
</body>
</html>
六、伪类选择符
语法：选择符:固定的状态{属性:属性值;属性:属性值}
固定的状态只有:link、visited、hover、active
伪类选择符一般用来给标记的不同的状态设置不一样的样式，一般用于a标签和按钮标签(button);语法上所有的标签都能使用
a:link{} - 初始状态,一次都没有访问成功过的状态
a:visited{} - 访问后的状态
a:hover{} - 鼠标悬停的时候的状态
a:active{} - 鼠标按住不放的状态
伪对象选择符: 和伪类选择符差不多，唯一的区别就是冒号前面不是指向所有相同类型的标签，而是某一个(部分)标签
伪类(对象)选择符需要遵守爱恨原则(LoVe HAte): 在同时设置多个状态的样式的时候，设置的顺序必须按照LoVeHAte的先后顺序来
font-size: 15px;
/*去掉下滑线*/
text-decoration: none;
}
/*伪类选择符*/
/*a:link{
color: gray;
}
a:visited{
color: green;
}
a:hover{
color: red;
font-size: 20px;
}
a:active{
color: yellow;
}*/
/*伪对象选择符*/
/*#a1:hover{
background-color: yellow;
}*/
/*div a:hover{
background-color: green;
}*/
p:hover{
background-color: green;
}
p:active{
background-color: pink;
}
</style>
</head>
<body>
<a href="https://www.hao123.com">百度一下</a>
<div>
<a id="a1" href="http://www.iqiyi.com">爱奇艺</a>
</div>
<p>我是段落</p>
</body>
</html>
网友评论