Web前端知识点全部总结

Web 前端基础

就是网页前端，网页前端采用的计算机语言是HTML语言

网页是以.html或者.htm结尾的文件HTML：Hyper TextMarkup language

超级文本标记语言

标记又叫标签，又称为元素，主要在网页中表示一些功能，标签在使用时，必须使用<>括起来，

书写格式：<标签名>

标签分为两大类：

1、封闭类标记。也叫双标记，必须成对出

现，有开始有结束

语法：

<标记>内容

2、非封闭标记：也叫单标记，只有一个标

记组成，即表示开始也表示结束

语法：<标记>或者<标记/>

HTML页面的构成：

1、文档类型声明

作用：告诉浏览器使用的是HTML的

哪个版本

语法：在网页的最顶端编写：

2、HTML页面

作用：表示页面的开始和结束，使用

一对html标记组成

html标记中有两对子标签

1、

作用：表示页面的头部

2、

作用：定义页面中要显示的内容,页面

中所有要显示的内容，都要写在body

标签里

练习：编写我的第一个网页

标记的嵌套：

什么是嵌套：在一个标记中又出现了其他的标记，从而形成层叠关系，写法：

注释：不显示在页面中，只是便于程序员阅读代码

语法：

注意：1、注释不能出现嵌套，

注释不能出现在其他的标记中，>

标签中的内容

1、指定网页的编码格式

2、指定网页的标题

网页中的文本

特殊字符的处理：

需要一些转义字符来表示特殊的符号1、 

表示一个空格

2、

表示换行或者回车

3、<

表示一个<

4、>

表示一个>

5、©

表示©

6、¥

表示¥

文本样式：

1、加粗

2、斜体

3、下划线

4、删除线

5、下标

6、上标练习：

这是一段有加粗、有斜体、有下划线、有删除线、有上标、有

的文本

下标

标题元素

作用：在页面中以醒目的方式显示文本

语法：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

网页中表示一条分割线

语法：

---

属性：允许通过属性对标签进行修饰

语法：

1、属性必须声明在开始标签中

2、多个属性之间用“空格”隔开

3、属性与属性值之间用“=”连接

例如：

---

的属性：

1、size

表示水平线的尺寸（高度），取值单位是px或%

2、width

表示水平线的宽度，取值单位是px或%

3、color

表示水平线的颜色，取值为对应颜色的英文单词

4、align

水平线的对齐方式，取值为left/cente r/right 练习：在页面中创建一条分割线，尺寸为3px，宽50%，水平居中，绿色（green）

标题标签的属性

~

属性：align，设置内容的水平对齐方式取值：1、left 居左对齐

2、center居中对齐

3、right居右对齐

预格式化：

语法：

作用：保留HTML代码中的空格和换行

段落标签：

,表示一个段落，独占一行

图像

图片标签：

属性

1、src必须的属性

要显示的图片的地址或路径

2、width

设置7要显示的图片的宽度，取值

单位为px或%

3、height

设置要显示的图片的高度，取值单

位为px或%

4、title

当鼠标移入时，要显示的提示文字URL：

统一资源定位符

作用：用于表示网络中任意资源的位置（路径）

路径的表现形式

1、绝对路径

从文件所在的根目录开始查找文件的

路径

2、相对路径

相对于当前文件路径开始，查找资源的路径

相对路径的口诀：

同目录，直接用

子元素，先进入，再使用

父目录，先出去，再使用