我在大学的专业是计算机网络技术，大学期间有这样一门课是“网页设计与制作”，当时对这门课挺感兴趣，就学习了下。通过简单的html、css和js能展现出自己想要的东西，感觉挺有意思的。

 

　　虽然阴差阳错之下成为了一名Android开发工程师，但是前端方面的知识也一直在关注，空余时间也学习的一些东西，试着做了一些简单的东西，我的个人网站：

 

　　但是平时学习的话都是这个学学，那个看看，没有一个系统的学习，总感觉知识点掌握的不是太牢靠。正好这段时间项目刚做完，决定系统的学习一下前端方面的知识，以备不时之需。

 

　　这个博客的话就当是学习的时候做个笔记，同时也希望能够给想学习前端的同学做一个参考。

 

　　前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。由于现在前后端分离的模式，还需要学习一些框架，目前比较流行的三大框架：Angular、Vue、React。 前端的发展非常迅速了，而且前端能做的东西也越来越多了，基本上能够前后端通吃了。所以，前端的东西还是很多的，也需要花很多精力去学习的。

 

　　前端设计也就是UI或美工他们的工作，他们负责设计出好看的效果图。

 

　　前端开发的工作就是将美工或UI提供的效果图通过HTML+CSS+JS技术来生成网页

 

　　1） 网页是由文字、图片、音频、视频、超链接等组成的。

 

　　2）w3c组织制定了web的标准

 

　　html：结构标准 （网页的整体架构）

 

　　css：表现标准 （网页的美化）

 

　　js：行为标准 （网页的交互）

 

　　我们通常是通过浏览器去浏览网页，有时候会发现用不同的浏览器或者不同的模式（极速模式/兼容模式）访问同一个网页显示的效果不同，这是因为浏览器内核（渲染引擎）有差异。渲染引擎也是引起兼容性问题的根本原因。

 

　　目前市面上的浏览器内核主要有四种

 

　　1、Trident内核代表：Internet Explore

 

　　2、Gecko内核代表：Mozilla、Firefox

 

　　3、WebKit内核代表：Safari、Chrome

 

　　4、Presto内核代表：Opera

 

　　hyper text markup language：超文本标记语言

 

　　1）单标签：

 

　　2）双标签 :

 

　　Html标签关系分类

 

　　包含（嵌套关系）  父子

 

　　并列关系  兄弟姐妹

 

　　在网页中我们一般是在head标签中去设置网页的属性

 

　　告诉浏览器以最新版本的ie内核去渲染页面或者使用Google Chrome Frame（谷歌内嵌浏览器框架GCF）去渲染页面

 

　　网页关键字，有利于seo的收录

 

　　网页的描述

 

　　网页重定向 2秒后跳转到百度首页

 

　　默认设置超链接打开新的窗口

 

　　网页的logo

 

　　在线制作

 

　　链接外部样式表

 

　　链接外部js脚本

 

　　Src： 图片的来源 必写属性

 

　　Alt ： 替换文本 图片不显示的时候显示的文字

 

　　Title：提示文本 鼠标放到图片上显示的文字

 

　　Width ： 图片宽度

 

　　Height ： 图片高度

 

　　图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

 

　　href ： 去往的路径（跳转的页面） 必写属性

 

　　title ： 提示文本 鼠标放到链接上显示的文字

 

　　target=”_self” ： 默认值 在自身页面打开（关闭自身页面，打开链接页面）

 

　　target=”_blank”： 打开新页面 （自身页面不关闭，打开一个新的链接页面）

 

　　1.先定义一个锚点

 

　　2.超链接到锚点

 

　　特殊字符

 

　　1）无序列表

 

　　type=”square” 小方块

 

　　Type=”disc” 实心小圆圈

 

　　Type=”circle” 空心小圆圈

 

　　2）有序列表

 

　　type=”1,a,A,i,I” type的值可以为1,a,A,i,I

 

　　start=”3” 决定了开始的位置。

 

　　3）自定义列表

 

　　表格一般用于展示数据，推荐使用标准的表格结构，有利于seo

 

　　属性：

 

　　Border=”1” 边框

 

　　Width=”500” 宽度

 

　　Height=”300” 高

 

　　cellspacing=”2” 单元格与单元格的距离

 

　　cellpadding=”2” 内容距边框的距离

 

　　align=”left | right | center”

 

　　如果直接给表格用align=”center” 表格居中

 

　　如果给tr或者td使用 ，tr或者td内容居中。

 

　　bgcolor=”red” 背景颜色。

 

　　表头

 

　　colspan=”2” 合并同一行上的单元格

 

　　rowspan=”2” 合并同一列上的单元格

 

　　用法和td一样，标题的文字自动加粗水平居中对齐

 

　　垂直对齐方式：

 

　　表格边框颜色：

 

　　表单一般是由提示信息和表单控件组成的，用于收集信息。平时网页上的登录，注册就是表单。

 

　　表单域

 

　　属性：action:处理信息

 

　　Method=”get | post”

 

　　Get通过地址栏提供（传输）信息，安全性差。

 

　　Post安全性高。

 

　　maxlength=“6” 限制输入字符长度

 

　　readonly=”readonly” 将输入框设置为只读状态（不能编辑）

 

　　disabled=“disabled” 输入框未激活状态

 

　　name=“username” 输入框的名称

 

　　value=“大前端” 默认值

 

　　文本输入框的属性和密码输入框属性通用

 

　　只有将name的值设置相同的时候，才能实现单选效果。

 

　　checked=”checked” 设置默认选择项。

 

　　checked=”checked” 设置默认选中项

 

　　multiple=“multiple” 将下拉列表设置为多选项

 

　　selected=”selected” 设置默认选中项目

 

　　对下拉列表进行分组。

 

　　label=”” 分组名称。

 

　　cols 控制输入字符的长度。

 

　　rows 控制输入的行数

 

　　multiple=“multiple” 多选

 

　　accept=“application/msword” 选择的文件格式

 

　　提交按钮

 

　　具有提交功能

 

　　普通按钮

 

　　普通按钮，一般配合js使用

 

　　图片按钮

 

　　重置按钮

 

　　将信息重置到默认状态

 

　　对表单信息分组

 

　　表单信息分组名称

 

　　例如：

 

　　好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。比如w3cSchool

 

　　标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

 

　　标签语义化意义：

 

　　1:网页结构合理

 

　　2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；

 

　　3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）

 

　　4:便于团队开发和维护

 

　　标签语义化注意事项

 

　　1：尽可能少的使用无语义的标签div和span；

 

　　2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

 

　　3：不要使用纯样式标签，如：b、font、u等，改用css设置。

 

　　4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；