1.固定格式骨架
<!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>
</body>
</html>
2.<!-- -->注释文字，解释说明，不影响程序
3.<h1>–<h6>：HTML 区域标题元素
4.<br> 元素在文本中生成一个换行（回车）符号
5.<p> 元素表示文本的一个段落
6.<input>：输入（表单输入）元素
7.<label> 元素（标签）表示用户界面中某个元素的说明
8.<marquee> 元素用来插入一段滚动的文字
9.<select> 元素表示一个提供选项菜单的控件
10.<option> 用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项
11.::placeholder 表示 <input> 或 <textarea> 元素中的
占位文本
12.<textarea> 元素表示一个多行纯文本编辑控件
13.<button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方
14.<caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题
15.<tr>：表格行元素
16.<table>：表格元素
17.<title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。
18.<style>：样式信息元素
19.<style>：样式信息元素
20.<video>: 视频嵌入元素
21.<audio> HTML 元素用于在文档中嵌入音频内容
22.<ul>：无序列表元素
23.<li> 元素 （或称 HTML 列表条目元素）用于表示列表里的条目
24./* 访问前 */
a:link
/* 访问后 */
a:visited
/* 鼠标悬停时 */
a:hover
/* 鼠标点击时 */
a:active
25. /* 文字被选中时 */
ul li::selection {
background-color: pink;
}
27. width: 10px;
height: 10px;
高度宽度
28.background-color 会设置元素的背景色
29.color 属性设置元素的文本以及文本装饰的前景色
颜色值
30.font-size CSS 属性设置字体大小
31.font-weight CSS 属性指定了字体的粗细程度
32.text-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐
33.font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式
34.font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体
35.line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距
表单练习
<!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 />
<br />
密码：<input type="password" name="password" required>
<br />
<br />
性别：<label><input type="radio" name="sex" value="nan">男</label>
<label><input type="radio" name="sex" value="nv">女</label>
<br />
<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 />
<br />
邮箱：
<input type="email" name="email" placeholder="请输入你的邮箱">
<br />
<br />
用户头像：
<input type="file" multiple="multiple">
<br />
<br />
选择你喜欢的颜色：
<input type="color">
<br />
<br />
<input type="datetime-local">
<br />
<br />
省份：
<select name="province" multiple>
<option value="shanxi">陕西省</option>
<option value="guangdong">广东省</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<br />
<br />
所在地区：
<input type="text" placeholder="北京思密达" name="area">
<br />
<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 />
<br />
学历：
<input type="text" placeholder="幼儿园" name="xueli">
<br />
<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>
运行结果：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
