HTML学习记录

HTML元素标签的含义

article 正文放在这个标签内，语义化标签
cellpadding 填充:指的是一个表格里的文字距离表格边缘的距离
cellspacing 间距: 指的是2个表格之间的距离
color 颜色
水平线 <hr />
box-shadow 10px 10px 10px 10px rgba(0,0,0,0.4) inset/outset 盒子阴影
!important 权重优先级
border-collapse:collapse 合并边框，让边框变成细线边框
width 宽度
height 高度
resize:none防止拖拽文本域
超链接 <a href="网址">可以是图片或者文本</a>
hspace 水平间距
vspace 垂直间距
cursor: pointer模拟鼠标手势
onclick 事件属性
outline:0去掉搜索框的外边框
bordercolor 表格边框颜色
bgcolor 背景颜色
letter-spacing:2px字间距
word-spacing:2px 单词间距
border 图像的边框宽度
link-through删除线
base 基层网址标记，放在头部和任何包含URL地址的语句之前<base href="http://www.baidu.com" target="_blank">
bgproperties 设置页面的图像固定，不随着页面的滚动而滚动。
infinite 无限的意思
a:hover是选择鼠标指针浮动在其上的元素，并设置其样式
box-sizing:border-box; 把W3C的盒模型改成IE的盒模型
sup 文字的上标
sub 文字的下标
white-space规定段落中的文本不进行换行
strike 删除线
code 等宽文字效果，常用于设置英文
nobr 取消文字换行标记
var 变量标记，文字默认是斜体
transition all/height 花费时间0.3s 运动曲线ease 何时开始0 ，all指的是 top width都行，跟鼠标滑过div时候配合使用
display:none 隐藏元素DIV
display:block 设置为块级元素
display:inline设置为内联元素
border-radius: 10px; CSS3画圆角
list-style-type: none; 清除li的默认样式
xmp或者plaintext 忽视HTML标记
box-shadow: 10px 10px 5px #888888; 设置阴影
font-weight 设置文本的粗细，可以给b标签加粗的字体在CSS里让他变的细点
overflow 溢出处理 overflow:hidden;隐藏超出的文本 overflow:scroll;始终有滚动条 overflow:auto;溢出有滚动条
span 行内元素 div是块级元素 如果你想在一行内给其中的几个字加特效，就需要span了

 <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个选择器选择范围覆盖的话，就依标签选择器的）

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> 这种点一下空连接页面还在原来的位置。