VSCode创建运行html界面及CSS

 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-top、padding-right、padding-bottom和 padding-left 属性来分别设置。内边距会影响元素的实际尺寸，但不会影响其他元素的布局。

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

外边距（margin）：外边距位于边框与其他元素之间，它的宽度可以通过 margin-top、margin-right、margin-bottom 和 margin-left 属性来分别设置。外边距会影响元素的布局，但不会影响元素的实际尺寸。

标题标签

 

段落标签

单选多选按钮

 练习

width改到了 50％