IFE百度前端技术学院4/24/2018

day1:

day2: 好的简历:

你可以参考自己的简历内容,也可以参考网上一些热门简历内容,比如 羡辙 的简历(她简历的样式每年校招简历总能看见很多人在复用,所以,希望大家以后做简历的时候换个样式吧,哪怕是换个颜色也是极好的)。

  HTML语义

article 元素

    • 独立的文档、页面、应用、站点
    • 可以单独发布、重用
    • 可以是...
      • 一篇帖子
      • 一篇文章
      • 一则用户评论
      • 一个可交互的 widget

section 元素

  • 按主题将内容分组,通常会有标题 (heading)
  • 并非「语义化的 div

何时使用?

一个简单的评判标准:当你希望这个元素的内容体现在文档的提纲 (outline) 中时,用 section 是合适的

 

nav 元素

  • a section with navigation links
<nav>
  <ul>
    <li><a href="/">Home</a></li> <li><a href="/news">News</a></li> <li><a>Examples</a></li> </ul> </nav>

可以帮助 UA 迅速获得导航内容,例如读屏器可以省去很多渲染直接跳到导航位置。

不一定要包含 ul,也可用自然文本进行导航。

aside 元素

  • 表示与周围内容关系不太密切的内容 (eg. 广告)
  • 通常表现为侧边栏内容 (eg. 相关背景内容)、引述内容

pull quote

引述

 

 

footer 元素

 

  • 代表最近的父级区块内容的页脚
  • 作者信息 / 相关文档 / 版权信息
  • 不影响文档提纲的生成

 

<footer><!-- site footer -->
  <nav> <p> <a href="/credits.html">Credits</a> — <a href="/tos.html">Terms of Service</a> — <a href="/index.html">Blog Index</a> </p> </nav> <p>Copyright © 2009 Gordon Freeman</p> </footer>

title 属性

  • 链接 - 描述目标信息
  • 图片 - 版权 / 描述
  • 引用 - 来源信息
  • 交互元素 - 操作指南
  • ...

lang 属性

内容的语言

head 元素

一组元数据

title 元素

文档对外的标题
窗口标题 / 历史记录 / 搜索结果标题 / ...

meta 元素

  • name / http-equiv / charset
  • name 属性决定种类,content 属性表示内容
  • 标准名称
    (application-nameauthordescriptiongeneratorkeywords)
  • 扩展名称 (WHATWG Wiki MetaExtensions)
    • Baidu: mobile-agentbaiduspider
    • Twitter: twitter:cardtwitter:imagetwitter:creator:id
    • Google: application-urlgoogle-site-verificationgooglebot
    • 360: renderer (未注册)

链接 (links)

链接类型

  • 外部资源链接

    指向用来组成当前文档的外部资源,通常由 UA 自动处理

  • 超链接

    用来「导航」到其他资源 (可以在 UA 中打开, 下载, ...)

元素:linkaarea

link 元素

  • 元数据,用来描述文档本身与其他资源的关系
  • 必须包含 rel 及 href 属性
<link rel="author license" href="/about">

link + rel + authorlink + rel + license 都有预定义的语义

link + rel

  • rel="stylesheet"

    链接到样式表 (外部资源)

  • rel="alternate"

    链接到当前文档的其他形式 (超链接)

    <link rel="alternate" type="application/rss+xml" title="Matt Mullenweg » Feed" href="http://ma.tt/feed/" />

    RSS link handling in Firefox (no RSS link) → RSS link handling in Firefox (has RSS link)

h1h6 元素

<body>
  <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> </body>
<body>
  <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> </body>
语义上等价

header 元素

  • 一组介绍性描述或导航信息 (目录 / 搜索框 / logo / ...)
  • 用来描述最近的父级区块
  • 通常包含 h1h6
  • 不影响文档提纲的生成
<header>
  <p>Welcome to...</p> <h1>Voidwars!</h1> </header>

footer 元素

  • 代表最近的父级区块内容的页脚
  • 作者信息 / 相关文档 / 版权信息
  • 不影响文档提纲的生成
<footer><!-- site footer -->
  <nav> <p> <a href="/credits.html">Credits</a> — <a href="/tos.html">Terms of Service</a> — <a href="/index.html">Blog Index</a> </p> </nav> <p>Copyright © 2009 Gordon Freeman</p> </footer>

address 元素

代表与最近父级 article 或整个文档关联的联系人信息

<address>
  <a href="../People/Raggett/">Dave Raggett</a>, <a href="../People/Arnaud/">Arnaud Le Hors</a>, contact persons for the <a href="Activity">W3C HTML Activity</a> </address>
 

 

猜你喜欢

转载自www.cnblogs.com/xxh-2014/p/8944800.html