H5基础
什么是H5
H5是指第5代HTML全拼 HyperText Markup Language,中文名字为:超文本标记语言,也指用H5语言制作的一切数字产品,它是用来做静态网页的,同时也是做动态网页的基础,作用的话就是做一个标记来让浏览器解析,最后显示出页面来,网上的网页,多数都是由HTML写成的。
“超文本”是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。
浏览器通过解码HTML,就可以把网页内容显示出来。
标签的分类
块标签
div(常用来布局划分区域) p标签(段落) h1-h6(标题)
特点:支持设置宽高 独占一行 支持所有css样式
行属性标签:
span(文字) a(超链接)
特点:不支持设置宽高 拍成一行 不支持上下的margin和padding
行块属性标签:
img(图片)
特点:即支持宽高 又排成一行
css的三种引入方式
行间样式:
在标签中写入style属性 样式写在style中(优先级最高 不常用)
内部引入方式:
在head中写入style标签 样式写在style标签中
外部引入方式:
在head中使用link标签引入外部css文件(开发中使用最多)
注意:外部和内部引入方式优先级相同,文档后面的会覆盖前面的
选择器
标签选择器:
语法:标签名{样式}
class选择器:
语法:" . "+class名{样式}
特点:1.优先级比标签选择器高 2.可以有多个class名 3.不同标签可以使用相同的class名
id选择器:
语法:" # "+id名{样式}
特点:1.优先级最高 2.只能有一个id名不允许出现重复
后代选择器:
语法:父选择器 空格 子选择器{样式}
优先级为选择器权重想加(class权重位10 标签选择器权重为1)
盒模型
外边距:margin 用来调整元素位置 它的位置相对于父元素的边缘或相邻元素
注意:元素第一个子元素的marign-top会传递给父元素
解决方案:给父元素设置overflow:hidden
边框:border 一般设置三个参数 分别为颜色 边框宽度 边框样式(常用实线solid)三个参数没有顺序
内边距:padding 内容区域距离元素边缘的距离
1.内容不会占padding的位置 2.padding的颜色和背景颜色相同
注意:border和padding都会让元素变大
float(浮动):
浮动包括left和right(左浮动和右浮动)
设置浮动是为了让块属性可以排成一行
1.浮动可以是行属性元素支持宽高
2.浮动具有流式布局效果和文字环绕效果
3.浮动会有脱离文档流效果
浮动的影响:
如果父元素没有高度,靠子元素撑开。当子元素浮动,脱离文档流,父元素则不会被撑开
进而失去高度,这样会影响布局
解决方案:给父元素设置overflow:hidden
position(定位)
fixed(固定定位)
相当于浏览器可视窗口,一般用于悬浮窗,小广告,返回顶部按钮等功能。
relative(相对定位)
定位相对于它原来位置,一般配合子元素的绝对定位 absolute使用。
absolute(绝对定位)
定位相对于拥有定位的父级元素,如果父元素没有定位,则一直向上查找有定位
的祖先元素,直到找到body为止
注意:定位只适用于某一个模块中的某个小部件(小模块),不可以用于大范围布局
绝对定位大多数情况配合父元素的相对定位使用。可以搭配记忆。
常见布局
1.静态布局(static)
静态布局是针对PC段的传统Web设计。设计一个居中布局,一般具有固定的宽度,当浏览器窗口缩小时,页面内容会被遮挡,呈现横竖向滚动条。
2.响应式布局(responsive)
针对越来越多的移动端设备,一个web设计能够兼容多个终端。通过CSS3中的Media Query(媒介查询),采用栅格化方式,分别为不同的屏幕分辨率定义布局。
3.弹性布局(flexbox)
响应式布局中的一种,为了实现响应式布局,CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。
PC站常见布局
-
一列布局(静态布局):一列自适应居中
-
两列布局:一列固定宽+一列自适应
-
三列布局(双飞翼布局):中间列自适应宽+左右列固定宽
一列布局:
两列布局:
三列布局(双飞翼布局):
CSS文本样式
- text-align:必须用于块状元素,如:p标签和div标签。定义内部文本及内联元素如何横向对齐。默认值是start,取决于html文档的direction属性设置(默认都是从左至右,所以等同于left)。
- text-decoration:主要用来对文本添加线条修饰。通常为了美观,会消除超级链接默认的下划线修饰:a { text-decoration:none;}
- text-indent:作用于块状元素,用来在块状元素的内容第一行添加一定的空格, 以达到首行缩进的效果。和font-size属性一样,对于首行缩进,你也可以使用px,em或者%。
一般使用相对单位em,以元素本身字体尺寸为参考基数。中文网页中段落的首行缩进通常是2个文字的距离,常用代码:p {text-indent:2em;}。可以使用负值,产生一些特殊效果,如“悬挂缩进”。
- text-transform:用于转换文本中的大小写方式(忽略源文档中的大小写),对中文无效。
- text-shadow:用来设置文本的阴影效果,是CSS3的新增属性。实现一种阴影效果需要设定一组值而非一个值,并按照顺序来书写值。可以通过添加多组值来设定多重阴影,达到特殊效果,多组值之间用逗号隔开。部分老浏览器版本不支持该属性(IE9及以下),但这并不产生大的影响。
按顺序书写4个值:水平阴影距离>垂直阴影距离>模糊程度>阴影颜色
- line-height:用来设置行的高度,是一个简单又复杂的属性。可以将行高看成是以文字内容本身为中线,上下垂直延伸形成空隙而成。即:将行距的值(行高-字号)/2,分别增加到内容区域的上下两边。
通常使用相对单位来设定行高,因为行高是以文本的字号为参考基准。默认情况下,浏览器将行高呈现为字体尺寸的1到1.2倍左右,通常将行高设置我字号的150%到180%之间。
典型应用:单行文本在容器中垂直居中。实现办法:让容器行高等于容器高度。
- overflow:设置对象处理溢出内容的控制方式,针对的是容器内部的内容,不仅仅是单纯文本。此属性适用于块状元素。内容的溢出可能是横向或纵向的,因此延展开来,可以细分为x轴和y轴。
常用的值:
-
letter-spacing:设置单个字符之间的间距。指定的间距将被添加到字符之后,通常以字号为参考,使用相对单位来控制间距。可以使用负值。
-
word-spacing:设置单个词语之间的间距。判断单词或词语的依据是文本间的“空格”,指定的间距将被添加到单词或词语之后,但最后一个词除外。通常以字号为参考,使用相对单位来控制间距。可以使用负值。
-
word-break:设定容器中文本字内换行的行为。主要针对数字或英文的排版,防止出现连续无意义的长字符打破布局。常用布局:word-break:break-all;
web图片的格式
-
JPG格式
后缀名为.jpg或者.jpeg。色彩丰富,过渡平滑,适用于照片类型。有压缩比,压缩比越高,图片质量越低,但文件越小;无法保存透明度,不能呈现动画效果。
-
PNG图片
后缀名为.png,有8位、24位、32位三种形式。兼具JPG和GIF的色彩模式,压缩比高,生成文件体积小。png-8位可以实现全透明/不透明的效果。png-24(32)位可以实现半透明的效果。不能实现动画。
-
GIF图片
后缀名为.gif,只包含256种色彩,适用于简单和单纯的图像。可以实现全透明/不透明的效果,可以包含多帧画面,实现小动画。
实际应用:
-
照片或色彩丰富的图片:jpg
-
透明效果:png
-
色彩单纯的小图:png
-
小动画:gif
web图片的应用
-
内容图片(作为网页的内容数据,HTML进行结构化)。写在HTML网页结构中,以标签的形式关联图片文件。
-
背景图片(作为网页的修饰效果,CSS进行表现)。写在css样式表中,如使用background属性来定义背景图。
区别:
-
内容图片是网页内容数据的一部分,在页面中有占位。如果加在出现问题或失败,则会出现占位标记,影响页面的排版或布局。
-
背景图片进用来修饰和没画网页,在页面中没有占位,如果加在失败,对页面的排版没有影响。
判断使用内容图or背景图:
-
内容图片一般具有内容意义,属于文档内容,应该使用HTML元素。
-
背景图片不具备内容涵义,作为修饰html元素的存在,即便不可用也不会影响网页的可用性。
HTML:内容图片(img图片)
图像标签img:单标签;行间元素,单默认表现inline-block效果,可以直接使用盒模型属性;img标签不是直接在网页中插入图像,而是指定一个连接图像文件的地址。因此,img标签创建的是被引用图像的占位空间。
< img >的属性:
alt属性和title属性的区别:alt属性是必须的,即使alt=""。title属性则可以根据需要来设置。
width和height属性的应用:
-
widht和height的值不需要带有单位(默认单位都是px)
-
如果图像指定了width和height(通常都是图片本身的尺寸),页面加载时会保留指定的尺寸
CSS背景图片(background)
background基本属性:
-
background-color:设定html元素的背景色彩,只能定义为纯色。大多数html元素默认的背景色是透明的:{background-color:transparent;}。同时设定背景色和背景图时,背景图会呈现在背景色之上。
-
background-image:通过图片URL路径,为元素添加背景图片。图片的表现行为(重复渲染、定位、大小等)由其他背景属性定义,background-image只能用来定义使用哪张图片。默认情况下,背景图像从html元素左上角开始显示毛病在水平和垂直方向上重复排列。
-
background-repeat:设置是否重复背景图像及如何重复背景图像。
- background-attachment:设置背景图像的固定方式(针对不同的参照物)。这个属性与background-position容易冲突,因此在实际应用中并不多见。
- background-position:设置背景图像的起始(原点)位置,默认是html元素的左上角。其值应该有2个,一次为:1.横向坐标值 2.纵向坐标值。如果只指定了一个值,那么该值为横向坐标值,第二个纵向坐标值默认为50%(center)。值的写法可以用3种形式:像素值px或百分比%或范围值。允许负值的存在。
如果background-attachment为fixed,那么background-position会无法正常工作。
- background复合属性:一个生命中设置所有北京属性。值的声明顺序为:background-color background-image background-repeat background-attachment background-position。以上属性无需全部使用。建议使用复合属性进行背景定义,不仅代码高效,针对老版本浏览器兼容性更好。
HTML超级链接
超级链接是HTML的最基本元素,web的设计初衷就是想把一组文档彼此练级起来构成信息分享网络。超级链接是网页的主要交互方式:通过点击链接,可以在文档之间来回浏览。超链接可以是一个字、词,也可以是一幅图像或者其他的HTML元素。
标签< a >:双标签,行间元素。
href属性: 是其最重要的属性,用来定义链接的目标地址,实现超级链接的功能。如果没有href属性,< a >标签仅仅是超链接的一个占位符。
链接的常见形式:
1.锚点(anchor),用来跳转到页面中的特定位置。
通过设置href属性的值为#+id名,就可以定位到具有特定id属性的HTML元素所在位置。
< a href="#title" />可以链接到当前页面中的< div id=“title”></ div >元素。
2.相对路径(Relative Path)URL,用来在网站内部跳转。
相对路径主要用于同一个站点内的不同页面或文件跳转,相对指的是相对于当前页面本身。相对URL的概念基于网站服务器上的文件目录结构,每个网站都有一个文档根目录,相对URL就是基于这个根目录的HTML文件路径。相对路径中的斜杠/代表文件夹的分割, . . /表示的是上一级的文件夹。
3.绝对路径(Absolute Path)URL,通常用来在不同网站页面之间进行跳转。
绝对URL主要用来在不同网站资源之间进行跳转。实际上就是在上述URL之前添加网站域名(或IP)以及访问协议。一个完整的绝对URL包含3个部分:协议http:// 域名domain.com 文件件路径/hello.html
4.空链接。(#)用#号代替未指定的具体URL,通常在页面制作和调试的阶段用到。
5.邮箱链接。当用户点击邮箱链接时,会启动电脑上的邮件客户端程序,向指定的邮箱地址发送邮件。如果用户的电脑上未安装邮件客户端程序,那么邮箱链接将无法工作。
target属性:规定在何处打开链接文档。
CSS伪类
-
未被点击的状态(默认状态):link
-
已被访问过的状态 :visited
-
鼠标悬停的状态(鼠标移动到链接之上):hover
-
激活状态(鼠标点击时):active
使用CSS的伪类选择符可以设定超级链接的各种交互状态效果。
什么是伪类?一种动态的类选择符,不是预先创建而是动态形成。当html元素具有不同的状态或特征时,伪类可以设定该元素不同状态或特征下的样式效果。
伪类的写法:在常用选择符后面追加一个冒号“:”,然后加上伪类的名称。
a{color:blue} //超链接为蓝色
a:hover{color:red} // 当鼠标移到a标签时为红色
常用的伪类:
超级链接的伪类应用:
-
直接设定标签,等同于同时设定了的4种伪类状态。
-
如果要分开描述的4种状态,需按顺序来编写,否则容易失效。:link>:visited>:hover>:active。
-
实际应用中,通常都是直接设定标签对象,再单独设置:hover一种状态即可。
列表:html列表结构
什么是列表?列表是一种由具有一定规律顺序,排列而成的数据项的集合。
列表常见应用:列表呈现的信息蒸汽只管,适用于有规律可循的区域或栏目板块。
列表的结构:外围的列表区+内部的列表项
列表的类型:
- 无序列表:< ul > + < li >
- 有序列表:< ol > + < li >
- 自定义列表:< dl > + < dt > + < dd >
列表标签:
有序列表< ol >殊属性:因为有序列表是带有顺序的排列,有设定排列顺序和起始序号的需求。
列表的特点:
-
列表是具有固定嵌套关系的标签组合,如< ul > + < li >
-
有序和无序列表的区别在于“语义”不同,项目符号的呈现方式也不同
-
有序和无序列表都只有一种列表项,定义列表有两种
-
所有的列表标签都是双标签,块状元素,是装载内容元素的“盒子”
-
列表可以多重嵌套,通过多重嵌套可以实现复杂的栏目排版
css列表样式
列表专有属性:list-style(是针对列表的项目符号进行样式设置的专有属性)
- list-style-type
设定列表的项目符号类型。常见的值:disc:实心小圆点(无序列表的默认值);decimal:数字(有序列表的默认值);none:无(去除默认存在的项目符号)。
- list-style-image
设定列表的项目符号的自定义图像。作用:当项目符号类型不能满足设计需要时,可通过该属性自定义引入图片作为项目符号表现。值:url(图片路径)。弊端:无法精确定位图片的位置。
- list-style-position
设定列表的项目符号的位置。项目符号隶属于每一个列表项,所以list-style-position只能定义项目符号的位置是放置于列表项里面还是外面,无法精确控制定位距离。
- list-style
复合属性,通过一个声明来设置所有的列表专有属性。值的声明顺序:类型>定位>图像。list-style-type>list-style-position>list-style-image。声明的时候可以忽略其中某个值的设定。如果同时定义了类型和图像,则图像优先。
实际应用原则:
-
使用盒子模型属性来精确控制列表
-
使用列表项的背景属性来模拟项目符号.由于list-style主要设置项目符号且无法精确控制,所以实际应用中并不建议使用list-style去实现样式效果。
实际应用技巧:
- :消除默认的列表区域中的边距。 < ul >和< ol >默认存在padding,< dd >默认存在margin。
ul,ol{ padding:0; }
dd{ margin:0; }
-
:消除默认的列表项目符号。 项目符号设置基于列表区域和列表项,< ul >和< ol >默认存在项目符号,< dl >没有。
-
:使用背景属性模拟项目符号效果。 项目符号隶属于列表项,而背景属性需要附加给< li >、< dt >、< dd >。
定位
概念:
-
定位层是由html元素(标签)形成的一个特殊的box盒子。
-
其重点在于“定位”,而html元素(标签)的定位方式由CSS来控制。通常情况下,html元素(标签)默认的定位方式叫做“静态定位”,存在于普通文档流中,而定位层则是指的那些修改了定位方式的box,即非静态定位的box。
-
定位层的“定位”需要根据参照对象来实现定位的位置。
-
定位层的主要作用是用来实现小范围内容元素的排版和定位。
定位属性:
原理:完全脱离页面文档流,独立于立体层面的z轴之上。从立体z轴的角度看,定位层在浮动元素之上。
作用:规定html元素的定位类型。
特点:
-
完全脱离页面文档流,独立于立体层面的z轴之上。和float一样都脱离了默认文档流,但float元素和默认文档流之间会相互产生影响。而定位层元素则完全独立,互不干扰。
-
让元素inline-block化。例如一个div标签默认宽度是100%显示的,但是一旦变成abosolute绝对定位,则默认独占一行的宽度就会变成自适应内部元素的宽度。通常当我们将html元素设置成了定位层之后,就需要指定其宽度和高度。
当html元素(标签)被设置成定位层(非static)之后,可以激活定位相关的属性设置。
这4个定位控制属性均可以使用负值,同方向有冲突时,以top、left优先。
z-index的值是指定顺序关系,因此是number数字形式,没有单位。
z-index的值允许设置负值。当值为负值时,定位层处于普通文档流之下,会被覆盖。
绝对定位和相对定位的区别:
absolute元素完全脱离默认文档流,不保留占位空间。
relative元素完全脱离默认文档流,但仍然保留在默认文档流中的占位空间。