一.元素的语义化
元素语义化:用正确的元素做正确的事情
理论上来说,所有的HTML元素,我们都能实现相同的事情:
增加代码的阅读性,增加代码的阅读性,就是使用正确的元素.
二.什么是SEO
搜索引擎优化,通过了解搜索引擎的运作规则来调整网站,以及提高网站在有关搜索引擎内排名的方式.
三.认识字符编码
四.CSS如何编写呢?
color(属性):red(属性值);
五.如何将CSS样式应用到元素上?
CSS提供了3种方法,可以将CSS样式应用到元素上:
内联样式(inline style)
内部样式表
外部样式表
(一)内联样式
也有人翻译成行内样式
内联样式表存在于HTML元素的style属性之中
<div style="color:red; font-size: 12px;">嗨</div>
(二)内部样式
通过class名,进行找到选中你想要的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页的标题</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div class="father">
</div>
</body>
</html>
(三)外部样式
<link rel="stylesheet" href="CSS样式表的路径">
可以使用link来引入多个css文件,但是css文件如果过多的话,就会不好维护.这样子就可以通过新建一个index.css文件为入口文件
可以通过@import引入其他的css资源
@import url("../css/style.css");
@import url("../css/test.css")
六.常见的CSS元素
CSS官方文档
https://www.w3.org/TR/?tag=css
CSS推荐文档地址:
MDN
可以到https://caniuse.com/查询某些CSS是否可用
font-size
color
background-color
width
height
七.额外知识补充
1.link元素(注意rel)
1.站点图标可以使用link元素进行设置
<link rel="icon" href="./images/bg.gif">
2.引入css文件
<link rel="stylesheet" href="./css/style.css">
3.rel:指定链接类型
2.计算机进制
3.css表示颜色
1.颜色关键字(英文)
2.RGB颜色
3.RGBA a是代表透明度
4.chrome调试工具
5.浏览器渲染流程
加载html-解析html(从上往下)-加载css(不等待)-继续解析html-加载好css以后-解析css-解析完html会形成Create DOM tree-等到加载完css,解析完css.然后页面进行展示