Web | 一小时看懂前端基本语法

image

自从H5出来之后，web前端的势头好像就有点燎原之势。国内互联网的发展就是这样，像之前的移动App(iOS、Android)，简直是火的一塌糊涂。所以不管是培训机构也好，自学成才也好，都是一种途径，能掌握好就是道理。

其他的不多说，直接步入主题，且看娓娓道来。

- 前端认识

Web前端,将效果图生成网页，结合Html+Css+Js等技术；网页由文字、图片、输入框、视频、音频、超链接等组成。

	类型	实例
Html	网页结构	人的肢体结构
Css	美化样式	穿漂亮衣服，化妆
Js	行为事件	看见喜欢的就开心、看电视

- 两大关键

浏览器
网页的载体就是浏览器，现有的比较主流的浏览器包括IE、火狐、谷歌、Safari、腾讯、Opera等等。
URL
URL，也就是网页的地址。比如https://www.baidu.com

- 开发工具

现在主流的web开发工具一般用sublime、webstorm。

- HTML基础

HTML，是Hyper Text Markup Language 的缩写，俗称超文本标记语言。

                       //声明文档标签
                          //根标签
                                       //头标签
                //转码格式
                  //标题标签

                                              //主体标签
    

- 标签分类

                 //单标签
    //双标签
              //双标签

- 文本标签

    
段落标签
  

    
一级标题
    
二级标题
    
三级标题
    
四级标题
    
五级标题
    
六级标题

    文本标签

    文本加粗标签
    文本加粗标签

    文本倾斜标签
    文本倾斜标签

    删除线标签
    删除线标签

    下划线标签
    下划线标签

    ![](图片链接地址)

    超链接

- 三种列表

//有序列表 
    

        
有序列表
        
有序列表
        
有序列表
    
    // 无序列表 
    

        
无序列表
        
无序列表
        
无序列表
    
    //自定义列表
    

        
小标题
        
自定义列表
        
自定义列表
    

- 表格

//四行三列表格 
                                             //行
                                  //列
            

        
四行三列表格
四行三列表格
            
四行三列表格
        
        

            
四行三列表格
            
四行三列表格
            
四行三列表格
        
        

            
四行三列表格
            
四行三列表格
            
四行三列表格
        
        

        
四行三列表格
        
四行三列表格
        
四行三列表格
    
    

- 表单标签

    用户名：
    密码：
    //单选框
    男
    女

    //下拉列表 
    
    湖南
    湖北
    

    // 多选框
    喝酒
    看电影
    吃饭

    //多行文本框 
    

    //提交按钮 
    
    //普通按钮
    
     //重置按钮 
    
    
    

- CSS基础

Css概念:层叠样式表(Cascading Style Sheets),用力爱美化HTML标签。
两种写法：

//外链式写法


//内嵌样式表

Css是以选择器的形式出现，对网页结构进行美化。

选择器{属性：值；属性：值}

属性	释义
Width	宽
Height	高
background-color	背景颜色
font-size	文字大小
text-align	内容水平对齐方式
text-indent	首行缩进
color	文字颜色

- 选择器类型

1. 标签选择器：使用该标签的都生效。
   标签名{属性：值}
2. 类选择器：调用者生效。
   .类名{属性：值}
3. ID选择器：调用生效，但是一个页面只能调用一次。
   //#ID名{属性：值} （这里井号会变成大标题，所以我加了注释//）
4. 通配符选择器：所有标签都会生效。
   *{属性：值}
5. 交集选择器：两个或者以上选择器通过不同方式连接在一起。
   标签名.类名{属性：值}
   标签#ID名{属性：值}
   6.后代选择器：满足包含关系，无限制隔代也可以，标签选择器、类选择器、ID选择器都可以自有组合。
   标签名 标签名 类名{属性：值}
6. 并集选择器。
   选择器，选择器，选择器{属性：值}

- 显示方式

块元素：独占一行，可以设置宽高，例如div、h1、p等。

行内元素：会在一行依次显示，不能设置宽高，自适应内容，例如span、a、strong等。

行内块元素:可以依次一行显示，并且可以设置宽高，例如input、img等。

这些相互之间可以进行互相转化，常用的是将元素转化为行内块元素。

span{
        display:inline-block;
}

- 链接伪类

//默认状态
a{ 
    color:red; 
}
//链接访问之后的状态
a:visited{
    color:green; 
}
//鼠标放到链接上显示的状态
a:hover{
    color:yellow;
}
//链接激活的状态
a:active{
    color:pink;
}

- 盒子模型

盒子模型

margin：外边距
border:边框
padding：内边距

! 注意 盒子的宽度=定义的内容宽度+边框宽度+左右内边距

- JS基础

Javascript是由网景公司和sun合作而作，是一款运行在客户端的网页编程语言。

• Ecmascipt 标准
• Dom 通过js操作网页元素
• Bom 通过API操作浏览器

Js主要有两种书写方式：

//内嵌式


//外链式

- 数据类型

//十进制表示
var n1=23;   
//十六进制
var n2=0x4322;
//八进制
var n3=0432;

    //字符串
var str="你好";
var s='123';

//布尔数据类型
var n1=12;
var n2=23;
n1==n2;   //false
n1

- 函数

//方法的定义
function test(){
    alert("nh");
}

//方法的调用
test();