当前位置：个人在线分享 > JavaWeb开发基础 (1) ：前端常识速成（HTML、CSS、JS、Vue…）
  • 文章介绍

    • 有疑问？请点击复制链接咨询！

    JavaWeb开发基础：前端常识速成——HTML、CSS、JS、Vue、Ajax、前端工程化

    Web技术教程W3School：http://www.w3school.com.cn

    文章目录

    • 1 HTML、CSS
      • 1.1 基本标签
      • 1.2 CSS样式
        • 1.2.1 基本概念
        • 1.2.2 选择器
        • 1.2.3 伪类
        • 1.2.4 常用样式
      • 1.3 布局
      • 1.4 表格
      • 1.5 表单
      • 1.6. BootStrap
        • 1.6.1 介绍&下载
        • 1.6.2 导航
        • 1.6.3 栅格系统
        • 1.6.4 container
        • 1.6.5 面板
    • 2 JavaScript
      • 2.1 引入方式
      • 2.2 基础语法
        • 2.2.1 书写语法
        • 2.2.2 定义变量
        • 2.2.3 数据类型
        • 2.2.4 运算符与流程控制
      • 2.3 函数
      • 2.4 对象
        • 2.4.1 Array
        • 2.4.2 String
        • 2.4.3 JSON
        • 2.4.4 BOM
        • 2.4.5 DOM
      • 2.5 事件监听
    • 3 Vue
      • 3.1 概述
      • 3.2 常用指令
        • 3.2.1 v-bind、v-model
        • 3.2.2 v-on
        • 3.2.3 v-if、v-else-if、v-else、v-show
        • 3.2.4 v-for
      • 3.3 生命周期
    • 4 Ajax
      • 4.1 Ajax概述
      • 4.2 原生Ajax
      • 4.3 Axios
      • 综合案例：通过Axios获取数据并遍历展示
    • 5 前端工程化
      • 5.1 前后端开发概述
      • 5.2 Vue脚手架：Vue-cli
      • 5.3 Vue项目开发流程
      • 5.4 Element-UI
      • 5.5 Vue路由

    1 HTML、CSS

    1.1 基本标签

    <html>
	<head>
		<title>Title</title>
	</head>
	<body>
	
	</body>
</html>

    特点

    • HTML标签不区分大小写
    • HTML标签属性值单双引号都可以
    • HTML语法松散
    1. 标题标签：

      http://blog.csdn.net/Akira37/article/details/...

      （h1 → h6）

    2. 水平线标签：

    3. 图片标签：JavaWeb开发基础 (1) ：前端常识速成（HTML、CSS、JS、Vue…）插图
      • 绝对路径：绝对磁盘路径（D:/xxxx）、绝对网络路径（http://xxxx）
      • 相对路径：从当前文件开始查找（./：当前目录，../：上级目录）
    4. 超链接：
      • href：指定资源访问的url
      • target：指定在何处打开资源链接——_self默认值，在当前页面打开；_blank在空白页面打开
    5. 音频、视频
    6. 换行
      、段落

      （空格占位符）

    7. 文本加粗标签：、

    1.2 CSS样式

    1.2.1 基本概念

    引入方式

    • 行内样式：

    • 内嵌样式： http://blog.csdn.net/Akira37/article/details/...
    • 外联样式：

    1.2.2 选择器

    优先级：id选择器 > 类选择器 > 元素选择器

    1. 类选择器
    <style>
	.c1 {
		color: red;
	}
	.c2 {
		color: blue;
		border: 1px solid green;
	}
	.c3 {
		color: yellow !important;	/* 标注important以强行调用被覆盖的样式 */
	}
</style>


<div class="c1">red</div>


<div class="c1 c2">blue with green border</div>
<div class="c3 c2">yellow with green border</div>
    1. ID选择器
    <style>
	#x1 {
		color: red;
	}
</style>


<div id="x1">red</div>
    1. 元素选择器
    <style>
	div {
		color: red;
	}
</style>


<div>red</div>
    1. 属性选择器
    <style>
	.c1[type="text"] {		/* 可为类、id、标签名 */
		border: 1px solid red;
	}
</style>


<input class="c1" type="text">
    1. 后代选择器
    <style>
	.c1 .c2 {
		color: green;
	}
	.c1 > .c3 {			/* 使得仅对儿子生效 */
		color: blue;
	}
</style>


<div class="c1">black <span class="c2">green</span></div>

<div class="c1">black <span>black <span class="c3">black</span></span></div>

    1.2.3 伪类

    1. hover：当鼠标悬停在该标签上时产生的效果
    a:hover {	/* 鼠标悬停在链接上时文字变红 */
	color: #ff6780;
}
.c1:hover .c2 {	/* 仅当鼠标悬停在类c1上时显示类c2的样式（成为块级） */
	display: block;
}
    1. after：在该标签内部元素的尾部加上的效果
    .c1:after {
	content: "";
	display: block;
	clear: both;
}

    1.2.4 常用样式

    1. 高度和宽度：对行内标签默认无效，对块级标签默认有效（剩余空白区域也会被占用）
    .c1 {
	height: 300px;	/* 高度 */
	width: 50%;		/* 宽度（仅宽度支持百分比） */
}
    1. 块级和行内标签
    .c1 {
	display: inline-block;	/* 强行使以下样式对行内标签生效 */
	height: 100px;
	width: 300px;
	border: 1px solid red;	/* 边框：像素、线条实虚、颜色（可为transparent透明）。左边框为border-left，其他类似 */
}

    <div style="display: inline;"></div>	
<span style="display: block;"></span>

    若父亲无宽度/高度，则会被其孩子支撑起来

    1. 字体和颜色等
    .c1 {
	color: #00FF7F;					/* 颜色（支持RGB：#00FF7F为SpringGreen1） */
	font-size: 18px;				/* 字体大小（亦可直接为large、larger等） */
	font-weight: 400;				/* 字体粗细（亦可为bold、bolder等） */
	font-family: Microsoft Yahei;	/* 字体 */
	opacity: 0.7;					/* 透明度（0~1，1为不透明）*/
	text-decoration: none;			/* 取消文字样式（如链接默认的下划线） */
}
    1. 文字的对齐方式
      • line-height：设置行高
      • text-indent：定义第一个行内容的缩进
      • text-align：规定元素中的文本的水平对齐方式
    .c1 {
	height: 59px;
	text-align: center;		/* 文本水平居中（center） */
	line-height: 59px;		/* 垂直居中（像素值与高度height设置一致） */
}

/* 区域居中：见下文margin */
    1. 浮动：让标签浮动起来后，会脱离文档流，可能会覆盖其他内容（如背景）
    <span>left</span>							
<span style="float: right">right</span>		


<div style="float: left; width: 200px;">block</div>	

<div style="clear: both;"></div>

    1.3 布局

    盒子：页面中所有的元素（标签）都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
    组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
    JavaWeb开发基础 (1) ：前端常识速成（HTML、CSS、JS、Vue…）插图(1)

    常使用和这两个没有语义的布局标签来完成页面布局

    • 标签：
      • 一行只显示一个（独占一行）
      • 宽度默认是父元素的宽度，高度默认由内容撑开
      • 可以设置宽高（width、height）
    • 标签
      • 以后可以显示多个
      • 宽度和高度默认由内容撑开
      • 不可以设置宽高（width、height）

    常用属性（若只设置某方位可在属性名后加”-位置”，如padding-top、margin-left）

    1. padding：内边距，顺时针上右下左顺序
    2. margin：外边距，同上
    /* 内边距：内部四方向空出的距离 */
.c1 {
	padding-top: 20px;				/* 分别为上、右、下、左空出的距离 */
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding: 20px 10px 5px 20px;	/* 按顺时针，上右下左空出的距离（为单一参数时为四方向设置相同值） */
}
/* 外边距：外部四方向空出的距离，同内边距 */
.c2 {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	margin: 30px;
}

/* 去掉默认的外边距 */
body {
	margin: 0;
}

/* 内容水平居中（auto表示自动，默认为居中） */
.container {
	margin: 0 auto;		/* 第1个为上下，第2个为左右 */
}
    1. position：位置，可设为fixed、relative、absolute等
    /* fixed：固定在窗口的某个位置 */
/* 回到顶部按钮 */
.back {
	position: fixed;	
	width: 60px;
	height: 60px;
	
	right: 10px;
	bottom: 10px;
}

/* 对话框 */
.dialog {
	position: fixed;
	height: 300px;
	width: 500px;
	background-color: white;	/* 背景色 */
	/* 居中 */
	left: 0;
	right: 0;
	margin: 0 auto;
	
	z-index: 1000;
}

/* 幕布（遮住除对话框外的图层） */
.mask {
	background-color: black;
	position: fixed;
	/* 铺满整个窗口 */
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	opacity: 0.7;
	z-index: 999;
}

    /* relative和absolute */
/* 父亲为relative，儿子为absolute，使得儿子可以相对于父亲进行任意位置调控 */
.c1 {
	position: relative;
}
.c1 .c2 {
	position: absolute;
	right: 20px;	/* 儿子c2位于父亲c1距离右边界20像素处 */
}

    1.4 表格


    1. ：定义表格整体，可以包裹多个

      • border：规定表格边框的宽度
      • width：规定表格的宽度
      • cellspacing：规定单元之间的空间

      3. ：表格的行，可以包裹多个

      		4. ：表格中的普通单元格，可以包裹内容

      • 若为表头单元格，则替换为

      1.5 表单

      • 相关标签
        1. 表单标签：
        2. 表单项：
          type值说明
          text默认值，单行的输入字段
          password密码字段
          radio单选按钮
          checkbox复选框
          file文件上传按钮
          date/time/datetime-local日期/时间/日期时间
          number数字输入框
          email邮件输入框
          hidden隐藏域
          submit/reset/button提交按钮/重置按钮/可点击按钮
        3. ：下拉列表，用定义列表项