HTML基本属性
1.基本属性：
大多数
比如id属性，相当于身份证编号，用于区分HTML标签
<input type="text" id="one"/>
<input type="text" id="two"/>
比如 name属性，相当于人名字，允许一组标签拥有相同name
<input type= "text" id="one" name="myText"/>
<input type= "text" id="two" name="myText"/>
2.样式属性：
<div style="width:3;height:30;background-color:green;font-size:50;color:red">
我是一个div
</div>
3.工作状态属性：
只存在于【表单域标签】中，用于表示【表单域标签】状态
checked：存在于radio与checkbox中，表示标签是否被选中
disable：表示标签处于不可以用状态
readOny：表示标签处于只读状态
seleteced：存在option标签，表示标签是否被选中 （如下）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<form action="http://www.baidu.com">
籍贯：<select name="home">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="tj">天津</option>
</select><br/>
<input type="submit" /><input type="reset" />
</form>
</center>
</body>
</html>
4.监听属性：
监听属性用户与HTML标签之间进行通信通道，监听属性用于监听用户在何时对标签进行何总操作，
当指定操作产生时，监听属性将会通知浏览器调用对应JavaScript方法处理当前请求
<!DOCTYPE html>
<html>
<script type="text/javascript">
function fun1(){
var myDIV = document.getElementById("one");
myDIV.style.width="500";
myDIV.style.height="500";
myDIV.style.backgroundcolor="red";
myDIV.innerText="不要嘛！"
}
</script>
<center>
<div id="one"
style="width:300;height:300;background-color:pink;font-size: 30;color: green;"
onmouseover="fun1()"
>
一个开心的小妹妹
</div>
</center>
</html>
CSS编程语言的作用
CSS选择器：
1.介绍：
css选择器，实际上就是一组定位条件用于定位HTML标签。
css选择器有9个大的分类
2.CSS选着器语法格式：
<html>
<head>
<!--type='text/css'，-->
<style type="text/css">
定位条件{
“样式属性1”:"值1";
"样式属性2":"值2"
}
</style>
</head>
<html>
ID选择器
1.语法：
<html>
<head>
<style type="text/css">
#one{
font-size:150;
color:red
}
</style>
</head>
<body>
<p id="one">
这是第一段
</p>
<p id="two">
这是第一段
</p>
</body>
</html>
标签类型选择器：
1.语法：
<html>
<head>
<style type="text/css">
div{
font-size:150;
height: 100;
background-color:green;
border:2px solid yellow;
}
p{
color:red;
font-size: 140;
}
</style>
</head>
<body>
<div>这是第一个DIV</div>
<p>这是第一个段落标签</p>
<div>这是第二个DIV</div>
<p>这是第二个段落标签</p>
<div>这是第三个DIV</div>
<p>这是第三个段落标签</p>
</body>
</html>
层级选择器
1.HTML标签之间关系：
父子关系
兄弟关系
2.父子关系：
既包含关系
<tr>
<td>
<input type= "text">
</td>
</tr>
td标签是tr标签的子标签
input标签是td标签的子标签
3.兄弟关系：
一组标签拥有相同的父标签，并且彼此之间没有任何包含关系，即为兄弟
<body>
<div>1</div>
<p>2</p>
<span>3</span>
</body>
4.层级选择器介绍：
根据标签之间父子关系或者兄弟关系进行定位
5.简单的层级选择器
<style type="text/css">
定位父标签条件 定位子标签条件{
}
找到指定父标签下满足条件的所有子标签
</style>
<html>
<head>
<style type="text/css">
#one p{
font-size: 30;
color: red;
}
</style>
</head>
<body>
<div id="one">
<p>这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>
<p>这是第四个段落标签</p>
<p>这是第五个段落标签</p>
<span>span1</span>
</div>
<div id="two">
<p>这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>
<p>这是第四个段落标签</p>
<p>这是第五个段落标签</p>
<span>span1</span>
</div>
</body>
</html>
自定义选择器
1.介绍：
如果一组HTML标签之间没有相同的特征，但是却需要对指定属性值相同内容，此时将自定义选择器绑定到对应标签上
2.语法：
<style type="text/css">
.自定义选择器名{
color：red;
}
</style>
<div class="自定义选择器名"></div>
<p class="自定义选择器名"></p>
<html>
<head>
<style type="text/css">
.two {
color: red;
}
</style>
</head>
<body>
<div id="one">
<p>这是第一个段落标签</p>
<p class="two">这是第二个段落标签</p>
<p>这是第三个段落标签</p>
<span>span1</span>
</div>
<div id="two">
<p>这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>
<span class="two">span1</span>
</div>
</body>
</html>
1145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
