HTML和CSS-基础(表单元素,css引入方式,css选择器)

一、表单元素
1、重置:

<input type="reset" value="重置">

2、隐藏域:

<input type="hidden" name="test" value="test">

3、下拉列表:

<select name="" id="">
            <!-- 分组 -->
            <optgroup>
                <!-- 每组中的数据 -->
                <option value=""></option>
                <option value=""></option>
                <option value=""></option>
            </optgroup>
</select>

4、数据源:
datalist标签
a.作⽤ : 给输⼊框绑定待选项

<input type="text" list="xxx">
<datalist id="xxx">
<option>xxx</option>
</datalist>

b.datalist格式 :

<datalist>
<option>待选项内容</option> </datalist>

5、200 OK:客户端请求成功。
     500 Internal Server Error:服务器发⽣不可预期的错误。
二、CSS引入方式
1、含义:CSS (Cascading Style Sheets) 层叠样式表,是⼀个⽤于修饰⽂档的语⾔,可以将⽂ 档以更优雅的形式呈现给⽤户。
2、内联样式:(优先级高;样式与结构冗余)

<div style=""></div>

3、内部样式表:

<style type="text/css">
选择器{
            属性名:属性值;
        } 
</style>

4、引入外部样式表:

<link rel="stylesheet" type="text/css" href="⽂件的路径"/>

三、css选择器
1、标签选择器:
    a.标签选择器选中的是当前界⾯中所有的标签, ⽽不能单独选中某 ⼀个标签
    b.标签选择器⽆论标签藏得多深都能选中
    c.只要是HTML中的标签就可以作为标签选择器
2、id选择器:
    a.每个HTML标签都有⼀个属性叫做id, 也就是说每个标签都可以设 置id
    b.在同⼀个界⾯中id的名称是不可以重复的
    c.在编写id选择器时⼀定要在id名称前⾯加上#

<style>
#id名称{
属性:值;
}
</style>

3、类选择器:

<style>
.类名{
属性:值;
}
</style>

4、后代选择器:
格式:

<style>
标签名称1 标签名称2{
属性:值;
}
</style>

a.后代选择器必须⽤空格隔开
b.后代不仅仅是⼉⼦ , 也包括孙⼦/重孙⼦ , 只要最终是放到指定标签中的都是后代
c.后代选择器不仅仅可以使⽤标签名称, 还可以使⽤其它选择器 4.后代选择器可以通过空格⼀直延续下去
5、子元素选择器:
格式:

<style>
标签名称1>标签名称2{
属性:值;
}
</style>

a.⼦元素选择器只会查找⼉⼦ , 不会查找其他被嵌套的标签 
b.⼦元素选择器之间需要⽤>符号连接, 并且不能有空格 
c.⼦元素选择器不仅仅可以使⽤标签名称 , 还可以使⽤其它选择器 
d.⼦元素选择器可以通过>符号⼀直延续下去
e.后代选择器和⼦元素选择器之间的区别?
-后代选择器使⽤空格作为连接符号 ⼦元素选择器使⽤ >作为连接符号
-后代选择器会选中指定标签中, 所有的特定后代标签, ⼦元素选择器只会选中指定标签中 , 所有的特定的直接标签
f.后代选择器和⼦元素选择器之间的共同点
-后代选择器和⼦元素选择器都可以使⽤标签名称/id名称/class名称来作为选择器
-后代选择器和⼦元素选择器都可以通过各⾃的连接符号⼀直延续下去
6、交集选择器:
格式:

<style>
选择器1选择器2{
属性: 值;
}
</style>

7、并集选择器:
格式:

<style>
选择器1,选择器2{
属性:值;
}
</style>

8、通配符选择器:
格式:

<style>
*{
属性:值;
}
</style>
  • 13
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值