网站多个网页组成

网页类型：

静态网页
动态网页：链接服务器，数据库支持

网页结构：

结构层 html
表现层 css
行为层 js

html

超文本标记语言

超文本：超越文本，有图片视频音乐等等

标记：html标签

语言：运行在浏览器一门语言

html后缀

.html
.htm

创建html文件

创建文本文档 .txt，打开随便编写内容，将文件

的后缀改为.html或者.htm，双击可以浏览器打开
采用编辑器vscode创建，随便编写内容

第一种：文件夹里面双击

第二种：在编辑器中安装插件 open in browser

在html文件中右键打开

html注释

快捷键：Ctrl + /

html 语法

<开始标签属性名="属性值" >内容</结束标签>

元素

html页面结构

! + 回车或者 ! + tab

HTML标签

div最常用的块元素
```
<div> 最常用的块元素</div>
```
span最常用的文本标签
```
<span></span>
```

a 超链接标签

<!--
target="_self" 当前窗口打开
targer="_blank"在新窗口打开
-->
<a href="百度地址" target="跳转方式">跳转百度</a>

img 图片标签

<img src="图片路径" alt="图片加载失败显示">
路径：
1.绝对路径：在线地址，根盘符  D：/
2.相对路径：./同级目录   ../上一级目录

b加粗标签
i倾斜标签
s删除标签
u下划线标签
h1-h6标题标签
ul/li 无序列表
ol/li有序标签
p 段落标签

标签分类

块元素：独占一行，可以设置宽高

div，p，ul,ol，li, h1-h6,table,form,ifram,section,header,footer,nav,aside,article,
行内元素：排列在一行显示，不可以设置宽高

span, i, u, s, a, b, lable，em,strong
行内块元素：排列在一行显示，可以设置宽高

img.input,select,textarea,vido,audio

标签转换

display:inline 行
display:block 块
display:inline-block 将元素变成行内块
display:none 将元素隐藏不显示

html5

html5不同：

文档声明不同
html5新增特性

为什么用：

让正确的标签做正确的事
有利于搜索引擎优化
代码简洁，方便维护

html5新标签

header
footer
nav
section
article

video

<video src="视频路径" controls poster="视频封面" autoplay muted></video>

control 控件
autoplay 自动播放
muted 静音

audieo

CSS

层叠样式表/级联列表

文件后缀：.css

css引入方式

行内样式

<div style="width:200px; height=">
    
</div>

嵌入式：在HTML中写style标签
```
<title></title>
<style>

</style>
```

外部样式表

<link rel="stylesheet" href="./demo.css">

导入样式表
```
@import url("css路径")
```

引入方式优先级：

行内样式>嵌入式~外部样式表（谁在下面谁优先级高）

注释

ctrl + /

/* 注释内容 */

css语法

css选择器{
  css属性名:css属性值;
  css属性名:css属性值
}

css选择器

标签选择器:html是什么名字，css选择器就是什么名字
```
<div>    </div>
div{}
```
类名选择器 :给标签起个class名字，css选择器 .类名{}
```
<div class="box"> </div>
.box{}
```
注意：类名不可用中文，不可数字开头
通配符选择器
```
*{
    margin:0;
    padding:0;
    
}
```

后代选择器

<div class="father">
    <div class="son">
    <h2>
        <h6>
            
        </h6>
        </h2>    
    </div>
</div>


.father .son{}
.father div{}
.father h2{}
.father .son h6{}

伪类选择器

同一个html元素在不同状态下的不同样式

选择器描述
:link 未访问的链接
:active 选定的链接
:hover 鼠标移动到链接上
:visited 已访问的链接
:fous 获取焦点

选择器	描述
:link	未访问的链接
:active	选定的链接
:hover	鼠标移动到链接上
:visited	已访问的链接
:fous	获取焦点

伪元素选择器

选择器	描述
E::before	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::after	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::first-letter	选择段落中的第一个字母或中文字符
E:first-line	选择文本中的首行

选择器	描述
元素{}	标签选择器
.类名{}	类名选择器
#id名{}	id选择器
*{}	通配符选择器
父元素子元素{}	后代选择器
父元素>子元素	子包含选择器
相邻上一个个元素+需要设置元素{}	相邻兄弟选择器
元素.类名/元素#id名/.类名#id名...	交叉选择器
元素[属性名]	属性
元素[属性名=box]	属性名为box的元素
元素[属性名~=box]	属性值是以空格符分割的列表并其中一个列表值为box
元素[属性名^=box]	以box开头
元素[属性名$=box]	以box结尾
元素[属性名*=box]	包含box
:first-child	第一个子元素
:last-child	其父元素中最后一个位置
:nth-child(n)	第n个位置的子元素。（奇数2n+1，偶数2n）
:nth-last-child(n)	最后第n子元素。
:first-of-type	第一个同类型元素
:last-of-type	最后一个同类型元素
:nth-of-type(n)	第几个同类型元素
:nth-last-of-type(n)	倒数第几个同类型元素

选择器计算优先规则：

a ： ID选择器

b ：类选择器、属性选择器、伪类选择器

c ：标签选择器、伪元素选择器

优先级

行内式>id>类名/后代/子包含/伪类>标签/伪元素>通配符选择器

前端基础-真基础（上）