HTML学习记录_学习html的网志


脚本链接:
收藏网址: javascript:window.external.addfavorite('http://www.baidu.com','百度网址')
设为主页:先设置空链接,再在代码中加入:onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.qq.com')"


小技巧:

List item连续空格 一直按ctrl+shift+空格
2. shift+回车 不分段 是换行的意思 两行没间距,直接按回车 是分段的意思 两行间距大
3. 标签==元素
4. 填充10 间距1 边距0 表格背景颜色是#333333浅灰色 这种设置出来的表格边框是细纹的,比直接设置表格边框为1的好看.
5. <meta charset="UTF-8">设置网页的语言字符集 可以解决网页的乱码问题
6. <img>展示的图片右键点了后可以复制,可以下载,但是<background>展示的图片右键点了什么反应都没有 img是展示给人看的,而background是样式,是用来装饰的 。
7. 行高(line-height)指的是第一行文字的底部到第二行文字的底部,行距指的是第一行文字的底部到第二行文字的上部分行高指的是第一行文字的底部到第二行文字的底部,行距指的是第一行文字的底部到第二行文字的上部分
8. 行高和内边距都可以设置文字垂直居中。
9. ID和class不能数字开头。
10. div没有语义,p h1 table语义化标签,语义化标签可以让seo知道这些是重要的地方,利于SEO。
11. 图片是特殊的内联元素(行内元素), 可以设置宽高,是内联替换元素,也可以设置成IE盒子模块让总高度不变,内边距往里挤,也可以达到垂直居中的效果
12. position:fixed; 这个可以用于固定导航栏,让导航栏不随滚动条的滚动而滚动。同时加上top:0;left:0;

@keyframes changeRotste{ 这是旋转关键帧名字的设置,名字为changeRotste
from{
transform:rotate(0deg);*/ /变化:角度(角度值),以元素的中心点来旋转,角度变化的意思/
}
to{
transform:rotate(360deg);
}


CSS控制段落:

text-indent:20px; 首行缩进
text-decoration:line-through dotted red; 文字装饰线是删除线,虚线,红色线条
text-align 文字对齐方式
text-shadow 文字阴影


CSS文字控制

font-style: italic 控制文字是正着还是斜着
font-weight: bold 控制文字的粗细
font-size:5px; 控制文字的大小
font-height:5px;控制文字的行高
font-family:黑体 控制文字的字体
做出的网页的字体,如果对方电脑没有的话,对方电脑会从他机器上找一种默认字体来显示出来,我们可以给自己的网页设置N多字体,如果对方电脑没有这种字体的话,让网页按照顺序来下一种、下下一种字体。这就是字体的显示顺序。

font-family:‘黑体’,‘宋体’, ‘隶书’,‘微软雅黑’,‘楷体’,‘sans-serif’;
字体注意事项:
1.字体分为 有衬字体 无衬字体 等宽字体
2.安全字体是大家都有的字体
3.字体顺序 不安全字体–>安全字体–>字体大类
sans-serif是无衬字体 ,serif是有衬字体,Monospace是等宽字体,这个是字体大类,黑体和微软雅黑是无衬字体。

英文单词自动换行
word-break:break-all; 允许在单词内换行
word-break:keep-all 只能在半角空格或连字符处换行


**中文单词强制一行显示** white-space:nowrap;强制在一行内显示文本直到文本结束或者遭遇br便签对象才行


**文字溢出** 首先需要添加white-space:nowrap和overflow:hidden,才可以使用文字溢出 text-overflow:clip;不显示省略号 text-overflow:ellipsis 文本溢出的时候显示省略标记…


CSS浮动布局

float:left; 浮动样式
clera:left; 清楚浮动效果
clear:both; 清楚左右浮动
如果给元素加了浮动属性,将会脱离文档流(文档流就是模块从上到下的排列),后面的元素将会忽略其原来的位置。

CSS背景详解

background-color:red; 背景颜色
background-image:url() 背景图片
background-repeat:no-repeat 不重复显示背景图
background-attachment:fixed; 设置背景图不随滚动条的滚动而滚动
background-position:right top; 定义背景图片在网址的右上角

用大图片做背景,在实际项目中,可以减少服务器的请求次数,尤其是做大项目的时候
background-image:url(./1.png) -165px -123px; 背景大图片向左横向移动165px,像上移动123px

CSS优先级

越精准时候选择器优先级越高(指的是类选择器,就没有标签选择器精准,所以如果2个选择器选择范围覆盖的话,就依标签选择器的)

HTML5新的语义化标签兼容性处理

HTML5新的语义标签部分在IE9中被解析为了行级元素,必须用display:block设置为块级元素才行。IE9有选择的支持H5(部分支持),IE8以下完全不支持,IE10完全支持H5。

解决方法一:
IE8无法识别语义化标签,可以手动创建标签,因为IE8认为标签是行内元素,所以在CSS中也要讲之转化为块级元素
<srcipt>document.createElement('header')</script> 我亲自测试的IE8 IE7用这个方法后没有效果

解决方法二:
引入一个兼容HTML5新语义标签的JS。

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script>

几种简单的水平居中,垂直居中方法
height+line-height:配合使用,垂直方向居中 (单行文字垂直居中)
text-align:父级的text-align,水平居中
ps:text-align:center 只是将子元素里的内联元素居中。

还有一种文本居中的方式是定高父级元素激活表格属性和基线样式:
display:table-cell;vertical-align:middle; (块级元素内多行文字垂直居中)

那么不是内联元素是如何实现居中的?margin: 0 auto;
内边距用的好也可以垂直居中。


当父元素没有高度的时候,子集的高度会自动进行撑开,但是当子集添加了浮动属性之后,子集的高度将不能自动撑开父集的高度后面的元素会直接忽视掉其原来的位置。后面的元素会自动跟上边这个元素的父元素对其
解决办法,
1:为父集添加高度,文字都可以撑开父元素
2:为父元素添加overflow:hidden;属性,子集中元素最高的高度就会变成父集的高度

三种定位:
position:fixed
固定定义,是根据浏览器窗口定位,会脱离文档流,如果初始化top:0;left:0; 它会固定在浏览器的左上角
position:relative
相对定位,相对于自己原来的位置定位,不会脱离文档流,如果初始化top:0;left:0;它会保持原位不变。
position:absolute
绝对定位,根据父级进行定位,脱离文档流,如果初始化top:0;left:0;对其父级的左上角,前提是父级有定位属性。如果父级没有定位属性,绝对定位属性会一直向上寻找带定位属性的父级,如果所有父级都没有定位属性,那么它的定位点就是浏览器的左上角。

背景全透明:background:transparent; color:transparent;

背景半透明的几种方法:
1.opacity(值是从0到1) 里边的内容也能半透明 .opacity:0.5
2.background:rgba(255,0,0,0.5) 文字没有半透明 ie9以下浏览器不兼容
3.background:url()也可以在PS里设置一个1*1像素的小黑块,设置透明度为50%,然后保存下来做为图片的背景。这种方式是最兼容的

两种空链接:

<a href="#">百度一下</a>  这种点一下会自动到首页顶部,不好
<a href="javascript::">百度一下</a> 这种点一下空连接页面还在原来的位置。

img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

86)]

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

  • 30
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值