WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html、Css、JavaScript、Jquery。以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全。

虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧。浏览器是做什么的,什么拷贝、复制、粘贴、知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分得清楚文件名和扩展名(用来识别文件类型)的,然后再来学习!

WEB前端学习笔记大致内容:

一切从实用的角度出发,HTML标签及标签的属性,标签属性不是重点,简单了解,在学习html标签的同时结合css的来实现样式,然后就是案例,就用网知博学的页面作为案例来写完整站页面。

写完静态的整站页面后,就是JavaScript的基础,然后就是Jquery的案例,最后使用jquery来实现网知博学静态页面案例中的动态效果。如果时间允许可能还会整理一下购物网站的案例。

HTML CSS篇——HTML

在学习之前需要先了解一下,初级前端学习内容:Html、Css、JavaScript、Jquery

1.   HTML和CSS是什么?

2.   JavaScript和Jquery能做什么?

3.   W3C是什么鬼?

4.   在学习HTML、CSS、JavaScript和Jquery之前,我还需要知道些什么?

5.   自学了HTML、CSS、JavaScript和Jquery,为什么写不出一个完整的网站。甚至是连一个页面都完成不了!

1.1 正式开始前需先知道什么是文本和超文本

在阅读以下内容之前,需要先了解什么是文本,什么是超文本,文本的概念应该是任何写下来的文字,都可以称之为文本,对于计算机来说,就是一种文档的类型,不管你的电脑用的是何种操作系统(win7、win8、win10),都有一个记事本的程序,可以在记事本里记录一些文字,虽然能做一些简单的排版但不能插入图片,视频,声音,也不能设置文字链结到其他位置或其他文本,记事本程序保存后的文件扩展名为txt,我们把扩展名为txt的文件称为文本文件。

超文本:简单来说,除了普通的文字,还可以包含图片,视频,声音,最主要的一点就是其中的文字或图片可以链结到其他位置或者其他文档。尽量用比较通俗的语言介绍了一下文本和超文本,如想更深入的了解,可以自行百度搜索!既然知道了什么是文本和超文本,那么下面就来介绍下HTML吧!

1.2  什么是Html

HTML 全称为HyperText Markup Language,译为超文本标记语言,是最基础的网页语言,是通过标签来定义的语言,代码都是由标签所组成,并不是编程语言。可以理解为标记语言就是一套标记标签,HTML 使用标记标签来描述网页中的内容,比如标记某段文本为标题、标记某段文本为段落,以及标记网页结构,都是使用相对应的标签来标记的。HTML文档也可以称为网页,Html文档的扩展名为.Html,也可以称作静态网页。

比如我们都知道在word中有标题、段落、还可以插入图片,那么在Html中就分别定义了不同的标签来描述,标题定义了h1标签;段落定义了p标签;图片定义了img标签;也就是说一段文字加上了h1标签,就说明这段文字是标题,如果加上p标签,就说明了这段文字是段落,如果是一张图片呢?那么就要加上img的标签,为什么要定义这些标签?所定义的这些标签是给浏览器解析的,浏览器并不知道你所写的东西哪里是标题,哪里是段落,也不认识图片,浏览器只认识这些标签,最终我们用浏览器打开网页,浏览器将内容按照标签所标记的结构和样式展现给我们!不同的标签还具有不同的属性,通过对属性值的更改,可用来改变字体大小,字体颜色,图片的高度、宽度等样式。

给小白同学再解释下什么是属性,大家应该都玩过游戏,游戏中人物属性,常见的有攻击,防御,生命值,魔法值等;

游戏中物品属性,大都是用来增加人物属性值的。比如游戏中的人物带上某个物品后就能增加攻击力,或是增加防御力,增加生命值,增加魔法值等。同样,html中这些标签也具有属性,通过更改标签的属性值来给标记的内容增加更多的效果!

虽然可以通过设定标签的属性值来给标签中的内容设定样式,但这样写出来的网页,不便于维护,后期更改,一些复杂绚丽的效果实现不了,所以现在不再通过标签的属性来设定样式了!标签的属性只作为了解即可,不用花费很长时间去把每个标签的属性都记住。

1.3  什么是CSS

既然不再使用标签属性来设置样式了,那么该用什么呢,对,就是CSS(Cascading Style Sheets)中文名称:层叠样式表,是用来定义网页的显示效果。有了CSS、Html就只负责网页结构和标记内容,如哪里是标题,哪里是段落等等,而所有的样式(字体大小,颜色等等)都由Css来实现,也就是说:CSS将网页内容和显示样式进行分离,可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。

时间: 2024-09-29 22:12:01

WEB前端学习笔记 一的相关文章

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

WEB前端学习笔记 三

接上一篇,web学习笔记 二,web学习笔记刚刚发出,就发现被其他网站采集了,在此感谢您的采集和转发,但请注明文章出自网知博学. 1.7  开发工具的选择 增强文本编辑器:EditPlus.Notepad++ 特点:比较小.占用系统资源比较少.代码颜色高亮显示.但没有代码自动补功能 IDE:(Integrated Development Environment,集成开发环境).IDE集成开发环境(简称IDE)开发环境就是指在开发软件的时候需要用到的软件.这些软件包括代码编辑器.编译器.调试工具和

web前端学习笔记:文本属性

今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常用的文本格式化效果.有的网站在段落的第一个字母前放一个很小的透明图像,这些图像将文本推到后面来制造一种缩进文本的感觉.另外一些网站则使用完全标准的空格(spacer)标记.而在CSS中有一种更好地方法实现文本缩进.那就是text-indent属性. 通过使用text-indent属性,所有元素的第一

WEB前端学习笔记 二

1.4  JavaScript和Jquery能做什么? JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言 ,并且可在所有主要的浏览器中运行 IE.Firefox.Chorme.Opera ,JavaScript 可用来向 HTML 页面添加交互行为,如表单数据合法性验证.网页特效.动画效果.数值计算,例如你现在浏览的网知博学的首页面上的图片循环播放和导航分类,淘宝和京东的商品分类菜单等.JavaScript 是一种弱类型语言,无需编译,可由浏览器直接解释运行 特点

web前端学习笔记---实现雪花飘落的效果

看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对left和top的操作仅支持IE浏览器,这咋行,必须得支持chrome. 2.控制图片下落的过程还要去检索element,不好吧,那就改成数组维持,直接操作数组中维持的对象,启不更快. 3.向文档中添加元素直接改成通过JS代码创建元素对象的方式. 实现思路: 1.初始化生成10个div,全都采用绝对定位

Web前端学习笔记1

Day1. 1.Windows常用快捷键. 快捷键 功能 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切(复制和剪切后都可以粘贴) ctrl+a 全选 ctrl+s 保存 ctrl+tab 软件内部切换内容 alt+tab(win+tab) 打开所有软件快速切换 win+r 快速打开软件 win+e 快速打开计算机 ctrl+空格 调处输入法 f2 快速修改文件名 f5 刷新当前页面 win+l 快速让电脑待机 ctrl+z 撤销 win+d 返回桌面 2.网页基本了解 2.1 网页

web前端学习笔记:JavaScript数组

今天主要给大家介绍javascript中数组的操作方法及函数的介绍,数组在其中的主要作用是使用单独的变量名来存储一系列的值.下面通过一些简单的javascript实例为大家讲解数组,具体的javascript教程如下: 字符串, JavaScript 字符串就是用'' 和""括起来的字符表示. 字符字面量, \n 换行, \t 制表, \b 退格, \r 回车, \f 进纸, \\ 斜杠,\' 单引号(') ,\" 双号(") \xnn 以十六进制代码nn 表示的一