html~css简单总结

一.html页面

html定义: 一种超文本标记语言,实现网页结构布局

1.结构:

<html>
  <head></head>
  <body></body>
</html>

2.标签类型:

块级元素: div, form, table, p…
行内元素: span, i, a, input, img…
行内块相互转换

display: block | inline

3.列表

无序列表ul

  <ul>
        <li>li第一</li>
        <li>li第二</li>
  </ul>
<!--清除列表样式:
			list-style:none;
-->

有序列表ol

   <ol start="起始值" type="默认1">
        <li></li>
        <li></li>
   </ol>

嵌套列表

4.表格table

tr表示每一行; td表示每一列

<style>
        /* 清除table的边框间隙 */
        table{
            border-collapse: collapse;
        }
</style>
<body>
    <table>
        <caption>表格标题</caption>
        <tr>
          <!--头部标题列-->
            <th></th>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
</body>

colspan跨列合并

111
222 222

rowspan跨行合并

111
222	222

5.表单元素form

用来搜集|提交用信息

<form action="提交路径" method="get| post">
	控件内容;
</form>

input控件
1. type属性
  - text
  - password
  - radio单选按钮(一般配合label使用)
```

<input type="radio" value="" name="sex" id="msex" ><label for="msex">男</label>
```
  - checkbox复选框
  - tel电话号码
  - date日期
2. name属性
  
  属性值==value属性值,用来搜集value值
3. value属性
4. placeholder默认显示文字
5. checked默认显示
6. submit注册|提交
7. reset重置
8. button
  
  <button>按钮</button>按钮

select下拉菜单

  <select name="city" id="">
        <option value="0">城市1</option>
        <option value="1">城市2</option>
  </select>

textarea文本域
- col控制文本列数—宽度
- row控制文本行数—高度

二.CSS样式

css定义: 层叠样式表,修饰html文件元素的计算机语言

结构: 选择器{
	属性名:属性值;
}

1.引用方式:

外联

    <link rel="stylesheet" href="style.css">

内嵌式
```
<style>
       css样式;
</style>
```

行内式

    <a href="#" style="color: aqua;">超链接</a>

2.选择器类型

标签选择器: div, p, a,input…

类选择器class

   <style>
        .类名 {
            css样式;
        }
    </style>
    <div class="类名"></div>

id选择器#

  <style>
        #id {
            css样式;
        }
  </style>
  <div id="id值"></div>

伪类选择器
1. 动态伪类:
  - :link
  - :visited
  - :hover鼠标经过
  - :active

3.字体属性font

font: style样式 | weight粗细 | size尺寸 | family字体 ;//字体复合属性

color字体颜色;

颜色3种表示方式: 1.rgb(num1,num2,num3);2.“color”;3.十六进制表示:#000000

4.文本样式text

text-decoratation文本修饰线
word-spacing单词间隔
letter-spacing字母间隔
line-height行高

5.文本对齐方式

text-align水平对齐方式
vertical-align垂直对齐方式
text-indent首行缩进

6.border边框

(复合属性)  border: width,style,color;

style属性: dotted | dashed | solid;
可单独设置border的某方向
border-radius边框圆角

7.background背景

复合属性
background: repeat|color|image;

repeat属性
1. no-repeat
2. repeat-x横向平铺
3. repeat-y纵向平铺

image属性

div{
  background-img: url(图片路径)
}

8.盒子模型

content内容
padding内边距
border边框
margin外边距

盒子模型图片

9.路径

绝对路径: 带盘符的路径

D:/imgages/demo
相对路径:相对当前文件位置
- ./表示从当前位置开始查找
- …/表示返还上一级目录查找

三.js交互

定义:脚本语言,实现页面动态交互,弱数据语言

几种提示框

alert()提示框
console.log()后台输出
prompt()显示输出内容框

1.引用方式

外联式:
内嵌式
行内式

2.变量初始化

声名变量>赋值

let 变量名=变量值;

申明多个变量:

let a,b,c;//先申明多个变量,再赋值也可以再重新赋值
a=1;
b=2;
c=3;
a=4;//重新赋值

申明常量const

属性值固定不变的

const pi=3.14;

3.数据类型:

数字型—整数 | 浮点型
布尔型boolean—true|false
字符串型string—“数据” | ‘数据’
noll型

underfined

数据转换

其他数据类型>>>数字型

parseInt(非数字数据);
parseFloat(非数字数据);

array数组:

单个数据可以囊括多个元素

//1.方式
let arr = [数据1,数据2....数据n];//索引从0开始
//2.方式
let arr1 = new Array(数据1,数据2,...数据n);

检测array长度
```
console.log(arr.length);
```

输出array数据

console.log(arr[index]);//index是数组索引|下标

3.数据运算

+ - * / % ++ –

1.逻辑运算符

&&逻辑与
||逻辑或
! 非

2.关系运算符

>``<
>= <=
==数值相等即可
===数值和数据类型均一致
!=不等于

3.转义符\

符号	意义
\n	回车键
\r	换行
`\"`	双引号

4.条件语句

1.if语句

if(条件){ }—只关注符合条件
if(条件){}elseif{}

2.switch语句

固定值时使用

switch (表达式){
	case 常量1 :
			JavaScript语句;
		  break;
  case 常量2 : 
 	    JavaScript语句;
    	break;
 	...
  default : 
      JavaScript语句;
}

循环语句

1.for循环

知道循环次数时使用

2.while循环

不明确循环次数时使用

零碎知识点

模板字符串:
```
`<a href=''>${变量}</a>`
```
typora转义符号使用

\
vscode快捷键使用:
1. ctrl+alt+n: run coder
2. 拖动文件名按住ctrl可复制文件