360前端星学习笔记-HTML

时间 2019-11-21

标签前端学习笔记 html 栏目 HTML 繁體版

原文原文链接

前端与HTML

一枚大三学生，很是感谢360前端星计划，在这里学习了不少，很是幸运得到360的校招实习offer~，很是感谢面试个人王峰老师和卢岳文老师！总的来讲，这7天的学习，让我坚决了走前端这条路。css

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

1、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的英文解释：声明，文档类型
做用有如下两点:html5

指定文档使用的标准和版本
浏览器根据doctype决定使用哪一种渲染模式

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

问题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模式下却会失效。

2、语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

问题3：语义化的好处？

提高可读性、可维护性
搜索引擎优化
提高无障碍性

3、html5标签分类

流式元素（flow）

这些标签的内容能够直接展现到页面上
json

元数据元素（metadata）

有些标签元素的内容不会直接展现给用户
api

标题内容元素（heading）

章节内容元素（sectioning）

段落内容元素（phrasing）

嵌入式内容（embedded）

图片、音频、视频等元素
浏览器

可交互内容

问题4：p里面能够嵌套div吗？

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

4、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>

5、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这一节课所学的知识就介绍到这里了，因为本身学识较浅，可能理解与老师的讲解会有误差，若有错误，请指正，很是感谢！