本文详细介绍了HTML中的各种标签（如<h1>到<video>）、CSS样式应用、表单元素（包括文本输入、单选/多选、文件上传等）以及基本的交互设计，如按钮、链接和选择器。通过实例展示了用户注册表单和五彩导航的实现。
固定格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
标题标签 <h1>--<h6>
段落标签 <p><p/>
换行标签 <br><br/>
水平线标签 <hr><hr/>
加粗标签
<b>加粗内容</b>
<strong>加粗内容</strong>
斜体标签
<i>斜体内容</i>
<em>斜体内容</em>
视频标签
<video src="视频路径"></video>
音频标签
<audio src="音频路径"></audio>
超链接
<a herf="跳转目标" target="目标窗口的弹出方式"></a>
锚点链接
<a href="#id名"></a>
列表：
无序列表 有序列表 定义列表
表单笔记：
1.<!--普通输入框--> <!--name属性-->
<input type="text" name="usename">
2.<!--密码框 required：设置为必填项-->
<input type="password" name="password" required maxlength="6" >
3. <!--单选项-->
<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv" required>女
4.<!--多选项-->
<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
5.<!--上传文件-->
<input type="file" name="touxiang" >
6.<!--按钮-->
<input type="submit" >
<!--<button>点击<button>-->
7.<!--重置-->
<input type="reset">
选择器：
基本选择器：类选择器，标签选择器，id选择器，通配符选择器
表单练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<h1>用户注册</h1>
<form action="">
用户名：
<input type="text" placeholder="请输入你的真实姓名" maxlength="6" name="usename"><input type="text" value="zhangsan" disabled>
<br />
密码：
<input type="password" name="password" required>
<br />
性别：
<label><input type="radio" name="sex" value="nan">男</label>
<label><input type="radio" name="sex" value="nv">女</label>
<br />
爱好：
<label><input type="checkbox" value="wirte" name="hobby">写作</label>
<label><input type="checkbox" value="dance" name="hobby">听音乐</label>
<label><input type="checkbox" value="r" name="hobby">体育</label>
<br />
邮箱：
<input type="email" name="email" placeholder="请输入你的邮箱">
<br />
用户头像：
<input type="file" multiple="multiple">
<br />
选择你喜欢的颜色：
<input type="color">
<br />
<input type="datetime-local">
<br />
省份：
<select name="province" multiple>
<option value="shanxi">陕西</option>
<option value="guangdong">广东</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<br />
所在地区：
<input type="text" placeholder="北京思密达" name="area">
<br />
婚姻状况：
<label><input type="radio" name="hunyin" value="weihun" checked>未婚</label>
<label><input type="radio" name="hunyin" value="yihun">已婚</label>
<label><input type="radio" name="hunyin" value="lihun">离婚</label>
<br />
学历：
<input type="text" placeholder="幼儿园" name="xueli">
<br />
自我介绍：
<textarea name="jieshao" cols="30" rows="10" placeholder="自我介绍一下吧"></textarea><button>提交</button>
<input type="reset">
</form>
</body>
</html>
五彩导航练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wucai a{
display:inline-block;
width: 120px;
height: 60px;
background-color: aqua;
text-align: center;
color: blue;
line-height: 50px;
text-decoration: none;
}
.wucai .wucai1{
background-color: rgb(231, 231, 81);
}
.wucai .wucai1:hover{
background-color: rgb(235, 247, 212);
}
.wucai .wucai2{
background-color: rgb(134, 23, 151);
}
.wucai .wucai2:hover{
background-color: rgb(91, 126, 19);
}
.wucai .wucai3{
background-color: rgb(228, 144, 17);
}
.wucai .wucai3:hover{
background-color: rgb(188, 13, 13);
}
.wucai .wucai4{
background-color: rgb(75, 67, 227);
}
.wucai .wucai4:hover{
background-color: rgb(17, 157, 217);
}
</style>
</head>
<body>
<div class="wucai">
<a href="#" class="wucai1">五彩导航</a>
<a href="#" class="wucai2">五彩导航</a>
<a href="#" class="wucai3">五彩导航</a>
<a href="#" class="wucai4">五彩导航</a>
</div>
</body>
</html>
扫一扫
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
