HTML学习记录_学习html的网志(1)

 <p>大家今天<span style="background-color:#FFFF33;font-size:36px;">干吗</span>呢<p>

图像热区域 <area shape="rect" coords="34,35,68,58" href="#" />34.35.68.58分别代表x坐标y坐标宽和高

margin 外边距，设置一个元素与其他元素之间的间距，以及一个元素与浏览器边缘之间的间距。

margin:34px auto 0 auto; /*margin后面是有4个参数的。例如：margin:1px 1px 1px 1px分别表示 上、右、下、左
margin:auto; 自动居中命令；
margin-left:10px;只是设置一个方向时候的用法。

padding 内边距（填充），表格边框距离文字的距离也就是内边距（文字在表格的里边）

如果文字宽高背景色设置好了，padding值太大的话，是会把背景色撑大，但是文字是挤不出边框外边的。
如果宽高设置成300*300，那么容纳文字的区域还是这么大，只是把背景色撑大了。

div 在网页内容中间分出一个矩形区域 设置好宽高

div元素在W3C中定义为一个盒模型，看起来像一个矩形区域，所有的矩形区域都是块元素

class 给元素加名字 例如 <div class="">

---

<meta name="keywords" content="CSS动画,游乐园，摩天轮，前端" >这是网页的关键词信息 利于网站的SEO，让用户找到你
<meta name="description" content="这是一个CSS3游乐场动画，效果很好。">这里主要介绍网站的主营业务和优点来区分搜到的其他网站。也就是网站的简介

---

**普通流规则**规定了一个块元素在父元素内是如何排列的 1从上往下 2从左往右 3一个元素占一行（块元素的宽度在默认情况下和父元素的宽度是一样的）

---

网页中的网页Iframe
IFRAME元素也就是文档中的文档，或者好像浮动的框架（FRAME）。

<iframe name="a" width="120" height="160 src="text.html" frameborder="0" scrolling="no"></iframe>

Name框架的名字 Src连接的源文件 Frameborder 框架的边框设置 Scrolling 滚动条设置
HTML5中废弃了框架

---

脚本链接:
收藏网址： 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个选择器选择范围覆盖的话，就依标签选择器的）

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

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

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

84)]

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

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

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