html学习
个人笔记，可复制源码再选取需要的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>from表单标签</title>
</head>
<body>
<form method="get" action="1.我的第一个网页.html">
<p>用户名：<input name="user name" type="text"value="lj" maxlength="10"placeholder="请输入用户名"required ></p>
<p>密 码：<input name="pwd" type="password"hidden value="123456"></p>
<p> 性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" name="hobby" value="game"/>游戏
<input type="checkbox" name="hobby" value="code"checked/>代码
<input type="checkbox" name="hobby" value="talk"a/>聊天
<input type="checkbox" name="hobby" value="love"/>撩妹
</p>
<p>
<input type="button" name="bot1" value="走你"/>
<input type="image" name="bot2" src="resources/img/98.png"/>
</p>
<p>下拉框：
<select name="列表名称">
<option value="china">中国</option>
<option value="usa"selected>美国</option>
<option value="jepan">日本</option>
<option value="eluosi">俄罗斯</option>
</select>
</p>
<p>联系我们：
<textarea cols="50" rows="20"/>留下您想说的:</textarea>
</p>
<p>文件域：
<input type="file" name="files"/>
<input type="button" value="上传"name="up">
</p>
<p>邮件验证：
<input type="email" name="email"/>
</p>
<p>URL验证:
<input type="url" name="url"/>
</p>
<p>数字验证：
<input type="number"max="100"min="1" step="any"/>
</p>
<p>日期选框：
<input type="date" name="zhegnshu"/>
</p>
<p>音量滑块：
<input type="range" name="voice"max="100" min="10" step="2"/>
</p>
<p>搜索框：
<input type="search" name="search"/>
</p>
<p>锁定框：
<label for="mark" >点我锁定</label>
<input type="text" id="mark">
</p>
<p>自定义正则表达式验证：
<input type="email" name="diyemail" pattern="^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$"/>
</p>
<p>
<input type="submit"name="Button"value="提交">
<input type="reset"name="reset"value="清空表单"disabled>
</p>
</form>
</body>
</html>
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
width: 310px;
height: 320px;
border: 2px solid red;
padding: 2px;
}
a{
display: block;
height: 100px;
width: 100px;
border: 2px solid red;
background-color: #ef09b6;
line-height: 100px;
text-align: center;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
top: -311px;
left: 100px;
}
a:hover{
background-color: #1e28de;
color: white;
}
</style>
</head>
<body>
<div id="father">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 100px;
height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
<img src="resources/img/21.png" alt="">
<p>
啊按规划绘画技巧org和；法国哈过后i发哈是好欸怀鬼胎的哈
</p>
</div>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child{
background: #df0ce7;
}
ul li:last-child{
background: aqua;
}
p:nth-child(1){
background: #136655;
}
a:hover{
background: chartreuse;
}
</style>
</head>
<body>
<a>这是a标签呢</a>
<p>p1</p>
<p>p2</p>
<p>[3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
居中登录的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 ul li body{
margin: 0px;
padding: 0;
text-decoration: none;
}
#box{
width: 350px;
height: 280px;
background: red;
display: table-cell;
vertical-align: middle;
}
#inbox{
width: 320px;
height: 230px;
background: white;
}
#but1{
background: #ee0303;
color: white;
width: 230px;
height: 30px;
border-radius: 20px;
}
#p{
line-height: 10px;
}
input{
border-radius: 20px;
}
input[type="button"]{
margin-top:10px;
margin-left: 25px;;
padding-left:0;
}
</style>
</head>
<body>
<div style=" width: 1000px;display: block;text-align: center;">
<div align="center" style="margin: 0 auto">
<div id="box" align="center" >
<div id="inbox">
<p id="p">
</p>
<h2 id="h2">
京东会员
</h2>
<span >用户名:</span>
<input value="请输入用户名" type="text">
<p>
<span>密 码:</span>
<input type="password">
</p>
<div>
<p>
<input type="button" value="登录" id="but1">
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
display: block;
height: 50px;
width: 50px;
float:left;
border-radius: 10px;
background: blue;
text-align: center;
color: beige;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
a[href^="http"]{
background: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="/adad/faf" class="links item2 first2" >2</a>
<a href="qwe123" class="links item3 first3" >3</a>
<a href="eweqe" class="links item4 first4" >4</a>
<a href="rrrrr" class="links item5 first5" >5</a>
<a href="ttt" class="links item6 first6" >6</a>
<a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#ll{
color: #ee0303;
}
.tt{
color: #df0ce7;
}
h1{
color: #0e4ff1;
}
</style>
</head>
<body>
<h1 id="ll">标题1</h1>
<h1>标题2</h1>
<h1 class="tt">标题3</h1>
<h1>标题4</h1>
<p>这个是标签</p>
</body>
</html>
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.yy~p{
background: #1f8bbd;
}
</style>
</head>
<body>
<p class="yy">p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
<li>
<p>p7</p>
</li>
</ul>
<p class="yy">p8</p>
<p>p9</p>
<p>p10</p>
</body>
</html>
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{color: #136655;
background: aqua;
border-radius: 30px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1> 学习java</h1>
<h1> 学习线性代数</h1>
<p>好好学习</p>
<p>天天向上</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lj{
color: blue;
}
.ij{
color: darkorange;
}
</style>
</head>
<body>
<h1 class="lj">标题1</h1>
<h1 class="ij">标题2</h1>
<h1 class="lj">标题3</h1>
<p class="lj">这是标签</p>
</body>
</html>
总结
有迟疑，有迷茫，我想要的很简单
