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%