表格
<table border="10px" width="900px" height="400px" cellspacing="0"
<!-- 表头 rows 数据 data-->
table:border(只控制最外围大小)、width、height(tbody
值是底线,只高不低)、cellspacing(单元格与单元格之间的距离)
caption;通过css更改
thead、tr、tbody、tfoot:height\align(水平)\valign(垂直)
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- td 跨行:rowspan 跨列:colspan-->
<tbody>
<tr>
<td rowspan="2">XXX</td>
<td>男</td>
<td>18</td>
<td>汉</td>
<td>党员</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">共计:4人</td>
</tr>
</tfoot>
details
<!-- details:详情标签 配合summary使用 -->
<details>
<summary>有志青年</summary>
我们这里都是优秀的有志青年
</details>
tabindex
<!-- tabindex:让本不能tab遍历获取焦点的元素可以获取 可以为负数,0,正数-->
<input type="text">
<a href="#">去百度</a>
表单
<!-- 表单:网页交互区,收集用户信息
action:将数据交给谁处理
name:必有属性
method:提交方式 ajax
-->
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="color">
<input type="time">
<button>提交</button>
</form>
<form action="#">
<!-- 文本框 maxlength:最大长度-->
用户名:<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名:"><br />
<!-- 密码 -->
密码:<input type="password" name="pwd"><br />
<!-- 单选框 -->
<input type="radio" name="gender" value="nan">男
<input type="radio" name="gender" value="nv">女<br />
<!-- 多选框 label标签-->
<input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲
</label>
<label><input type="checkbox" name="food">吃臭豆腐</label>
<!-- checked默认选中 -->
<input type="checkbox" name="food" checked>吃肥肉
<!-- 隐藏域 -->
<input type="hidden" name="hid" value="南德斯才能使调查">
<!-- 确认按钮 -->
<!-- <button type="submit"></button> -->
<!--重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button">
<!-- 文本域 -->
<textarea cols="20" rows="10" maxlength="200
">
</textarea><br />
<!-- 下拉菜单 -->
<select name="jiguan" id="one">
<option value="南京">南京</option>
<!-- selected下拉菜单的默认选中 -->
<option value="成都" selected>成都</option>
<option value="西安">西安</option>
</select>
id身份证号,在一个页面中只能出现一次
class一类,可以出现多个.
全局属性
需要写在head中
<style>
.pink {
color: pink;
}
</style>
css的三中引入方式
1.内部样式<写在head里>
<style>
div{
width: 300px;
height:300px;
background-color:aquamarine;
}
</style>
2.行内样式
<div style="width:200px; height:200px; background-color:cornsilk;"></div>
3.外部结构
<!-- 外部样式 推荐!!!!! -->
<link rel="stylesheet" href="./14-样式.css">
基本选择器
1.标签选择器-选择所有所选择的标签
p
{
color:aqua;
}
2.id选择器
#box{
color:aqua;
}
3.类选择器
.box{
color:aqua;
}
4.通配符选择器
--选择所有标签
*{
color:aqua;
}
包含选择器
1.子代选择器--选亲儿子
.a>li{
color:aqua;
}
2.后代选择器--选全部后代
.a li{
color:aqua;
}
字体的样式
<style>
div {
cursor: pointer;
/* 字体大小 */
/* font-size: 40px; */
/* 字体粗细 */
/* font-weight: bold; */
/* font-weight: 900; */
/* 100-900 400===normal 800===bold 100-900越来越粗
font-weight: 400;*/
/* 字体是否倾斜 */
/* font-style: italic/normal; */
/* font-family: "微软雅黑"; */
/* italic 900可省略,字体大小,font-family必须存在 */
font: italic 900 70px "微软雅黑"
}
</style>
复合选择器
把多个元素选择出来相加
<style>
div,
p,
span {
color: red;
}
</style>
属性选择器
/* type^="te"以te开头 */
input[type^="te"] {
background-color: red;
}
input[type$="l"] {
background-color: green;
}
/* type*="e" type值里边包含e */
input[type*="e"] {
background-color: chartreuse;
}