首页 > 代码库 > HTML总结
HTML总结
xhtml01常用标签
<!--
二、html基础知识（标记（w3c）语言）
html5:2014年10月
第一阶段课程内容是xhtml4
xhtml与html的区别
标记语言的说明和规范见w3c网站
-->
<!--
三、
html标签：负责网页内容
css：负责网页的外观样式
js:负责网页的交互、反应
-->
<!--
特殊符号
空格： 
版权符号：©
注册：®
-->
<!--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 链接有用
总结：
<!--一、html5新特性
常用语义标签:nav footer header section mark
功能标签 video audio iframe canvas(画布和绘图功能)
input新type:url/number/range/Date(date, month, week, time等)/search/color
二、css3
1 边框
border-radius:不同的赋值方法;
box-shadow:10px 10px 5px red;
border-image:赋值内容;
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
备注:IE9+支持border-radius 和 box-shadow。
IE11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。
2 文本
text-shadow:5px 5px 5px yellow;(每个位置表示的含义)
3 字体
@font-face的使用方法
4 动画
transform
:translate()/rotate()/scale()/skew()/matrix()
备注:IE10、Firefox 以及 Opera 支持 transform 属性
Chrome 和 Safari 需要前缀 -webkit-
Internet Explorer 9 需要前缀 -ms-
5 动画3D
transform-origin 允许你改变被转换元素的位置。
赋值需要掌握 关键词!
transform-style 规定被嵌套元素如何在 3D 空间中显示!!!
perspective 透视点 !!!
backface-visibility 定义元素在不面对屏幕时是否可见
6 过度transition
备注:
IE10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：IE9 以及更早的版本，不支持 transition 属性。
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
不同的属性值需要知道.
transition-delay 规定过渡效果何时开始。默认是 0。
7 帧动画
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
8 流式布局 媒体查询 响应式
流式布局:百分比布局, 所有尺寸参照父级 其中margin和padding特殊
媒体查询 @media screen () and ()
响应式: viewport 统一写法
-->
PS常用与鼠标样式设置
ps常用快捷键
框选 M
移动 V
显示辅助线 command+‘;‘
显示标尺 command+r
抠图： v＋选中图片＋图层文件＋鼠标右键＋选择删格化图片＋鼠标右键＋转化为智能图片＋框选刚才的图片
＋（command+c复制）＋（command+n新建）＋（command+v粘贴）＋
（command+alt＋shift＋s保存）＋存储为png＋修改有意义的图片名
关闭标签：command+w
切换标签：ctrl+tab
切换不同模式：f
历史记录：在窗口选项里打开
合并图层： command键按住 + 多选图片 + 右键 + 合并图片
-->
<!--
css属性：
｛z-index:数值；｝
比如：div{z-index:200;}
数值越高显示时越在上面。
鼠标样式
｛cursor：opinter;｝
a:hover div{
}
-->
HTML总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。