html笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--定义网页源信息，2秒后跳转页面--> <meta charset="utf-8" http-equiv="x-ua-compatible" content="IE=edge"> <!--IE浏览器最高渲染模式--> <meta name="keywords" content="商城,网上购物,网购"> <!--网页推荐，seo查询，搜索关键字--> <meta name="description" content="专业线上综合购物平台，全球消费者挚爱的品质购物之城！"> <!--网页描述信息--> <title>浏览器标签名称</title> <!--网页标签名字--> <style>h1{color: green} h6{color: red}</style> <!--内部写css代码--> <link rel="stylesheet" href="test.css"> <!--引入css文件--> <script>alert("我是alert弹窗")</script> <!--内部写js代码，也可以引入js文件，js可以是本地也可以是网络的--> <script src="test.js"></script> </head> <body id="db"> 块级标签（独占一行，如p,h1,div），行内标签（自身多大就多大，如iusb,span） <hr> <!--hr分割线--> <h1>你好啊</h1> <!--1级标签--> <h6>你好啊</h6> 普通文本，<br> <!--br换行--> <b>加粗</b>@<i>斜体</i> <u>下划线</u>#<s>删除线</s>$<p>段落标签</p>*<p>1个p是1行，p标签只能嵌套行内标签</p> (空格 ) – (-符号) > (大于号) < (小于号) & (&符号) ¥ (￥符号) © (©符号) ® (®符号) <div>将页面划分区域</div> <span>占位文本，类似占位符</span> <img src="图片地址" alt="描述，当图片损坏时才能看见该描述" title="鼠标在图片上停留时出现的文字" height="高度" width="宽度"> <a href="http://www.baidu.com" target="_self">点我跳转到百度，默认为_self，无需填写</a> <a href="http://www.baidu.com" target="_blank新页面打开">点我跳转到百度</a> <div style="height: 700px"> <a id="d1">你好啊</a> </div> <a href="#d1">返回至你好啊</a> <a href="#db">返回顶部</a> <ul type="none"> <!--设置列表前面的图案circle,square,也可以用list-style-type:none设置--> <li>无序列表1</li> <li>无序列表2</li> </ul> <ol type="1" start="3"> <li>第一行</li> <li>第二行</li> <li>第三行</li> </ol> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> </dl> </body> </html>
表格标签
1 <body> 2 <table border="10" cellpadding="10" cellspacing=""> 3 <theade> 4 <tr> <!--1个tr是1行--> 5 <th>ID</th> <!--加粗--> 6 <td>NAME</td> <!--普通--> 7 <th>AGE</th> 8 <th>GENDER</th> 9 </tr> 10 </theade> 11 <tbody> 12 <tr> 13 <td>1</td> 14 <td>xiaoming</td> 15 <td>38</td> 16 <td>male</td> 17 </tr> 18 <tr> 19 <td>2</td> 20 <td>hanmeimei</td> 21 <td>18</td> 22 <td>female</td> 23 </tr> 24 <tr> 25 <td colspan="50">3</td> <!--合并列--> 26 <td rowspan="2">lilei</td> 27 <td >73</td> 28 <td>male</td> 29 </tr> 30 <tr> 31 <td>4</td> 32 <td>poly</td> 33 <td>84</td> 34 <td>others</td> 35 </tr> 36 </tbody> 37 </table> 38 </body>
表单标签
1 <body> 2 <h1>欢迎</h1> 3 <form action="跳转地址" method="post" enctype="multipart/form-data"> <!--urlencoded--> 4 <label for="i1"> 5 用户名：<input type="text" id="i1"> 6 </label> 7 <br> 8 <label for="i2">密 码：</label> 9 <input type="password" id="i2"> 10 <label for="i3">颜色：<input type="color"></label> 11 右面有个隐藏框=><input type="hidden"> 12 <p> 13 <input type="text" disabled value="disabled"> 14 <input type="text" readonly value="readonly"> 15 </p> 16 <p>gender: 17 <input type="radio" name="gd" value="male" checked="checked">male <!--可以简写，只写checked--> 18 <input type="radio" name="gd" value="female">female 19 </p> 20 <p>hobby: 21 <input type="checkbox" name="hobby" value="swim">swim 22 <input type="checkbox" name="hobby" value="read" checked>read 23 <input type="checkbox" name="hobby" value="song">song 24 </p> 25 <p>province 26 <select name="province"> 27 <option value="河北">河北</option> 28 <option value="河南">河南</option> 29 <option value="hz" selected>河中</option> 30 </select> 31 贷款超人 32 <select name="dkcr" id="" multiple> <!--用户需要按ctrl--> 33 <option value="jb">借呗</option> 34 <option value="hb" selected>花呗</option> 35 <option value="bt">白条</option> 36 </select> 37 贷款技能 38 <select name="dkjn" id="" multiple> 39 <optgroup label="主动技能"> 40 <option value="ku">哭</option> 41 <option value="nao">闹</option> 42 </optgroup> 43 <optgroup label="被动技能"> 44 <option value="md">手机没电</option> 45 <option value="wd">身在外地</option> 46 </optgroup> 47 </select> 48 <input type="file"> 49 <textarea name="info" id="" cols="30" rows="10" ></textarea> 50 </p> 51 <input type="submit" value="提交"> 52 <input type="button" value="点我呀"> 53 <button>点我呀（自带提交功能的按钮）</button> 54 </form> 55 </body>
选择器
1 <body> 2 <!--选择器优先级： 3 不同选择器：行内>ID>类>标签，精确度越高越优先 4 相同选择器：就近原则--> 5 <!--基本选择器--> 6 <div id="d1">文本div1 7 <p id="p1">文本pp1</p> 8 </div> 9 <div id="d2" class="c2 c4">文本div2 10 <p id="p2">文本pp2</p> 11 </div> 12 <div id="d3" class="c3">文本div3 13 <p id="p3">文本pp3</p> 14 </div> 15 <div id="d4" class="c2">文本div4 16 <p id="p4">文本pp4</p> 17 </div> 18 19 <!--下面是组合选择器--> 20 <span>第一行：span</span> 21 <p>第二行:p</p> 22 <div>第三行：div 23 <p>第四行：div内的p</p> 24 <span>第五行：div内的span</span> 25 <p>第六行：div内的p</p> 26 <span>第七行：div内的span</span> 27 </div> 28 <span>第八行：span</span> 29 <p>第九行：p</p> 30 <span>第十行：span</span> 31 <p>第十一行：p</p> 32 33 <!--下面是属性选择器--> 34 <input type="text" placeholder="你想输点什么？"> 35 <p>1</p> 36 <input type="text" name="abc" value="abc" disabled> 37 <p>2</p> 38 <input type="text" name="opq" value="opq" readonly> 39 <p name="abc">3</p> 40 41 <!--下面是伪类选择器--> 42 <a href="http://www.baidu.com">百度</a> 43 <input type="text"> 44 45 <!--下面是伪元素选择器--> 46 <p>明天开盘又得跌，就是个韭菜的命</p> 47 </body>
/*基本选择器*/
/*id*/
#d1{color: red}
/*class*/
.c2,.c3{color: blue}
/*!*组合选择器*!*/
/* !*后代，内嵌的全部标签*!*/
div p{color: red}
/* !*弟弟，下面同级别的全部标签*!*/
div~p{color: green}
/* !*儿子，内嵌的第一级的全部标签*!*/
div>span{color: yellow}
/* !*毗邻，下面紧挨的第一个标签*!*/
div+span{background-color: blue}
/*属性选择器*/
[name]{background-color: red}
[name='abc']{color:orange}
input[name='opq']{color: aqua}
/*伪类选择器*/
a:link{color: white;background-color: black} /*普通状态*/
a:hover{color: green;background-color: black} /*鼠标悬浮之上的状态*/
a:active{color: red;background-color: black} /*鼠标选中不放的状态*/
a:visited{color: grey;background-color: black} /*已访问过的状态*/
input:focus{background-color: steelblue} /*input框获取焦点*/
/*伪元素选择器*/
p:first-letter{font-size: 40px;color: brown}
p:before{content: '无法复制吧';color: steelblue}
p:after{content: '复制不了吧';background-color: burlywood}
字体、背景、边框、隐藏标签
<body> <div id="d1">我是div-d1，设置text-align:center</div> <a href="http://www.baidu.com">点我去百度,我的下划线没了</a> <div id="d2">我是div-d2设置display:none的文字，应该看不见</div> <div id="d3">我是div-d3（我上面有个d2，但隐藏了）我是块级标签，但我设置display:inline</div> <div id="d4">我是div-d4，没设置display</div> <span id="s1">我是span-s1（我下面有个s2，但隐藏了）我是行内标签，但我设置display:block</span> <span id="s2">我是span-s2,我是行内标签，但我设置display:block</span> <span id="s3">我是span-s3（我上面有个s2，但隐藏了）我是行内标签，但我设置display:block</span> <p>开头空两格大结局可能从哪里中心城市的氛围安第斯地区我法人股东非v染发膏表达方式而为人物个个2请问额外企鹅必须做的事如果返回湖南</p> </body>
#d1{ /*标签*/ width: 600px; height: 40px; /*边框*/ border-radius: 100px; border-color: green; border-width: 5px; border-style: ridge; /*背景*/ background-color: brown; /*文本排列*/ text-align: center } a{ /*文本格式*/ text-decoration: none; text-align: center; } #d2{ width: 500px;height: 50px; /*不展示，位置也隐藏*/ display: none; } #d3{ width: 300px;height: 50px; background: green; /*将标签设置为行内属性，无法修改长宽*/ /*display: inline;*/ /*将标签设置为行内属性，可以修改长宽*/ display: inline-block; } #d4{ width: 300px;height: 50px; background: orange; } #s1{background: steelblue; /*将标签设置为块级标签属性*/ display: block; } #s2{background: salmon; display: block; /*设置可见性，位置还在*/ visibility: hidden; } #s3{background: #ceb12b; display: block; } p{ /*标签*/ height: 500px; width: 500px; /*边框*/ border-radius: 50%; border: 1px solid red ; /*字体*/ font-size: 16px; /*font-family: "Microsoft YaHei UI";*/ font-weight: inherit; /*继承字重，字体粗细*/ color: rgba(68, 100, 213,0.7); /*文本格式*/ text-decoration: underline; text-indent: 32px; /*背景*/ /*background-color: burlywood;*/ /*background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.officedoyen.com%2Fuploads%2Fallimg%2F180612%2F1-1P61223001a92.gif&refer=http%3A%2F%2Fwww.officedoyen.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616178708&t=d28426941753c9f72298ddd413ff52bf");*/ /*background-position: center;*/ /*background-repeat: no-repeat;*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*background-attachment: fixed;*/ /*背景简写*/ background: burlywood no-repeat center url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=893583318,39082211&fm=26&gp=0.jpg"); }
外边距、内边距
<body> <p id="p1">我是p-p1,我为测试margin而生</p> <p id="p2">我是p-p2,我为测试margin而生</p> <div id="d1">我是div-d1,我为测试margin而生 <div id="d2">我是div-d2,我为测试margin而生</div> </div> <div id="d3"> <p id="p3"> 我是p-p3,我为测试margin而生 </p> </div> </body>
body,body *{
/*外边距，标签与标签的距离.两个标签的外边距设置有冲突时取值大的为准*/
margin: 0;
}
#p1{
border: 1px greenyellow solid;
/*margin: 0;*/
}
#p2{
border: 1px red solid;
/*上下，左右*/
margin: 5px 10px;
/*上，左右，下*/
/*margin: 5px 10px 20px;*/
/*上，右，下，左*/
/*margin: 5px 10px 20px 30px;*/
}
#d1{height: 300px;width: 300px;
border: black solid;
text-align: center;
margin-left: 50px;
}
#d2{height: 140px;width: 140px;
background: steelblue;
/*auto只能左右居中，不管上下*/
margin: auto;
}
#d3{
width: 350px; height: 200px;
border: black solid;
margin-top: 10px;
/*内边距*/
padding: 20px;
}
#p3{
background: greenyellow;
}
解决塌陷、溢出
<body> <div id="d1" class="clearfix"> <div id="dd1"></div> <div id="dd2"></div> </div> <div id="d2"> 我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生 </div> <div id="d3"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2924902919,387745997&fm=15&gp=0.jpg" alt="头像" title="这是一个头像"> </div> </body>
.clearfix:after{
/*解决浮动塌陷问题*/
content: '';
display: block;
clear: both;
}
#d1{
border: 1px black dashed;
}
#dd1{
height: 50px;width: 50px;
background: green;
/*浮动*/
float: left;
}
#dd2{
height: 50px;width: 50px;
background: red;
float: left;
}
#d2{
width: 100px;height: 100px;border: 2px black dotted;
/*当文本溢出标签后的操作*/
/*overflow: visible;*/ /*可见*/
/*overflow: hidden;*/ /*隐藏*/
/*overflow: auto; !*出现纵向下拉框*!*/
overflow: scroll; /*出现纵横2个下拉框*/
}
#d3{
height: 120px;width: 120px;
border: 3px green dotted ;
border-radius: 50%;
margin: auto;
overflow: hidden;
}
#d3>img{
max-width: 100%;
}
body{background: orange}
定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0} /*相对定位，移动后原位置还保留*/ #d1{ height: 100px;width: 100px;background: green; /*定位默认为static*/ position: relative; /*移动，负数为反向移动*/ left: 100px;top: 10px; text-align: center; line-height: 100px; } #d2{ height: 100px;width: 100px;background: red; text-align: center; line-height: 100px; position: relative; } /*绝对定位，以已经定位的父标签为基准移动，没有父标签就已body为基准*/ #d3{ height: 100px;width: 100px;background: chocolate; text-align: center; line-height: 100px; position: absolute; left: 70px;top:60px; } /*固定定位*/ #d4{ height: 30px;width: 80px;background: chartreuse; position: fixed; right: 10px;bottom: 100px; } #d5{ height: 1500px;width: 50px;background: darkkhaki; } </style> </head> <body> <div id="d1">我是d1</div> <div id="d2">我是d2 <div id="d3">我是d3</div> </div> <div id="d4">固定定位</div> <div id="d5"></div> </body> </html>
z-index模态框、透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0} .cover{ position: fixed; top: 0;bottom:0;left: 0;right: 0; background: rgba(28, 158, 158,0.5); z-index: 100; } .modal{ height: 250px;width: 200px;background: white; position: fixed; left: 50%;top:50%; margin-left: -50px;margin-top: -50px; z-index: 100; } #p1{ /*透明度opacity，影响背景色与字体*/ opacity: 70%; color: chocolate; } </style> </head> <body> <div>我是最底层</div> <div class="cover">我是cover层</div> <div class="modal">我是模态框 <p>name:<input type="text"></p> <p>password:<input type="password"></p> <button>提交</button> <input type="reset" value="重置"> <p id="p1">我是opacity</p> </div> </body> </html>
浙公网安备 33010602011771号