前端与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% | 规定单元格之间的空白 |
最后
html这一节课所学的知识就介绍到这里了,由于自己学识较浅,可能理解与老师的讲解会有偏差,如有错误,请指正,非常感谢!