html与css自我补缺 | 青训营笔记html与css自我补缺|青训营笔记，html中一些没怎么联系过的标签和css中

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

什么是前端

解决GUI人机交互问题
跨终端 —— PC/移动浏览器客户端/小程序 VR/AR等
Web技术栈

html语法的一些规范

标签和属性推荐小写
属性值推荐用双引号
某些属性值（表true）可以省略如required、randomly

一些练习较少的标签

1. 定义列表dl标签

dt表示定义的内容，dd对内容进行解释说明

<dl>
  <dt>导演：</dt>
  <dd>陈凯歌</dd>
  <dt>主演：</dt>
  <dd>张国荣</dd>
  <dd>张丰毅</dd>
  <dd>巩俐</dd>
  <dt>上映日期：</dt>
  <dd>1993-01-01</dd>
</dl>

2. input

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<label><input type="checkbox" />🍎</label>
<label><input type="checkbox" checked />🍏</label>

<label><input type="radio" name="sport" />⚽</label>
<label><input type="radio" name="sport" />🏀</label>

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

3. list-style-position

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside; //指示如何相对于对象的内容绘制列表项标记
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

4. font-style

font-style:normal/italic(斜体)

5.结构标签

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

6. 语义化标签

语义化：html中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写html——传达内容，而不是样式
好处：代码可读性可维护性搜索引擎优化提升无障碍性

有序列表用ol,无序列表用ul
lang属性表示内容所使用的语言

属性选择器

[属性名] 选择含有指定属性的元素

[属性名=属性值] 选择含有指定属性和属性值的元素

[属性名^=属性值] 选择属性值以指定值开头的元素

[属性名$=属性值] 选择属性值以指定值结尾的元素

[属性名*=属性值] 选择属性值含有某值的元素

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

rgb

啊哈哈记录一下颜色，免得写页面的时候又犹犹豫豫

选择器的特异度

比较：122>022

布局

行级排版上下文 IFC

块级排版上下文 BFC

学习css需要持续学习！