一、Html、css、js
html:超文本标记语言------负责网页的结构
css:层叠样式表------页面显示的样式、排版
js:JavaScript------界面交互(动态交互、逻辑)
二、Html
div和span
- div division:div里面所有的元素都在div区域里面,div里面可以嵌套别的标签
div独占一行
- span:功能类似于div但是不能独占一行
注
-
块级元素block:单独成为一行。h、ul、ol、div
-
行内元素inline:不能独占一行,可以和其他元素并排。img、a、span、input
u(underline):下划线
i(italic):斜体
b(bold):粗体
空间折叠以及特殊符号
空格折叠:普通空格在html中如果有多个连续出现会被当做一个空格,如果想要显示多个连续空格需要特殊符号
< less than <
> gteat than >
© ©
<h1> 在html页面输出:<h1>
table表格
th:table head
tr:table row
td:table data单元格
rowspan:合并行
colspan:合并列
form表单
css:cascading style sheet 层叠样式表
语法格式:
html
选择器 {
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
三、CSS
css使用:
1.通过选择器选择上标签
2.在选择的标签上设置样式
选择器分类:
1.标签选择器:
html
p{
......
}
2.类选择器:
html
.className{
......
}
3.id选择器:
html
#id{
......
}
一些常见的样式:
color:red; //文字颜色
font-size:40px;
background-color:blue;
text-decoration:underline;
text-decoration:none; //去掉下划线
css使用思想:
-
不要试图用一个类名,把某个标签的所有样式写完。要让这个标签多携带几个类,共同造成这个标签的样式。
-
每一个类要尽可能小,要能够做到让更多的标签使用。
css高级选择器:
s1 s2 后代选择器,选择自己所有的后代
s1,s2 并集选择器(选择器组)||
属性选择器
s1s2 交集选择器(既要满足s1也要满足s2)&&
s1>s2 直接儿子选择器,与后代选择器不同,只选择自己直属的后代
s1+s2 下一个兄弟选择器,选择自己后面紧挨着的第一个兄弟
盒模型
盒模型中主要的属性:width(宽长),height(高度),padding(内边距),border(边宽),margin(外边距)
BootStrap
Bootstrap 是一个流行的前端框架,用于构建响应式和移动优先的网站和Web应用程序。它由Twitter团队开发并开源,提供了一套预构建的CSS样式和JavaScript组件,帮助开发人员快速搭建现代化的用户界面。
BootStrap全局样式特点:
1.代码简洁
2.风格统一
3.美观易用
bootstrap-3.4.1-dist.zip
链接:https://pan.baidu.com/s/1uACSnHugvkXXdqFGXP8MOw?pwd=szph
提取码:szph