1.HTML

1.1简介

html:hyper text markup language，超文本标记语言

html 1.0 - 1993-06

html 2.0 - 1995-11

html 3.x - 1997-01

html 4.0 - 1997-12

html 4.01 - 1999-12

html 5 - 2014-10

1.2 HTML基本网页结构

格式：xxx.html（推荐） xxx.htm

doctype声明

不区分大小写，容错率很强

乱码问题：英文和数字在任何编码格式下都不会有乱码（正常显示的）；其他的都依赖于编码类型。

w3c规定：标准写法有两种

<标签></标签>

<标签 />

w3c标准：

具体的实现产品html css javascript
html版本
html和xhtml的区别
html内容的语义化

1.3基础标签（重点）

2. CSS

基本语法

选择器

标签选择器：直接编写标签名
类选择器：.class值，可以用于多个元素
id选择器：#id值，只能用于一个元素

选择器：
标签选择器：直接编写标签名
类选择器：.class值，可以用于多个元素
id选择器：#id值，只能用于一个元素
  {
    样式名：样式值；
    样式名：样式值；
     color:red;  颜色支持英文单词、#6个或3个十六进制
      ...
  }   */

引入CSS样式的方式

行内样式
内部样式 head style
外部样式

建议：开发时用内部样式；编写完毕后改造成外部样式；

行内：不推荐，赶时间，应急

行内：

<h4 style="color: orange;background: aqua">h4样式</h4>

内部：

    <head>
        <title>CSS</title>
        
        <style type="text/css">
            h1
            {
                color:red;
                font-size: 50px;
            }
    </head>

外部：

先将样式独立保存在一个.css文件中，然后再html文件中引入该.css文件

<head>
<!-- 外部样式：推荐做法link -->
        <link href="mycss.css" type="text/css" rel="stylesheet" />
</head>

了解（不推荐）：

<style type="text/css">
	@inport url("mycss.css");
</style>

外部导入的两种方式（链接式：link ；导入式：@inport）

推荐link
link属于xhtml规范，@inport属于css2.1 标准
link将css 预先加载到网页中，再进行编译显示
@import：先显示网页结构，然后再加载CSS内容
@import是css2.1 独有的

提示：注释：html ，在css中注释、/* */

CSS优先级问题：小范围>大范围

行内优先级 > 内部 = 外部，内部和外部取决于谁里body近

id选择器 > 类选择器 > 标签选择器

复合选择器

提前：样式会继承，例如选择ul，会给ul下面的li起作用

CSS2.1

后代选择器：空格

<style type="text/css">
    /* 后代选择器 */
    ul strong{
        color: red;
        font-size: 50px;
    }
</style>

交集选择器：连续书写（没有继承性），要防止歧义

<style type="text/css">
    /* 交集选择器 */
    li.mystyle{
        background: yellow;
    }
</style>

并集选择器：逗号 ,

<style type="text/css">
    /*并集选择器*/
    h2,h1{
        font-size: 30px;
    }
</style>

CSS3（类似jquery）

层次选择器
- 后代选择器：空格
- 子选择器：>
- 相邻同辈选择器（只对后面的元素有效）：+
- 通用同辈选择器（只对后面的元素有效）：~

结构伪类选择器

<head>
    <title>CSS3</title>
    <style type="text/css">
        /* 结构伪类选择器 */
        li:first-child {
            color: yellow;
        }
        li:last-child {
            color: brown;
        }
        li:nth-child(3) {
            color: red;
        }
        p:last-of-type {
            background: purple;
        }
    </style>
</head>

属性选择器 []

	<style type="text/css">
            /*选择有name属性，且标签是input的 */
            input[name] {
                background: yellow;
            }
            /*input，有name，且name的值是username */
            input[name='username'] {
                background: yellow;
            }
            /*name是以user开头的元素 */
            input[name^=user] {
                background: purple;
            }
            /*name是以name结尾的元素 */
            input[name$=name] {
                background: orange;
            }
            /*name是以包含rn的元素 */
            input[name*=rn] {
                background: pink;
            }
	</style>

盒子模型

作用/意义：决定不同元素之间的位置关系（平面位置、空间位置）

background-color，h1

h1，外边距

网页元素，类比盒子

空间位置的覆盖关系：从下往上：背景色<背景图片<元素内容

边框：border

border：none; 默认是none，不显示需写 solid 才会显示边框

边框颜色 border-color：

border-color: red; 代表上下左右四个边框全是红色。

border-color: red yellow; 上下：red 左右：yellow

border-color: red yellow blue； 上 “左右” 下

border-color: red yellow blue green; 上右下左 （顺时针）

如果记不住，也可以直接写

border-top-color: blue;
border-bottom-color: yellow;
border-left-color: red;
border-right-color: green;

边框粗细 border-width：

border-width: medium; 适中 border-width: thin; 细 border-width: thick; 粗 border-width: 10px; 自定义

边框样式 border-style：

border-style: solid dotted double dashed;

上边框是点状
有边框是实线
下边框是双线
左边框是虚线

外边距：margin

margin 与 border 用法类似

margin-top: -10px;
margin-bottom: -10px;
margin-right: -10px;
margin-left: -10px;

内边距：padding

padding-top: 30px;
padding-bottom: 30px;
padding-right: 30px;
padding-left: 30px;

CSS样式（有些样式存在浏览器兼容问题）

字体

font_size：字体大小 px em rem cm mm pt pc

font-style：normal（默认）, italic/oblique

font-weight：bold bolder normal lighter 100-900

text-indent：缩进 2em

line-height：100px

text-decoration：underline/overline/text-though

color：英语单词red 十六进制（3位或6位） rgb(11,192,15) rgba(1,27,182,0.5)最后0.5表示50%透明度

阴影text-shadow：横坐标纵坐标发散程度

超链接

a:hover 悬浮时
a:link 未访问
a:link 已经访问
a:active 点击鼠标时

设置顺序：link > visitied > hover > active

鼠标样式：cursor：pointer / wait

list-style-type ：列表样式

背景

background-image：url（图片地址）

background:url("imgs/dianzi.png") right top no-repeat;

background-size: cover;

cover：铺满整个网页
aoto

background-size: 50% 60%;

表示宽占整个网页的50%，高占整个网页的60%

background-image: linear-gradient(to right,blue, yellow, green);	// 线性渐变
background-image: radial-gradient(blue 60%, yellow 80%, red 90%);	// 圆形渐变

边框的圆角：圆角边框

border-raduis：

<style>
            div {
                box-shadow: 10px 20px 10px gray;
                width: 100px;
                height: 50px;
                border: 3px solid red;
                margin: 50px;
            }
            div:nth-of-type(2) {
                border-radius: 50px 50px 0px 0px;
            }
            div:nth-of-type(3) {
                border-radius: 0px 0px 50px 50px;
            }
            div:nth-of-type(4) {
                border-radius: 0px 50px 50px  0px;
            }
            div:nth-of-type(5) {
                border-radius: 50px 0px 50px  0px;
            }
</style>

标准文档流

组成

块级元素（block level）：自带换行 div，可以设置宽和高
内联元素（inline level）：不换行 span，没有宽和高
inline-block：1. 如果inlink失效，可以尝试inlink-block 2. 可以设置宽和高

块级元素：

内联元素：

块级可以包含内联

内联元素和块级元素相互切换：

display：block | inline | none | inlink-block ;

浮动（float）

块级元素->内敛元素：将不同行的元素放置到一行

浮动：将不同行的元素放置到一行

float：none | left | right

浮动（压缩）：压缩的是自己的空间

clear：清除浮动（清楚一半，还原了块级元素的换行特性，但没有还原空间）

溢出overflow

overflow：visible | hidden | scroll | auto

scroll：无论是否超出，都有滚动条

auto：如果超出，有滚动条；否则没有

定位

position：static（默认值，没有定位）| relative（相对定位）| absolute（绝对定位）| fixed（固定定位）

relative：相对于自身（注意位置）

absolute

CSS：选择器优先级

/*
    每一个选择器都能计算出一个【权重权】，格式为：（a,b,c）
    a表示：一个选择器中【ID】选择器的个数
    b表示：一个选择器中【类、伪类、属性】选择器的个数
    c表示：一个选择器中【元素、伪元素】选择器的个数
*/

/* 第一种写法，权重值：(0,2,3) */
div.earthy ul.list li {
    color: red;
}

/* 第二种写法, 权重值：(0,1,3) */
div.earthy>ul>li {
    color: blue;
}

/* 第三种写法, 权重值：(0,2,2) */
.earthy ul[a="hello"]>li {
    color: green;
}

先比较a，都为0；再比较b，第二种权重最小；最后比较c，第一种最大；

三种写法优先级：第一种 > 第三种 > 第二种

如果权重值一样，谁在后面选用谁

垂直居中

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>4.vertical-align</title>
      <style>
        div {
          font-size: 0px;
          background-color: skyblue;
        }
        .big {
          font-size: 40px;
          background-color: orange;
          vertical-align: middle;
        }
        .smart {
          font-size: 20px;
          background-color: orange;
          vertical-align: middle;
        }
      </style>
  </head>
  <body>
      <div>
        <span class="big">wang王伟军</span>
        <span class="smart">xwang王伟军</span>
      </div>
  </body>
</html>

Vue

安装脚手架Vue-cli

配置npm淘宝镜像源

npm config set registry https://registry.npmmirror.com

全局安装

npm install -g @vue/cli

在控制台输入vue，如果未找到，需配置环境变量

.......\node_global

创建Vue3.0工程

# 确保vue版本高于4.5.0
vue -V
vue create <project-name>

安装路由router

在src下创建文件夹router以及index.js

import { createRouter, createWebHistory } from "vue-router"

const routes = [
    {
        path: "/",
        name: "Home",
        component: () => import('../views/Home.vue')
    }
]

const router = createRouter({
    history: createWebHistory('/'),
    routes: routes,
})

export default router;

在main.js中配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(router);
app.mount("#app");

测试：修改APP.vue

<template>

 <router-view />

</template>