这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
-
DOM树
-
定义列表 definition list
-
<dl> <dt>导演</dt> //definition title <dd>陈凯歌</dd> // description </dl>
表单
<input type="range"> //滑动条
<input list="countries"/> //不限制用户输入 但是可以对用户提示
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
文字修饰
//引用文字 cite引用的来源
<blockquote cite="http://t.cn/RfjK00F">
<p>天才并不是自生自长在深林荒野里的怪物，是由
可以使天才生长的民众产生、长育出来的，所以没有这
种民众，就没有天才。</p>
</blockquote>
//cite 短引用 作品等
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
//q quote双引号
我们讲过<q>字符串是不可变量</q> </p>
<p><code>const</code>声明创建一个只读的常量。</p>
//内容强调 vs 语气强调
<strong></strong>
<em></em>
内容划分
-
如何做到语义化
-
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码 CSS
-
选择器
-
-
属性选择器```
用户名： [disabled] { background: #eee; color: #999; }
-
-
CSS是如何工作的
-
-
伪类
-
状态伪类
-
<style> a:link { color: black; } a:visited { color: gray; } //悬浮 a:hover { color: orange; } //点击 a:active { color: red; } //聚焦 :focus { outline: 2px solid orange; } </style> -
结构伪类
-
根据DOM在DOM结构的位置,进行选择伪类
-
li:first-child{ }
-
组合
-
颜色
