HTML CSS那些事

什么是<!DOCTYPE>？

DOCTYPE是HTML5标准网页声明，且必须声明在HTML文档的第一行，来告知浏览器的解析器用什么文档标准解析这个文档。

HTML语义化

• 用正确的标签做正确的事
• 页面内容结构化
• 无CSS样式时也容易阅读，便于维护和理解
• 便于浏览器，搜索引擎解析。有利于爬虫标记，利于SEO（搜索引擎优化）。

例如<article>,<section>,<nav>,<aside>,<footer>等

• <header>
  通常被放置在页面或者页面中某个区域的标题，还可以防止收缩表单，logo图片等元素

<header>
	<h1>这是标题</h1>
</header>

• <nav>
  表示页面导航，可以通过导航链接到往回走那的其他页面，或者当前页面的其他部分.
  <nav>不但可以作为页面独立区域存在，而且我们可以在<header>标签中使用。此外<nav>标签还可以显示在侧边栏中。由此可见一个页面之中可以有多个<nav>标签。

<header>
   <h1>这是标题</h1>
   <nav>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>          
       <li><a href="#">4</a></li>
       <li><a href="#">5</a></li>
   </nav>
</header>

• <aside>
  所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。
  <aside>一般使用在页面、文章的侧边栏、广告、友情链接等区域。

<article>
   <h1>HTML语义化标签</h1>
   <p>....正文.....</p>
   <aside>
       <h2>什么是语义化标签</h2>
       <p>balabala</p>
   </aside>
</article>

• <footer>
  一般放在页面的某个区域的底部。包含版权信息，联系方式等信息
  跟<header>标签一样,<footer>标签的使用个数没有限制，可以在任意需要的区块底部使用。

<footer>
    <small>
        版权所有 © balabalabala
    </small>
</footer>

• <section>
  是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段
  <section>标签所包裹的是有一组相似的主题的内容，可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。
  <section>通常包含一个头部<header>、可能还会包含一个尾部<footer>。

<article>
    <h1>标题</h1>
    <p>内容</p>
    <section>
        <h2>小标题<h2>
        <p>小标题的内容</p>
    </section>
    <section>
        <h2>小标题-2<h2>
        <p>小标题的内容</p>
    </section>
    <section>
        <h2>小标题-3<h2>
        <p>小标题的内容</p>
    </section>
</article>

sre和href的区别

• src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
• href是指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

css盒模型

• IE盒模型 box-sizing：border-box（怪异盒模型）
• W3C标准盒模型 box-sizing：box-content（标准盒模型）

应用场景

1. 表单：表单中有一些input元素其实还是传统的IE盒模型，带由一些默认的样式，而且在不同平台或浏览器的表现不一，造成表单的差异。此时我们可以用box-sizing属性在构建一个风格的表单元素
2. 设置子类元素的margin或者border是，可能撑破父元素的尺寸，这时我们就需要使用box-sizing：border-box来将border包含进元素尺寸中，这样就不会存在在冲破父层元素的情况了