html小知识点-主要框架讲解
快速形成html框架：
输入：
html:5
->
快速打开代码：alt+ b
前提：安装插件：open in browser
1.主要框架讲解
- html:负责网页结构的
- css：负责网页样式的
- html：由标签组成
- 单标签：没有内容
- 双标签：再开始标签和结束标签之间可以放内容
- 所有写在元素开始标签之中的都是该标签的属性
<!DOCTYPE html> :用来声明文档的类型 <html></html> :代表了整个网页 <head></head>:用来写网页的一些配置信息 <meta charset="UTF-8">：声明文档的编码格式 <title></title>：负责网页标题 <body></body>：负责网页内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个是网页的标题</title>
</head>
<body>
这是网页内显示的内容
</body>
</html> 三种关系：
父级，子级，同级
A包含着B ：A是B的父级 B是A的子级
A和B互不相关：A和B是同级
格式：
- 标签要换行，开始标签和结束标签要对齐(在一条竖线)
- 子父级之间相差一个tab键
网页布局
1.画块：<div> </div>> - 块标签，
- < div >是双标签
- div ： 标签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个是网页的标题</title>
</head>
<body>
这是网页内显示的内容
<div style = "width: 30px;height: 30px;background:black;">
<div style = "width: 20px;height: 20px;background:blueviolet;"></div>
</div>
<div style = "width: 30px;height: 30px;background:coral;">
</body>
</html> 
- 写在元素开始标签之中的都是该标签的属性
- style = " " ，px：像素单位
- width :宽度 height ：高度 background：背景色
2.给元素/标签加样式
内联样式：
写在元素开始标签里面的方式
如：
<div style = "width: 30px;height: 30px;background:coral;"> </div>
内部样式
写在head里面的style标签里面
需要用大括号包裹
需要写在标签内部
如
<head>
<style>
div{background:coral}
</style>
</head> css选择器：
- .class名字
id名字
- 标签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit {width: 200px;height:200px;background :red} <!-- 方式1： .class名字{} -->
#title{width: 200px;height:200px;background :green} <!-- 方式2： #id名字{} -->
div{width:300px;height :200px;background: beige;} <!-- 方式3： 标签名{} -->
</style>
</head>
<body>
<div class = "tit" ;id = "title">
</div>
</body>
</html> 外部样式：(外部的css文件)
需要在head标签内部引入：
放在head里面的任何位置都可以，但不能和其他元素成为子父级
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel = "stylesheet" href = "相对路径/绝对路径"> <!--通过路径引入外部样式(css文件)-->
</head> href后面跟的是路径
路径可以是相对路径，也可以是绝对路径
- 绝对路径：不需要参照物，如：http://www.baidu.com
- 相对路径：有参照物，参照的是当前文件所在位置
注意：
1.在头部(head位置)引入css
2.找路径时：
/ 往里面找
../ 跳到上一层目录
出现样式冲突时：
4.样式的优先级
! important > 内联样式 > 内部样式 (id > class > 标签名) (顺序在后的>顺序在前的)
内部样式 = 外部样式 ->和顺序有关
总结
1.内联样式：写在元素开始标签里面的方式
2.内部样式：写在head里的style标签里，需要大括号包裹
- class属性：可以重名
- class命名规范：不能用中文，不能用特殊符号(除了_和-)，不能用纯数字，不能用数字开头，不能用大写字母，不能右空格，要见名知意
- id：不能重名，唯一的。
3.外部样式 - css
<link rel = "stylesheet" href = "地址">
- href 后面跟的是路径
- 绝对路径：不需要参照物，如http://www.baidu.com
- 相对路径：有参照物的，参照的是当前文件
4.样式的优先级
! important > 内联样式 > 内部样式 (id > class > 标签名) (顺序在后的>顺序在前的)
权重：
!important : 1000
内联样式：1000
id ： 100
class ：10
标签名：1
内部样式 = 外部样式 ->和顺序有关
#前端#
