HTML

HTML：超文本标记语言(Hyper Text Markup Language)
HTML不是一种编程语言，而是一种标记语言，描述网页的语言
HTML使用标签描述网页中图片，文本，音乐，视频，超链接等
ctrl+D：快速复制一行   table：自动补全
标题标签：<h1>--<h6>
段落和换行标签：<p>..</p>、<br/>
水平线标签：<hr/>
斜体：<em>...</em>
字体加粗：<strong>...</strong>
<img src="" alt=""> 图片
常见的图片格式：jpg、gif、bmp、png
路径：相对路径   从当前位置查找
      绝对路径   从根查找
      ../   返回上一级目录
width代表图片的宽  height代表图片的高
超链接：<a href="链接地址" target="目标窗口位置">文本或图像</a>
target取值：_self  自身窗口 /  _blank  新建窗口
超链接的应用：
1.页面间链接：A页到B页，网上常见链接
2.锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记
要跳转到的部分 <a name="名字"></a>
用超链接部分  <a href="#名字">文本或图像</a>
跳转到不同页面的固定位置
1.html    2.html
<a  href="2.html#me">点击我</a>
<a name="me">跳转到我这里来</a>
3.功能性链接：电子邮件、QQ、MSN等链接
<a href="mailto:邮箱地址">给站长写信</a> 


注释和特殊符号
空格：&nbsp
大于号（>）:&gt
小于号（<）:&lt
引号：&quot
版权符号@:&copy
注释：<!--文本-->


规范：
--标签名称、属性名称必须小写
--标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
--属性值必须用引号引起来


如何实现在网页上播放视频和音频？
1.第三方自主开发的播放器
2.flash
3.html5媒体元素


<video src="视频路径" controls></video>
autoplay:自动播放
<video controls>
   <source src="video/video.webm" type="video/webm"/>
   <source src="video/video.mp4"  type="video/mp4"/>
</video>


<audio  src="音频路径"controls(="controls")></audio>
<audio controls>
   <source src="music/music.mp3" type="audio/mpeg"/>
   <source src="music/music.ogg"  type="audio/ogg"/>
</audio>


HTML5的结构元素
header:标题头部区域的内容（用于页面或页面中的一块区域）
footer:标记脚部区域的内容（用于整个页面或页面的一块区域）
section:web页面中的一块独立区域
article:独立的文章内容
aside:相关内容或应用（常用于侧边栏）
nav:导航类辅助内容




CSS样式（层叠样式表）
优势：
--内容与表现分离
--网页的表现统一，容易修改
--丰富的样式，使页面布局更加灵活
--减少网页的代码量，增加网页的浏览速度，节省网络带宽
--运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS注释：/*  */
CSS语法规则
选择器{声明1  属性：值;
      声明2;
      声明3;
      .....
}
--标签选择器：选择器写法和标签是一致的，所有的这些标签会使用统一的样式
--类选择器：（.）选择器名字{color：red}  <h1  class="选择器名字"></h1>
--ID选择器：#选择器名称{color：red}<h1 id="选择器名称"></h1>
--结构伪类选择器：a:nth-of-type(1){text-decoration:overline}表示父集下面类型为a的第一个元素
类选择器可以重复使用，ID选择器只能使用一次，不能重复
颜色表达：英文单词/十六进制的数字：0-9 A B C D E F 比如：ff0000
RGB=Red  Green  Blue   ff代表最大
如何使用CSS样式：
（1）写在内部样式表<style></style>
（2）内联样式：在标签后面加样式属性<p style=""></p>
（3）外部样式表：（1.链接式）创建一个外部的css文件：*.css把样式写在这个文件中
谁想用这个样式，谁就引入这个css文件即可<link rel="stylesheet" href="样式文件的路径"/>
（2.导入式）<style>@import "样式文件的路径"</style>
行内样式>内部样式>外部样式
ID选择器>类选择器>标签选择器




链接式和导入式的区别：
--<link/>标签属于XHTMLX,@import是属于css2.1
--使用<link/>连接的css文件先加载到网页中，再进行编译显示
--使用@import导入的css文件，客户端显示HTML结构，再把css文件加载到网页当中
--@import是属于css2.1特有的，对于不兼容css2.1的浏览器来说是无效的


嵌入：<iframe name="名字" src="嵌入网站的网址" height="高度"  width="宽度" scrolling="滚动条"></iframe>




为什么使用CSS？
--有效的传递页面信息
--使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
--可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
--具有良好的用户体验


<span>标签的作用：能让某几个文字或者某个词语凸显出来

<div>标签：块标签，能设置表格

letter-spacing:设置字符间距的属性

字体样式：
font-family：设置字体类型
font-size：设置字体大小（px、em、rem、cm、mm、pt、pc）
font-style：设置字体风格（normal（正常）、italic（倾斜）、oblique（斜体 ））
font-weight：设置字体的粗细（normal、bold（粗体）、bolder（更粗）、lighter（更细）、100-900）
font：在一个声明中设置所有字体属性 字体风格--字体粗细--字体大小--字体类


文本样式（div标签）：
color：设置文本颜色（r,g,b）：正整数的取值为0-255  （RGBA）A是透明度，取值为0-1之间
text-align：设置元素水平对齐方式
--left：把文本排列在左边。默认值
--right：把文本排列到右边
--center：把文本排列到中间
--justify：实现两端对齐文本效果
text-indent：设置首行文本的缩进（em或者px）
line-height：设置文本的行高（px）
text-decoration：设置文本的装饰
--none：默认值，定义的标准文本
--underline：设置文本的下划线
--overline：设置文本的上划线
--line-through：设置文本的删除线
vertical-align：垂直对齐方式
--middle：中间对齐
--top：上对齐
--bottom：下对齐
text-shadow：
--color：阴影颜色
--x-offset：X轴位移，用来指定阴影水平位移量，值越大，越靠右
--y-offset：Y轴位移，用来指定阴影垂直位移量，值越大，越往下
blur-radius：阴影模糊半径，带边阴影向外模糊的模糊范围


超链接样式（伪类名称）
--a:link  未单击访问时超链接样式
--a:visited  单击访问后超链接样式
--a:hover  鼠标悬浮其上的超链接样式
--a:active   鼠标单击未释放的超链接样式
a:link>a:visited>a:hover>a:active


float:浮动，两个文本连接在一起，left为左  right为右


背景颜色：background-color   transparent(透明度)
背景图像：background-image:url(图片路径)
背景重复方式：bacground-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景定位：background-position
Xpos  Ypos：单位：px，Xpos表示水平位置，Ypos表示垂直位置
X%  Y%：使用百分比表示背景的位置
X、Y方向关键词：水平方向的关键词：left、center、right
               垂直方向的关键词：top、center、bottom
背景尺寸：backgroud-size
auto：默认值，使用背景图片保持原样
percentage：当使用百分值时，不是相对背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover：整个背景图片放大填充了整个元素
contain：让背景图片保持本身的高度比例，将背景图片缩放到宽度或者高度正好适合所定义背景的区域
CSS3渐变：
线性渐变（linear-gradient）：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合


列表：就是信息资源的一种展示形式，以列表的样式显示，可以使信息结构化和条理化，便于浏览者能更快捷地获得相应的信息
列表的分类：无序列表(ul)  有序列表(ol)   定义列表(dl(dt(dd)))
无序列表的特性：
--没有顺序，每个<li>标签独占一行（块元素）
--默认<li>标签项前面有个实心小圆点
--一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
定义列表的特性：
--没有顺序，每个<dt>、<dd>独占一行
--默认没有标记
--一般用于一个标题下有一个或者多个列表项的情况
list-style-type：
--none：无标记符号
--disc：实心圆，默认类型
--circle：空心圆
--square：实心正方形
--decimal：数字


表格：<table>  <tr>表示行  <td>表示列
边框：border
跨列的合并：colspan
跨行的合并：rowspan


表单语法：
<form method="get|post"  action="发送到哪里"></from>
表单元素格式：
--type：指定元素类型(text password checkbox（复选框、checked） radio（单选按钮、checked） submit reset file hidden image button)
--name：指定表单元素的名称
--value：元素的初始值。type为radio时必须指定一个值
--size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
--maxlength：type为text或password时，输入的最大字符数
--checked：type为radio或checkbox时，指定按钮是否是被选中
列表框：<select><option></option></select>
按钮：reset（重置按钮）、submit（提交按钮）、button（普通按钮）
多行文本域：<textarea name="" cols="x(显示的列数)" rows="y(显示的行数)">文本内容</textarea>
邮箱： <input type="email" name="files"/>
网址： <input type="url" name="files"/>
数字： <input type="number" name="num" min="0（允许的最小值）"  max="100（允许的最大值）"  step="10（合法的数字间隔）"/>
滑块： <input type="range" name="files" min="0（允许的最小值）"  max="100（允许的最大值）"  step="2（合法的数字间隔）"/>
搜索框：<input type="search" name="files"/>
隐藏域：<input type="hidden" value="666" name="files"/>
只读文本框：<input name="name" type="text"  value="张三" readonly>
禁用：<input type="submit" disabled value="保存">
表单元素的标注：
--增强鼠标的可用性
--自动将焦点转移到与该标注相关的表单元素上
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>


CSS3高级选择器：
并集选择器：多个选择器通过逗号连接而成，
层次选择器
--E F：后代选择器-选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
--E>F：子选择器-选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
--E+F：相邻兄弟选择器-选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
--E~F：通用兄弟选择器-选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
结构伪类选择器
--E:first-child 作为父元素的第一个子元素的元素E
--E：last-child 作为父元素的最后一个子元素的元素E
--E F:nth-child(n) 选择父级元素E的第n个子元素F（n可以使1/2/3）关键字是even（偶）、odd（奇）
--E:first-of-type  选择父元素内具有指定类型的第一个E元素
--E:last-of-type   选择父元素内具有指定类型的最后一个E元素
--E F:nth-of-type(n)  选择父元素内具有指定类型的第N个F元素
属性选择器
--E[attr] 选择匹配具有属性attr的E元素
--E[attr=val]  选择匹配具有属性attr的E元素，并且属性值为val（val区分大小写）
--E[attr^=val]  选择匹配元素E，且E元素定义了属性atr，其属性值是以val开头的任意字符串
--E[attr$=val]  选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
--E[attr*=val]  选择匹配元素E，且E元素定义了属性attr，其属性包含了“val”，换句话说，
字符串val与属性值中的任意位置相匹配


CSS高级操作
外边距：margin  内边距：padding  边框：border 
边框/边距：按顺时针顺序  上、右、下、左
border-color:
--border-top-color：上边框颜色
--border-right-color：右边框颜色
--border-bottom-color：下边框颜色
--border-left-color：左边框颜色
--border-color:#eeff34;  四个边框为同一颜色
--border-color:#369 #000;  上、下边框颜色：#369  左右边框颜色：#000
--border-color:#369 #000 #f00;  上边框颜色：#369 左右边框颜色：#000 下边框颜色：#f00
--border-color:#369 #000 #f00 #00f;  分别对应上、右、下、左边框颜色
border-style:
none、hidden 代表没有边框
dotted代表点线
dashed代表虚线
solid代表实线
double代表双线
border:颜色、属性、样式
box-sizing:
--content-box：默认值，盒子的总尺度
--border-box：盒子的宽度或高度等于元素内容的宽度或高度
--inherit：元素继承父元素的盒子模型模式
网页居中对齐：margin:0px auto  必要条件：块元素、固定宽度
圆角边框：border-radius：上、右、下、左
利用border-radius属性制作圆形的两个要点：
--元素的宽度和高度必须相同
--圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
盒子阴影：box-shadow
--inset:阴影类型 内阴影
--x-offset：x轴位移，指定阴影水平位移量
--y-offset：y轴位移，指定阴影垂直位移量
--blur-radius：阴影模糊半径，阴影向外模糊的模糊范围
--clolr：阴影的颜色
块级元素：h1--h6  p  div  列表
内联元素：span  a  img  strong
display属性：
block：块级元素的默认值，该元素前后都有换行符
inline：内联元素的默认值，该元素前后没有换行符
inline-block:行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none：设置元素不会被显示
清除浮动：clear属性
--left：在左侧不允许浮动元素
--right：在右侧不允许浮动元素
--both：在左、右两侧不允许浮动元素
--none：默认值，允许浮动元素出现在两侧
解决父级边框塌陷的方法：
--浮动元素后面加空div，然后添加类选择器，里面写both。
--设置父元素的高度
--父级添加overflow属性
--visible：默认值，内容不会被修剪，会呈现在盒子以外
--hidden：内容会被修剪，并且其余内容是不可见的
--scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
--auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
--父级添加伪类after
.clear:after{
conent:'';    在clear类后面添加内容为空
display:block;   把添加的内容转化为块元素
clear:both;   清除这个元素两边的浮动
}


定位：position属性
--static：默认值，没有定位
--relative：相对定位  相对自身原来位置进行偏移
规律：1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
      2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻盒子都没有任何影响
      3.设置相对定位的盒子原来的位置会被保留下来
--absolute：绝对定位
--fixed：固定定位
z-index属性：
调整元素定位时重叠层的上下位置:
--z-index属性值：整数，默认值为0
--设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
--z-index值大的层位于其值小的层的上方
opacity:x  透明度  x值为0~1，值越小越透明
filter:alpha(opacity=x)  x值为0~100，值越小越透明