干货一文详解html和css，前端开发需要哪些技术？

　　网站开发简介网站开发包括前端和后端，后端是服务器，用来存储数据和设计业务逻辑，前端用来展示网站效果。网站是多个网页的集合，网页是纯文本格式的文件，浏览器就是将这些纯文本格式的文件渲染成网页。
　　HTML简介
　　HTML是超文本标记语言（HyperTextMarkupLanguage），是一种用于创建网页的标准标记语言，HTML由一个个标签组成，文件的后缀名是html或htm，一个html文件就是一个网页，html文件用编辑器打开就显示文本，用浏览器打开就会渲染成网页。
　　HTML基本结构：声明为HTML5文档是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个HTML文档元素出现在文档的开头部分定义网页标题，在浏览器标题栏显示之间的文本是可见的网页主体内容！DOCTYPEhtmlhtmlheadtitle黑猫编程titleheadbody网页显示内容bodyhtml前端开发需要哪些技术？首先是UI设计师使用Photoshop设计出前端效果图片，前端工程师根据图片转化成前端代码，主要需要HTML、CSS和JavaScript。HTML是前端的框架，比如划分页面布局、设置段落。CSS是装饰前端框架，可以给页面添加颜色、样式等，使前端界面更加漂亮。JavaScript是给前端添加动态效果，使网站具备交互功能。
　　前端开发编辑器
　　前端开发语言本质上都是文本文件，只要后缀名符合标准，任何文本编辑器都可以用来写前端代码，在此推荐几种编辑器：
　　IDE集成开发环境：WebStormPyCharm
　　轻量级文本编辑器：AtomSublimeNotepadVim和EmacsVSCode
　　VSCode开发前端项目比较方便，推荐安装插件：AutoRenameTagLiveServer
　　标签分类
　　分类一：闭合标签双标签标签名属性1属性值1属性2属性值2内容部分标签名自闭合标签单标签标签名属性1属性值1属性2属性值2
　　分类二：块级标签：独占一行，可自行设置宽高p内联标签：按内容占位，高度和宽度由内容填充span标签
　　所有浏览器都支持标签：
　　提供有关页面的元信息（metainformation），针对搜索引擎和更新频度的描述和关键词提供的信息对用户是不可见的SEO三大标签：titledescription：keywords：网站logo：图像标签
　　标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：src属性，定义图片的引用地址alt属性定义图片加载失败时显示的文字只设置图片宽度或者高度，会进行等比缩放标题标签
　　通过、、、、、，标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：用作主标题，其后是，再其次是，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引。标题1h1标题2h2span和p定义文档中的分区，当作容器使用划分文字
　　思考：完成如下图所示效果为七个p分别设置宽为100px，150px，200px，250px，300px，350px，400px；高均为20px；背景颜色分别为红橙黄绿青蓝紫
　　！添加两个p进行嵌套
　　CSS样式
　　css：CascadingStyleSheet层叠样式表，它是用来美化页面的一种语言。没有使用css的效果图
　　使用css的效果图
　　CSS引入三种方式行内式：是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，使得代码看起来整体格式混乱，不推荐使用。helloworld内嵌式：是将CSS样式集中写在网页的标签对的标签对中stylep｛backgroundcolor：yellow；color：green；｝style外链式：将css代码写在一个单独的。css文件中，在标签中使用标签直接引入该文件到页面中linkrelstylesheettypetextcsshrefcssindex。css在加载网页时，首先找到html根文件，再加载引用的css外部样式，速度会比较慢，因此，内嵌式一般用于网站的首页，有利于提高页面加载速度，提高用户体验。常用CSS选择器
　　css选择器是用来选择标签的，选出来以后给标签加样式标签选择器p｛color：green｝类选择器。a｛fontweight：bold；color：yellow；｝pclassaa1classpclassaa2classpclassbb2classpclassbb2classid选择器info｛fontsize：24px；color：red；｝helloworldMynameisxuyanpeng。优先级：idclass标签结构伪类选择器nthchild：nthchild（odd）nthchild（even）nthchild（3n1）nthchild（3）nthlastchild（3）nthchild（n3）nthchild（n5）lastchildfirstchild
　　伪元素：：before。father：：before｛display：block；content：最前面；width：100px；height：100px；backgroundcolor：brown；｝：：after。father：：after｛display：block；content：最后面；width：100px；height：100px；backgroundcolor：yellow；｝超链接HTML使用标签来设置超文本链接超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手在标签中使用了href属性来描述链接的地址默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线访问过的链接显示为紫色并带有下划线点击链接时，链接显示为红色并带有下划线伪类选择器a：link｛textdecoration：none；｝a：visited｛color：red；｝a：hover｛color：orange；｝a：active｛color：green；｝锚点定位
　　通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：
　　文本标签
　　注释标签：如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
　　简单解释：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
　　文本属性fontsize：文本大小fontfamily：字体无衬线字体：sansserif衬线字体：serif等宽字体：monospacefontweight：字体粗细100900normal：400bold：700fontstyle：字体风格normalitalicpre：预格式化文本color：文本颜色textalign：文本水平对齐方式lineheight：行间距textindent：首行缩进
　　特殊字符
　　背景属性背景颜色：backgroundcolor：颜色值；默认的值是transparent透明的background：rgba（0，0，0，0。3）；最后一个参数为透明度背景平铺：pbackgroundrepeat：repeatnorepeatrepeatxrepeaty背景固定：pbackgroundattachment：scrollfixed背景位置：backgroundposition：xy：x和y：为长度值或top、left等方位词backgroundsize：containcover盒子模型
　　边框盒子：自动内减：boxsizing：borderbox；默认：boxsizing：contentbox；margin合并：相邻盒子边距取较大值margin塌陷：块级元素嵌套，字盒子设置外边距改变父盒子的位置浮动应用，首页布局
　　！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitlestyle。container｛width：700px；border：1pxsolidgray；margin：0auto；backgroundcolor：lightyellow；｝。header｛textalign：center；backgroundcolor：skyblue；padding：8px；color：white｝。left｛width：160px；float：left；padding：23px；｝。content｛padding：16px；marginleft：190px；borderleft：1pxsolidgray；｝。footer｛padding：8px；color：white；backgroundcolor：red；｝styleheadbodyh1backcat1995。comh1p黑猫编程教育品牌p作者：黑猫h2课程大纲h2C从入门到精通
　　玩转数据结构与算法
　　Python从小白到起飞地址：火星岩浆路1198弄bodyhtml元素隐藏
　　overflow：visible：默认值，溢出部分可见hidden：溢出部分隐藏scroll：无论是否溢出，都显示滚动条auto：根据是否溢出，自动显示或隐藏滚动条绝对单位和相对单位
　　1。绝对单位，当窗口大小发生改变，不能自适应窗口进行改变style｛margin：0；padding：0；｝。box｛width：500px；height：500px；backgroundcolor：red；｝style
　　2。相对单位style｛margin：0；padding：0；｝。box｛width：50；height：50；backgroundcolor：red；｝body，html｛height：100；｝。box2｛width：50；height：50；backgroundcolor：green；｝style
　　风筝效果style｛margin：0；padding：0；｝。box｛width：200px；height：200px；backgroundcolor：red；position：absolute；left：50；top：50；marginleft：100px；margintop：100px；｝。boxp｛width：50；height：50；backgroundcolor：black；position：absolute；left：100；top：100；｝style
　　列表标签无序列表标签（ul标签）有序列表标签（ol标签）表格标签标签：表示一个表格标签：表示表格中的一行标签：表示表格中的列标签：表示表格中的表头表单标签
　　表单用于搜集不同类型的用户输入（用户输入的数据），然后可以把用户数据提交到web服务器。
　　表单属性设置：action：是设置表单数据提交地址method：是表单提交方式，提交方式有GET和POST表单元素属性设置name：表单元素的名称，用于作为提交表单数据时的参数名value：表单元素的值，用于作为提交表单数据时参数名所对应的值响应式布局Bootstrap
　　响应式最主要特点就是针对不同宽度设备进行布局和样式设置，从而适配不同大小设备。
　　栅格系统：
　　显示和隐藏：