Css样式属性
1.CSS设置文本样式
设置文本颜色：color: blue;
设置字体：font-family: 宋体;
设置字体风格：font-style: oblique;
设置文本加粗效果：font-weight: lighter;
控制文字字体大小：font-size: 18px;
控制文本字母大小写：text-transform: capitalize;
控制文本行高：line-height: 2;
控制文本显示的水平位置：text-align: center;
<style type="text/css">
p{
color: blue;
font-family: 宋体;
font-style: oblique;
font-weight: lighter;
text-transform: capitalize;
line-height: 2;
text-align: center;
}
</style>
2.CSS设置图片，背景
背景颜色，背景图片，图片是否平铺，图片是否跟随网页滚动，图片的位置
background: silver url(img.jpg) no-repeat fixed center;
图片的大小
background-size: 100px;
<style type="text/css">
body{
background: silver url(img.jpg) no-repeat fixed center;
background-size: 100px;
}
</style>
<body>
<div class="demo">
<img src="img.jpg" alt="图片挂掉了...">
</div>
</body>
表单
表单起到与网页访问者进行交互，与向服务器发送数据的作用，通常必须配合 JavaScript 或 服务端 使用，单独存在意义不大。
表单输入类型
表单两个重要标记：<form>，<input>。
<form> ：用来确定表单的范围。
<form action="用来指定发给谁，#表示当前页面"></form>
<input>：用来定义表单中的各个具体元素。
<input
type="决定元素类型"
name="相当于Map的Key，用于传送给服务器时识别哪个元素发过来的"
value="用于设定元素的预设值"/>
HTML5部分标签
<body>
<form action="#" method="get" autocomplete="on">
<table border="1px" width="40%" cellspacing="0px" cellpadding="10px"
align="center">
<tr>
<td colspan="2" align="center">基本信息填写</td>
</tr>
<tr>
<td>隐藏文本域</td>
<td>
<input type = "hidden" name = "hidden" value = "隐藏内容"/>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="inputName"
placeholder="输入姓名"
autofocus="autofocus"
required="required"
/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="inputPwd"
placeholder="输入密码"
pattern="[0-6]{6}[A-Z]"
title="密码由数字0~6，和最后一位大写字母组成"
required="required"/>
</td>
</tr>
<tr>
<td>多选</td>
<td>
<input type="checkbox" name="multiCheck" value="multi1"/>选项1
<input type="checkbox" name="multiCheck" value="multi2"/>选项2
<input type="checkbox" name="multiCheck" value="multi3"/>选项3
</td>
</tr>
<tr>
<td>单选</td>
<td>
<input type="radio" name="singleCheck" value="single1"/>选项1
<input type="radio" name="singleCheck" value="single2"/>选项2
<input type="radio" name="singleCheck" value="single3"/>选项3
</td>
</tr>
<tr>
<td>下拉选择</td>
<td>
<select name="downSelect">
<option value="down1">选择1</option>
<option value="down2">选择2</option>
<option value="down3">选择3</option>
</select>
</td>
</tr>
<tr>
<td>自动补全</td>
<td>
<input type="text" list="autoList"/>
<datalist id="autoList" style="display: none;">
<option value="beijng">北京</option>
<option value="shanghai">上海</option>
</datalist>
</td>
</tr>
<tr>
<td>网址Url</td>
<td>
<input type="url" name="url"/>
</td>
</tr>
<tr>
<td>文本域</td>
<td>
<textarea name="textarea" rows="5" cols="20"></textarea>
</td>
</tr>
<tr>
<td>上传文件,允许多个上传</td>
<td>
<input type="file" multiple="multiple"/>
</td>
</tr>
<tr>
<td>颜色选择</td>
<td>
<input type="color"/>
</td>
</tr>
<tr>
<td>日期</td>
<td>
<input type="date"/>
</td>
</tr>
<tr>
<td>搜索框</td>
<td>
<input type="search" placeholder="输入搜索内容"/>
</td>
</tr>
<tr>
<td>邮件</td>
<td>
<input type="email" placeholder="输入邮件地址"/>
</td>
</tr>
<tr>
<td>号码</td>
<td>
<input type="number" placeholder="输入号码"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
效果
网友评论