笔记:
骨架:
<!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>
- 需要有包裹的内容,用双标签,不需要包裹内容就可以完成的操作用单标签
- 标签之间的关系只有父子关系和兄弟关系
- 标题标签只有h1-h6,且大小依次递减,独占一行
- 在段落标签“<p> </p>”里进行换行,只会在浏览器里面多一个空格,段落与段落之间默认存在空隙。
- 换行<br>,水平线<hr>
- <a></a>点击跳转
- 音乐:audio,视频:video
- <input>:输入(表单输入)元素
- <!-- -->注释文字,解释说明,不影响程序
- <label> 元素(标签)表示用户界面中某个元素的说明
- <marquee> 元素用来插入一段滚动的文字
- <select> 元素表示一个提供选项菜单的控件
- <option> 用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项
- placeholder 表示 <input> 或 <textarea> 元素中的占位文本
- <li> 元素 (或称 HTML 列表条目元素)用于表示列表里的条目
- <textarea> 元素表示一个多行纯文本编辑控件
- <button> 元素表示一个可点击的按钮,可以用在表单或文档其他需要使用简单标准按钮的地方
- <caption> 元素展示一个表格的标题
- <tr>:表格行元素
- <table>:表格元素
- <title> 元素 定义文档的标题,显示在浏览器的标题栏或标签页上。
- <style>:样式信息元素
- <ul>:无序列表元素
- background-color 会设置元素的背景色,color 属性设置元素的文本以及文本装饰的颜色值
- font-size 设置字体大小
- font-weight 指定了字体的粗细程度
- text-align 设置块元素或者单元格框的行内内容的水平对齐
- ont-style 允许选择 font-family 字体下的 italic 或 oblique 样式
- font-family 允许通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体
- line-height 用于设置多行元素的空间量,如多行文本的间距
表格:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>用户注册</h1>
<from action="">
用户名:<input type="text" name="usename">
<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" name="hobby">写作</label>
<label><input type="checkbox" name="hobby">听音乐</label>
<label><input type="checkbox" name="hobby">体育</label>
<br />
省份:<select name="city" >
<option value="shanxi"selected>陕西</option>
<option value="guangzhou">广州</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
</select>
<br />
自我介绍:<textarea name="liuyan" cols="10" rows="10" maxlength="10" placeholder=""></textarea>
<br />
<button>提交</button>
<button>重置</button>
五彩导航:
<!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: rgb(255, 132, 0);
line-height: 50px;
text-decoration: none;
}
.wucai .wucai1{
background-color: rgb(156, 156, 22);
}
.wucai .wucai1:hover{
background-color: rgb(169, 206, 100)
}
.wucai .wucai2{
background-color: rgb(225, 176, 233);
}
.wucai .wucai2:hover{
background-color: rgb(163, 231, 25);
}
.wucai .wucai3{
background-color: rgb(17, 200, 228);
}
.wucai .wucai3:hover{
background-color: rgb(188, 13, 13);
}
.wucai .wucai4{
background-color: rgb(75, 67, 227);
}
.wucai .wucai4:hover{
background-color: blanchedalmond;
}
</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>