前端三剑客快速入门(一)


前言:

前端三剑客即HTML、CSS、JavaScript。本文只对其进行简单介绍,达到简单WEB程序所需。若想要深入学习,可以查看W3C教程,其对三者进行了详细的介绍。

HTML

  1. 简介:HTML是一种超文本标记语言,由浏览器来解析运行,其作用为编写网页的结构。

  2. 常见标签及代码:

  • 第一节:日常标签






    
    
    
    我的第一个网页


    

hello world

hello world

hello world

hello world

hello world
hello world

这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页

这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页这是我的第一个网页

  • 香蕉
  • 鸭梨
  • 苹果
  1. 香蕉
  2. 鸭梨
  3. 苹果
跳转到百度 图片加载失败

hehehe

hehehe

绿

  • 第二节:表格和表单



    
    
    
    第一个网页


    
    
学生列表
一班 1 小红 7
2 小鹿 5
3 小张 6

爱好
足球 篮球

CSS

  1. 简介:CSS全称层叠样式表,用来控制网页的样式,其作用主要是美化网页。

  2. CSS选择器与常用属性及其代码

  • 第一节:选择器类型



    
    
    
    Document
    


    

hello world

类选择器

这是一个段落,它应该是蓝色的。这是一个段落,它应该是蓝色的。这是一个段落,它应该是蓝色的。

一个块,它会是紫色的
  • 第二节:选择器常用属性



    
    
    
    css选择器常用属性
    


   

hello world

图片正在加载ing
  • 第三节:选择器进阶
    层级选择器和组合选择器



    
    
    
    Document
    


    

hello h1

hello h2

box2容器

hello world

伪类选择器和伪元素选择器




    
    
    
    Document
    


    

hello h1

heloo h2

选择器权重

  1. 不同选择器权重:id(100)>class(10)>element(1)
  2. 相同选择器:后面的会覆盖前面的
  3. 层级选择器:将权重累加比较



    
    
    
    Document
    


    

hello world

  • 设置最高权重
    !important



    
    
    
    Document
    


    

hello world

引入CSS的方法

  1. 嵌入样式
  2. 内联样式
  3. 外部样式



    
    
    
    Document
    
    
    
    


    
    

hello world

hello green

后续

因为内容实在是比较多,所以我分开来写了,CSS还没写完,JS也还没开始。后面还打算写node和vue,只能说路漫漫其修远兮,容不得一点懈怠啊!

相关