前端学习笔记-HTML、CSS、Javascript基础知识

认识web网站的开发模式

采用前后端分离技术开发

 Web前端三个组成部分

HTML：负责网页结构（页面元素的内容）

CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）

JavaScript：负责网页的行为（交互效果）

HTML和CSS

HTML：        

        超文本标记语言：

        超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；

        HTML标签都是预定义好的。例如：使用展示超链接，使用展示图片；HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

        HTML结构标签

         图片标签：

        src：指定图像的url（绝对路径/相对路径）

        width：图像的宽度（像素/相对于父元素的百分比）

        heigth：图像的高度（像素/相对于父元素的百分比）

        标题标签：

-

        水平线标签：

---

CSS：

        层叠样式表，用于控制页面的样式（表现）。

新浪新闻例子

HTML：

    
    
    
    
    
    
    


    

      新浪政务>正文
    
焦点访谈
    

    2023年03月02日 21:50 
     央视网 
    

    
    
    

        央视网消息
    

    

        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    
    
    

        这是一个新的起点
    
    
    

        这是一个新的起点
    
    
    

        这是一个新的起点
    
    
    

        这是一个新的起点
    
    

        责任编辑：工数藤 SN242
    

 CSS：

h1{
    color: #4d4f53;;
}

#time{
    color:#968D92;
    font-size: 12px;
}
#name{
    font-size: 12px;
}
a{
    color: black;
    text-decoration: none;
}
p{
    text-indent: 35px;
    line-height: 35px;
}
#plast{
    text-align: right;
}
#center{
    width: 65%;
    margin: 0 auto;
}

表单例子

    
    
    
    


    
    

        姓名：


        密码：


        性别：男
        女


        爱好：java
        game
        sing


        图像：


        生日：


        时间：


        日期时间：


        邮箱：


        年龄：


        学历：
                    ------请选择------
                    大专
                    本科
                    硕士
                    博士
        


        描述：
        


        
        
        
        
        
        


    

 表格例子

    
    
    
    


    

        

            
序号
            
品牌logo
            
品牌名称
            
企业名称
        
        

            
1
            

            
华为
            
华为技术有限公司
        
        

            
2
            

            
阿里
            
阿里巴巴集团控股有限公司
        
    

Javascript

js引入

js定义变量

js数据类型

js类型转换

 js函数

js对象 

Array

String字符串

 JOSN

        JavaScript自定义对象

        JSON-基础语法

        JSON是通过JavaScript对象标记法书写的文本 ，先多用于数据结构载体，在网络中进行数据传输。

        JSON格式的语法结构："key":value，注意key必须加双引号

 BOM

DOM

    


    
教育

    
程序员

    电影
    旅游
    游戏

js-事件监听

事件绑定 

 常见事件

学习链接：https://www.bilibili.com/video/BV1m84y1w7Tb?p=25&vd_source=3b0d65e78c6b0c641e3a31043f863d04