HTML总结

xhtml01常用标签

<!--
二、html基础知识（标记（w3c）语言）
html5:2014年10月
第一阶段课程内容是xhtml4
xhtml与html的区别
标记语言的说明和规范见w3c网站
-->
<!--
三、
html负责网页内容
css：负责网页的外观样式
js:负责网页的交互、反应
-->
<!--
特殊符号
空格：&nbsp
版权符号：&copy
注册：&reg
-->
<!--1、独占一行的标签称为块标签，eg：p li h1~h6 ul等,一般可以设置css;
2、可以与其他行标签共占一行的标签称为行标签，eg：em a span等,一般设置css没用，但也有特殊的如：img;
3、某些特别的行标签也可以设置css,eg：img
-->

xhtml02 盒子模型
重点：1、css3种引入方式（区别和优先级）
第一种引入方式（引入式）：在head里的style标签里写，能给当前文件“穿衣服”;
第二种引入方式（嵌入式，在标签里面写）：只能给当前这一个标签“穿衣服”;
第三种引入方式（导入式）：通过link标签引用写好的css文件
优先级：嵌入式>引入式>导入式（作用域越大优先级越低）
2、css6种选择器／符
标签选择器;格式：标签名｛属性：值；｝
id选择器；格式：#id名{属性：值；}
类选择器；格式：.class名｛属性：值；｝
后代选择器；格式：父标签 子标签｛属性：值；｝(父标签＋空格＋子标签)
通配符选择器；格式：*{属性：值；}
组合选择器：用逗号分开各选择符
3、盒子模型（content padding border margin）
content:内容
padding:填充
border:边框
margin:边界
4、display（inline block inline-block none）
inline:行标签
block:快标签
inline-block:行块标签
none:不显示标签
5、水平居中两种方法｛
行：其父：text-align:center;
块：本身：margin:0 auto;
｝
<!--css层叠样式表：
可以实现样式与内容完全分离
1、通过head里的style标签
2、通过某个标签的开始标签里的style
3、通过head里的link标签引入
三种css引入方式有优先级went：
作用范围越大，优先级越低！！！
-->
<!--水平居中两种方法
1、行元素居中，在其父标签的样式里写：text-align:center;
2、块标签居中，在这个块元素的样式里写：margin:0 aoto;
-->
<!--1、display属性负责控制标签的显示方式
值为inline时，标签是行标签
值为block时，标签是块标签
值为inline-block时，标签是行块标签
值为none时，标签不显示
行块标签可通过display属性值相互切换！！！


2、标签嵌套注意点
块标签可以嵌套任何标签
行标签不可以嵌套块标签（会引起布局错乱）
-->

三、浮动布局
<!--主流布局方式
div+css布局
-->
<!--浮动标签的核心思想
1、浮动会让标签的布局脱离原来默认的文档流布局（默认的布局方式）方式；
2、浮动会让块元素失去独占一行的特性，
在浮动这一行的标签可以共存一行；
3、浮动标签后面布局的标签会忽略被浮动标签原来占据的空间；
-->
<!--1、margin:0 auto;不适用于float标签；
2、背景颜色显示的不一定是内容部分；而是内容＋填充＋边框
3、修改padding后，原来标签的背景颜色占据高宽会发生变化
-->
<!--控制位置：
父子关系的修改父标签的padding；
兄弟关系的修改标签的margin；
margin的合并：垂直相邻的外边界取大值
水平相邻的外边界取二者和
-->
<!--
调试技巧：
1、中文符号；
2、标签嵌套关系；
3、逐行注释（暴力调试）；
4、少了关闭标签或结尾的分号；
5、结果和预期不同，检查盒子模型；

-->

四、定位布局

<!--
当“父标签没有指定高度，并且它的子标签有浮动，”这时它的高度不会自动增加！！！
清除浮动
1、clear:both
2、额外标签法：在有浮动的标签的末尾添加一个空的div，然后在这个div的样式里写：clear:both;（推荐做法）
-->
<!--绝对布局absolute:
1、会让标签脱离文档流；
2、子标签绝对定位，需要给父标签设置position: relative;！！！(不然子标签只是根据网页定位)；
3、设置绝对定位的标签不再是行块元素；
4、“定位元素”默认可以设置宽高，内容撑开其大小；
5、绝对定位通常用于重叠的div
-->
<!--清除浮动
1、后面的标签clear:both;
2、浮动子标签的末尾添加空div，并将这空的div｛clear:both;｝（推荐！！！）
3、给浮动子标签的父标签设置｛overflow:hidden｝;（但是这种方法用在“定位布局”时会有问题）
浮动布局会对其父标签和之后的标签产生影响！！！

-->
<!--相对定位relative:
1、相对定位标签不脱离文档流；
2、相对定位相对于之前的位置进行定位；
3、不改变标签原有的属性（行块属性）；
4、通常用于给子标签 辅助 绝对位置；
-->
<!--固定布局fixed
1、脱离文档流；
2、定位的元素即不是行标签也不是快标签，而是定位元素
3、可以设置宽高和css样式；
4、通常用于广告；
5、固定定位是相对于浏览器进行布局的。
-->



HTML5内容
第一天：
新增nav header footer section(常用的4个)
input新增属性：email（邮箱）url（网址）number（数字）
range（范围（可以调整最大最小值））
search（搜索）date month week time（日期 （可以有最大值最小值））
tel（电话）color（颜色）
新增from属性(就是在form外面写时也可以用form传值，但是要声明form属性)
video（视频）audio（音频）
<!--controls：播放的控件
autoplay：自动播放
preload：预加载，如果设置了autoplay，那么就不会执行预加载
播放器有默认宽高，可以修改width和height
-->

<!--视频播放
只能播放H263.mp4格式文件
-->
mark（高亮文字）
<!--传统布局方式的缺陷：
语义不明，结构不清晰；
不利于seo优化；
浏览器无法精准识别语义；
-->

<!--html5的新增结构元素
nav导航
header头部
footer页脚
article文章
section分区
aside边栏
注意：
1、 article和section都是用来分区的，但是二者不同；
article强调内容独立，内部常嵌套header和footer
section分区,内部通常是p和h
二者可相互嵌套

2、 footer可以在article的末尾或整个页面的末尾

3、 aside通常里面有友情链接，辅助信息，侧边栏

4、常用的：section nav footer header
这些都是div，只是html5语义更加清晰
<nav></nav>写法相当于
<div class="nav"></div>
-->
第二天：
<!--移动端响应式的通用代码-->
<!--width赋值为固定像素或者某个特殊的值，比如device-width(指的是100%时css像素)
height和width一样
initial-scale=1.0：第一次加载网页时显示的比例
maximum-scale=1.0：允许用户手机缩放的最大比例
user-scalable=0：值为0，代表不允许用户手动缩放
这段代码的意思是：
让viewport的分辨率等于物理设备上的真实分辨率，
不允许用户修改，可以保证显示效果真实细腻。
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

/*代表最大能达到的宽度是1000px*/
max-width: 1000px;
/*添加约束范围*/
min-width: 500px;
/*浮动之后，标签与标签之间的白线消失*/
float: left;
/*CSS3选择器*/
.wrap div:nth-child(3n+2){
margin-left: 3.5%;
margin-right: 3.5%;
}

/*渐变方向，颜色，位置*/
/*background-image: -webkit-linear-gradient(top,red 10%,yellow 90%);*/
/*background-image: -webkit-linear-gradient(top,red 0%,yellow 50%,blue 51%,green 100%);
*/
圆形的渐变设置
background-image: -webkit-radial-gradient(50% 50%,red 30%,yellow 30%,blue 50%);
/*方向 间距 渐变 上above 下below*/

/*倒影不占文档流空间，层级高于文档流
倒影是针对标签（宽高）进行的*/
-webkit-box-reflect:below 20px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.7) 50%);

第三天
/*当overflow的值不是默认值时，该标签是“BFC”标签*/

overflow: hidden;
border: 1px solid red;
/*CSS3新属性，可以修改标签尺寸*/
resize: auto;
/*外边框outline（外线）不属于盒子模型*/
outline: 10px dashed black;
/*偏移的距离*/
outline-offset: 2px;
/*阴影*/
text-shadow: 2px 2px 50px yellow,3px 2px 50px red,4px 2px 50px black,5px 2px 50px green;
}
<!--通过css3的transform可以实现：
平移（translate）/旋转（rotate）/缩放（scale(1)）/拉伸等效果
-->

第四天
动画定义：
@keyframes name{//定义动画
from{//开始，相当于0%，其中可以分成n多个段写，0%~100%只是其中的一种
}
to{//结束，相当于100%
}
}

动画引用：
animation: move 5s ease;

animation：动画引用标签
move：动画的名称（自己命名）
5s：执行这一次动画的时间
ease：动画执行的速度
注：还可以定义动画执行的次数，可以一直执行，也可以按照想执行的次数来执行
animation-iteration-count: infinite;//一直执行（默认的是执行一次）
animation: move 2s linear 1 reverse;//其中1就是执行的次数，后面跟着reverse就表示动画需要执行几次
浏览器兼容问题：
-webkit-transform: translate(300px,400px);//safari和谷歌
-moz-transform: translate(300px,400px);//火狐
-ms-transform: translate(300px,400px);//IE
-o-transform: translate(300px,400px);//欧朋
transform: translate(300px,400px);

第五天：
分栏布局与弹性布局：
分栏布局
/*分栏数量*/
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/*栏与栏之间的距离*/
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
/*栏宽（与栏count矛盾时）*/
/*-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;*/
/*移动端涉及到新闻类布局时，用这种方式布局：CSS3的分栏布局
使用CSS3属性时，要考虑浏览器兼容性问题！！！*/
column-rule: 1px solid red;
/*注意：当浏览器尺寸发生变化时，rule的位置是不会发生改变的*/
弹性布局
<!--弹性布局
1、找到父标签设置：display:box;
2、在子标签中通过box-flex属性设置百分比（可以是数字或者某固定值）
3、子标签默认水平布局
4、要考虑浏览器兼容问题，很多都不兼容！！！！
5、弹性布局有很多不同的写法，以课堂笔记为主！
-->
/*让子标签可以弹性伸缩*/
display: -webkit-box;
display: -moz-box;
/*弹性盒子的一些属性*/
/*布局方式（水平还是垂直）*/
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal;
/*水平对齐方式：*/
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
/*垂直对齐方式*/
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-box-pack: start;
box-pack: start;
/*学习要求：

以上属性值需要知道！！！

*/
注：
a链接使用注意：
link什么的标签只对a 链接有用

稿源：勤快学QKXue.NET

扩展阅读：

HTML总结

http://qkxue.net/info/29214/HTML

HTML总结