前端开发之入门到入门
2017-06-08 本文已影响0人
Eazer
作为非计算机专业的学生，学习前端着实让人头大。
J友：“学个锤子你学，走！耍起！”
萌新：“摊手”
【萌新上路，如有错误，还请不要打脸！屁股可以考虑】
HTML、XML、XHTML有啥子区别？
首先，刚开始接触的时候这三种语言给我的感觉很混乱！
- HTML（超文本标记语言），这是一个不严谨的语言，允许或安全的忽略许多技术上的非法构造，松散的 很。
- XML（可扩展标记语言），W3C的推荐标准，设计宗旨是传输数据，而并非显示数据，可以自行定义标签 哒！（听起来很酷的样子）但仅仅纯文本。
- XHTML（可扩展超文本标记语言），更严谨更纯净的HTML版本，目的是取代HTML（吃鲸）！
啷个决定我的文档是HTML还是XHTML？
XHTML视为HTML的取代者，这会是故事的结局吗？
我啷个晓得嘛！
控制文档是哪种语言的唯一事情是MIME类型，如果文档以text/html 的MIME类型提供，则将视为HTML。如果类型为application/xhtml+xml或text/xml它被视为XHTML。
我就老老实实写HTML喽！
HTML语义化？
语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，有利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
面试很容易问到的问题？肯定很难
大神：不存在的
易混淆的标签
| 标签 | 效果 |
|---|---|
| < i > | 因为某种原因和正常文本不同的文本，如专业术语、外语短语。表现为斜体 |
| < em > | em表示强调的文本。视觉上也是斜体 |
| <stromg> | 加粗的形式展现，表示文本很重要，强调 |
| < b > | 表现为粗体，但本身没有特殊的重要性和相关性 |
| <mark> | 表现高亮文本 |
内容、样式、行为分离
web开发中，内容样式行为分离，顾名思义是指内容属于HTML，样式属于CSS，行为属于JavaScript，需要分离开来。有什么好处呐？
- 页面载入更快
- 修改更高效
- 保持视觉一致
- 更好的被搜索引擎收录
- 对浏览者和浏览器更亲和
有哪些常用的meta标签？
| 标签 | 含义 |
|---|---|
<mata charset="utf-8"> |
声明文档使用的字符编码 |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> |
声明文档兼容模式，指示IE以目前可用的最高模式显示内容 |
<meta name="keywords" content="your tags"> |
定义针对搜索引擎的关键词 |
<meta name="description" content="不超过850个字符"> |
页面描述，告诉搜索引擎你的站点的主要内容 |
<meta name="author" content="姓名"> |
定义网页作者 |
<meta name="revised" content="David, 2008/8/8/" /> |
定义页面的最新版本 |
<meta http-equiv="refresh" content="5"/> |
5秒刷新一次页面 |
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> |
用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式 |
<meta http-equiv="pragma" content="no-cache"> |
禁用缓存 |
<meta http-equiv="set-cookie" content="Mon, 12 May 2001 00:20:00 GMT"> |
cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也必须使用GMT时间格式。 |
<meta name="viewport" content="width=640, target-densitydpi=device-dpi, user-scalable=no" /> |
文档宽度与设备宽度保持1:1，并且不允许手动放大缩小 |
<meta name="apple-touch-fullscreen" content="yes"> |
开启web app程序支持 |
<meta name="format-detection" content="telephone=no"> |
iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！这里忽略了数字识别为电话号码 |
<meta name="apple-mobile-web-app-capable" content="yes"> |
是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏 |
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
控制状态栏显示样式 default（白色）black（黑色） black-translucent（灰色半透明） |
文档声明作用？<!docuype html>的作用？
- 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式
- <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
- 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
- HTML5 不基于 SGML，所以不需要引用 DT。
- 页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式。
严格（标准）模式和混杂（兼容）模式指什么？
- 标准模式中，浏览器以其支持的最高标准呈现页面
- 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器乱码原因是什么？如何解决？
乱码原因：
- 编辑器保存文档使用的字符集与浏览器解析HTML文档使用的字符集不同，那么除英文以外文字会出现乱码。
- 浏览器解析HTML文档使用字符集依赖于HTML文档中<meta charset="">指定的字符。
- HTML文档没有指定字符呐？那么浏览器会猜。很可能回猜对哦！
解决：
- HTML 文档一定要指定字符集为utf-8
- 编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配
常见的浏览器有哪些，什么内核？
- Trident内核代表产品Internet Explorer，又称其为IE内核。
- Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。
- WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
- Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
列出常见的标签，用在什么场景?
| 标签 | 场景 |
|---|---|
| <head> | 定义文档的头部，它是所有头部元素的容器 |
| <body> | 定义文档的主体 |
| < h1>~< h6> | 定义标题，拥有确切的语义 |
| < p > | 定义段落 |
| 换行 | |
| <div> | 定义文档中的分区或节，把文档分割为独立的、不同的部分 |
| < ul > | 定义无序列表 |
| < ol >> | 定义有序列表 |
| <form> | 用于为用户输入创建 HTML 表单，向服务器传输数据 |
| < img > | 向网页中嵌入一幅图像 |
【萌新上路，如有错误，还望指出，后会有期】
