360前端星学习笔记-HTML

kuangcaibao 发布于2019-08-02 10:34 / 1819人阅读

摘要：前端与一枚大三学生，非常感谢前端星计划，在这里学习了很多，非常幸运获得的校招实习，非常感谢面试我的王峰老师和卢岳文老师总的来说，这天的学习，让我坚定了走前端这条路。使用在模式下可以使元素水平居中，但在模式下却会失效。

前端与HTML

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

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

一、DOCTYPE

H5: 

H4.01: 

怪异模式:

举个栗子

问题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标签之间会空出一行

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

table标签

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

dom接口： HTMLTableElement

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

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

table MDN文档

最后

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

GPU云服务器云服务器 360前端cdn 学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52444.html

360前端星学习笔记-深入css(2)

摘要：课程一继承某些元素会自动继承其父元素的计算值举例上述代码，标签里的就会继承父元素的，为。显示继承给设置显示继承根元素下所有元素除独自设置如的都是。二初始值当向上继承到顶点还是没找到值的话，就需要初始值了。课程ppt 一、css继承 1.1 某些元素会自动继承其父元素的计算值举例： This is a test of inherit. p { color: #666; ...

William_Sang 2019-08-29 15:38 评论0 收藏0
360前端星学习笔记-深入CSS

摘要：深入课程链接一的版本规范在之前，把所有标准放在一起去管理，这样推进起来版本升级比较难，后来在的版本中，将标准分成几个模块来管理。深入CSS 课程ppt链接一、CSS的版本（level） css Level 1 css Level 2（CSS2.2规范） css Level 3 Color Module Level 3 Selectors Level 3 Media Queri...

xcold 2019-08-29 15:38 评论0 收藏0
360前端星学习笔记-如何写‘好’JavaScript

摘要：前言如何写好这门课是由技术专家月影老师讲的。控制流设计原则为什么要用到事件机制呢因为要降低结构之间的耦合度，如果不这样做的话，我们需要做双向的操控的。前言《如何写‘好’javascript》这门课是由360技术专家月影老师讲的。这堂课的ppt 说实话，我一直在纠结要不要写关于js的文章，因为对于js来说，我的实际经验不足，更不要说面向对象编程与函数式编程了，对于过程抽象与行为抽象...

arashicage 2019-08-26 12:01 评论0 收藏0
360前端星计划学习-HTML + CSS

摘要：设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时，会生成匿名块级盒来包含行级盒。浏览器浏览器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

lpjustdoit 2019-08-29 12:27 评论0 收藏0