前端与HTML

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

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

一、DOCTYPE

H5: <DOCTYPE html>H4.01: <!DOCTYPE HTML PLUBIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">怪异模式: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.ded">

举个栗子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html</title></head><body><h1>这是内容</h1></body>
</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标签扩展

<!-- 编码 -->
<meta charset="UTF-8"><!-- 指定HTTP Header -->
<meta http-equiv="Content-Security-Policy"content="script-src 'self'"><!-- SEO 搜索引擎优化 -->
<meta name="keywords" content="关键词">
<meta name="description" content="页面介绍"><!-- 移动设备Viewport -->
<meta name="viewport" content="initial-scale=1"><!-- 关闭iOS电话号码自动识别 -->
<meta name="format-detection" content="telphone=no"><!-- 360浏览器指定内核 -->
<meta name="renderer" content="webkit"><!-- 指定IE渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

2. data-* & dataset API

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

<ul><li data-id="1">苹果</li><li data-id="2">香蕉</li><li data-id="3">芒果</li>
</ul>

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

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

3. link标签扩展

<!-- 引入 CSS -->
<link rel="stylesheet" href="style.css"><!-- 浏览器预加载 -->
<link rel="dns-prefetch" href="//example.com">
<link rel="prefetch" href="image.png">
<link rel="prerender" href="http://example.com"><!-- favicon -->
<link rel="icon" type="image/png" href="myicon.png"><!-- RSS -->
<link rel="alternate" type="application/rss+xml" href="/feed">

4. JSON-LD

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

<script type="application/ld+json">
{"@context": "http://schema.org","@type": "Person","name": "John Doe","jobTitle": "Graduate research assistant","affiliation": "University of Dreams","additionalName": "Johnny","url": "http://www.example.com","address": {"@type": "PostalAddress","streetAddress": "1234 Peach Drive","addressLocality": "Wonderland","addressRegion": "Georgia"}
}
</script>

五、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%	规定单元格之间的空白

table MDN文档

最后

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

360前端星计划学习-html相关推荐

360前端星计划学习笔记0410
360前端星计划学习笔记(五)正则的三个应用场景–王峰老师 360前端星计划学习笔记(六)NodeJS基础入门文章目录正则正则表达式的创建和使用创建正则表达式的两种方式正则表达式的常见用法 ...
不怕你不来，就怕你不学—360前端星计划
编者按:奇舞团小胖子.特别感谢国欣宇同学和刘琳同学. 是否总觉得自学 JS.HTML.CSS 小有成就但心里空虚? 眼看着<HTML 从入门到精通> 手下却一行代码十个 error ? 莫 ...
第六届360前端星计划_前端工程化浅析
主讲人田东东燕山大学硕士研究生 360搜索前端团队首届前端星计划毕业生一.什么是前端工程化? ⼯程化的目标在前端领域,利用技术不断进步和经验逐步积累带来的各种⽅案,来解决在项目的开发.测试. ...
第六届360前端星计划_深入CSS
主讲人赵文博 360前端技术专家奇舞团一.选择器的特异度(Specificity) 提出问题:哪条规则生效? <article><h1 class="title&qu ...
360前端星计划--Node.js 基础入门
01 什么是 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. https://node ...
360前端星计划--技术翻译：进阶的直梯
文学翻译非文学翻译艺术成分多一些科学成分多一些需要更多的灵感需要更多的勤奋责任小一些责任大一些技术翻译的意义翻译技术文章,学习新技术思想翻译技术文档,掌握标准和工具翻译技术图书, ...
360前端星计划—技术翻译：进阶的直梯（李松峰）
1. 翻译类型文学翻译和非文学翻译文学翻译非文学翻译艺术成分多一些科学成分多一些需要更多的灵感需要更多的勤奋责任小一些责任大一些 2. 技术翻译的意义翻译技术文章,学习新技术思想 ...
第六届360前端星计划_前端代码的自我修养
主讲人:孙磊一.如何衡量代码质量的好坏衡量代码质量的唯一有效标准:WTF/min -- Robert C. Martin 代码的自我修养代码规范格式流程化二.代码规范 yarn globa ...
2018年前端星计划等你来报名！
是否总觉得自学JS.HTML.CSS,小有成就但心里空虚?是否混迹在各大前端论坛,寻寻觅觅,但心里总觉得没有方向感?你需要一个引路人,需要一个心灵的导师.别慌!这里是360前端星计划! 前端星计划是由 ...

360前端星计划学习-html

前端与HTML

一、DOCTYPE

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

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

二、语义化

问题3：语义化的好处？

三、html5标签分类

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

四、HTML的扩展性

1. 基于meta标签扩展

2. data-* & dataset API

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

3. link标签扩展

4. JSON-LD

五、web无障碍

table标签

最后

360前端星计划学习-html相关推荐

最新文章

热门文章

360前端星计划学习-html

前端与HTML

一、DOCTYPE

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

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

二、语义化

问题3：语义化的好处？

三、html5标签分类

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

四、HTML的扩展性

1. 基于meta标签扩展

2. data-* & dataset API

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

3. link标签扩展

4. JSON-LD

五、web无障碍

table标签

最后

360前端星计划学习-html相关推荐

最新文章

热门文章

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