1.效果展示
2.代码以及知识详细解读
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document文档标题</title>
<style type="text/css">
input{
border: 1px solid #95;//设计边框
}
*{
margin: 0;//上下间距留白
padding: 0;//左右间距
}
ul{
list-style:none;//不在ul框定的事物前添加东西
}
li{
margin: 0 10px;//左侧0右侧10像素
float: left;//从左往右排列
color: #f40;
front-weight: bold;//字体加粗
front-size: 14px;
height: 25px;//背景框高度
line-height: 25px;//字体高度
padding: 0 5px;
}
li:hover{//hover指鼠标点击时候的效果
border-radius: 15px;//加圆框
background-color: #f40;
color: #fff;
}
</style>
</head>//头部写给编辑器看,所以里面的东西是全局的
<body>//写给用户
h${标题}*6//想实现一下子出现6个标题的效果,但是按tab之后没反应
h$@-*3//同上
<p>//段落标签
<strong>//黑体
<em>标题</em>//斜体
</strong>
</p>开始<hr>//hr:加横线
<div style="width:100px;height: 100px;background-color:red;">芜湖,空格代表文本分隔符</div>//div是个容器,方便管理
空格 空格
讲解一个标签div,<div>
换行:
a<br>b a<br><br><br><br><br>b
单字符:br,hr
一条线<hr><hr>
电影
<ol type ='A' start=2 reversed ="reversed">1/a/A/i/I
<li>evil</li>
<li>death</li>
<li>live</li>
//ol排列,用的少,type只有五种:1/a/A/i/I---从B开始,倒着排列
</ol>
<ul type="circle">
<li>天猫</li>
<li>天猫超市</li>
<li>聚划算</li>
//形式上为横着排列,具体看head里面的li??
</ul>
<hr><hr>
引入图面的3个方式
1.网上url
2.本地相对路径
3.本地绝对路径
4.alt:网页出错/title:鼠标平移
<img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">
<hr><hr>
a--anchor--锚
a标签的作作用:
1.超链接
2.锚点
3.打电话(、发邮件应用不多)
4.协议限定符
1:<br>
<a href="http://www.baidu.com">www.baidu.com</a>//正常
<a href="http://www.baidu.com">www.taobao.com</a>//搞笑
<a href="https://baike.baidu.com/item/%E6%B1%89%E5%B0%BC%E6%8B%94/6968678?fr=aladdin" style="width:100px;height:100px:background-color:red;display: block" target="_blank_"><img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">点击图片或文字跳转页面百度百科</a>
<a href="http://www.baidu.com"target="_blank_">www.baidu.com</a>
<div id="demo1"style="width:100px;height:100px;background-color:green;">demo1</div>
2:<br>
<div id="demo2"style="width:100px;height:100px;background-color:red;">demo2</div>
<a style="
display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #fcc;" href="#demo1">find demo1</a>
<a style="
display: block;position: fixed;bottom: 150px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #ffc;" href="#demo2">find demo2</a>
3:<br>
<a href="tel:156**4074**">给悦姐打电话</a>
<a href="mailto:heshuichifan20****@163.com">给悦姐发邮件</a>
4:<br>
<a href="javascript:while(1){alert('让你手欠')}">点我~ come on! 来呀!
</a>
<hr><hr><hr>
<form method="get" action="">method发送数据的方式,action发送数据的对象
<br>本来
username:<input type="text" name="username">//有type,有name才能实现提交功能
password:<input type="password" name="登录">
---------加一个回车--------
username:<input type="text">
<br>
password:<input type="password">
<br>
---------空格新格式--------
<p>
username:<input type="text" name="username">
</p>
<p>
password:<input type="password" name="登录">
</p>
<input type="submit" value="登录/login">
<hr><hr><hr>
//单选题,用name表示这是同一道题
喜欢的歌曲:
<input type="radio" name="star">ouu
<input type="radio" name="star">liknm
<input type="radio" name="star">m
//name已经被占用了怎么办?使用value,这个val和前面的name是一个功能
<input type="radio" name="star1" value="123">ouu
<input type="radio" name="star1" value="1256">liknm
<input type="radio" name="star1" value="5469">m
<input type="submit" value="提交/submit">
<hr><hr><hr>
<p>//实现搜索框功能:1)初始状态框内文字为浅灰色-请输入用户名
2)鼠标聚焦搜索框后文字消失,且保存框内的内容
username:<input type="text" name="username",style="color:#999"
value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}"onblur="if(this.value==''){this.value='请输入用户名'}">
</p>
</form>
</body>
</html>
不加注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style type="text/css">
input{
border: 1px solid #95;
}
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
li{
margin: 0 10px;
float: left;
color: #f40;
front-weight: bold;
front-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 5px;
}
li:hover{//hover
border-radius: 15px;
background-color: #f40;
color: #fff;
}
</style>
</head>
<body>
h1*6
h$@-*3
<p>
<strong>
<em>标题</em>
</strong>
</p>开始<hr>
<div style="width:100px;height: 100px;background-color:red;">芜湖,空格代表文本分隔符</div>
空格 空格
讲解一个标签div,<div>
换行:
a<br>b a<br><br><br><br><br>b
单字符:br,hr
一条线<hr><hr>
电影
<ol type ='A' start=2 reversed ="reversed">1/a/A/i/I
<li>evil</li>
<li>death</li>
<li>live</li>
</ol>
<ul type="circle">
<li>天猫</li>
<li>天猫超市</li>
<li>聚划算</li>
</ul>
<hr><hr>
引入图面的3个方式
1.网上url
2.本地相对路径
3.本地绝对路径
4.alt:网页出错/title:鼠标平移
<img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">
<hr><hr>
a--anchor--锚
a标签的作作用:
1.超链接
2.锚点
3.打电话(、发邮件应用不多)
4.协议限定符
1:<br>
<a href="http://www.baidu.com">www.baidu.com</a>
<a href="http://www.baidu.com">www.taobao.com</a>
<a href="https://baike.baidu.com/item/%E6%B1%89%E5%B0%BC%E6%8B%94/6968678?fr=aladdin" style="width:100px;height:100px:background-color:red;display: block" target="_blank_"><img src="C:\Users\vvv\OneDrive\图片\Saved Pictures\1.png"style="width: 400px;alt="Hannibal";title="Hannibal">点击图片或文字跳转页面百度百科</a>
<a href="http://www.baidu.com"target="_blank_">www.baidu.com</a>
<div id="demo1"style="width:100px;height:100px;background-color:green;">demo1</div>
2:<br>
<div id="demo2"style="width:100px;height:100px;background-color:red;">demo2</div>
<a style="
display: block;position: fixed;bottom: 100px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #fcc;" href="#demo1">find demo1</a>
<a style="
display: block;position: fixed;bottom: 150px;right: 100px;border: 1px solid black; height: 50px;width: 200px;background-color: #ffc;" href="#demo2">find demo2</a>
3:<br>
<a href="tel:156**4074**">给悦姐打电话</a>
<a href="mailto:heshuichifan20****@163.com">给悦姐发邮件</a>
4:<br>
<a href="javascript:while(1){alert('让你手欠')}">点我~ come on! 来呀!
</a>
<hr><hr><hr>
<form method="get" action="">method发送数据的方式,action发送数据的对象
<br>本来
username:<input type="text" name="username">
password:<input type="password" name="登录">
---------加一个回车--------
username:<input type="text">
<br>
password:<input type="password">
<br>
---------空格新格式--------
<p>
username:<input type="text" name="username">
</p>
<p>
password:<input type="password" name="登录">
</p>
<input type="submit" value="登录/login">
<hr><hr><hr>
喜欢的歌曲:
<input type="radio" name="star">ouu
<input type="radio" name="star">liknm
<input type="radio" name="star">m
<input type="radio" name="star1" value="123">ouu
<input type="radio" name="star1" value="1256">liknm
<input type="radio" name="star1" value="5469">m
<input type="submit" value="提交/submit">
<hr><hr><hr>
<p>
username:<input type="text" name="username",style="color:#999"
value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}"onblur="if(this.value==''){this.value='请输入用户名'}">
</p>
</form>
</body>
</html>