前端培训-初级阶段(1 - 4)

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

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

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

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

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

我们要讲什么

  1. 课程体系介绍、HTML+CSS基本入门知识
  2. 网站运行原理
  3. HTML常用标签、表单新类型、网页SEO优化
  4. 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 元素在屏幕上应该如何渲染。

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

网站运行原理(发展历程)

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

  1. input所有标签测试地址
  2. 定位测试测试-需要科学上网-使用的是谷歌的服务
  3. 录音和视频测试地址

网页 SEO

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

  1. 在首页加入 meta 标签提供一些元数据( titledescriptionkeywords
  2. 注意合理使用语义化标签( h1
  3. 合理的使用属性( imgalt
  4. 禁止外链( no follow
  5. 合理的 robots.txtsitemap百度链接提交

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

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

参考资料

  1. (引用) 培训目录出处
  2. 浏览器输入URL后HTTP请求返回的完整过程
  3. 输入URL到页面加载完成
  4. MDN
  5. (引用) HTML <!DOCTYPE> 标签
  6. 求助道面试题,在前端项目中,如何进行seo优化,你在哪些项目里有过seo优化,效果如何?
  7. 前端进阶系列(一):SEO和HTML语义化
  8. (引用) Robots协议
  9. (引用) sitemap
  10. SEO怎么优化网站

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

查看所有标签

猜你喜欢:

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

玩法变了

玩法变了

胖胡斐 / 电子工业出版社 / 2012-1 / 39.00元

《玩法变了:淘宝卖家运赢弱品牌时代》内容简介:目前网店的销售、运营、营销都碰到很多瓶颈,钱不再好赚,流量不再免费的情况下。网店常常陷入不断找流量的怪圈中,而真正潜心提升基本功的网店却拥有更多机会,网店需要突围。《玩法变了:淘宝卖家运赢弱品牌时代》系统地介绍整个电子商务零售领域的玩法变化,从网店基本功到网店品牌建设都有涉及。《玩法变了:淘宝卖家运赢弱品牌时代》将是网店用户重要的方法论和实践指南。一起来看看 《玩法变了》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具