百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

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

yuyutoo 2025-02-20 18:34 7 浏览 0 评论

网站开发简介

  • 网站开发包括前端和后端，后端是服务器，用来存储数据和设计业务逻辑，前端用来展示网站效果。
  • 网站是多个网页的集合，网页是纯文本格式的文件，浏览器就是将这些纯文本格式的文件渲染成网页。

HTML简介

HTML是超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言，HTML由一个个标签组成，文件的后缀名是html或htm，一个html文件就是一个网页，html文件用编辑器打开就显示文本，用浏览器打开就会渲染成网页。

HTML基本结构：

  • 声明为 HTML5 文档
  • 是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档
  • 元素出现在文档的开头部分
  • 定义网页标题，在浏览器标题栏显示之间的文本是可见的网页主体内容



    黑猫编程



    网页显示内容

前端开发需要哪些技术？

  • 首先是UI设计师使用Photoshop设计出前端效果图片，前端工程师根据图片转化成前端代码，主要需要HTML、CSS和JavaScript。
  • HTML是前端的框架，比如划分页面布局、设置段落。
  • CSS是装饰前端框架，可以给页面添加颜色、样式等，使前端界面更加漂亮。
  • JavaScript是给前端添加动态效果，使网站具备交互功能。

前端开发编辑器

前端开发语言本质上都是文本文件，只要后缀名符合标准，任何文本编辑器都可以用来写前端代码，在此推荐几种编辑器:

IDE——集成开发环境：

    • WebStorm
    • PyCharm

轻量级文本编辑器：

    • Atom
    • Sublime
    • Notepad++
    • Vim和Emacs
    • VS Code

VS Code开发前端项目比较方便，推荐安装插件：

  • Auto Rename Tag
  • Live Server

标签分类

分类一：

  • 闭合标签——双标签 <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分
  • 自闭合标签——单标签 <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

分类二：

    • 块级标签：独占一行，可自行设置宽高div
    • 内联标签：按内容占位，高度和宽度由内容填充span

标签

所有浏览器都支持 标签：

  • 提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
  • 提供的信息对用户是不可见的
  • SEO三大标签：titledescription：keywords：
  • 网站logo：

图像标签

标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

    • src属性，定义图片的引用地址
    • alt属性 定义图片加载失败时显示的文字
    • 只设置图片宽度或者高度，会进行等比缩放
    • xxx

标题标签

通过

、

、

、

、

、
，标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：

用作主标题，其后是

，再其次是

，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引。

  • 标题1

  • 标题2

span和div

  • 定义文档中的分区，当作容器使用
  • 划分文字

思考：完成如下图所示效果

为七个div分别设置宽为100px,150px,200px,250px,300px,350px,400px;
			                      高均为20px；
			                      背景颜色分别为红橙黄绿青蓝紫

CSS样式

css：Cascading Style Sheet 层叠样式表，它是用来美化页面的一种语言。

  • 没有使用css的效果图
  • 使用css的效果图

CSS引入三种方式

  • 行内式：是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，使得代码看起来整体格式混乱，不推荐使用。
hello world
  • 内嵌式：是将CSS样式集中写在网页的标签对的标签对中
  • 外链式：将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中
  • 在加载网页时，首先找到html根文件，再加载引用的css外部样式，速度会比较慢，因此，内嵌式一般用于网站的首页，有利于提高页面加载速度，提高用户体验。

常用CSS选择器

css 选择器是用来选择标签的，选出来以后给标签加样式

  • 标签选择器 p { color:green }
  • 类选择器
.a {
      font-weight:bold;
      color:yellow;
}
a1 class


a2 class


b2 class


b2 class
  • id选择器
#info {
      font-size:24px;
      color:red;
}
hello world


My name is xuyanpeng.
  • 优先级：id>class>标签
  • 结构伪类选择器
nth-child:
        nth-child(odd)
        nth-child(even)
        nth-child(3n+1)
        nth-child(3)
        nth-last-child(3)
        nth-child(-n+3)
        nth-child(n+5)
        last-child
        first-child

伪元素

  • ::before
.father::before{
            display: block;
            content: '最前面';
            width: 100px;
            height:100px;
            background-color: brown;
}
  • ::after
.father::after{
            display: block;
            content: '最后面';
            width: 100px;
            height:100px;
            background-color: yellow;
}

超链接

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线
a:link{
    text-decoration: none;
}

a:visited{
    color: red;
}

a:hover{
    color: orange;
}

a:active{
    color: green;
}

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

文本标签

注释标签：如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

简单解释：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

文本属性

font-size：文本大小
font-family：字体
        无衬线字体：sans-serif
        衬线字体：serif
        等宽字体：monospace
font-weight：字体粗细 100-900
        normal：400
        bold：700
font-style：字体风格 normal italic
pre：预格式化文本
color：文本颜色
text-align：文本水平对齐方式
line-height：行间距
text-indent:首行缩进

特殊字符

背景属性

背景颜色：
        background-color：颜色值; 默认的值是 transparent 透明的
        background: rgba(0, 0, 0, 0.3); 最后一个参数为透明度
背景平铺：pbackground-repeat : repeat | no-repeat | repeat-x | repeat-y
背景固定：pbackground-attachment : scroll | fixed
背景位置：
        background-position : x y：
        x和y：为长度值或top、left等方位词
background-size：contain/cover

盒子模型

边框盒子：
        自动内减：box-sizing: border-box;
        默认：box-sizing: content-box;
margin合并：相邻盒子边距取较大值
margin塌陷：块级元素嵌套，字盒子设置外边距改变父盒子的位置

浮动应用，首页布局




    
    
    
    Document

    


    

        

            
backcat1995.com

        


        

            
黑猫编程教育品牌

            
作者：黑猫

        


        

            
课程大纲

            C++从入门到精通
            

            玩转数据结构与算法
            

            Python从小白到起飞
        


        

            地址：火星岩浆路1198弄

元素隐藏

overflow：

绝对单位和相对单位

1.绝对单位，当窗口大小发生改变，不能自适应窗口进行改变

2.相对单位

风筝效果

列表标签

表格标签