「软帝学院」html入门基础笔记
html入门根底笔记(容易有用)
一、初识html
1.HTML：HyperTextMarkupLanguage（超文本符号言语）
java是一门编译性言语
html是一门解释性的符号言语
符号：便是指组成HTML的各种标签
2.HTML5的优势：
各大浏览器厂商对它的支撑
商场的需求
跨渠道
3.W3C规范：
结构化规范：指用什么言语去建立整个网站（html5）
体现化规范：指用什么去装修整个网站（css3）
行为规范：指用什么去完成网站的功用（JavaScript，jQuery）
4.html的根本结构：
html
head
title天猫精选-抱负日子上天猫/title
/head
bodybgcolor="pink"
大家好！！！！！
/body
/html
双标签：有个两个标签成对出现的叫做双标签
表明HTML网页的开端，表明网页的完结
表明网页头部的开端，表明网页头部的完结
表明网页身体的开端，表明网页身体的完结
表明网页标题的完结
标题标签
h1//h6:会对文字进行加粗，而且改动字体的巨细，还会进行换行
阶段标签
p/p:表明它独占一行，会保存阶段之间的间隔
加粗
strong/strong:表明加粗
斜体
em/em:表明斜体
字体设置
font/font:表明字体
特点：color色彩
face字体的款式
size字体的巨细
单标签：只要一个，开端就完结的叫做单标签
特点：charset=“utf-8”;utf-8表明世界编码格局，一切的字符都能辨认
换行标签
br/：表明换到下一行
水平线标签
hr/:表明水平线
特点：width表明水平线的宽度
size表明水平线的厚度
color表明水平线的色彩
align表明水平线的水平方位，left左面，center中心，right右边
图画标签
imgsrc=""alt=""title=""/
src表明的是图片地址
肯定途径：直接写完好图片地点的方位
相对途径：先找到和你的网页地点同一级的图片地点方位，然后再去在这个根底
去找图片的方位，假如图片鄙人一级那么运用“/”来找到它，假如
上一级运用“..”来找到它
alt表明的是图片加载失利的替代文字
title表明的是鼠标悬浮时图片的提示文字
width表明图片的宽度
height表明图片的高度
独特标签：
大于符号：（greatthan）
小于符号：（lessthan）
空格符号：
版权符号：©
注释：
5.超链接标签
ahref=""target=""/a
1
href表明链接的地址，运用相对途径的办法去运用
target表明衔接的办法
_blank表明在新窗口翻开
_self表明在本窗口翻开
_parent表明在父窗口翻开
页面间的链接，用于两个页面之间彼此的跳转
①要设置一个锚点，语法锚点
假如不在同一个页面中，先写好要跳转页面地点的方位，然后再写锚点的姓名
功用性链接(发邮件、msn、能够翻开本地的相应的客户端)
语法：
二、网页媒体元素
/autoplay表明自动播映（慎用），只要一个特点值
假如特点只要一个值，特点值能够省掉不写
2.音频元素audio/audio
controls表明在增加的音频元素上增加播映控件，只要一个特点值
/autoplay表明自动播映（慎用），只要一个特点值
source表明引证的音频源途径，一般会引证多个源途径，以防止浏览器不兼容的问题
3.内嵌结构iframe/iframe
特点：src表明增加内嵌内容的途径
name表明这个结构的姓名
width表明这个结构的宽度
height表明这个结构的高度
frameborder表明内嵌结构的边框
scrolling表明是否出现翻滚条
作用：
将多个网页重复的部分抽取出来，经过内嵌结构的办法，放到各个网页中
运用a标签跳转到指定的结构中，先在指定要跳转到的结构中取一个name，运用target=“name的值”
a标签必定要写href特点才干收效，假如不想跳转到任何页面，那么href="”，id
名在该网页只能出现一次，具有唯一性
选择器的优先级
id选择器类选择器标签选择器
二、层次选择器
子孙选择器
语法：EF{声明}，E表明的是被匹配的元素，F表明被匹配的E的子孙元素
比方：bodyp{},表明匹配一切body的子孙p元素
子选择器
语法：EF{声明}，E表明的是被匹配的元素，F表明被匹配的E的子元素
比方：bodyp{},表明匹配一切body的子元素中的p元素
相邻兄弟选择器
语法：E+F{声明}，E表明的是被匹配的元素，F表明被匹配的E的相邻兄弟元素
比方：.p1+p{},表明匹配.p1的相邻元素而且为p元素，只匹配后边的元素
通用兄弟选择器
语法：E~F{声明}，E表明的是被匹配的元素，F表明被匹配的E的一切兄弟元素
比方：.p1~p{},表明匹配.p1的一切兄弟元素而且为p元素，只匹配后边的
元素
三、结构伪类选择器
语法：EF:first-child，E表明的是被匹配的元素，F表明被匹配的F:first-
child表明被匹配的E的子元素中第一个元素而且这个元素是F元素
语法：EF:last-child，E表明的是被匹配的元素，F表明被匹配的F:last-
child表明被匹配的E的子元素中终究一个元素而且这个元素是F元素
语法：EF:nth-child(n)，E表明的是被匹配的元素，F表明被匹配的F:nth-
child(n)表明被匹配的E的子元素中终究一个元素而且这个元素是F元素
even表明匹配一切偶数行
odd表明匹配一切奇数行
语法：EF:nth-of-type(n)，E表明的是被匹配的元素，F表明被匹配的F:nth-
of-type(n)表明被匹配的E的子元素中一切的F元素，然后再去找第n个
EF:nth-child(n)表明先匹配一切的儿子，再去找第几个儿子是不是F元素，假如是
就能匹配，EF:nth-of-type(n)先匹配一切F元素，再去找第几个元素
四、特点选择器
E[attr],E表明匹配的E元素，attr表明特点，匹配具有attr特点的E元素
E[attr=val],匹配具有attr特点，而且特点值为val的E元素
E[attr^=val],匹配具有attr特点，而且特点值以val最初的E元素
E[attr$=val],匹配具有attr特点，而且特点值以val结束的E元素
E[attr*=val],匹配具有attr特点，而且特点值中包括val的E元素
六、CSS3美化网页元素
前语：span这个标签没有任何实际意义，它仅仅为了杰出显现某个部分，它是一个行内元素，不能够独
占一行，而且该元素所占的区域是依据内容巨细决议，不会由于改动宽度和高度改动它的巨细
div这个标签没有任何实际意义,它仅仅为了将某些部分装起来，它是一个块元素，会独占一行，
而且该元素所占的区域是依据它的宽度和高度决议，会由于改动宽度和高度改动它的巨细
1.字体款式：
font-family字体类型，字体类型的值有：“楷书”、“隶书”、“微软雅黑”、英文字体
能够写多个字体格局，运用“，”离隔，假如一起存在英文和中文字体，英文就显现
英文字体，中文就显现中文字体，而且英文字体要放在中文字体前面
font-size字体巨细，便是改动字体巨细，字体巨细的单位运用px
font-style
字体风格，normal正常的（默许）、italic（歪斜的）、oblique（歪斜的）
font-weight字体粗细，bold（粗体）、bolder（更粗的）、lighter（细的）
font字体特点，须要满意字体特点设置次序，风格=》粗细=》巨细=》类型
2.文本款式：
color
文本色彩
①运用英文单词去表明色彩
②运用十六进制的办法表明，而且假如相邻的两两数字相同，能够缩写为一位
③运用三原色的办法去表明，语法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值从0~255
a表明通明度，取值从0~1,0表明彻底通明，1表明彻底不通明
text-align
水平对齐办法，设置文本的水平对齐办法
特点值：center居中，left居左，right居右
vertical-align笔直对齐办法，设置文本的水平对齐办法
特点值：middle居中，top居上，bottom居下
text-indent设置文本首行缩进，特点值一般运用em相对单位，em表明长度为文本字符
巨细的长度
line-height设置文本行高，特点值运用px为单位，还能够设置为倍数
text-decoration
文本装修
特点值：①none表明没有任何装修
②underline表明下划线
③overline表明上划线
④line-through表明删去线
text-shadow文本暗影
语法：text-shadow:colorx-offsety-offsetblur-radius;color暗影色彩
x-offset表明X轴偏移量，正数往右偏移，负数往左偏移
y-offset表明Y轴偏移量，正数往下偏移，负数往上偏移blur-radius表明含糊半径
2.超链接伪类
a:link单击拜访前的超链接款式
a:visited单击拜访后的超链接款式
a:hover鼠标悬浮的超链接款式
a:active鼠标单击未开释的超链接款式
列表款式
list-style-type表明设置列表的符号类型
常用类型：none表明没有符号
disc表明实心圆点
square表明实心正方形
circle表明空心圆点
decimal表明数字
list-style-image运用图画替代符号
list-style-position表明在哪个方位运用符号
list-style设置列表特点，一般运用这个特点
3.布景款式
布景色彩background-color
①运用英文单词去表明色彩
②运用十六进制的办法表明，而且假如相邻的两两数字相同，能够缩写为一位
③运用三原色的办法去表明，语法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值从0~255
a表明通明度，取值从0~1,0表明彻底通明，1表明彻底不通明
有一个独特值，transparent表明通明的意思，它是默许值
布景图片background-image
url表明的图片途径
布景重复办法background-repeat
repeat表明沿水平方向和笔直方向进行重复
no-repeat表明不重复
repeat-x表明沿水平方向重复
repeat-y表明沿笔直方向重复
布景位移background-position：X轴方向偏移量Y轴方向偏移量
①能够运用像素值来表明偏移量，比方：50px50px;
②能够运用百分比来表明偏移量，比方：20%50%;
③能够运用英文字母来表明偏移量，比方：centermiddle;
布景特点设置一切的布景款式
布景尺度background-size
①auto表明布景图片坚持原样，默许值
②percentage表明布景图片巨细依据容器巨细的百分比决议巨细，只写一个值表明只
对一个值进行设置，别的一个值会依据图片自身的份额等份额缩放
自身份额为4:3
400px300px
800px600px
1200px900px
③直接运用像素值px来设置图片巨细，只设置一个值和百分比相同
④cover扩大充溢整个容器
⑤contain扩大充溢整个容器，假如有一个方向充溢了整个容器，那么不在扩大
4.突变
线性突变
：色彩沿着一条直线过渡
linear-gradient(突变方向,色彩色彩色彩n)
不加前缀方向运用“to方向”表明往哪个方向进行突变，加上前缀之后运用“方向”
表明从哪个方向开端突变
径向突变：从一个起点朝一切方向混合
-radial-gradient(突变方向,色彩色彩色彩n)
5.浏览器前缀：(防止兼容问题)
IE浏览器前缀-ms-
Chrome浏览器前缀-webkit-
Safiri浏览器前缀-webkit-
Opera浏览器前缀-o-
Firefox浏览器前缀-moz-
七、盒子模型
1.盒子模型：便是一个虚拟的矩形容器
2.盒子模型的组成：
content（内容）：表明主要内容
padding（内边距）：表明内容与边框之间的间隔
border（边框）：表明包着内容的外框，边框是有必定宽度的
margin（外边距）：表明边框外部与其他盒子的间隔
3.边框border
border-color边框色彩
①运用英文字母来表明色彩
②运用十六进制来表明色彩
③运用三原色来表明色彩，rgb(),rgba()
一切的块元素都是一个盒子模型
border-top-color上边框，border-bottom-color下边框
border-left-color左面框，border-right-color右边框
※※※※※※※
能够运用border-color去设置，能够取1~4个值恣意一个
假如设置一个值表明对应一切的方向
假如设置两个值，第一个值表明上边框和它对应边框的值，第二个值表明右边框和它
对应的值
假如设置三个值，第一个值表明上边框，第二个值表明右边框和它对应的值，第三个
表明下边框的值
假如设置四个值，第一个值表明上边框，第二个值表明右边框，第三个值表明下边框，
第四个值表明左面框，依照顺时针的次序顺次设置
border-width边框的粗细
运用像素值去设置边框的粗细，网页一般运用这种办法
设置边框色彩的办法相同
border-style边框的款式
none表明没有边框
solid表明实线边框
dashed表明虚线边框
dotted表明点线边框
设置边框款式的办法和置边框色彩的办法相同
border边框特点
能够设置边框的一切特点，不须要依照次序
border-left设置左面框的特点
border-right设置右边框的特点
border-bottom设置下边框的特点
border-top设置上边框的特点
外边距margin
margin-top设置上外边距的间隔
margin-right设置右外边距的间隔
margin-bottom设置下外边距的间隔
margin-left设置左外边距的间隔
能够运用margin去设置，能够取1~4个值恣意一个
和设置边框色彩的办法相同
运用margin设置盒子居中，语法：margin：0pxauto;须要满意两个条件
①有必要为块元素
②有必要设置盒子的宽度和高度
内边距padding
padding-top设置上内边距的间隔
padding-right设置右内边距的间隔
padding-bottom设置下内边距的间隔
padding-left设置左内边距的间隔
能够运用padding去设置，能够取1~4个值恣意一个
和设置边框色彩的办法相同
4.盒子模型的尺度
盒子模型的尺存分为盒子模型的宽度和高度
盒子模型的外盒宽度=内容宽度+内边距的左右宽度+边框左右宽度+外边距左右宽度
盒子模型的外盒高度=内容高度+内边距的上下高度+边框上下高度+外边距上下高度
盒子模型的内盒宽度=内容宽度+内边距的左右宽度+边框左右度
盒子模型的内盒高度=内容高度+内边距的上下高度+边框上下度
5.解救布局
运用box-sizing解救布局，有3个值
content-box：默许值，表明设置的宽度和高度等于内容的宽度和高度，盒子的宽度和
高度经过估算取得
border-box：表明设置的宽度和高度等于盒子的宽度和高度
inherit：承继父元素的盒子模型方式
6.圆角边框border-radius：为矩形边框设置圆角作用
语法：border-radius:能够设置1~4个值;
设置一个值会对四个角进行设置
设置两个值，第一个值设置左上角和它对角的值，第二值是设置右上角和它对角的值
设置三个值，第一个设置左上角，第二个设置右上角和它对角的值，第三个设置右下角的值
设置四个值，第一个设置左上角，第二个设置右上角，第三个设置右下角，第四个设置左下角
设置圆形
①有必要盒子的宽度和高度相同
②圆角边框的值有必要将四个角的值都设置为宽度的一半或许50%
设置上半圆：宽度不变，高度变为一半，第一个值、第二值为一半，第三和第四个为0
设置下半圆：宽度不变，高度变为一半，第一个值、第二值为第三和第四个为一半
设置左半圆：宽度为一半，高度变不变，第一个值、第四值为一半，第二和第三个为0
设置左半圆：宽度为一半，高度变不变，第一个值、第四值为第二和第三个为一半
扇形：高度和宽度都为一半，须要哪一个方向的就增加哪个角的值，其他都为0
7.盒子暗影box-shadow
语法：box-shadow:insetx-offsety-offsetblur-radiuscolor;
第一个参数表明暗影的类型，不写为外暗影，inset表明为内暗影
第二个参数表明暗影的水平偏移量，正数往右，负数往左
第三个参数表明暗影的笔直偏移量，正数往下，负数往上
第四个参数为含糊半径，含糊规模巨细，越往外越含糊
第五个参数为暗影色彩
八、块元素与行内（内联）元素
1.块元素与行内（内联）元素的特性
块元素：独占一行，而且能够设置元素的宽高(div,hh6,p,列表)
行内元素：不是独占一行，设置宽高对它不起作用，宽度由元素内容撑开。
2.display:显现（元素以哪种方式进行显现）
block：块级元素的默许值，在元素前后会有换行
inline:行内元素的默许值，元素前后没有换行
inline-block:行内块元素，元素既有行内元素的特性(能够和其他元素显现在同一行)又有块级元素的特性（能够设置宽高）。
none:该元素不被显现。
3.float:起浮:使得块级元素摆放在同一行
left:左起浮
right：右起浮
none:元素不起浮，依照规范文档流显现
4.clear：铲除起浮
left：铲除元素左面的起浮
right:铲除元素右边的起浮
both：铲除两边
none:默许值，不铲除起浮
5.处理父级边框陷落的办法
在起浮元素的后边加空div，而且给这个空div设置款式：clear：both
给父级设置高度height
给父级增加特点overflow:auto;
给父级增加伪类after
#father:after{
content:’’;
display:block;
clear:both
}
6.overflow:特点用来处理溢出
visible:可见的，内容元素会被显现出来，可是在父级边框的外面
hidden:内容元素会被显现在边框里，可是超出的部分会被躲藏
scroll:内容元素会被躲藏，可是浏览器会供给翻滚条，翻滚以显现超出的内容
auto:当内容元素超出父级的高度时就供给翻滚条以显现超出的内容，若内容未超出就不显现翻滚条。
九、定位与动画
1.定位特点:position
static:默许值，没有定位
relative：相对定位，相对于元素本来的方位进行偏移，元素本来的方位会被保存，起浮元素设置相对定位后，是相对元素起浮今后的方位进行偏移。
absolute:肯定定位，相对于离元素最近的现已设置定位特点的先人元素为基准进行偏移，元素本来的方位不会被保存，假如没有现已定位的先人元素，则以浏览器窗口为基准进行偏移。
fixed：固定定位，以浏览器窗口为基准进行偏移。
z-index：改动定位元素的堆叠次序，值为整数，值越大，等级越高，显现在最上面。
2.动画
变形
语法:transform:变形函数;
平移函数：translate(x,y);x代表水平方向的位移，y代表笔直方向的位移，单位为px；
缩放函数：scale(x,y);x代表元素宽度的缩放量，y代表高度的缩放量。
歪斜函数：skew(x,y);x代表元素水平方向的歪斜度数，y代表笔直方向的歪斜度数，单位是deg。
旋转函数：rotate(x);x代表旋转的度数，为正数时顺时针旋转，为负数时逆时针旋转。
过渡transition：是一种动画转化历程，渐慢，渐快等。
语法：transition:过渡款式的特点过渡耗费的时刻过渡函数(过渡的速度)过渡的延迟时刻；
1)运用过程
A、在元素默许款式中声明元素默许的款式
B、声明元素终究出现的款式，如悬浮(hover)，获取焦点(focus)时的款式
C、在元素默许的款式中增加过渡特点。
过渡函数：
ease：默许值，由快到慢
linear:匀速
ease-in:越来越快
ease-out:越来越慢
ease-in-out:先越来越快再越来越慢
3.动画animation
创立关键帧(浏览器兼容前缀是加在@与keyframes中心的)
语法：@keyframes动画称号{
0%{元素款式}
25%{元素款式}
…
}
4.调用动画
在元素款式中调用
语法：animation:动画称号动画次数动画播映的方向动画播映状况
1)、动画播映次数：为整数，默许值为无限循环infinite
2)动画产生的操作：forwards(向前)backwards（向后）both（既能够向前又能够向后）
3)动画播映状况：running(播映)paused(暂停)
4)动画播映方向：normal（向前）alternate(偶数次向前)