笔记
标题<h1>—<h6>
段落<p>
换行<br/>
水平线<hr/>
加粗标签:
<b>加粗内容</b>
<strong>加粗内容</strong>
斜体标签:
<i>斜体内容</i>
<em>斜体内容</em>
视频标签:
<video src="视频路径"></video>
音频标签:
<audio src="音频路径"></audio>
超链接及锚链接的相关属性:
<a href="abc.html" target="_blank"> 点击进入新的页面</a>
href:链接地址
target:目标窗口在何处打开
_blank:保留原页面 在新窗口打开
<a name=“锚点名称”>锚(显示在页面上的文本)</a>
<a href=“#锚点名称”>……</a>
-id属性是一个全局属性
因此在各类的标签中添加一个id名,则可以使用锚链接快速定位到目标内容
在网页中使用内联框架:
<iframe>标签的常用属性是:
src:文件的路径
width: “内联框架”区域的宽度
height:“内联框架”区域的高度
frameBorder:设置是否显示框架的边框。(1,0)
name:框架的名字,用来进行识别。
<iframe src="" width="" height="" frameborder="" name=""></iframe>
插入表格及简单样式修饰:
<tr></tr>:
1. 成对出现 2. 嵌套于<table></table>标签内,用来定义一行
<th></th>:
1. 成对出现 2. 嵌套于<tr></tr>标签内,用来定义表头
<td></td>:
1. 成对出现 2. 位于<tr></tr>内,用来定义一个单元格
插入表单及简单样式修饰:
标签:<form action="" method=""> </form>
action:规定当提交表单时向何处发送表单数据 值:URL
method:规定用于发送 form-data 的 HTTP 方法。 值:get/post
标签:<input type=".." name=".." >
text
password
radio
checkbox
file
submit
button
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"><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>