当前位置：首页 > news >正文

前端初学基础

news 来源：原创 2025/5/19 10:14:25

一.Web开发

前端三件

HTML ，页面展现

CSS，样式

JS(JavaScript),动起来

二，HTML

1.HTML概念

网页，网站中的一个页面，网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

2，全称

Hyper Text Markup Language（超文本标记语言）

超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
标记:标签，不同的标签实现不同的功能
语言:人与计算机的交互工具

3 HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

展现音频,视频,图片

表格,列表

超链接

4 HTML书写规范

HTML标签是以尖括号包围的关键字例如<a> <img>

HTML标签通常是成对出现的，有开始就有结束

HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)

属性放在开标签内

<a href="" target=""> </a>

HTML标签不区分大小写,建议全小写

HTML标签支持合理的嵌套

开闭标签之间加要展示的内容

文件后缀是html,写完后使用浏览器打开

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">MArquee</span> <span style="color:#0000cc">direction</span>=<span style="color:#aa1111">"right"</span> <span style="color:#0000cc">scrollamount</span>=<span style="color:#aa1111">10</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">b</span><span style="color:#117700">></span>嘻嘻今天有雾霾<span style="color:#117700"></</span><span style="color:#117700">b</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">marquee</span><span style="color:#117700">></span></span></span>

5 开发工具

VSCode (微软) (我们使用这款)

HBuilderX (国产)

WebStorm (IDEA家族的)

Dreamweaver (考古队)

2.5.1 安装 VSCode

默认下一步下一步就可以.

建议勾选2345,这样可以在右键时有一个提示"使用VSCode打开文件"

5.2 插件

安装插件

Chinese (Simplified)(简体中文)

Auto rename tag (自动改标签名)

Material lcon Theme (图标样式)

open in browser (快速使用浏览器打开页面)

以上几个是非常墙裂建议安装!,在应用商店,输入以上几个的名字即可

5.3 使用vscode

使用VSCode,最好的方式

先在本地磁盘创建好一个前端项目(文件夹)

使用VSCode打开该文件夹

创建页面文件

5.4 运行

1 在磁盘中找到文件,使用浏览器打开

2 或者使用刚才我们安装的插件,有快捷键 alt+b,就会使用电脑的默认浏览器打开

HTML基本标签 1，结构标签（基本骨架）！！！打一个！然后回车键就列出基本骨架 ctrll+？快捷键注释选中的这一段
哈哈嘿嘿第一次写哦 1.属性text 设置网页正文中所有文字的颜色 bgcolor 设置网页的背景色 background 设置网页的背景图
2.排版标签注释标签快捷键 ctrl+？换行标签（单标签，没有行间距）段落标签

文本文字

段与段之间有空行（行间距比较大）属性：align对齐方式（left,right,center）水平线标签

(单标签) 空格符号

3.块标签 div

行级块标签，独占一行，自带换行 span 行内块标签，所有内容都在同一行

4.基本文字标签 size 用于设置字体的大小，最小1号，最大7号 color 用于设置字体的颜色 face 用于设置字体的样式，如宋体，楷体等

5.标题标签随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行由h1到h6

6.列表标签无序列表使用一组无序的符号定义，

中写子标li标签

属性值：circle 空心圆；disc 实心圆；square 黑色方块有序列表使用一组有序的符号定义

属性值： 1数字类型；A大写字母类型；a小写字母类型； I大写古罗马； i小写古罗马列表嵌套：有序列表和无序列表相互嵌套使用

这是传说

这是传说

这是传说

? ?

? ?
? ? ? ?
这是传说
? ? ? ?
这是传说
? ? ? ?
这是传说
? ?

7.图片标签在页面指定位置处引入一幅图片属性名： src 引入图片的地址； width 图片的宽度；height 图片的高度；border 图片的边框； align 与图片对齐显示方式；alt 提示信息；路径问题：./当前文件夹 ../上一层文件夹 8.超链接标签！！！！在页面中使用超链接标签跳转到另一页面标签：属性：href：跳转的页面的地址（跳转到外网需要添加协议）设置跳转页面时的页面打开方式，target属性 \_blank 在新窗口中打开 \_self 在原页面中打开图片加链接，点击图片跳转
9.表格标签
表格标签非常重要，用于在项目中展示数据
普通表格（table,tr,td）
table标签中有子标签tr（行）tr标签中有子标签td（列）标签
表格的列标签（th）：内容有加粗和居中的效果
表格的列合并属性（colspan）：在同一行内同时合并多个列 column列
表格的行合并属性（rowspan）：在同一列跨多行合并
HTML表单标签！！！！！！！！！！！！！！！！
1.form元素常用属性
action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method：请求方式：get和post
- - get:
- 地址栏,请求参数都在地址后拼接 path``name=张三`&`password=23456
- 不安全
- 效率高
- get请求大小有限制，不同浏览器有不同，但是大约是4KB；一般情况用于查询数据
- post：
- 地址栏：请求参数单独处理。
- 安全可靠些
- 效率低
- post请求大小理论上无限；一般用于插入删除修改等操作
- enctype:表示是表单提交的类型
- 默认值：application/x-www-form-urlencoded 普通表单
- multipart/form-data 多部分表单(一般用于文件上传)
2.input元素
作为表单中的重要元素，可根据不同的type值呈现为不同的状态
属性值：text 单行文本框；password 密码框；单选按钮 radio；复选框 checkbox；date 日期框；time 时间框；datetime 日期和时间框；email 电子邮件输入；file 文件上传；hidden 隐藏域；
submit 表单提交按钮；button 普通按钮； reset 重置按钮
input标签中的属性
value 输入框的值
name 输入框值的key，没有name属性，将来后台服务器没有办法接受数据
3.select元素（下拉列表）
单选下拉列表：
默认选中属性：selected=“selected”;
HTML5以后，属性名等于属性值的属性，可以简写属性即可；
多选下拉列表属性：
多选列表：multiple=“multiple”;
4.textarer元素（文本域）
多行文本框：

CSS 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 1.多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，不冲突的共同作用 2.修饰HTML网页，外部样式表可以提高代码的复用性从而提高工作效率，HTML内容与样式分离便于后期维护。 3.CSS规则由两个部分组成：选择器和，以及一条或多条声明选择器通常是你需要改变样式的HTML元素每条声明由一个属性和一个值组成 4.基础语法选择器{属性：值；属性：值…} CSS对大小不敏感，如果涉及到与HTML文档一起使用时，class与id名称对大小写敏感

CSS导入方式！！！将css作用于html元素上！！！就是导入方式 1.内嵌方式将css样式嵌入到html标签当中，类似属性的用法

块

2.内部方式在head标签中使用style标签引入css

style{

div{

color=red;

font-size=20px;

}

3.外部方式创建一个CSS文件，在里面写入CSS代码，使用时直接引入引用语句： rel代表当前页面与href所指定的文档的关系[固定] type:文件类型，告诉浏览器使用css解析器去解析[固定] href:css文件地址

CSS选择器选择器就是选到标签给其加样式选择器{ 属性：值} 选择方式不一样，选择的标签也不一样可以选择一个标签也可以选择同名的所有标签，可以选择一类标签，甚至还可以选择后过滤选择 1.基本选择器！！！元素选择器（标签名）在head中使用style标签引入，在其中声明元素选择器 html标签{ 属性：属性值 } id选择器给需要修改样式的html元素添加id属性标识，在head中使用style标签引入，在其中声明id选择器 #id{ 属性：属性值} class选择器给需要修改样式的html元素添加class属性标识，在head中使用style标签引入，在其中声明class选择器以上基本选择器的优先级从高到低：id选择器>class选择器>元素选择器 2.属性选择器根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明

CSS属性 1.文字属性 font-size 设置字体的大小像素百分比 font-family 默体，宋体，楷体等设置字体的样式 font-style normal正常；italic斜体设置斜体的样式 font-weight 100-900的数值；bold；bolder；粗体样式

2.文本属性 color 设置文本的颜色 text-indent 5px缩进5像素；20%缩进父容器宽度的20%；缩进文本中元素的首行 text-decoration none；underline；overline；blink；文本的装饰线 text-align left;right;center; 文本的水平对齐方式 word-spacing normal；固定值；像素；英语单词之间的间隔，需要输入的单词间有空格 line-height normal；固定值；像素；设置文本的行高

3.背景属性 background-color 设置背景色 background-image utr(“图片路径”) 设置背景图片 background-repeat repeat-x；repeat-y；repeat；no-repeat；设置背景图的平铺方向 background-position top；bottom；left；right；center 改变图像在背景中的位置 background-size 像素；百分比设置图片的大小

4.列表属性和有序列表和无序列表有关 list-style-type disc等改变列表的表示类型 list-style-image utr(“图片的地址”) 用图像表示标识可以在阿里巴巴矢量图标库找寻需要的图标

5.尺寸属性 width：设置元素的宽度，单位px % height：设置元素的高度。单位px %

6.显示属性display 常用取值为none不显示，即隐藏 block ：块级显示，占一行 inline：行级显示，占部分

7.定位属性position relative（相对）元素框偏移某个距离，相对于父元素中其正常位置（相对于自己）进行定位，元素仍保留其未定位前的形状，他原本所占的空间仍保留的 absolute（绝对）元素框从文档流完全删除并相对于最近的定位祖先元素进行定位（祖先元素需要定位）。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位以后生成一个块级框。 fixed（固定）元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身使用了定位属性后，才可以使用top，bottom，left，right这些位置属性

盒子模型！！！

1.边框的相关属性 border-style solid；double；dashed；dotted；设置边框的样式 border-color 设置边框的颜色 border-width 设置边框的粗 border 同时设置线性，颜色，尺寸

2.外边距相关的属性 margin ：外间距，边框和边框外层的元素的距离（相对于父级元素的定位） top;right;bottom;left; 四个方向的距离属性 margin-top 上间距 margin-bottom 下间距 margin-left左间距 margin-right右间距

3.内边距相关属性 padding：内间距，元素内容和边框之间的距离（top;right;bottom;left）

浮动！！！！！！！！ float :left左浮动 float:right右frg浮动

图片和文字同时出现时，图片浮动不会遮盖住文字，文字会按报纸排版排在图片旁边的空处

JS （JavaScript）一种解释性的脚本语言，是一种动态类型，弱类型，基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。 CSS是给html标签装饰的，而js是为了给html标签实现动态效果的

1.在标签内写js（内嵌）按钮 onclick是html的属性,是事件属性,在这里是鼠标点击事件,属性值内部写的是js代码 ,alert() 是js的弹窗函数

2.在文件中使用

3.独立的js文件创建一个后缀为.js的文件文件内写js代码在html文件内使用

JavaScript基本语法 1.变量变化的量叫变量在js中，任意变量任意类型都用var关键字来声明，var是variable【变量的意思】的缩写。 var是声明关键字，a是变量名，语句以分号结尾（分号可有可无）这里值得注意的是，js中的关键字，不可作为变量名。就像在java中你不可以写"int int=1;"一样 JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型 let局部变量，const常量 (局部变量)

2.基本数据类型数字（number）既包含整数也包含小数，可以做算数，逻辑运算等（后续运算时使用）字符串（string）使用双引号或单引号引起来的数据叫做字符串可以使用字符串的方法，对字符串操作完整的string操作,可以查看APIJavaScript 字符串方法 (w3school.com.cn) 布尔型（boolean）就是true（对）或false（错）可以用于逻辑判断，分支语句，循环等（后续分支循环时使用）未定义（undefined）空（null）是object类型的数据 console.log(typeof x) 在控制台打印出变量x的数据类型

3.JSON类型【重点！！！！】 JSON类型是借鉴Java中的对象思想。 JS中的引用类型其实就是JSON，全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的前后端交互用的数据类型就是JSON JSON表示一个对象，他主要作用/目的/应用场景：存储数据语法格式：{ id:1,age:18,sex:true,name:“zs”,phone:[110,120],child:{id:1,age:18}} JSON对象使用大括号，{}

大括号内,是键值对,键值对使用是冒号分割.{key:value}
键正常写,值得写法区分数字,字符串,布尔值,数组,对象等
- {id:18} 数字直接写
- {name:“张三”} 字符串需要双引号
- {sex:true} 布尔值直接写
- {arr:[1,2,3]} 数组使用[]
- {obj:{}} 对象使用{}
大括号内,可以同时写多个键值对,中间使用逗号隔开
- {id:18,name:“李四”,sex:true}