html内容
一.列表
-
无序列表
<!-- type属性值:dist, h5已经弃用属性--> <ul type="序号类型"> <li></li> <li></li> </ul>
-
有序列表
<!-- type属性值:1(默认),a,A,i--> <ol type="序号类型" start='起始值'> <li></li> <li></li> </ol>
-
嵌套列表
二.表格
<table width="400px" height="250px" border="1" align="center">
<!-- caption标签表格标题 -->
<caption>员工信息表</caption>
<thead class="top">
<tr>
<!-- th标签>表格头部内容,默认居中和加黑 -->
<th id="num">编号</th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
</thead>
<!-- tbody身体表格内容 -->
<tbody>
<tr>
<td>0001</td>
<td>0001</td>
<td>0001</td>
<td>0001</td>
</tr>
</tbody>
</table>
table属性:
- border:表格边框
- align: 对齐方式
td属性:
- rowspan:跨行合并(属性值–number)
- colspan: 跨列合并
三.表单
1.input控件
<!-- 表单内容被包含在form标签中 -->
<form action="跳转路径" method="请求方式">
<input type="属性值" name="" id="" value="">
</form>
from属性:
- action: 跳转路径
- method:跳转方式
- get
- post
- delete
type属性值:
-
text: 输入文本
-
password: 密码框
-
radio–单选框
-
checkbox—复选框,可多选
-
number—数字
-
date—日期
-
image—图片
-
submit—注册
-
button—按钮
button属性与button的不同:
- button会提交表单内容
-
reset—重置
-
hidden—隐藏表单域,隐藏id
name属性值:
- 对应相应value的属性值
- 复选框/单选框的多个name值相同
举例:
<input type="checkbox" name="hobby" value="bsk" id="">篮球
<!-- 地址栏hobby=bsk-->
2.下拉菜单select
<!--
下拉菜单:
1.selectde的name属性值接受对应选项option的value属性值
2.select选项设置默认值使用selected属性值,区别于checked
-->
<select name="city" id="">
<option value="1">南京</option>
<option value="2" selected>上海</option>
<option value="3">成都</option>
</select>
3.文本区域textarea
<textarea name="" rows="5" cols="30" id=""></textarea
属性:
- rows—文本区域行数(属性值: number)
- cols—列数
4.标注label
<label for="标注内容的id值">内容</label>
举例:
<!-- for属性值===控件的id属性值 -->
<input type="radio" name="sex" id="msex" value="m" checked><label for="msex">男</label>
CSS内容
一.定义:
层叠样式表,一种修饰html文件里元素的计算机语言;
<!--引用方式-->
<style>
选择器{
属性:属性值;
}
</style>
二.选择器类型
-
标签选择器: p,a,img…
-
类选择器:
<!--.top就是类选择器--> <thead class="top"></thead>
-
id选择器:
<!--#top就是id选择器--> <thead id="top"></thead>
三.字体属性
font-style:指定文本字体样式(值:normal,italic)
font-variant:指定文本是否为小型的大写字母
font-weight:指定文本字体的粗细(值:normal(400),bold,bolder(700).light,lighter)
font-size:指定文本字体尺寸
line-height:指定文本字体的行高
font-family:字体类型
color:字体颜色
1.单词颜色表示
2.rgb(num1,num2,num3)
3.十六进制表示---例子:#0000ff
四.文本样式
/* 字母间隔 */
letter-spacing: 3px;
/* 单词间隔 */
word-spacing: 5px;
/* 行高 */
line-height:num;
/*去除文本下划线*/
text-decoration: none;
五.文本对齐方式
text-align:left|center|right;