欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML CSS那些事

程序员文章站 2022-05-06 19:17:05
...

什么是<!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包含进元素尺寸中,这样就不会存在在冲破父层元素的情况了
相关标签: html