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

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

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

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

我们要讲什么

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

HTML+CSS 简介

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

举例来说, 我的内容是一些段落(

)还是一个有序列表(

    )?我的网页上有插入图片()吗?有数据表格()吗?

    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 常用标签

    定义文档类型。

    声明必须是 HTML 文档的第一行,位于 标签之前。
    声明不是 HTML标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    在 HTML 4.01 中, 声明引用DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。 HTML5 不基于SGML,所以不需要引用 DTD。
    提示:请始终向 HTML 文档添加 声明,这样浏览器才能获知文档类型。
    标签名 描述 状态
    标签定义超链接。页面互联的基础设施,用于从一张页面链接到另一张页面。
    无敌块结构
    无敌行内结构
    表单
    表单控件
    图像
    定义关于 HTML 文档的元信息。

    定义段落
    表格
    居中 ×
    字体样式 ×
    表现HTML的标题数据 HTML5-语义
    页面的页脚部分 HTML5-语义
    页面中的导航元素 HTML5-语义
    正文内容 HTML5-语义
    表示页面中的一个独立内容区块,里面有自己的结构,比如章节、页眉、页脚、内容部分 HTML5-语义
    表现页面侧边栏内容。 HTML5-语义
    画布能力 HTML5-功能

    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 标签
    6. 求助道面试题,在前端项目中,如何进行seo优化,你在哪些项目里有过seo优化,效果如何?
    7. 前端进阶系列(一):SEO和HTML语义化
    8. (引用) Robots协议
    9. (引用) sitemap
    10. SEO怎么优化网站

    你可能感兴趣的:(前端,html5,html,javascript)