码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-04-25 15:21:49      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:news   ant   service   发布   keyword   day   简单的   data   web   

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. 相关背景内容)、引述内容

技术分享图片

引述

 

 

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/" />

    技术分享图片 → 技术分享图片

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>
 

 

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

标签:news   ant   service   发布   keyword   day   简单的   data   web   

原文地址:https://www.cnblogs.com/xxh-2014/p/8944800.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!