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

自从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标签。

两种写法：

//外链式写法

<link rel="stylesheet" href="1.css">

//内嵌样式表

<style type="text/css">在这里写入</style>

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

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

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

- 选择器类型

标签选择器：使用该标签的都生效。

标签名{属性：值}
类选择器：调用者生效。

.类名{属性：值}
ID选择器：调用生效，但是一个页面只能调用一次。

//#ID名{属性：值} （这里井号会变成大标题，所以我加了注释//）
通配符选择器：所有标签都会生效。

*{属性：值}
交集选择器：两个或者以上选择器通过不同方式连接在一起。

标签名.类名{属性：值}

标签#ID名{属性：值}

6.后代选择器：满足包含关系，无限制隔代也可以，标签选择器、类选择器、ID选择器都可以自有组合。

标签名标签名类名{属性：值}
并集选择器。

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

- 显示方式

块元素：独占一行，可以设置宽高，例如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主要有两种书写方式：

//内嵌式

<script type="text/javascript">  </script>

//外链式

<script src="1.js"> </script>

- 数据类型

//十进制表示

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();