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

网站开发简介

HTML简介

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

HTML基本结构：




    黑猫编程



    网页显示内容

前端开发需要哪些技术？

前端开发编辑器

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

IDE——集成开发环境：

轻量级文本编辑器：

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

标签分类

分类一：

分类二：

标签

所有浏览器都支持 标签：

图像标签

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

标题标签

通过

、

、

、

、

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

用作主标题，其后是

，再其次是

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

  • 标题1

  • 标题2

span和p

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

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

为七个p分别设置宽为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;
}

超链接

  • HTML使用标签来设置超文本链接
  • 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
  • 当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
  • 在标签 中使用了href属性来描述链接的地址
  • 默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线
  • 伪类选择器
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：

    • visible：默认值，溢出部分可见
    • hidden：溢出部分隐藏
    • scroll：无论是否溢出，都显示滚动条
    • auto：根据是否溢出，自动显示或隐藏滚动条

绝对单位和相对单位

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

2.相对单位

风筝效果

列表标签

  • 无序列表标签(ul标签)
  • 有序列表标签(ol标签)

表格标签