两学一做知识竞赛网站长沙城乡建设部网站首页

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

两学一做知识竞赛网站,长沙城乡建设部网站首页,兰州网站建设人才招聘,wordpress这么用The sand accumulates to form a pagoda写在前面HTML是什么#xff1f;CSS是什么#xff1f;demo搭建写在最后写在前面 其实有过一些粉丝咨询前端该从什么开始学#xff0c;那当然是我们的前端基础三件套开始学起#xff0c;HTML、CSS、javaScript#xff0c;前端的大部分… The sand accumulates to form a pagoda写在前面HTML是什么CSS是什么demo搭建写在最后写在前面 其实有过一些粉丝咨询前端该从什么开始学那当然是我们的前端基础三件套开始学起HTML、CSS、javaScript前端的大部分框架的底层还是围绕着前端三件套来搭建的相信大家能够在很多平台中去找到一些前端三件套的体系教程借着原力计划呢凉哥也为大家带来前端三件套的一些内容分享只不过这里可不是纯基础知识的输出而是会结合一些给予前端三件套的基础知识来做一些有趣的小项目、小demo会由简单到复杂由静态到动态的过程来帮助大家掌握前端三件套的使用及搭配所以这里针对的人群是前端初学者或者你还没有开始学前端想感受一些前端代码那这个专栏很适合你。下面呢我们也先来了解一下我们的HTML、CSS都是什么 HTML是什么 HTMLHyperText Markup Language是一种用于创建网页的标准标记语言。它是 Web 技术的基础通过使用标记标签来描述文档的结构和内容使得浏览器能够正确地呈现网页。HTML 中的标记以尖括号包围并且通常是成对出现的。标记之间的文本是元素的内容它们可以包含其他元素。HTML 中最常见的元素包括标题、段落、链接、图像、列表等等。除了描述文本内容外HTML 还支持添加超链接、表格、表单、嵌入多媒体等其他功能。此外HTML 还提供了一些元数据标签如标题、描述和关键字可以提供更多有关文档的信息帮助搜索引擎理解网页内容。HTML 是 Web 开发的入门语言易于学习需要掌握的基本语法和标记较少。随着 Web 技术的发展HTML 的版本也在不断更新当前版本为 HTML5它提供了更多的功能和特性例如本地存储、音频视频、Canvas 绘图等等使得 Web 应用程序更加丰富多彩和交互性强。 HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档它能独立于各种操作系统平台(如UNIX Windows等)。使用HTML将所需要表达的信息按某种规则写成HTML文件通过专用的浏览器来识别并将这些HTML文件“翻译”成可以识别的信息即我们所见到的网页。 其实上面说了这么多可能有的大家能够看明白有的对于初学者来说可能又有点懵懂当然关于上面的理论内容我还是建议大家抽时间自己百度了解一下毕竟知其然知其所以然下面我也用一句话来描述HTML究竟可以做什么你可以使用 HTML 来建立自己的 WEB 站点HTML 运行在浏览器上由浏览器来解析。也就是说你可以通过HTML来搭建自己的网页好吧是不是够直白好了如果你对我上面这句话还是不够理解好吧那就看下面这张你非常熟悉的图 上面就是我们的百度的官网我们可以在页面任意位置右键鼠标然后点击检查或者我们直接点击页面按F12键即可打开我们右边的控制台我们可以在Elements中发现代码这就是HTML这也是渲染成我们百度的HTML代码当然不一定是通过HTML搭建的有可能是通过框架不过即便是通过框架搭建的但是最终编译后一定是HTML所以是不是这就理解了我上面说的那句话我们可以通过HTML来搭建网页。 CSS是什么 层叠样式表(英文全称Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用或XML标准通用标记语言的一个子集等文件样式的计算机语言。CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。它与 HTML 相互结合通过选择器来指定要样式化的 HTML 元素然后定义这些元素的样式属性。CSS 可以定义元素的字体、颜色、间距、边框、背景等外观样式还可以用于实现布局和交互效果。CSS 具有以下特点 丰富的样式定义CSS提供了丰富的文档样式外观以及设置文本和背景属性的能力允许为任何元素创建边框以及元素边框与其他元素间的距离以及元素边框与元素内容间的距离允许随意改变文本的大小写方式、修饰方式以及其他页面效果。易于使用和修改CSS可以将样式定义在HTML元素的style属性中也可以将其定义在HTML文档的header部分也可以将样式声明在一个专门的CSS文件中以供HTML页面引用。总之CSS样式表可以将所有的样式声明统一存放进行统一管理。另外可以将相同样式的元素进行归类使用同一个样式进行定义也可以将某个样式应用到所有同名的HTML标签中也可以将一个CSS样式指定到某个页面元素中。如果要修改样式我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用CSS样式表可以单独存放在一个CSS文件中这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。层叠简单的说层叠就是对一个元素多次设置同一个样式这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表而某些页面中的某些元素想使用其他样式就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写在浏览器中看到的将是最后面设置的样式效果。页面压缩在使用HTML定义页面效果的网站中往往需要大量或重复的表格和font元素形成各种规格的文字样式这样做的后果就是会产生大量的HTML标签从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中可以大大的减小页面的体积这样在加载页面时使用的时间也会大大的减少。另外CSS样式表的复用更大程度的缩减了页面的体积减少下载的时间。 上面这些呢都是网上对于CSS的解释可能你还并没有很好的理解CSS下面我也用一句话来描述CSS究竟可以做什么上面我们说到了HTML可以搭建网页那么我们可以粗暴的理解为HTML就是积木那我们的CSS就是决定我们积木的颜色、形状、布局就是为我们的HTML添加呈现色彩看下面这张你非常熟悉的图我们的网站之所以很漂亮都是依靠我们的CSS代码下图中的圈中的就是我们的CSS代码 demo搭建 在上面呢我们就了解了我们的前端基础三件套中的HTML、CSS的概念和作用那我们就开始我们本节的小目标吧我们本节使用的技术栈就是HTMLCSS不需要你的电脑上安装任何环境只要你有一款可以编码的软件就可以了在这里呢我比较推荐的就是VSCode当然其他的也行甚至你是用记事本编码都是可以只不过没有语法提示下面呢我就先来展示一下我们今天要做的这个小小的demo吧非常简单的一个个人相册的页面布局简单帮我们了解基础的前端代码 创建index.html 我们可以看到上面的页面非常简单那我们就用最简单的代码来实现上面的页面吧首先呢就需要我们去创建一个html为后缀名的文件这个文件的名称可以自己决定在这里呢我就起名叫做demo.html注意我们的后缀名哦是html然后我们用编辑器打开我们刚创建的文件。 初始化代码 我们在上面有在讲过我们的HTML代码都是成对出现的如果你使用的也是前端编辑器那么编辑器会自动为你补全代码首先我们先来初始化一下代码注意这里呢我没有用快捷方式为了初学者更容易理解所以代码利用了最精简的版本老手勿质疑 html head/headbody/body /html我们能够看到最外层的标签就是HTML然后里面有两组标签一个是head这个就是来控制我们的网页的头部比如我们一会呈现的页签名称我们可以在这里设置另一个呢就是我们的 body 这个故名思义就是我们的页面身体部分也就是我们页面中的内容都写在这里 设置页签name运行文件 我们上面所讲的在我们的head/dead标签中我们可以设置一些内容信息比如我们的页签name以及一些网站的信息比如网站的作者、介绍、版权、关键字等其实我们的CSS样式也是写在这里我们先来看前几项的内容吧 headtitle我的相册/titlemeta nameauthor content作者几何心凉/meta namedescription content网页的描述/meta namecopyright content这里是版权信息/meta namekeywords content网页的关键字//head可以看到我们里面有title标签还有meta标签我们的title标签就是我们设置的页签namemeta标签的不同属性设置不同的内容下面我们运行一下我们的网页然后来看一下我们的页签name的效果吧首先我们的运行非常简单我们找到我们刚刚新建的index.html然后双击这个文件就会在浏览器中被打开了这里建议是使用我们的谷歌浏览器哦。大家可以任意设置观察效果哦。 头部部分搭建 其实我们在正式的开发中我们的head中还要配置几项内容的但在本节中我们先不讨论我们就先初体验一把我们的HTMLCSS代码下面我们就来写一下网页中的内容吧首先我们完成的就是我们的头部内容也就是我们这部分内容。 这里呢我们能够发现其实这里就是一个盒子然后里面包裹着一个‘我的相册‘四个字那我们就在我们的body中可以写我们的主体代码了这里呢我们可以用语义化标签也搭建但是大家可能理解还是不太好理解我们就直接都用div来表示吧我们就用一个div盒子然后在中间我们加入我们的h1标签h1标签就是我们的标题标签标题的范围可以从h1到h6。最重要的标题是h1最不重要的标题是h6。这句话很好理解哈这里呢我们是用最大的h1标签来呈现 bodydivh1我的相册/h1/div/body代码加入后我们回到浏览器要刷新页面哦刷新后我们发现我的相册就呈现出来了但是我们现在的呈现效果跟我们要求的差距比较大这时候我们可以回想上面所讲的我们html是积木我们的css才是决定积木的展示形式所以这时候我们就用到我们的CSS代码喽。 CSS样式语法 首先是我们的CSS要写在哪里呢这里我们建议大家是卸载我们的head标签中我们的CSS也可以称之为样式所以我们的CSS代码也有一个标签就是 style/style 我们把style标签加入head中就可以在style中编写我们的样式了哦 我们了解到我们的CSS是跟HTML来搭配使用的我们就可以理解为CSS是可以直接让那个HTML元素变成什么样子的但是我们如何指定元素呢我们CSS中有标签选择器、id选择器、类选择器、派生选择器等等是不是听得一头雾水呢没关系哈我们先跟着敲就好了首先在这里我们都来给大家使用一下哈标签选择器就是我们可以拿到对应的标签元素来进行样式的设置类选择器呢是说明我们要给标签设置类名然后在style中可以通过类名指定元素来进行样式的设置id选择器当然就是我们给标签设置id值然后在style中可以通过id来指定元素设置样式首先呢我们先来对body标签设置点样式 style/* 这里编写样式 /body {font-family: Arial, sans-serif;margin: 0;} /style这里我们看到style中我们 写入的是body这个body呢就是我们html中的body标签然后后面花括号中的代码就是样式这里呢我们的 font-family是设置字体体然后margin是设置元素外边距距离上下左右多少单位这里是0margin:0;也是我们在实际开发中初始化写入的样式我们可以发现如果给标签添加样式需要一个花括号样式代码每行都是键值对的形式而且每行代码都是;结束这就是CSS的语法啦你可以写上后刷新我们的页面你会发现一些些的变化哦 头部实现 下面我们就来看一下我们 我的相册 如何设置样式吧首先呢我们能够发现我们的头部一长条的背景颜色为灰色然后我们的文字是居中的我们一起来实现一下吧上面我们用到了标签选择器那这里我们运用一下我们的类选择器吧我们先来给我们body中的div设置一个类名比如我们叫做header如何设置呢很简单通过class属性 bodydiv classheaderh1我的相册/h1/div/body然后我们在style中如何获通过类名设置样式呢其实就是通过 .类名这里就是.header我们可以看到下面的代码background-color用来设置背景颜色color用来设置文字颜色text-align用来设置元素内的字体的对齐方式这里我们center就是剧中我们常用的还是left、right大家可以自行尝试一下padding是内边距我们上面说的margin是外边距正好是对应关系这个是我们内部元素距离该元素上下左右的距离这里是20px也就是说我们上下左右至少是20px我们刷新看一下效果 style/ 这里编写样式 /body {font-family: Arial, sans-serif;margin: 0;}.header {background-color: #333;color: #fff;text-align: center;padding: 20px;}/style完整代码 htmlheadtitle我的相册/titlemeta nameauthor content作者几何心凉 /meta namedescription content网页的描述 /meta namecopyright content这里是版权信息 /meta namekeywords content网页的关键字 /style/ 这里编写样式 */body {font-family: Arial, sans-serif;margin: 0;}.header {background-color: #333;color: #fff;text-align: center;padding: 20px;}/style /headbodydiv classheaderh1我的相册/h1/div/body/html写在最后 各位小伙伴们记得尝试一下哦可以多尝试一些不容的样式不同的值来看一下不同的效果那我也把上面包含的全部代码提供出来下篇文章呢我们继续来带领大家完成剩下的部分如果你觉得本篇内容对你有所帮助希望你能够给个三连支持哦 本期推荐