HTML-CSS

1 HTML

1.1 概念

1.1.1 Web标准

HTML: 负责网页的结构

CSS: 负责网页的表现

JavaScript: 负责网页的行为、交互行为效果

1.1.2 HTML(HyperText Markup Language)：超文本标记语言

超文本：不仅包含普通文本，更强大，还可以包含图片、视频、音频、超链接、表格等

标记：就是标签。可以使用一系列的标签

1.1.3 HTML代码的组成

1.1.4 HTML语法特点

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

1.2 文本标签

文本标签: h1-h6, p , hr, b , strong , br

div和span: div占一行 span不换行

1.3 图像标签

1.3.1 作用

在网页中显示图片

1.3.2 格式

<img src="地址" title="" alt="" width="">

如果只指定宽度，高度会按等比例缩放

1.4 超链接标签: a标签

1.4.1 格式

<a href="跳转的目的地">内容</a>

//href属性，表示超链接跳转指向的url地址
//target属性，页面打开方式，_self当前页，_blank新标签页

1.5 表格标签

1.5.1 作用

用来显示多条数据

用于一些网页的布局，后期会使用div布局

1.5.2 标签

table 表格容器

tr tablerow

th tablehead

td 普通单元格

1.6 表单元素: form /\重/\

1.6.1 表单作用

接收用户输入数据，并提交数据给服务器

1.6.2 form表单格式

<form method=“提交数据的方式" action="数据提交的目的地">
    收集数据标签
</form>

action: 提交给服务器的地址

method: 提交的方式

1): GET - 默认值，参数在地址栏显示

2) POST - 参数不会直接显示, 存放在请求体中, 更加安全

1.6.3 网址分析

?前面是访问地址,后面是参数

格式 : name=value&name=value

1.6.4 表单项

<input>: 表单项 , 通过type属性控制输入形式。

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

<select>: 定义下拉列表, <option> 定义列表项
<textarea>: 文本域, rows行数, cols列数

2 CSS

2.1 css的作用

美化网页

2.2 css三种位置

2.2.1 行内样式

在标签中定义 style

2.2.2 内嵌样式

在页面上写上 < /style>

2.2.3 外联样式

先定义css文件，再通过引入

2.3 css选择器

2.3.1 作用

选中需要的标签

2.3.2 选择器种类

元素选择器:

标签名{

}

id选择器:

#id值{

}

类选择器:

.类名{

}

2.4 css常见样式

2.4.1 color - 颜色

2.4.2 text-indent - 文本缩进

2.4.3 text-align - 文本对齐

2.4.4 font-size - 设置大小

3 JS

3.1 作用

给页面添加行为

3.2 引入方式

3.2.1 内嵌

在body标签后加上

3.2.2 外联

先要创建一个js文件，然后再通过

3.3 语法格式

/\ 严格区分大小写 a 和 A 是不一样

/\ 语句的最后可以不用写;

/\ 作用域 {}

/\ 注释: 单行// 多行/* */

3.4 输出语句

window.alert(): 弹框显示

document.write() : 在html页面上输出内容

console.log(): 在控制台输出内容【需要按F12 、鼠标右键去查看】

3.5 变量

var 变量名 = 值: 可以被重复定义

let 变量名 = 值: 不能被重复定义

const 变量名 = 值: 常量, 数值不可变