HTML
HTML:超文本标记语言Hyper Text Markup Language——HTML5
W3C:万维网联盟 World Wide Web Consortium
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cXEuMwyo-1590301700382)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503145102188.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qC7TszE3-1590301700384)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503152815474.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bLrzpN9m-1590301700385)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503155529274.png)]
块元素:比如换行,段落,标题等都会自动更换行,一行内无法显示多个
行内元素:不添加换行分段等操作的时候标签可以在一行内展现
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r13Hiz7O-1590301700386)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503161022389.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PYnZKvrm-1590301700387)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503164536121.png)]
表单元素属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jtiQbsgU-1590301700387)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503183922539.png)]
CSS
HTML+CSS+JavaScript
结构+表现+交互
如何学习:
1:CSS是什么
2:CSS怎么用
3:CSS选择器(♥♥♥♥♥)
4:美化网页(文字,阴影,超链接,列表,渐变)
5:盒子模型
6:浮动
7:定位
8:网页动画(特效效果)
1.1、什么事CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
1.2、发展史
CSS 1.0
CSS 2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变简单 SEO
CSS 2.1 浮动定位
CSS 3.0 圆角,阴影,动画…浏览器兼容性
1.3、快速入门
CSS和HTML嵌套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写CSS代码-->
<!--语法:
选择器{
声明1:
声明2;
声明3;
}
每个声明用“;”结尾
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标签</h1>
</body>
</html>
CSS和HTML分离
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NMvKzU9n-1590301700388)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200504083230458.png)]
CSS优势:
1:内容和表现分离
2:网页结构表现同意,可以实现复用
3:样式十分丰富
4:建议使用独立于html的CSS文件
5:利用SEO,容易被搜索引擎收录
1.4、CSS的三种导入方式
行内样式,内部样式,外部样式,三者的优先级按照就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: red;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<!--三种样式的优先级:就近原则,谁离标签近就显示谁-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: yellowgreen">我是标签</h1>
</body>
</html>
拓展,外部样式两种写法
- 链接式
html
<!--外部样式-->