html基础知识

浏览数：32 / 时间：2015年06月09日

行业背景

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
　　以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

前端开发所需要的语言：html 超文本标记语言（结构）、css 层叠样式表（样式）、javascript (行为)。

html是网页中的框架，但单纯的html并不能做出一个漂亮的页面，需要添加一些css样式，javascript给予网页一些动态效果。

开发所需要的工具

1、记事本、sublime、EditPlus、Dreamweaver等编写工具。

2、photoshop 主要用于切图和测量

3、IEText用于各版本的ie测试

4、还需要其他版本的浏览器chrome 、firefox、 safari、Opera、遨游

html基本框架

<!doctype html> ！这个符号是声明 doctype（doc：document文档， type：类型），这语句的　　　　　　　　　　　　　　意思是声明文档类型

<html>

<head> 头部

<title>第一个HTML</title> 文档标题

</head>

<body> 主体

</body>

</html>

需要注意的在保存网页的时候，拓展名为html。文本的编码为utf-8,文本的编码格式和代码编码格式要一致，不然会出现乱码。

如何注释

html注释

css注释/* */

Javascript 行注释// 块注释/**/

常用标签

块标签：

<div></div>用于布局

标题标签 <h1></h1>、<h2></h2>、<h3></h3>.....

p标签 <p></p> 段落

<ol></ol>有序列表

<li></li>列表项

<ul></ul>无序列表

<dl></dl>自定义列表

<dt></dt>自定义列表标题

<dd></dd>自定义列表项

<table></table>表格

<tr></tr>表格行

<td></td>表格单元

<th></th>表格头

<br/>换行

<form></form>表单

行内属性标签：

<strong></stong>表示强调（粗体）

<em></em>表示强调(斜体)

<span></span>区分样式()和div类似)

<var></var>定义变量

<a></a>超文本标签

<img/>图片

<textarea></textarea>多行文本

<select></select>多选菜单

<option></option>下拉表的一个选项

<input/>用于搜索用户信息(文本控件、单选按钮、多选按钮、button)；

块元素标签和行内元素标签的特征

一般来说，

1.块元素标签可以设置宽高，默认不设置宽度时，撑满父级宽度。即使设置宽度不占满整行，它也不让别的元素放在和它同一行。

2.行内元素标签，不可设置宽高，默认是由内容撑开宽高，不能设置上下外边距，上下内边距，一行显示元素。

在行内元素标签中，有些标签时可以设置宽高，（input\img\textarea\select）

单元素标签<input/>、<img/>、<meta/>、<link/>、<br/>

标签规范:

1.所有的标签都必须要闭合

2.标签和标签的属性都必须小写

3.合理嵌套标签

　　3.1 块元素标签可以嵌套所有的行内元素标签，块元素标签嵌套块元素标签时，注意p标签不能嵌套块元素标签，

　　3.2行内元素标签不能嵌套块元素标签，行内元素标签可以嵌套行内元素标签，a标签不能嵌套a标签

　　3.3具有父子关系之间的标签，之间不能嵌套其他标签(ul\li、ol\li、dl\dt\dh)

a标签的作用

a标签是网页与网页之间的枢纽。a标签除了可以链接到别的网页还可以作为锚点，当遇到链接到的地址是文件时，就会下载文件

锚点例子：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>锚点</title>
 6 </head>
 7 <body>
 8 <h1 id="">前端开发工程师</h1>
 9 <a href="#Con1">简介</a>
10 <a href="#Con2">网站重构</a>
11 <a href="#Con3">三要素</a>
12 <a href="#Con4">掌握技术</a>
13 <a href="#Con5">做得更好</a>
14 <a href=""></a>
15 <h2 id="Con1">简介</h2>
16 <p>前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间2005年开始，是指Web前端开发工程师的简称。 Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
17 随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。</p>
18 <h2 id="Con2">网站重构</h2>
19 <h3>优化</h3>
20 <p>根据W3C标准进行重构后，可以让前端的代码组织更有序，显著改善网站的性能，提高网站访问速度，还能提高可维护性，对搜索引擎也更友好；</p>
21 <h3>加速</h3>
22 <p>重构后的网站能带来更好的用户体验，用XHTML+CSS重新布局后的页面，文件更小，下载速度更快。</p>
23 <h3>目的</h3>
24 <p>网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质是构建一个前端灵活的MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。同时，代码需要具有很好的复用性和可维护性。这是高效率、高质量开发以及协作开发的基础。
25 DHTML可以让用户的操作更炫，更吸引眼球；Ajax可以实现无刷新的数据交换，让用户的操作更流畅。对于普通用户来说，一个网站是否规范、功能是否强大，服务器端是用J2EE+Oracle的强大组合，还是用ASP+Access的简单组合，并没有太明显的区别。但是，前端的用户体验却给了用户直观的印象。
26 随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。</p>
27 <h2 id="Con3">三要素</h2>
28 <p>Web前端开发技术包括三个要素：HTML、CSS和JavaScript，但随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。如果要精于前端开发这一行，也许要先精十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才算够用呢？对于很多初级前端开发工程师来说，这个问题是非常令人迷惑的。
29 前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、悬浮定位、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。</p>
30 <h2 id="Con4">掌握技术</h2>
31 <ol>
32     <li>掌握各种修图软件，如PS\Fireworks\AI，不要求专业设计师水平，但要会用会改，今天是一专多能的时代，光会编程讨不好饭碗的。</li>
33     <li>掌握FLASH，能制作出动态flash相册，会Flash AS3.0编程。</li>
34     <li>精通JavaScript、jQuery、ExtJS等页面效果框架，这是前端工程师的最核心技能，是专做页面效果的技术。其实精通了JavaScript，后端编程语言，如.NET、PHP、Ruby都很容易掌握，因为其原理是一样的</li>
35     <li>精通一二种模板语言，并能修改，如织梦或wordpress的模板</li>
36     <li>掌握thinkphp与zend框架，能修改此类开源源码</li>
37     <li>掌握html5与sencha，这是做手机等移动设备的页面前端技术</li>
38     <li>掌握一二种后端编程语言，如PHP、.NET、JAVA，能读懂后端源码，实际上其原理跟JS差不多</li>
39 </ol>
40 <h2 id="Con5">做得更好</h2>
41 <h3>前端开发技术</h3>
42 <p>必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、javascript、Ajax等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。</p>
43 <h3>掌握优化技术</h3>
44 <p>在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。</p>
45 <h3>使用工具</h3>
46 <p>必须学会运用各种工具进行辅助开发。比如：处理IE系列浏览器兼容性问题的IEtester、FF排错用的Firebug、FlashFirebug、JavaScript Debugger等。</p>
47 <h3>掌握理论知识</h3>
48 <p>除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。</p>
49 <h3>总结</h3>
50 <p>可见，如果要把前端开发做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。建议在繁杂的体系中有目的有方向的学习和发展，最好是针对岗位。</p>
51 </body>
52 </html>

什么是SEO

SEO（Search Engine Optimization），汉译为搜索引擎优化。seo搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的排名的方式。SEO目的理解是：为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益。SEO包含站外SEO和站内SEO两方面。

Seo方法

1.使用语义化标签

2.使用seo有利的标签 h1/h2/h3/strong/em img标签添加alt 、tittle属性

3.提高关键字密度

什么是SEM

Sem搜索引擎营销

sem即搜索引擎营销。

搜索引擎推广，是英文Search Engine Marketing的翻译，简称为SEM。就是根据用户使用搜索引擎的方式，利用用户检索信息的机会尽可能将营销信息传递给目标用户。简单来说，搜索引擎营销就是基于搜索引擎平台的网络营销，利用人们对搜索引擎的依赖和使用习惯，在人们检索信息的时候尽可能将营销信息传递给目标客户。

一句话概括需要花钱的！！！

html基础知识,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html基础知识