前端培训-初级阶段（1 - 4）

栏目: Html5 · 发布时间: 5年前

内容简介：本着提升技术水平，打牢基础知识的中心思想。前端内部开始小课堂啦（前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。好了，不闲扯，接下来进入我们的正题。

本着提升技术水平，打牢基础知识的中心思想。前端内部开始小课堂啦（ 本人凭借身高优势，人群中多看了我一眼，稳稳拿到第一课 ）。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。

好了，不闲扯，接下来进入我们的正题。

我们要讲什么

课程体系介绍、HTML+CSS基本入门知识
网站运行原理
HTML常用标签、表单新类型、网页SEO优化
HTML5语义化标签、音视频标签

HTML+CSS 简介

HTML（超文本标记语言 — HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。它使用标记来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 中的标签 不区分大小写 。

举例来说，我的内容是一些段落（ <p> ）还是一个有序列表（ <ul> ）？我的网页上有插入图片（ <img> ）吗？有数据表格（ <table> ）吗？

CSS（层叠样式表 — Cascading Style Sheets），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了 HTML 元素在屏幕上应该如何渲染。

举例来说，我的文字是黑色还是红色的？在屏幕的何处展示内容？用什么背景图像和颜色来装饰？

网站运行原理（发展历程）

HTML 创建结构，我们想在互联网发布我们的信息，我们通过文字、图片、音视频。
CSS 美化界面，页面太丑了，都是文字，我们想要排版一下。
JS 逻辑控制，我们想要校验表单，做个轮播图什么的。
静态服务部署（文件服务器），通过上面的内容，我们可以有一个漂亮的页面了，接下来我们需要发布到网上，让其他人可以访问。
IP 可以理解为唯一标识（身份证），通过 IP 可以很快找到我们的服务器。
通过上面的内容，其他人可以通过网络来访问我们的页面，但是 IP 是一串数字，太难记了。我们需要一个好记的域名。
动态服务，网站壮大之后，我们需要区分用户（登录，评论），这个时候我们要引入服务端（node/java/php）

到这里就差不多了。当然还有新的问题，新的问题也会有新的解决方案。

HTML 常用标签

<!DOCTYPE> 定义文档类型。

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

<a> 标签定义超链接。页面互联的基础设施，用于从一张页面链接到另一张页面。

<div> 无敌块结构

<span> 无敌行内结构

<form> 表单

<input> 表单控件

<img> 图像

<meta> 定义关于 HTML 文档的元信息。

<p> 定义段落

<table> 表格

如上是一些常用标签，不可替代，有自己独立用途。

HTML5 标签

这个东西也出来好久了。相信大家也都开始使用了。核心就是增加了更多的 语义化 标签，废弃了一些纯粹显示效果的标记

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

网页 SEO

SEO 优化是搜索引擎优化（Search Engine Optimization）。这个问题，面试经常被问到有没有。其实有个简单的办法，壕，毕竟人家搜索引擎公司也是要挣钱嘛。

在首页加入 meta 标签提供一些元数据（ title 、 description 、 keywords ）
注意合理使用语义化标签（ h1 ）
合理的使用属性（ img 的 alt ）
禁止外链（ no follow ）
合理的 robots.txt 、 sitemap 、 百度链接提交

Robots协议（也称为爬虫协议、机器人协议等）的全称是“网络爬虫排除标准”（Robots Exclusion Protocol），网站通过Robots协议告诉搜索引擎哪些页面可以抓取，哪些页面不能抓取。

Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式，就是XML 文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站。

参考资料

以上所述就是小编给大家介绍的《前端培训-初级阶段（1 - 4）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Professional JavaScript for Web Developers

Nicholas C. Zakas / Wrox / 2009-1-14 / USD 49.99

This eagerly anticipated update to the breakout book on JavaScript offers you an in-depth look at the numerous advances to the techniques and technology of the JavaScript language. You'll see why Java......一起来看看《Professional JavaScript for Web Developers》这本书的介绍吧!

码农工具