前端与HTML

一枚大三学生，非常感谢360前端星计划，在这里学习了很多，非常幸运获得360的校招实习offer~，非常感谢面试我的王峰老师和卢岳文老师！总的来说，这7天的学习，让我坚定了走前端这条路。

第一堂课是由360奇舞团的赵文博老师讲的《前端与html》，下面是讲课时的

一、DOCTYPE

H5: 
    
     H4.01: 怪异模式: 复制代码

举个栗子

            
            html                这是内容
    复制代码

问题1. doctype的作用是什么？

doctype的英文解释：声明，文档类型

作用有以下两点:

指定文档使用的标准和版本

浏览器根据doctype决定使用哪种渲染模式

通俗易懂的解释就是：写doctype，浏览器就会按照标准模式解析文档，不写的话，就会按照怪异模式解析文档

问题2：标准模式与怪异模式的区别？

盒模型： IE下标准模式为标准w3c盒模型【content+padding+border+margin】，怪异模式为IE盒模型【content+margin：padding与border包含在content宽高中】

行内元素的垂直对齐：基于 Gecko 的浏览器【Mozilla Firefox、HotBrowser、Mozilla Suite、Camino】标准模式对齐至基线，怪异模式对齐至底部

怪异模式中，IE6/7/8都不认识!important声明

设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

二、语义化

HTML中的元素、属性及属性值都拥有某些含义

开发者应该遵循语义来编写HTML

问题3：语义化的好处？

提升可读性、可维护性

搜索引擎优化

提升无障碍性

三、html5标签分类

流式元素（flow）这些标签的内容可以直接展示到页面上

元数据元素（metadata）有些标签元素的内容不会直接展示给用户

标题内容元素（heading）

章节内容元素（sectioning）

段落内容元素（phrasing）

嵌入式内容（embedded）图片、音频、视频等元素

可交互内容

问题4：p里面可以嵌套div吗？

不可以，p标签表示段落，里面只能嵌套段落内容元素

四、HTML的扩展性

meta

data-*

link

JSON-LD

1. 基于meta标签扩展

2. data-* & dataset API

data-* 是自定义属性，并且js可以通过dataset这个api来对这个自定义属性进行操控。


      
     苹果
  
     香蕉
  
     芒果
    
复制代码

问题5：如果我想拿到li[data-id='1']标签里的属性怎么办？

方法1：可以用getAttribute 方法2：$('li').eq(0).dataset.id获取

3. link标签扩展

4. JSON-LD

JSON-LD是一种数据格式上述的meta、link都是针对一个点进行扩展，如果有大量数据需要在页面进行展示的时候，就可以使用JSON-LD，LD是link-data的缩写。

例如：可以通过JSON-LD来结构化一些数据

复制代码

五、web无障碍

可访问性，Accessibility（A11y）

保证页面可以让任何人获取信息，比如对待色盲的人，需要考虑颜色的选择问题。

提升无障碍性：

为img提供alt属性

noscript
当浏览器禁用 js 时，解析 noscript 标签

input和label对应

图形验证码和语音验证码

文字和背景有足够的对比度

键盘可操作性，比如用tab来切换focus

扩展:

<p></p>是将内容解析一段显示一段，；它是段落标签，两个p标签之间会空出一行

<table></table>是内容全部解析之后才展示出来，会多次经过重排重绘，所以影响性能，对seo也不是很友好，但是对于比较规范的表格类型的数据时，还是需要用<table></table>标签的

table标签

表示表格数据 — 即通过二维数据表表示的信息。

dom接口： HTMLTableElement

因为好多属性都被废弃了，所以列出几个我常用的属性，其他样式尽量用css实现

属性	值	描述
border	pixels	规定表格边框的宽度
cellpadding	pixels%	规定单元边沿与其内容之间的空白
cellspacing	pixels%	规定单元格之间的空白

最后

html这一节课所学的知识就介绍到这里了，由于自己学识较浅，可能理解与老师的讲解会有偏差，如有错误，请指正，非常感谢！