HTML
阿里巴巴矢量图标图库:https://www.iconfont.cn/
作用: 定义网页的结构 超文本标记语言 在html中,除了标签 没有任何东西
标签嵌套规则:
1.块级标签可以包含任意其他标签(块级标签)(p除外)
2.行内建议包含行内标签,尽量不要嵌套块级标签
<head>标签
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf8"> <!--'提供有关页面的原信息'--> <title>标题</title> <!--'网站的标题'--> <link rel="stylesheet" href="./index.css"> <!--'链接css资源文件,网站图标'--> <script src = 'index.js'></script> <!--'链接JS文件'--> <style> body { background-color: yellowgreen; } </style> <!--定义内部样式,相当于在head里写css #选中ID .选中类--> </head>
<body>标签
1.行内标签
特点:
- 在一行内显示
- 不能设置宽高,如果不设置宽高,默认宽高是内容的宽高
a span em b strong
1.1 行内块标签
特点:
- 在一行内显示
- 可以设置宽高
img,input
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf8"> <!--'提供有关页面的原信息'--> <title>标题</title> <!--'网站的标题'--> <link rel="stylesheet" href="./index.css"> <!--'链接css资源文件,网站图标'--> <style> body { margin: 0; background-color: yellowgreen; } #topBar { background-color: darkblue; height: 40px; } a { color: red; } .lei { background-color: green; height: 40px; width: 1226px; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; /* 4个margin可以写成margin auto; */ } </style> <!--定义内部样式,相当于在head里写css #选中ID .选中类--> </head> <body> 字体标签:除了h1到h6 其他都是行内标签(在一行内显示) <h1>lol</h1> <!--h1到h6标签,网站中h1只出现一次--> <h2>lol</h2> <h3>lol</h3> <h4>lol</h4> <h5>lol</h5> <h6>lol</h6> <u>滴滴滴</u> <!--下划线标签--> <b>滴滴滴</b> <!--加粗标签--> <strong>滴滴滴</strong> <!--和b标签一样也是加粗标签--> <em>滴滴滴</em> <!--斜体--> <sup>上标</sup> <!--上标和下标标签--> <sub>下标</sub> 排版标签,独占一行,可以设置宽高 <div id="topBar"> <!--块区域 div独占一行--> <div class="lei"> <br> <!--换行--> <a href="./3.html">3</a> <hr> <!--分割线--> <span>|</span> <!--小区域的内容标签--> </div> </div> <a href="http://www.baidu.com">百度两下</a> <!--a标签,超链接,默认get请求 href资源的链接--> <a href="./images/1.jpg" title="1图片">1</a> <!--a标签,还可以链接图片文件和html文件 ,title 鼠标悬浮提示的标题--> <a href="./images/2.jpg">2</a> <a href="./3.html">3</a> <img src="./images/4.jpg" alt="这是图4"> <!--图片显示. src 图片路径 alt 图片加载失败显示的标题--> <ul> <!--ul和li 无序列表--> <li>qwe</li> <li>asd</li> <li>zxc</li> <li>rty</li> </ul> <ol> <!--ol和li 有序列表--> <li>qwe</li> <li>asd</li> <li>zxc</li> <li>rty</li> </ol> <dl> <dt>召唤兽</dt> <!--定义列表的标题--> <dd>吸血鬼</dd> <!--定义列表的描述内容--> <dd>幽灵</dd> <dd>鬼将</dd> </dl> </body> </html>
a标签扩展爱恨准则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*a标签 爱恨准则 必须遵守这个顺序去写*/ a:link{ /*没被鼠标点击时显示的颜色*/ color: green; } a:visited{ /*被鼠标点击后显示的颜色*/ color: deeppink; } a:hover{ /*鼠标悬浮时的颜色*/ color: darkorange; } a:active{ /*被鼠标点击住时显示的颜色*/ color: yellow; } </style> </head> <body> <a href="">呵呵一下</a> </body> </html>
段落标签p标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { font-size: 12px; /* 定义p标签字体大小 */ } .aa{ color: red; } .bb{ color: #b0b0b0; text-decoration: line-through; /* 删除线,字体中间带一条横线 */ } </style> </head> <body> <div> <p> 君不见黄河之水天上来，奔流到海不复回。</p> <!--p标签只能放文本和表单元素--> <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p> <ul> <li> <p> <span class="aa">256元</span> <span class="bb">3000元</span> </p> </li> </ul> </div> </body> </html>
from表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input{ height: 25px; /* 输入框大小 */ font-size: 10px; /* 字体大小 */ } #passwd{ margin-left: 16px; } </style> </head> <body> <form action="http://127.0.0.1:80" method="get"> <!--form表单 action设置提交的后台接口 method设置请求方式--> <p> <label for="username">用户名:</label> <!--设置后点用户名这三个字就可以获取焦点,for 对应的是input的id--> <input type="text" name="user" value="" id="username"> <!--type指定text为明文,password为密文--> </p> <p> <label for="passwd">密码:</label> <input type="password" name="pwd" value="" id="passwd"> </p> <p> <input type="submit" value="登录"> </p> </form> </body> </html>
模拟百度搜索
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <form action="http://www.baidu.com/s" method="get"> <input type="text" name="wd" value="" placeholder="请输入你要搜索的内容"> <!--placeholder 提示语--> <input type="submit" value="百度两下"> </body> </html>
单选多选及文件上传及文本输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <form action="http://www.baidu.com/s" method="post" enctype="multipart/form-data"> <!--如果上传文件需要设置enctype为multipart/form-data--> <p> <!--单选--> <input type="radio" name="xingbie" value="男" checked = "checked">男 <!--checked 打开页面默认选中男--> <input type="radio" name="xingbie" value="女">女 </p> <p> <!--多选--> <input type="checkbox" name="xingbie" checked = "checked">抽烟 <!--默认多选2个checked--> <input type="checkbox" name="xingbie" checked = "checked">喝酒 <input type="checkbox" name="xingbie" >烫头 </p> <p> <h3>文件上传</h3> <input type="file" name="文件"> </p> <p> <h3>当前时间</h3> <input type="date"> <input type="time"> </p> <p> <h3>下拉框单选</h3> <select name="richang" id=""> <option value="eat">吃饭</option> <option value="sleep">睡觉</option> <option value="paly">打游戏</option> </select> </p> <p> <h3>下拉框多选</h3> <select name="richang" id="" multiple> <option value="eat">吃饭</option> <option value="sleep">睡觉</option> <option value="paly" selected>打游戏</option> <!--selected默认选中--> </select> </p> <p> <h3>文本输入框</h3> <textarea name="wenben" id="" cols="35" rows="8"></textarea> </p> </form> </body> </html>
提交标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <form action="http://www.baidu.com/s" method="post" enctype="multipart/form-data"> <!--如果上传文件需要设置enctype为multipart/form-data--> <p> <input type="submit" value="登录"> <!--提交form表单--> <input type="button" value="注册"> <!--点击后不提交--> <button>注册2</button> <!--在form内提交表单,在form外不提交--> <input type="submit" value="登录" disabled> <!--带有disabled的选项不能使用--> </p> </form> </body> </html>
audio和video 音频和视频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <audio src="./周传雄 - 有没有一首歌会让你想起我.mp3" controls></audio> <video src="./见龙卸甲.MP4"></video> </body> </html>
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ /* 设置表格属性 */ border-collapse: collapse; width: 60%; } </style> </head> <body> <table border="1"> <tr> <td>id</td> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr> <td>1</td> <td>wk</td> <td>17</td> <td>男</td> </tr> <tr> <td>2</td> <td>ww</td> <td>18</td> <td>女</td> </tr> </table> </body> </html>
css
作用: 修饰网页的样式
css的三种引入方式
-行内样式
<div class="box" style="color:red;">呵呵</div> <!--行内选择器 在标签行内写style-->
-内接样式
<head> <meta charset="UTF-8"> <title>Title</title> <style > <!-- 在head里写style--> </style> </head>
-外接样式
css的选择器
基本选择器
id选择器 标签选择器 类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > /* 选择器: 他的作用是选中标签 */ /* 标签选择器 */ /* 行内样式1000>id选择器100>类选择器10>标签选择器1 */ div { color: red; } /*id选择器 , id是惟一的不能重复*/ #aa{ color: yellow; } /*类选择器,可以设置相同的类名*/ .aa{ color: green; } </style> </head> <body> <div class="box" style="color:red;">呵呵</div> <!--行内选择器--> <div class="aa" id="aa">嘻嘻</div> </body> </html>
重置样式
https://meyerweb.com/eric/tools/css/reset/
高级选择器
后代选择器 子代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > /* 后代选择器*/ .aa p{ /* 在类选择器后边空格加上标签就是后代选择器*/ color: red; } /*子代选择器*/ .cc>p{ /* 在类选择器后边加上>加上标签就是子代选择器 子代选择器只能选择下一级*/ color: green; } .aa>.bb>.cc>p { /*子代选择器可以多层叠加选择*/ color: blue; } /* 后代选择器和子代选择器的权重, 累加选择器的数量 id选择器的数量>类选择器的数量>标签的数量 数量多的权重高 #ww .bb p 1个id 1个类 1个标签 #ww div .cc p 1个id 1个类 2个标签 这个权重最高 .aa>.bb>.cc>p 3个类 1个标签 #ww #ss #xx 这样形式的和上边的区别是最后没有选中标签,因此它的权重为0没有可比性 因此 前提的选中标签,然后看权重,权重越大优先级越高. 同是没选中的,谁描述的距离标签越近谁的优先级越高 #ww .bb .aa #xx 这个权重高因为id为xx离p标签最近 如果同是没选中的,同是描述的距离一样.则数权重 #ww #xx 这个权重高 .aa #xx */ </style> </head> <body> <div class="aa" id="ww"> <div class="bb" id="ss"> <div class="cc" id="xx"> <p>嘻嘻</p> </div> </div> </div> </body> </html>
组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > /* 组合选择器*/ body,div,h1,h2,h6,form,dl,dd,ul,a{ margin: 0; /* 重置样式 */ padding: 0; } ol,ul{ list-style: none; /*去掉ol和ul前边的点和数字*/ } *{ /* 通配符所有标签 一般不用*/ margin: 0; padding: 0; } a{ text-decoration: none; /*取消a标签的下划线*/ color: red; } a:hover{ /* a.hover 当鼠标悬浮在a上时*/ text-decoration: underline; /* 加上下划线 */ color: #333333; /* 改变a标签的字体颜色 */ } </style> </head> <body> <div class="aa" id="ww"> <h1></h1> <h2></h2> <h6></h6> <form action=""></form> <a href="">百度</a> <dl> <dd> <ul> </ul> </dd> </dl> </div> </body> </html>
input相关的css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > input{ border: 0;/*清除边框*/ outline: 0; /*清除鼠标选中时显示的外线*/ border: 1px solid #ff6700; /* 1px为边框线的粗细 solid实线的 #ff6700颜色 */ height: 20px; border-radius: 10px ; /*半径为10px的圆角形输入框*/ } </style> </head> <body> <form action=""> <input type="text"> </form> </body> </html>
盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style > .aa{ width: 200px; height: 200px; padding: 20px; /* 上下左右再多加20px 的填充 等于长宽为240,240 */ background-color: #ff6700; margin-left: 20px; /*向右移动20px*/ border: 10px solid darkgoldenrod; /* 在 盒子外加上边框,线条粗细10px 实心 颜色*/ } </style> </head> <body> <div class="aa"> </div> </body> </html>
盒子线性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100px; background-color: red; /*线性的粗细 线性的样式 线性的颜色*/ /*border: 1px solid darkcyan;*/ /*1个值 表示上下左右*/ /*2个值 表示上下 左右*/ /*3个值 表示上 左右 下*/ /*4个值 表示上右下左*/ /*border-width: 10px 5px 10px 4px;*/ /*border-style: solid double dashed dotted;*/ /*border-color: #ff6700 darkblue;*/ /*border-left: 1px solid green;*/ /*border-right: 1px solid green;*/ /*border-top: 1px solid green;*/ /*border-bottom: 1px solid green;*/ } </style> </head> <body> <div class="box"> </div> </body> </html>
通过盒子制作三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 0; /*盒子宽高设为0*/ height: 0; border-top: 20px solid black; /*盒子上边线设为20px 实线 黑色* 此时为下三角形, 上三角形为bottom* / border-right: 20px solid transparent; /* 左右为 20px 实线无色*/ border-left: 20px solid transparent; } </style> </head> <body> <div class="box"> </div> </body> </html>
盒子移动
padding:内边距,主要描述的父子盒子之间调整位置
margin:外边距 描述兄弟间的距离 前提标准文档流下垂直方向会出现塌陷问题(解决塌陷问题,两个盒子距离空出距离只用margin-top或margin-bottom)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 200px; display: inline-block; /*把盒子变为行内块*/ padding: 20px; } .box{ background-color: red; margin-right: 10px; /*盒子右侧空出10px*/ } .ww{ background-color: green; margin-left: 20px; /*盒子左侧空出20px*/ } </style> </head> <body> <div class="box"> </div> <div class="ww"> </div> </body> </html>
浮动 float
none left right
效果:1.贴边 2.脱离标准文档流(不在页面占位置) 3.收缩
带来的问题:子盒子浮动,会脱离标准文档流,他们不在页面上占位置,子内容撑不起父盒子的高度
清除浮动:
作用:实现盒模型并排 要浮动一起浮动,有浮动清除浮动(不清除浮动,下边的内容会顶上来)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 50px; background-color: black; float: left; } .ww{ width: 200px; height: 100px; background-color: yellow; float: left; } .aa{ width: 300px; height: 150px; background-color: green; float: left; } .box:before{ /*在dev前加上文字 颜色,字体大小 行级添加*/ content: '一号'; color: blue; font-size: 20px; } .box:after{ content: '盒子'; /*在dev后加上文字 颜色,字体大小*/ color: blue; font-size: 20px; } .aaa:after{ /*清除浮动,官方写法*/ content: ''; clear: both; display: block; visibility: hidden; height: 0; } </style> </head> <body> <div class="father aaa"> <div class="box"> </div> <div class="ww"> </div> <div class="aa"></div> </div> </body> </html>
文本超出部分显示省略号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .aa{ width: 200px; height: 200px; border: 1px solid red; } p{ /*给文本标签加上以下三行*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <div class="aa"> <p>asdasdsadsadsfsdfsdffsdfsdfsdfsafsadfsfsadfdsfsadsdfsdafdsfdsfdsf</p> </div> </body> </html>
小米商城头
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .bb{ background-color: #333; height: 40px; line-height: 40px; font-size: 12px; /*div内字体大小*/ } .top{ width: 1226px; height: 100%; margin: 0 auto; /*居中*/ } .top1{ float: left; width: 600px; height: 40px; } .top3{ height: 40px; float: right; } .top2{ height: 40px; float: right; } a{ color: #b0b0b0; text-decoration: none; /* 取消a标签内容的下划线 */ } .aa{ color: #424242; margin: 0.5em; /*margin 设置左右间隔大小 1em的大小是字体的大小(字体设置的是12px),em随字体大小变化而变化 */ } a:hover{ text-decoration: underline; color: white; background-color: #333333; /*字体背景色*/ } </style> </head> <body> <div class="bb"> <div class="top"> <div class="top1"> <a href="">小米商城</a> <span class="aa">|</span> <a href="">中米商城</a> <span class="aa">|</span> <a href="">大米商城</a> <span class="aa">|</span> <a href="">老米商城</a> <span class="aa">|</span> <a href="">幼米商城</a> <span class="aa">|</span> <a href="">子米商城</a> </div> <div class="top3" > <a href="">购物车(<span class="shop">0</span>)</a> </div> <div class="top2"> <a href="">登录</a> <span class="aa">|</span> <a href="">注册</a> <span class="aa">|</span> <a href="">消息通知</a> <span class="aa">|</span> </div> </div> </div> </body> </html>
display
none 空
inline 转为行内模式
block 转为块
inlin-block 转为行内块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } a{ display: block; /*把a标签变为块级标签*/ width: 300px; height: 300px;} img{ width: 300px; height: 300px;} ul{ list-style-type: none; } ul li{ display: inline-block; /*把li行内标签变为行内块*/ width: 200px; /*改外行外标签可以设置宽高*/ height: 100px; text-align: left; /*左对齐*/ font-size: 12px; /*设置字体大小*/ text-indent: 2em; /*缩进两个字符*/ } </style> </head> <body> <div class="box"> <a href=""> <img src="123.jpg" alt=""> </a> </div> <ul> <li>小米</li> <li>红米</li> <li>白米</li> <li>绿米</li> </ul> </body> </html>
定位 position
static 默认静态定位
relative 相对定位 特点:不脱标 层级提高 压盖现象
absolute 绝对定位 特点: 脱标 层级提高 压盖现象
fixed 固定定位 特点:脱标 层级提高 固定位置 ,参考点以浏览器的左上角(作用:小广告,回到顶部,固定导航栏)
绝对和相对
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .father{ width: 600px; height: 600px; border: 1px solid darkorange; } .box{ background: red; position: absolute; /*绝对定位 以网页左上顶点为参考点 ,如果以bottom描述则是以浏览器左下角为参考点 如果 父元素设置相对定位,子元素设置绝对定位,那么以父元素左上角为参考点*/ top: 40px; left: 230px; } .box1{ background: green; position: relative; /*相对定位 参考点为原来的位置*/ /*只有使用定位 才能使用top bottom left right*/ top: 20px; left: 40px; } .box2{ background: yellow; } </style> </head> <body> <div class="father"> <div class="box"></div> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
固定位置
<!DOCTYPE html> <html lang="en"> <style> * { padding: 0; margin: 0; } body{ padding-top: 60px; } .back_top{ width: 100px; height: 100px; line-height: 100px; /*行宽高*/ text-align: center; /*文本居中*/ font-size: 20px; /*字体大小*/ font-weight: 700; /*字体粗细*/ color: yellow; background: darkturquoise; /*背景色*/ position: fixed; /*固定位置*/ bottom: 20px; /**距离底部20px*/ right: 100px; } #fixed{ width: 100%; height: 60px; background: darkorange; position: fixed; /*位置固定*/ top: 0; left: 0; z-index: 99999; /*设置图像的堆叠顺序.越高越考上,(只有定位的盒子才有z-index)*/ } </style> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="height: 2000px;"> <div id="top"></div> <div id="fixed"></div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <div class="back_top"> <a href="#top">回到顶部</a> </div> </body> </html>
z-index
1只有定位的盒子才有z-index,定位的盒子的层级一定大于标准文档流下的盒子
2同是定位的盒子,z-index默认为0 后设置的掩盖住前面的,
3.z-index值越大,优先级越高
4.从父现象,父亲怂了,儿子再牛逼也没用
backgroud-repeat 背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .aa{ width: 100%; height: 3000px; background-image: url("./tupian.jpg") ; /*背景图片*/ background-repeat: repeat; /*默认平铺*/ background-repeat: repeat-x; /*横向平铺*/ background-repeat: repeat-y; /*纵向平铺*/ background-repeat: no-repeat; /*只显示一个图片*/ background-position: 20px 50px; /*调整背景图的位置 向右20px 向下50px*/ background-position-x: -40px; background-position-y: -50px; background-image: url("./tupian.jpg") no-repeat -40px -50px; /*可以用一句话代替上边的*/ } </style> </head> <body> <div class="aa"> </div> </body> </html>
169万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
