Web前端基础

什么是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站常见布局

1. 一列布局（静态布局）：一列自适应居中

2. 两列布局：一列固定宽+一列自适应

3. 三列布局（双飞翼布局）：中间列自适应宽+左右列固定宽

一列布局：

两列布局：

三列布局（双飞翼布局）：

CSS文本样式

1. text-align：必须用于块状元素，如：p标签和div标签。定义内部文本及内联元素如何横向对齐。默认值是start，取决于html文档的direction属性设置（默认都是从左至右，所以等同于left）。

2. text-decoration：主要用来对文本添加线条修饰。通常为了美观，会消除超级链接默认的下划线修饰：a { text-decoration:none;}

3. text-indent：作用于块状元素，用来在块状元素的内容第一行添加一定的空格， 以达到首行缩进的效果。和font-size属性一样，对于首行缩进，你也可以使用px，em或者%。

一般使用相对单位em，以元素本身字体尺寸为参考基数。中文网页中段落的首行缩进通常是2个文字的距离，常用代码：p {text-indent:2em;}。可以使用负值，产生一些特殊效果，如“悬挂缩进”。

4. text-transform：用于转换文本中的大小写方式（忽略源文档中的大小写），对中文无效。

5. text-shadow：用来设置文本的阴影效果，是CSS3的新增属性。实现一种阴影效果需要设定一组值而非一个值，并按照顺序来书写值。可以通过添加多组值来设定多重阴影，达到特殊效果，多组值之间用逗号隔开。部分老浏览器版本不支持该属性（IE9及以下），但这并不产生大的影响。

按顺序书写4个值：水平阴影距离>垂直阴影距离>模糊程度>阴影颜色

6. line-height：用来设置行的高度，是一个简单又复杂的属性。可以将行高看成是以文字内容本身为中线，上下垂直延伸形成空隙而成。即：将行距的值（行高-字号）/2，分别增加到内容区域的上下两边。

通常使用相对单位来设定行高，因为行高是以文本的字号为参考基准。默认情况下，浏览器将行高呈现为字体尺寸的1到1.2倍左右，通常将行高设置我字号的150%到180%之间。

典型应用：单行文本在容器中垂直居中。实现办法：让容器行高等于容器高度。

7. overflow：设置对象处理溢出内容的控制方式，针对的是容器内部的内容，不仅仅是单纯文本。此属性适用于块状元素。内容的溢出可能是横向或纵向的，因此延展开来，可以细分为x轴和y轴。

常用的值：

8. letter-spacing：设置单个字符之间的间距。指定的间距将被添加到字符之后，通常以字号为参考，使用相对单位来控制间距。可以使用负值。

9. word-spacing：设置单个词语之间的间距。判断单词或词语的依据是文本间的“空格”，指定的间距将被添加到单词或词语之后，但最后一个词除外。通常以字号为参考，使用相对单位来控制间距。可以使用负值。

10. word-break：设定容器中文本字内换行的行为。主要针对数字或英文的排版，防止出现连续无意义的长字符打破布局。常用布局：word-break:break-all;

web图片的格式

1. JPG格式

   后缀名为.jpg或者.jpeg。色彩丰富，过渡平滑，适用于照片类型。有压缩比，压缩比越高，图片质量越低，但文件越小；无法保存透明度，不能呈现动画效果。

2. PNG图片

   后缀名为.png，有8位、24位、32位三种形式。兼具JPG和GIF的色彩模式，压缩比高，生成文件体积小。png-8位可以实现全透明/不透明的效果。png-24（32）位可以实现半透明的效果。不能实现动画。

3. GIF图片

   后缀名为.gif，只包含256种色彩，适用于简单和单纯的图像。可以实现全透明/不透明的效果，可以包含多帧画面，实现小动画。

实际应用：

1. 照片或色彩丰富的图片：jpg

2. 透明效果：png

3. 色彩单纯的小图：png

4. 小动画：gif

web图片的应用

1. 内容图片（作为网页的内容数据，HTML进行结构化）。写在HTML网页结构中，以标签的形式关联图片文件。

2. 背景图片（作为网页的修饰效果，CSS进行表现）。写在css样式表中，如使用background属性来定义背景图。

区别：

1. 内容图片是网页内容数据的一部分，在页面中有占位。如果加在出现问题或失败，则会出现占位标记，影响页面的排版或布局。

2. 背景图片进用来修饰和没画网页，在页面中没有占位，如果加在失败，对页面的排版没有影响。

判断使用内容图or背景图：

1. 内容图片一般具有内容意义，属于文档内容，应该使用HTML元素。

2. 背景图片不具备内容涵义，作为修饰html元素的存在，即便不可用也不会影响网页的可用性。

HTML：内容图片（img图片）

图像标签img：单标签；行间元素，单默认表现inline-block效果，可以直接使用盒模型属性；img标签不是直接在网页中插入图像，而是指定一个连接图像文件的地址。因此，img标签创建的是被引用图像的占位空间。

< img >的属性：

alt属性和title属性的区别：alt属性是必须的，即使alt=""。title属性则可以根据需要来设置。

width和height属性的应用：

1. widht和height的值不需要带有单位（默认单位都是px）

2. 如果图像指定了width和height（通常都是图片本身的尺寸），页面加载时会保留指定的尺寸

CSS背景图片（background）

background基本属性：

1. background-color：设定html元素的背景色彩，只能定义为纯色。大多数html元素默认的背景色是透明的：{background-color:transparent;}。同时设定背景色和背景图时，背景图会呈现在背景色之上。

2. background-image：通过图片URL路径，为元素添加背景图片。图片的表现行为（重复渲染、定位、大小等）由其他背景属性定义，background-image只能用来定义使用哪张图片。默认情况下，背景图像从html元素左上角开始显示毛病在水平和垂直方向上重复排列。

3. background-repeat：设置是否重复背景图像及如何重复背景图像。

4. background-attachment：设置背景图像的固定方式（针对不同的参照物）。这个属性与background-position容易冲突，因此在实际应用中并不多见。

5. background-position：设置背景图像的起始（原点）位置，默认是html元素的左上角。其值应该有2个，一次为：1.横向坐标值 2.纵向坐标值。如果只指定了一个值，那么该值为横向坐标值，第二个纵向坐标值默认为50%（center）。值的写法可以用3种形式：像素值px或百分比%或范围值。允许负值的存在。

如果background-attachment为fixed，那么background-position会无法正常工作。

6. 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伪类

1. 未被点击的状态（默认状态）:link

2. 已被访问过的状态 :visited

3. 鼠标悬停的状态（鼠标移动到链接之上）:hover

4. 激活状态（鼠标点击时）:active

使用CSS的伪类选择符可以设定超级链接的各种交互状态效果。

什么是伪类？一种动态的类选择符，不是预先创建而是动态形成。当html元素具有不同的状态或特征时，伪类可以设定该元素不同状态或特征下的样式效果。

伪类的写法：在常用选择符后面追加一个冒号“：”，然后加上伪类的名称。

a{color:blue}   //超链接为蓝色
a:hover{color:red}    // 当鼠标移到a标签时为红色

常用的伪类：

超级链接的伪类应用：

1. 直接设定标签，等同于同时设定了的4种伪类状态。

2. 如果要分开描述的4种状态，需按顺序来编写，否则容易失效。:link>:visited>:hover>:active。

3. 实际应用中，通常都是直接设定标签对象，再单独设置:hover一种状态即可。

列表：html列表结构

什么是列表？列表是一种由具有一定规律顺序，排列而成的数据项的集合。

列表常见应用：列表呈现的信息蒸汽只管，适用于有规律可循的区域或栏目板块。

列表的结构：外围的列表区+内部的列表项

列表的类型：

1. 无序列表：< ul > + < li >
2. 有序列表：< ol > + < li >
3. 自定义列表：< dl > + < dt > + < dd >

列表标签：

有序列表< ol >殊属性：因为有序列表是带有顺序的排列，有设定排列顺序和起始序号的需求。

列表的特点：

1. 列表是具有固定嵌套关系的标签组合，如< ul > + < li >

2. 有序和无序列表的区别在于“语义”不同，项目符号的呈现方式也不同

3. 有序和无序列表都只有一种列表项，定义列表有两种

4. 所有的列表标签都是双标签，块状元素，是装载内容元素的“盒子”

5. 列表可以多重嵌套，通过多重嵌套可以实现复杂的栏目排版

css列表样式

列表专有属性：list-style（是针对列表的项目符号进行样式设置的专有属性）

1. list-style-type

设定列表的项目符号类型。常见的值：disc：实心小圆点（无序列表的默认值）；decimal：数字（有序列表的默认值）；none：无（去除默认存在的项目符号）。

2. list-style-image

设定列表的项目符号的自定义图像。作用：当项目符号类型不能满足设计需要时，可通过该属性自定义引入图片作为项目符号表现。值：url（图片路径）。弊端：无法精确定位图片的位置。

3. list-style-position

设定列表的项目符号的位置。项目符号隶属于每一个列表项，所以list-style-position只能定义项目符号的位置是放置于列表项里面还是外面，无法精确控制定位距离。

4. list-style

复合属性，通过一个声明来设置所有的列表专有属性。值的声明顺序：类型>定位>图像。list-style-type>list-style-position>list-style-image。声明的时候可以忽略其中某个值的设定。如果同时定义了类型和图像，则图像优先。

实际应用原则：

1. 使用盒子模型属性来精确控制列表

2. 使用列表项的背景属性来模拟项目符号.由于list-style主要设置项目符号且无法精确控制，所以实际应用中并不建议使用list-style去实现样式效果。

实际应用技巧：

1. ：消除默认的列表区域中的边距。 < ul >和< ol >默认存在padding，< dd >默认存在margin。

	ul,ol{ padding:0; }
	dd{ margin:0; } 

2. ：消除默认的列表项目符号。 项目符号设置基于列表区域和列表项，< ul >和< ol >默认存在项目符号，< dl >没有。

3. ：使用背景属性模拟项目符号效果。 项目符号隶属于列表项，而背景属性需要附加给< li >、< dt >、< dd >。

定位

概念：

1. 定位层是由html元素（标签）形成的一个特殊的box盒子。

2. 其重点在于“定位”，而html元素（标签）的定位方式由CSS来控制。通常情况下，html元素（标签）默认的定位方式叫做“静态定位”，存在于普通文档流中，而定位层则是指的那些修改了定位方式的box，即非静态定位的box。

3. 定位层的“定位”需要根据参照对象来实现定位的位置。

4. 定位层的主要作用是用来实现小范围内容元素的排版和定位。

定位属性：

原理：完全脱离页面文档流，独立于立体层面的z轴之上。从立体z轴的角度看，定位层在浮动元素之上。

作用：规定html元素的定位类型。

特点：

1. 完全脱离页面文档流，独立于立体层面的z轴之上。和float一样都脱离了默认文档流，但float元素和默认文档流之间会相互产生影响。而定位层元素则完全独立，互不干扰。

2. 让元素inline-block化。例如一个div标签默认宽度是100%显示的，但是一旦变成abosolute绝对定位，则默认独占一行的宽度就会变成自适应内部元素的宽度。通常当我们将html元素设置成了定位层之后，就需要指定其宽度和高度。

当html元素（标签）被设置成定位层（非static）之后，可以激活定位相关的属性设置。

这4个定位控制属性均可以使用负值，同方向有冲突时，以top、left优先。

z-index的值是指定顺序关系，因此是number数字形式，没有单位。

z-index的值允许设置负值。当值为负值时，定位层处于普通文档流之下，会被覆盖。

绝对定位和相对定位的区别：

absolute元素完全脱离默认文档流，不保留占位空间。

relative元素完全脱离默认文档流，但仍然保留在默认文档流中的占位空间。