首页 前端知识 VSCode创建运行html界面及CSS

VSCode创建运行html界面及CSS

2025-03-18 12:03:56 前端知识 前端哥 43 874 我要收藏

 VSCode创建运行html界面

 网页搜索VSCode,选择下图所示的网站点击下载

点击进入后,选择红框标志的System Installer X64,注意不要点到旁边的Arm64

下载完后选择合适位置安装,安装完成后进入界面应该为英文,按下ctrl+shift+p打开命令面板,搜索红框所示Config......Language,选择中文

设置完成后重启,界面如图所示

点击应用标志,输入live server下载此插件

选择一个位置新建文件夹放入HTML文件

点击文件——打开文件夹,找到刚才新建的文件夹打开

此时新建文件夹出现,下拉箭头后新建HTML文件

新建html文件

在新建的html里,输入!可以快速搭建框架,框架结构如下图所示,title为网页标题,head和body可以近似理解为主题和内容,最后要以/html结尾

完成编写后,右键选择open with live server

打开网址http://localhost:【端口号】/【html文件名】.html,例如http://localhost:5500/index.html,端口号默认为5500,如果不是,以自己电脑的端口号为准,端口号为下图 port:xxxx 点击后即可在网页显示内容

CSS

CSS (层叠样式表——Cascading Style Sheets,缩写为 CSS),简单的说,它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如,调整内容的字体,颜色,大小等样式,设置边框的样式,调整模块的间距等。

所谓层叠 : 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中,可以在页面头元素中,也可以在另一个CSS文件中,规定的方式会有次序的差别(讲解引入时说明)。

所谓样式:是指丰富的样式外观。拿边框距离来说,允许任何设置边框,允许设置边框与框内元素的距离,允许设置边框与边框的距离等等。

盒模型

内容区域(content):这是元素实际显示内容的区域,如文本、图片等。内容区域的宽度和高度可以通过 width 和 height 属性来设置。

内边距(padding):内边距位于内容区域与边框之间,它的宽度可以通过 padding-toppadding-rightpadding-bottom和 padding-left 属性来分别设置。内边距会影响元素的实际尺寸,但不会影响其他元素的布局。

边框(border):边框位于内边距与外边距之间,它的宽度、样式和颜色可以通过 border-widthborder-style 和 border-color 属性来分别设置。边框会影响元素的实际尺寸,也会影响元素周围的布局。

外边距(margin):外边距位于边框与其他元素之间,它的宽度可以通过 margin-topmargin-rightmargin-bottom 和 margin-left 属性来分别设置。外边距会影响元素的布局,但不会影响元素的实际尺寸。

标题标签

 

段落标签

单选多选按钮

 练习

width改到了 50%

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23920.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!