html与css|青训营笔记

yunfeng02
91 阅读3分钟

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

html

1.doctype的作用是标记当前文本
2.html通过浏览器编译为DOM树
3.除了有序列表和无序列表之外还有种通过键值对的方式来实现的列表，dl表示列表，dt表示键，dd表示值

<h2>导演及演员</h2>
    <dl>
        <dt>导演：</dt>
        <dd>陈凯歌</dd>
        <dt>演员：</dt>
        <dd>刘德华</dd>
        <dd>周润发</dd>
    </dl>

4.a链接标签中的target属性其属性值为_blank表示会在新的窗口打开该链接，而不会跳转到该链接
5.img标签中，为了改变由于网络原因导致图片加载不出来而耽误传递信息的问题，有了alt属性，可以在图片加载不出来的时候显示图片的标题
6.controls为audio属性和video标签的属性，作用是是否显示浏览器默认控件，是一个布尔值
7.input标签里的placeholder为占位符
8.通过一样的id表示为输入框进行提示，每一个option都是提示

<h2>有提示的输入框</h2>
    <input list="countries">
    <datalist id="countries">
        <option>Greece</option>
        <option>united states</option>
        <option>united kingdom</option>
    </datalist>

9.文本类标签中blockquote为块级引用，cite是短引用，一般用于书名和章节的标题，q则是短引用，引用的具体内容，code一般引用的都是代码，以上所描述的皆为标签
10.strong标签里一般为非常重要内容，而em标签里则是强调语气上的重读
11.语义化：html中的元素的标签和属性以及属性值都有各自的含义，开发者应该遵循其含义来进行开发
12.语义化的好处

1.增加代码的可读性，利于开发者修改维护页面
2.利于浏览器展示页面
3.利于搜索引擎提取关键词排序
4.提升无障碍性

13.如何做到语义化

1.了解每个标签及属性的含义
2.思考用什么标签描述这个内容最合适
3.不使用可视化工具生成代码

css

1.css的全称为Cascading Style Sheets,它一般用来设置字体、颜色、位置大小以及动画效果
2.css是怎样工作的？首先加载html和解析html，此时生成DOM树，在解析完html后就开始加载css和解析css,之后将样式添加到DOM节点生成渲染树，接着通过计算每一个节点的所在位置，将其展现在页面上
3.组合选择器

1.AB 选择那些同时满足AB的元素进行样式的添加
2.A　B选中A中的所有B,包括子B和孙B
3.A>B 选中A里面的所有子B
4.A~B 选中与A同级的所有B
5.A+B 选中与A同级的紧邻A的B

4.HSL，H:色相（0~360）S:饱和度（0%~100%）L:亮度（0%~100%），一般应用在点击按钮改变颜色这样的场景中，这种时候一般只需要改变S或者L就可以了
5.用white-space属性来处理空白字符的合并与否以及换行

avatar
文章
阅读
粉丝