HTML&&CSS|青训营笔记

RunningLiLi
109 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

常用标签

document html body head div span div a h1-6 input ol ul

易忘table

<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

易忘dl

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

image.png

video

<video controls width="250">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

video常用属性

autoplay 加上即自动播放

controls 提供控件

autopictureinpicture画中画

controlslist :nodownload,nofullscreen,noremoteplayback disablepictureinpicture禁用控件画中画

crossorigin 是否使用 CORS 来获取相关视频（详情点击）

loop循环播放

muted是否默认静音

playsinline在内联元素类播放

poster下载视频时要显示的图像的 URL，否则是第一帧

preload

image.png height,src,width等

js控制

videElement.volume xxx.currentTime xxx.play() xxx.puse() 详情

其它标签

image.png

<header> 表示一组引导性的帮助
<nav>  导航
<section> 表示文档中的一个区域（或节），通过是否含一个标题作为子节点来辨识<section>
<aside> 表示与其余页面无关的内容部分
<footer> 表示最近一个章节内容或者根节点元素的页脚
<h1>~<h6> 标题
<article> 表示文档、页面、应用或网站中的独立结构
<address> 地址信息
<hgroup> 代表一个段的标题

HTML的语义化

  • 可访问性--方便爬或者机器的智能推荐
  • 可读性--方便维护理解
  • 一致性和标准--快速熟悉不同代码库

语义化标签：<header>, <main>, <footer>和<section>,<article>,<nav>,<address> header,footer,main就是主要内容，这些标签一个部分最好只有一个，section就是表示另一个意义部分，里面可以拥有自己的header等，article比section更加独立，完全可以有自己的内容结构，nav为导航区，address调出联系信息，它通常在主页<footer>中用于标记企业的邮寄地址，电话号码，客户服务邮箱地址等等

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>

CSS

选择器

  • *{ }
  • div{ }
  • #id{ }
  • .class{ }
  • [property]{ } 组合
  • input[property]
  • div p{}
  • div>p{}
  • div+p{}
  • div~p{} 伪类

image.png

伪元素

image.png

继承权重

特异度 行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

注意 就算是100类选择器总和为1000也不会大于id选择器，是有优先级的 （每一个css属性都有initial值即初始值）

布局

image.png

image.png

width height 为零，就只剩边框，可以使其他的边框为none就可以制作三角形

margin collapse margin不会叠加

image.png

box-sizing:border-box
width height包括boder
box-sizing:content-box
width height不包括boder

行级排版上下文-IFC

  • 只有行级的盒子会创建IFC

  • 盒子一行水平摆放

  • 一行放不下，换行

  • text-align 决定一行内盒子的水平对齐

  • vertical-align 决定一个盒子在行内的垂直对齐

  • 避开浮动(float)元素（可以做文字环绕图片的效果）

块级排版上下文-BFC

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root; -排版规则

  • 盒子从上到下摆放

  • 垂直 margin 合并

  • BFC 内盒子的 margin 不会与外面的合并

  • BFC 不会和浮动元素重叠 Flex Box

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

    • 摆放的流向 ( →  ←  ↑  ↓ )
      • flex-direction:row|row-reverse|column-reverse|colume
    • 摆放顺序(order)
    • 盒子宽度和高度(align-items:stretch)
    • 水平和垂直方向的对齐(justift-content:flex-sart|flex-end|center|space-between|space-around|space-evenly)(align-items:flex-start|flex-end|center|stretch|baseline)
    • 是否允许折行:f
杂项
  1. align-self:与align-items有相同的值不过它写在flexbox里面的一个元素，只对self元素起作用
  2. Flexibility(值为数字，相比各个子项相比较)

    • flex-grow 有剩余空间时的伸展能力

    • flex-shrink 容器空间不足时收缩的能力

    • flex-basis 没有伸展或收缩时的基础长度 缩写(flex:grow shrink basis) Grid

grid-template-rows:100px 1fr auto
grid-template-columns:30% repeat(n,10px 1fr)

  • grid-row-start: 1;
  • grid-column-start: 1;
  • grid-row-end: 3;
  • grid-column-end: 3; 等价于 grid-area: 1/1/3/3;

float 一般用来做文字环绕

position

  • static
  • relative(对于自身偏移，不脱离文档流，不影响其他元素)
  • absolute（对于祖先不是static偏移，子绝父相，不影响其他元素，脱离常规流）
  • fixed （对于视口定位）
avatar
文章
阅读
粉丝