- Html 结构
- css 样式
- js 行为
语义化
语义化:根据具体内容选择标签
呈现出内容结构
利于搜索引擎爬虫更好理解网页
方便第三方设备解析
便于团队开发与维护
文本修饰
文本修饰
强调加粗
斜体
sub 是下标
sup是上标
del 删除文本标签 ins 插入文本标签 .两个配合使用
跳转链接
<base target="blank"> <a href="www.baidu.com"></a> <a href><img src="." /></a>
特殊符号
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LevTMvJM-1615595417922)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614417455713.png)]
ps:ul 和 li 之间不能有其他标签 ul type=“square” ol type=“自定义”
表格标签
table tr th td
th是副导航做第一行当表头,用tHead包住
身体部分用tBody包住
caption是表格的大标题
三个语义化标签:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTXUMdvS-1615595417933)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614437262850.png)]
仅仅是语义化,没有实际作用
表格属性
针对此table可以通过 cellpadding设置单元格内部间距,cellspacing设置单元格外部间距
对于某一个td可以合并单元格 colspan 合并列 rowspan 合并行
水平对齐:align :center left right
垂直对齐: valign : top middle bootom
表单
用户:
密码:
男:
女:
香蕉
苹果
菠萝
提交
重置
表单标签
多行文本 textarea
下拉菜单 select option
<select> <option selected disabled>请选择</option> <option >北京</option> <option >上海</option <option >广州</option> </select>
label 辅助表单 label的for和 input的id绑定
<form action="#" method="get"> <table border="1px solid red" cellpadding="30"> <tbody> <tr> <td rowspan="4">总体信息</td> <td colspan="2">用户注册</td> </tr> <tr align="right"> <td>用户名</td> <td><input type="text" placeholder="enter username"></td> </tr> <tr align="right"> <td>密码</td> <td><input type="password" placeholder="enter password"></td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </tbody> </table> </form>
div与span
div划分区域
span上内敛样式
CSS语法格式
div{
color : #ccc;
}
百分比是看父元素的相对值
外部样式:
颜色表示法:
- 单词表示法
- 16进制表示法
- rgb法,三原色标表示法
背景样式
background-color
background-image
background-repeat 平铺
background-position 图片位置
repeat-x -y 或者norepeat
background-attachment 背景图随着滚动条移动方式scroll按照当前元素偏移,fixed按照浏览器窗口进行偏移
边框样式
border: solid dotted double dashed
针对一条边单独设置
border-right-style:
三角形案例
文字样式
font-family:字体类型, , , 多添加几个保险,可以多匹配直到匹配到
针对于中英文两种
ariea就是只能对英文起作用
中文字体有对应的英文名称
font-size:20px;字体大小 偶数px
font-weight 字体加粗 bolder 或者数值500~900是加粗
font-style:斜体 italic(有的字体不能设置) oblique可以设置所有字体倾斜操作
文本修饰t-decoration:overline line-through underline给一段话加线
text-transform :uppercase,把所有小写变大写,lowercase,,capitalize把首字母变大写
text-indent:32px; 首行缩进两个字(一个字是16px)
2em; 以字体为单位
text-align:left;文本对齐方式 ,justify 两端点对齐
line-height 定义行高,这个行高就是文字的蓝色区域
letter-spacing 字间距
wrod-sapcing 词间距(主要针对英文)
英文和数字都自动这行 word-break = break-all
文字上下居中: line-height=行高就行了
id、class、标签选择器
简单
伪类选择器
:hover 鼠标移入的时候
:actived 点击时候
:link 访问前 a
:visited 访问后 a
一般设置顺序为 L V H A
:after 、:before 通过伪类方式给元素添加文本内容,,设置样式方便了
:checked{width:1000px;height:20000px} 当元素具有checked属性的时候,就会触发
和disabled一样
:focus{bg:red;} 当拿到焦点的时候背景色就是红色
li:nth-of-type(1){ bg = color;} 表示第一个li的背景色变红
2n就是偶数 2n+1就是奇数行换色
li:first-of-type{background-color:red}
CSS继承
div>p 文字样式可以继承,但是布局样式不能继承
但是p可以强制继承 P{border:inherit}
CSS优先级
群组选择器和单一选择器优先级都是一样的,只需要比较顺序
后来者居上
行内>内部>外部
行内 > id > class > 标签tag > * > 继承
1000 100 10 1 权重
!important 强制提升优先级[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJOISR0v-1615595417936)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614569992627.png)]
标签+类 > 单类
层次优先级
ul li .box p inpupt{} 1 +1+10+1+1
尽量三层就够了
盒子
由内向外: content->padding->borderr->margin
背景色包括border
box-sizing: border-box 如果要求是长宽200px的盒子,这时候添加这个属性无论你设置多少border和padding和content,整个盒子都是200px,省去了计算。还能解决百分比问题
margin叠加问题 ,如果两个盒子都有margin,不会都加上,而是哪个值大,就margin哪个。所以尽量只给一个元素添加margin
margin传递只针对margin-top,会带着其他盒子也受影响,必须给其他盒子加边框border才能避免被影响
margin: 0 auto ; 盒子左右自适应
width 不设置 盒子可以自我调整。在盒子嵌套的时候
标签分类(类型)
- block:块 div p ul li h1
- 独占一行
- 支持所有样式
- 宽默认是父元素一样宽
- inline:内敛 span a em strong img labelb,i,u,sub,sup标签
- 不独占一行
- 有些样式不支持 width height margin padding
- 宽度由内容撑开
- 两个内敛之间的元素有空隙
- inline-block 内敛块 input select
- 挨一起但是支持宽高(块和内敛的特性都有)
空隙解决法:body{font-size:0;} span{font-size:12px;}
标签分类(内容)
- flow 流数据,打开一个网站能直观的感受到的东西
- section 划分区域有 article footer header
- metadata 元数据 有的看的见title 有的看不见style
- heading 标题 h1 h2 h3 h4之类的
- interactive 互动 input
- embedded 嵌入标签 img的src和 audio
- phrasing 措辞 用来强调strong和em等
标签分类(显示)
- 替换标签 img的src 引用的路径来替换 input的type
- 非替换标签 直接告诉浏览器显示出来 div p h1
display
- block
- inline
- inline-block
- none (不占空间的隐藏) 而visibility:heiiden 占据空间
标签嵌套规则
块里面一定嵌套内敛
块不一定嵌套块 p不能嵌套
内敛不能嵌套块 span不能嵌套div
all in all :块一定嵌套内敛,可能嵌套块
溢出隐藏overflow
visible
hidden
scroll 无论多少内容都会显示滚动条
auto 如果内容多了就会出现滚动条
overflow-x
透明度
opacity 0透明 1不透明
会让嵌套里的元素也透明 比如div>p 这个p也会透明
解决办法就是用rgba
手势
cursor默认是箭头
pointer是手
move 移动箭头
也可以使用自定义图片[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dYiQMqgC-1615595417939)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614603358337.png)]
弹性盒子
div{
min-height:200px;
min-width:200px;
}如果太大了内容,就可以撑开盒子
百分比是根据父容器的比例的
CSS默认 样式
无默认样式 div span
有默认样式:
body 有margin的8个像素,h1有margin上下21.440px,p上下margin:16px
ul>li 也有margin ul: list-style 有点
a默认是pointer和下划线
reset样式 *会影响性能
body,p,div,ul,li {padding:0;margin:0;}
ul{list-style:none}
a{test-decoration:none;}
img{display:block} 图片底部容器有空隙,内敛标签都是按照基线对齐的,但是块元素是底线对齐。解决方法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VnWuGCSt-1615595417942)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614608241066.png)]
PS快捷键
ctrl + R 显示标尺
png 半透明
jpg=jpeg 色彩丰富
psd 有图层,自动切图
- 编辑-首选-增效工具-启动生成器
- 文件生成图像资源
文档流
float使元素脱标(浮起来了),然后放在父容器的左边,如果已经有浮动元素,则挨着那个浮动元素
left right none
浮动只会影响下面的元素,可以做图文混排
浮动元素在父容器放不下 了就会折行
清除浮动 clear;left 清除左浮动 还有right 。可以使得我这个元素不会被上面浮动了的元素影响到。具体方法是:设置空标签
clear只能操作块,对内敛不起作用
用伪类after
.clear:after{ content:’ ';clear:both; display:block }
Position
定位
- relative
- 不影响其他元素的布局,只是相对于自身偏移,
- 自身原位置占据空间
- 不脱离文档流
- absolute
- 脱离文档流,其他元素受影响
- 使得内敛元素有宽高
- 使得此盒子的宽高由内容撑开
- 相对于上一级(已经定位的父元素)进行偏移,若没有父元素定位,则参考于body
省略号
- 定义width
- 取消折行 white-space:nowrap
- overflow:hidden
- text-overflow:elipisis
CSS雪碧
把所有图片合为一个大图,让网页加载快
圆角边框
width:100px; height:100px
border-radious: 50px或者50%; ->就是圆
border-radious:左上,右上,右下,左下
height减半就是一个半圆
轮播图的圆球
.btn ol{
position: absolute;
width:100%; 绝对定位只能让内容撑起来宽高,但是我们不会在里面添加内容
font-size: 0; 让每个小圆球的距离都是0
text-align: center;让文本居中,因为浮动起来的块级元素不好居中
}
.btn ol li{
list-style:none;
display: inline-block;转化为内敛就可以textalign居中
height:12px;
width:12px;
border:2px solid yellowgreen;
border-radius: 50%;
}
dl dt dd
跟ul li很像,但是可以有自己的标题dt
dl
dt标题说明
dd列表内容
XHtml
Doctype 很复杂
- 不允许大写
- 属性布尔值 要写全
- alt属性
- 标签必须成双出现
strong,b
strong和em具有语义化
b和i 不具备语义化,但是也可以加粗和斜体
不过有自己的应用场景
引用标签
更具有语义化:
blockquote: 引用大段的段落解释
q:引用小段的短语解释[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xBQIyD91-1615595417944)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929727068.png)]
abbr:缩写或首字母缩略词 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsSjJHAN-1615595417945)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929734698.png)]
address:引用文档地址信息[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OCSPO4Gj-1615595417946)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929740515.png)]
cite:引用著作标题[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tn7UqoUt-1615595417948)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614929746936.png)]
iframe标签
可以引入其他的HTML到当前HTML
可以做钓鱼网站
可以进行跨域操作,传输数据,可以局部刷新
br\wbr
wbr是软换行,不会强制换行
pre/code
code 暗示这是一个代码
pre是预文字,空格也会保留
map/area热区
map包括area
map热区,可以点击的那种
<img src="./微信图片_20210305160922.jpg" alt="" usemap="#yuanyuan"
rect表示矩形,对应的值空格隔开,左上,右下
circle表示圆,圆心x,y r
poly 表示 自定义,相当于多个矩形
link
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ad7V130c-1615595417949)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614991958825.png)]
写头里就有网站图标了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bmoL3S3D-1615595417951)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614992025469.png)]
预映射资源,提前解析ip地址,可以加快网站访问速度
meta
添加辅助信息
name=“description” content=“我描述自身为送外卖的美团”
再战一个标签meta name=“keywords” content=“魔方”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPHExP6R-1615595417952)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614992649187.png)]
IE浏览器渲染时最高版本,可以用来写兼容
如果http是refresh表示刷新的意思 content表示秒数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SANYzQd-1615595417953)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614993000549.png)]
注意url由空格隔开,也在content里面
当http-equiv的值是expires的时候,就是缓存,content可以为 日期
新语义化标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xns4ozHo-1615595417954)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614993432577.png)]
article 独立内容
section 在article里面,来分区
figure:描述图像或视频 内部的figcaption是描述标题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QL3XFZvM-1615595417956)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614993752547.png)]
time 也是一个语义化,没有实际效果
mark可以让p中的文字背景色加黄色
智能提示搜索框
list通过id联系起来
进度条君
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n5j733MV-1615595417957)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614994592065.png)]
progress表示进度完成加载
meter表示测量单位,多少人什么什么的,可以加上low和high,如果超出便会变色
表格美化
empty-cell:hide 隐藏内容为空的单元格
给表格设置单线除了cellpadding:0 让两条线和一块之外,还有border-collapse:collapse
针对列操作:colspan
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fjj9d706-1615595417958)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1614998384676.png)]
表单美化
<div></div>
label{
position: relative;
display: block;
}
label input{display: none;}
label div{width:23px;height:23px;
position:absolute;
background-image: url(./UIImage/2311144049_lanrentuku.com/input_checkbox.png) ;
background-repeat: no-repeat;
background-position: 0 0 ;
}
label input:checked + div{
background-position:-32px 0px;
}
input扩展属性标签
提交到百度吧
比普通的input多了一个X
在移动端会默认调起数字键盘
设置时间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YoHtoQGI-1615595417960)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1615166726387.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BnM2ReJG-1615595417961)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1615166756775.png)]
text文本框的其他属性
autofocus刷新页面自动动获得焦点
autocomplete表示是否显示历史输入
require可以提示输入不能为空
pattern [a-z] 表示只能输入26个英文字母
method表单提交方式
enctypte 表示提交表单时候的数据类型
fieldset登录,加上lengeda主题配合使用
BFC规范
不会影响别的元素,解决margin叠加问题,解决margin传递问题
触发BFC:overflow :hidden position:absolute
BFC让你的盒子无论里面怎么折腾都不会影响外面