HTML(HyperText Markup Language)

0.编码方式

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    HTML 4.01

<meta charset="character_set" />                       HTML 5

1.WEB 标准以及 W3C 的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、

使用外 链 css 和 js 脚本、 结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提 供打印版本而不需要复制内容、提高网站易用性。 

2.xhtml 和 html 有什么区别。 

HTML   是一种基本的 WEB 网页设计语言。

XHTML 是一个基于 XML 的置标语言。

最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 

3.块级元素 yu 内联元素

block: div、p、h1、form、ul、hr ( section、header、footer、canvas、article、aside、figure、nav、hgroup)

inline: span、a、bi、select、lable、 input

空元素: br

表示页面不同位置的标签:header、nav、article、section、aside、footer

表格:table、colgroup、col、caption、thead、tbody、tfoottr、th、td

表单:form、input、labelselect、optgroup、optiontextarea

列表:ul、ol、li、dl、dt、dd、

媒体:audio、video、source  -- img、figure、figcaption(canvas)

表示具体元素的作用或者意义的标签:

  big、small、sub、sup、em(i)、strong(b)、ins、del(s、strike、u)

  h1...h6、abbr、address、pre、code、blockquote、detail、mark、iframe

被忽视或少用的标签:datalist、keygen、output、embed、base、bdo

表示不用的或被替换的标签:

 form > lable > input 

 fremeset > frame、iframe

4.语义化

狭义:html

广义:html、css、js等

web 语义化是指通过 HTML 标记表示页面包含的信息,包含了 HTML 标签的语义化和 css 命名的语义化。

  HTML 标签的语义化是指:通过使用包含语义的标签(如 h1-h6)恰当地表示文档结构

  css 命名的语义化是指:为 html 标签添加有意义的 class,id 补充未表达的语义,如 Microformat 通过添加符合规则的 class 描述信息

  为什么需要语义化:

    SEO:搜索引擎更好地理解页面,有利于收录 便团队项目的可持续运作及维护

    设备:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页

    用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

    纯结构:去掉样式后页面呈现清晰的结构

    好看:便于团队开发和维护,语义化更具可读性,如果遵循W3C标准的团队都遵循这个标准,可以减少差异化,利于规范化。

借鉴:
https://www.cnblogs.com/freeyiyi1993/p/3615179.html
http://www.w3school.com.cn/tags

5.微格式

知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?

来自:BAT 及各大互联网公司 2014 前端笔试面试题集

参考:

微格式(Microformats)是一种让机器可读的语义化 XHTML 词汇的集合,是结构化数据 的开放标准。是为特殊应用而制定的特殊格式。

优点:将智能数据添加到网页上,让网站内容在搜索引擎结果界面可以显示额外的提示。 (应用范例:豆瓣,有兴趣自行 google)

6.doctype

<!doctype>声明必须处于 HTML 文档的头部,在<html>标签之前,HTML5 中不区分大小

<!doctype>声明不是一个 HTML 标签,是一个用于告诉浏览器当前 HTMl 版本的指令 现代浏览器的 html 布局引擎通过检查 doctype 决定使用兼容模式还是标准模式对文档 进行渲染,一些浏览器有一个接近标准模型。

在 HTML4.01 中<!doctype>声明指向一个 DTD,由于 HTML4.01 基于 SGML,所以 DTD 指 定了标记规则以保证浏览器正确渲染内容

HTML5 不基于 SGML,所以不用指定 DTD

常见 dotype:

HTML4.01 strict:不允许使用表现性、废弃元素(如 font)以及 frameset。声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 Transitional:允许使用表现性、废弃元素(如 font),不允许使用 frameset。声 明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 Frameset:允许表现性元素,废气元素以及 frameset。声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML 文档。声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML1.0 Transitional:允许使用表现性、废弃元素,不允许 frameset,文档必须是结构 良好的 XMl 文档。声明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

XHTML 1.0 Frameset:允许使用表现性、废弃元素以及 frameset,文档必须是结构良好的 XML 文档 。 声 明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> HTML

5: <!doctype html>

HTML 全局属性(global attribute)有哪些

6.

manifest
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>魔方跳跃 - 7k7k手机小游戏</title>
<script type="text/javascript">document.domain='7k7k.com'</script>
<link rel="manifest" href="appmanifest.json" />


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />

<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />

  

 7.

video

方法

load()  (window.load,无参数)

play()  (需要触发按钮才能有效)

pause()  (暂停视频,需要触发)

事件

onended  (视频播放完后,发生的事件,如可以做跳转到下一页)

以妓会友

原文地址:https://www.cnblogs.com/lgyong/p/8881643.html