360前端星计划学习-html-优快云博客

本文介绍了360前端星计划的学习经历，重点讲述了HTML的基础知识，包括DOCTYPE的作用、标准模式与怪异模式的区别、语义化的意义、HTML5标签分类及HTML的扩展性等内容。

前端与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文档