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 的缩写,俗称超文本标记语言

<!DOCTYPE html>                       //声明文档标签
<html lang="en">                          //根标签
<head>                                       //头标签
    <meta charset="UTF-8">            //转码格式
    <title>Document</title>              //标题标签
</head>
<body>                                              //主体标签
    
</body>
</html>
- 标签分类
<br>                 //单标签
<body></body>    //双标签
<p></p>              //双标签
- 文本标签

    <p>段落标签</p>  

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <font size="6" color="red">文本标签</font>

    <strong>文本加粗标签</strong>
    <b>文本加粗标签</b>

    <em>文本倾斜标签</em>
    <i>文本倾斜标签</i>

    <del>删除线标签</del>
    <s>删除线标签</s>

    <ins>下划线标签</ins>
    <u>下划线标签</u>

    ![](图片链接地址)

    <a href="链接路径" title="提示文本" target="打开方式">超链接</a>
- 三种列表
//有序列表 
    <ul type="circle">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ul>
    // 无序列表 
    <ol type="1">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ol>
    //自定义列表
    <dl>
        <dt>小标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
    </dl>
- 表格
//四行三列表格 
    <table>
        <tr>                                         //行
            <td>四行三列表格</td>                      //列
            <td>四行三列表格</td>
            <td>四行三列表格</td>
        </tr>
        <tr>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
        </tr>
        <tr>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
        </tr>
        <tr>
        <td>四行三列表格</td>
        <td>四行三列表格</td>
        <td>四行三列表格</td>
    </tr>
    </table>
- 表单标签
<form action="处理信息" method="回调方法 get/post">
    用户名:<input type="text" name="输入框名称" value="输入框内容">
    密码:<input type="password" name="密码输入框">
    //单选框
    <input type="radio" name="" checked="checked">男
    <input type="radio" name="">女

    //下拉列表 
    <select>
    <option value="">湖南</option>
    <option value="">湖北</option>
    </select>

    // 多选框
    <input type="checkbox" name="">喝酒
    <input type="checkbox" name="">看电影
    <input type="checkbox" name="">吃饭

    //多行文本框 
    <textarea cols="输入字符长度" rows="行数"></textarea>

    //提交按钮 
    <input type="submit" name="">
    //普通按钮
    <input type="button" name="">
     //重置按钮 
    <input type="reset" name="">
    
    </form>

- 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选择器都可以自有组合。
标签名  标签名  类名{属性:值}
7. 并集选择器。
选择器,选择器,选择器{属性:值}

#### - 显示方式
**块元素**:独占一行,可以设置宽高,例如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;
}

#### - 盒子模型

![盒子模型](//upload-images.jianshu.io/upload_images/2913318-f1bb325852dcd67f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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<n2; // true

#### - 函数

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

//方法的调用
test();
```

转载于:https://www.cnblogs.com/JanChuJun/p/10103809.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值