<!DOCTYPE html>
<html>
<head>
<title>简单html第二天</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--在css里面的注释只能是/**/-->
<style type="text/css">/*在html5中 type可以不写*/
h3{background-color: red;}/*所有h3标题的背景色*/
body{font-family: '微软雅黑','文泉驿正黑' }/*设置body里面的字体是微软雅黑，要是没有字体就是文泉驿正黑*/
/*选择器可分为 元素选择器，类选择器，id选择器，分组选择器，派生选择器， 伪类选择器*/
/*元素选择器*/
p{color: blue; }/*p里面的所有字体是蓝色，也可以设置背景色*/
/* 选择器组：对一组选择结果统一设置样式效果*/
h5,h6{
border: 1px solid black;
}
/*id选择器*/
#choseid{
color: red;
background: yellow;
}
/* 类选择器 .demo*/
.demo{
color: red;
font-size: 2pt;
}
/*类选择器和元素选择器可以层叠使用*/
p{
background-color: pink;
}
p.error{/*选择p元素class属性是error的*/
color: red;
border: 1px solid red; /*添加边框*/
}
h3 span{
color: yellow;
}
.list li{/*选择类是list的元素，全部li子孙*/
color: blue;
}
.list > li{/*选择类是list的元素，全部li孩子中不包括孙子，指第一次孩子*/
color: green;
}
</style>
<!--href连接的文件必须是以css类型文件，且编码与目标一致，link是用来外联式样，用外联式样的好处就是不用改代码，该css文件就行，方便-->
<link rel="stylesheet" type="text/html" href="style.css">
</head>
<body>
<!--css有三个特点继承性（内部元素继承外部元素的css样式），层叠性（多个样式叠加作用在一个元素上：p元素叠加了字体，背景色，前景色），优先级-->
<h3>测试h3背景色</h3>
<!--下面p段落里的字体没有按照style里面规定的颜色显示，这是因为与p自定义的颜色发生冲突，就采取”就近原则“-->
<p style="background-color:yellow; ">测试内联样式（只能作用在当前元素上），p背景色，</p>
<h4>外联测试link连接，形式和h3的一样</h4>
<h5>测试组选择器</h5>
<p id="choseid">id选择器</p>
<h6>测试组选择器</h6>
<p class="demo">类选择器</p>
<ul class="list">
<li>第一层
<ul>
<li>第2层
<ul>
<li>第3层</li>
<li>第3层</li>
</ul>
</li>
<li>第2层</li>
</ul>
</li>
<li>第一层
<ul>
<li>第2层</li>
<li>第2层</li>
</ul>
</li>
</ul>
<h1>复杂表格</h1><!--复杂表里面用了thead，tbody，tfoot，是为了让结构看起来更加清晰-->
<table border="1">
<thead >
<tr><!--下面的th替换了td，自动加粗居中-->
<th rowspan="2">编号</th><!--rowspan表示跨了几行-->
<th colspan="4">商品</th><!--colspan表示跨了几列-->
</tr>
<tr>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>屠龙刀</td>
<td>2.00</td>
<td>1</td>
<td>2.00</td>
</tr>
<tr>
<td>1</td>
<td>倚天剑</td>
<td>2.00</td>
<td>1</td>
<td>2.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">合计</td>
<td>4.00</td>
</tr>
</tfoot>
</table>
<h1>表单演示</h1>
<form method="post">
<h2>注册用户</h2>
<!-- input是行内块，name是给服务器使用的属性，value是默认数据。发送给服务器的数据-->
<!--maxlength规定了长度-->
<!--文本输入的类型时text，密码类型时password-->
<p>用户名<input type="text" maxlength="10" name="username" value="su"></p>
<p>密码<input type="password" maxlength="10" name="pws"></p>
<!--radio类型表示只能选择其一，单选。checkbox类型表示多选-->
<p>性别<input type="radio" name="sex" value="nan">男<input type="radio" name="sex" value="woman">女</p>
<p>角色<input type="checkbox" name="char" value="student">学生<input type="checkbox" name="char" value="teacher">老师</p>
<!--除了上述类型外。file是任意类型，指的是需要放入的文件-->
<p>照片<input type="file" name="image"></p>
<p>是否公开<!--radio类型中 name的内容必须一致 id与lable for搭配使用，属性的内容必须一致，这样就能进行自动关联-->
<input type="radio" name="public" id="pub"><label for="pub">公开
<input type="radio" name="public" id="pri"><label for="pri">保密
</p>
<p>选择课程<!--select是行内块，与option搭配使用，size=1,是下拉框，size>1,是列表框-->
<select name="course" size="1">
<option value="1">javase</option> <!--value与实现效果无关，selected加在value，则默认显示的就是有selected的-->
<option value="2">javame</option>
<option value="3">javaee</option>
</select>
</p>
<p>多行文本框<br>
<textarea name="memo" id="" cols="30" rows="10">自我介绍</textarea>
</p>
<p>
<fieldset ><!--分组控件，这个基本不用-->
<legend>地址信息</legend><!--为分组指定一个标题-->
地址：<input type="text"><br>
邮编：<input type="text">
</fieldset>
</p>
<div>
<input type="submit" value="保存">
<input type="reset" value="重填">
<input type="button" value="空白">
</div>
<input type="hidden" name="loc" value="大家好"><!--向服务器发送隐藏数据-->
</form>
</body>
</html>
扫一扫
08-06
3万+
3万+
02-10
1816
1816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
