HTML,CSS,JS快速入门

努力不熬夜 ^_^

已于 2024-05-10 21:02:50 修改

阅读量713

点赞数 11

于 2024-05-10 16:00:19 首次发布

本文链接：https://blog.csdn.net/nener_give_up/article/details/138669964

版权

HTML（超文本标记语言）

特点

1，html标签不区分大小写

2，html标签属性值单双引号都可以

3，html语法松散

编辑器

vscode

生成模版快捷键->！+回车

基础

./ 当前目录，可以省略

../ 上一级目录

<h1>标题标签（h1-h6依次降低）

<hr>水平分割线

<img src="">图片标签

<span>无语意的布局标签

<a>超链接【属性：href:指定访问资源的url，

target:指定在何处打开资源链接（_self:默认值，当前页面打开，_blank:在空白页面打开）】

<audio>音频【属性：src:视频的url，controls:显示播放控件】

<video>视频【属性：src:视频的url，controls:显示播放控件，height高度，width宽度】

<br>换行

<p>段落

<b>/<strong>文本加粗

&nbsp占位符，相当于空格

表格标签：

<table>定义表格整体，可包含多个<tr>

<tr>表格的行，可包含多个<td>

<td>单元格，包含内容（如果是表头单元格，可替换为<th>）

属性

border规定表格边框的宽度

cellspacing规定单元格之间的空间

表单标签

<form>

表单项

<input>定义表单项，通过type属性控制输入格式

（type取值：password密码字段，

radio单选按钮

checkbox复选框

file文件上传

date/time/datetime-local日期/时间/日期时间

number数字输入框

email邮件输入框

submit/reset/button提交按钮/重置按钮/可点击按钮）

<select>定义下拉列表

<textarea>定义文本域

属性

action提交表单时向何处发送表单数据，URL

methond发送表单数据的方式，GET，POST

CSS

引入方式

1，行内样式：写在标签的style属性中

2，内嵌样式：写在style标签中

3，外联样式：写在一个单独的.css文件中，需要通过link标签引入

css属性

color设置颜色

1，关键字：red, green

2，rgb表示法：rgb(255,0,0)

3，十六进制：#ff0000 #cccccc #ccc 可缩写

front-size设置字体大小

line-height设置行高

text-indent定义第一个行内容的缩进

text-align规定元素中的文本的水平对齐方式

box-sizing:border-box指定width,height为盒子的宽高

background-color背景色

padding:0px，0px，0px，0px 内边距，上右下左

border:10px solid red 边框，宽度线条类型颜色

margin:0px，0px，0px，0px 外边距，上右下左

css选择器

1，元素选择器：标签名{……}

2，id选择器：#id属性值{……}

3，类选择器：.class属性值{……}

优先级：id选择器>类选择器>元素选择器

JS（javaScript）

引入方式

1，内部脚本：将代码写在HTML页面中，位于<script></script>标签之间，可以放在任意位置，一般放在 <body>元素底部

2，外部脚本：将代码定义在外部js文件中，<script src=""></script>引入HTML页面

输出语句

windos.alert()弹出警告框

document.write()写入html

console.log()浏览器控制台

变量

1，var定义变量（如var a = 12）

特点：全局变量，可以重复定义（后一个会把前面的覆盖掉）

2，let

特点：局部变量，只在代码块内有效，不允许重复定义

3，const

特点：常量，不能改变

数据类型

使用typeof可以获取数据类型

1，number

2，string

3，boolean

4，null

5，undefined

函数

方式一：

function 函数名（）{……}

注意：因为js是弱类型语言所以

1，形式参数不需要类型

2，返回值不需要定义类型，直接return

方式二：

var 函数名 = function（）{……}

对象

1，Array定义数组

方式一：var 变量名 = new Array(1,2,3,4)

方式二：var 变量名 = [1,2,3,4]

特点：长度可变，类型可变

2，String

方式一：var 变量名 = new String("Hello")

方式二：var 变量名 = "Hello"

3，JSON

var 名称 = '{"name":"miku"，"age":18，"arr":["北京"，"上海"，"深圳"]}'

var jsObject = JSON.parse(userStr)将JSON字符串转为JS对象

var jsObject = JSON.stringfy(jsObject)将JS对象转为JSON字符串

4，BOM

Window【alert()警告框 confirm()对话框 setInterval(函数，等待时间)计时器，周期性

setTimeout(函数，等待时间)计时器，只执行一次】

Location 地址栏对象【location.href=""】

5，DOM

Document 整个文档对象

Element 元素对象

Attribute 属性对象

Text 文本对象

Comment 注释对象

事件监听

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

如：<input type="button" οnclick="on()" value="按钮1">

function on(){ alert('按钮1被点击了') }

</script>

方式二：通过DOM元素属性绑定

如：<input type="button" id="btn" value="按钮2">

document.getElementById('btn').onclick = function () { alert('按钮1被点击了') }

</script>

常见事件

onclick鼠标单击事件

onblur元素失去焦点

onfocus元素获得焦点

onload某个页面或图像被完成加载

onsubmit表单提交时触发该事件

onkeydown某个键盘的键被按下

onmouseover鼠标移到某个元素上

onmouseout鼠标从某元素离开

努力不熬夜 ^_^

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML,CSS,JS快速入门

html,css,js的主要基础，帮你快速入门web前端
复制链接

扫一扫