html基础知识

发表于 | 更新于: | 分类于 | | 阅读次数：

一、Doctype

-<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行，也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签；它是一条指令，告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）。

二、常用元素

1、块级元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div - 常用块级容器，也是css layout的主要标签
p - 段落
ul - 无序列表
dl - 定义列表
ol - 排序表单
table - 表格
h1~h6 - 标题
form - 交互表单

pre - 格式化文本
address - 地址
blockquote - 块引用
center - 居中对齐块
dir - 目录列表
fieldset - form控制组
hr - 水平分割线
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

2、行内元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a - 锚点
span - 常用内联容器，定义文本内区块
em - 强调
i - 斜体
img - 图片
label - 表格标签
input - 输入框
textarea - 多行文本输入框
select - 项目选择

abbr - 缩写
acronym - 首字
b - 粗体
br - 换行
strike - 中划线
u - 下划线
strong - 粗体强调
sub - 下标
sup - 上标
code - 计算机代码(引用源码的时候需要)
samp - 定义范例计算机代码

3、空元素

1
2
3
<br> - 换行
<hr> - 水平分割线
<img> - 图片

三、link和@import引入样式的区别

  • 1、link属于XHTML标签，除了可以加载css外，还可以定义RSS、rel连接属性等；@import 是css提供的一种方式，只能加CSS。
  • 2、加载顺序不同:当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完再被加载，所有有时候浏览@import加载css的页面时开始会没有样式（闪烁），网速慢的时候很明显。
  • 3、兼容性:link无兼容问题，@import只有在ie5以上的才能识别。
  • 4、使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
  • 5、@import可以在css中再次引入其他样式表。

三、浏览器内核

  • 负责对网页语法的解释并渲染网页

常见的浏览器内核

  • Trident：IE浏览器使用的内核
  • Gecko：Netscape6开始采用的内核，火来的Mozilla FireFox也采用了该内核
  • Presto:目前Opera采用的内核
  • Webkit：苹果公司自己的内核

四、html5

1、新元素

1
2
3
内容元素：article、footer、header、nav、section
表单控件：calender、date、time、email、url、search
控件元素：webworker、wesockt、Geolocation

2、移除的元素

1
2
显现层元素：basefont、big、center、font、s、strike、tt、u
性能较差元素：frame、framest、noframes

3.兼容

  • IE8/IE7/IE6支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签
  • 使用html5shim框架

4、区分HTML和HTML5

  • DOCTYPE声明方式是区分HTML和HTML5标志的一个重要因素，还可以根据新增的结构、功能元素来加以区分

五、理解HTML语义化

  • 语义化有利于SEO，有利于搜索引擎爬虫更好的理解网页，从而获取更多的有效信息，提升网页的权重。
  • 在没有css的时候能够清晰的看出网页的节骨，增强可读性。
  • 便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力
  • 支持多端设备的浏览器渲染。

六、html5离线存储

  • 将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法(更新相关文件或者使用相关API)，可以更新、删除离线存储等操作

  • 基本流程：当第一次正确配置app cache后，当我们能再次访问该应用时，浏览器会首先检查manifest文件是否有变动。如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app cache的资源返回。

七、cookies,sessionStorage和localStorage

  • 共同点：都保存在浏览器端，且同源
  • 区别：
  • cookie：
    （1）始终在同源的http请求中携带（及时不需要），即cookie在浏览器和服务器间来回传递 ；
    （2）有路径的概念，可以限制cookie只属于某个路径下；
    （3）数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识；
    （4）只在设置的cookie过期时间之前一直有效，即窗口或浏览器关闭；
    （5）在所有同源窗口中都是共享的。
  • sessionStorage:
    （1）只做本地保存，不会自动把数据发给服务器
    （2）数据可以达到5M或更多
    （3）仅当前浏览器窗口关闭前有效
    （4）在不同的浏览器窗口中不同享，即使是同一个页面
  • localStorage:
    （1）只做本地保存，不会自动把数据发给服务器
    （2）数据可以达到5M或更多
    （3）始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
    （4）在所有同源窗口中都共享

八、iframe的优缺点

  • 优点：
    （1）iframe能够原封不动的把嵌入的网页展现出来。
    （2）如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
    （3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
    （4）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
  • 缺点：
    （1）会产生很多页面，不容易管理。
    （2）iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
    （3）代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
    （4）很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
    （5）iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

九、label的作用

  • label 标签为 input 元素定义标注（标记）。
  • label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
  • Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
    FOR属性 :表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
    ACCESSKEY属性：功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

十、html5的form如何关闭自动完成功能

1
<form autocomplete="on/off">
  • on 默认。规定启用自动完成功能。
  • off 规定禁用自动完成功能。

十一、实现一个圆形可点击区域

  • map+area 或者 svg;
  • border-radius;
  • 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等;

二、实现不使用border画出1px高的线，在不同浏览器的Quirksmode和CSSCompat下能保持一致

1
<div style="height:1px;overflow:hidden;background:black"></div>

十三、title和h1、b和strong、i和em的区别

  • title标签是用来描述这个页面的主题的，是一个网页权重的最高点。但title标签并不出现在文章的正文中。
  • h1标签一般出现在文章的正文中，是展示给访问者的文章的标题。所以说这两个标签不仅不冲突的，而是合作的关系。
  • 一篇文章既要有title又要有h1标签，既突出了文章的主题，又突出了标题和关键字，达到双重优化网站的效果。一般会把title和h1标签的内容写成一样，而且一般情况下一篇文章最好只用一个h1标签，过多的h1标签反而会让搜索引擎迷糊，认不清文章的主题。

  • b与strong的区别、i与em的区别

  • b标签和strong标签给我们的主观感受都是加粗，但对搜索引擎来说b标签和普通的文字并没有什么区别，而strong标签却是起强调作用的。也就是说如果你想让搜索引擎认为你的某句话很重要时那就用strong标签。如果只是想让用户看到加粗的效果，那就用b标签。

  • em标签也是针对搜索引擎来起作用的，i标签只是让用户看到展示的是斜体。

参考

未完待续。。。