前端三剑客精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/Yuudachi/article/details/104480319

一. HTML

1. 什么是 HTML ?

HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。

2. 什么是标签 ?

标签对的组成：标签名、属性（名值对）、内容

3. 重要标签说明

3.1 表格标签 table

thead tr th
tbody tr td

<table border="1">    
	<thead>        
		<tr>            
			<th>表头1</th>   
	        <th>表头2</th>        
	    </tr>   
    </thead>    
    <tbody>        
    	<tr>            
    		<td>内容1</td>            
    		<td>内容2</td>        
    	</tr>    
    </tbody> 
</table>

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
tbody 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
建议定义表格的时候，把 tbody,thead 都描述出来。

3.2 表单标签 form

action/submit 操作执行的请求地址
method:指定请求的类型 get/post
form 表单提交是不一定要通过 submit 操作的，可以通过 AJAX 请求序列化表单（serialize()）的方式完成表单数据的提交。（AJAX 序列化就是将 form 中的数据构建为明值对的字符串统一的提交到后台）
通过 form 表单提交和 AJAX 请求方式提交数据是两个原理完全不一样的设计方式。

submit演示（通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。）

<html>
	<head>
		<script type="text/javascript">
			function formSubmit(){
	  			document.getElementById("myForm").submit()
	  		}
		</script>
	</head>
	<body>
		<form id="myForm" action="js_form_action.asp" method="get">
			Firstname: <input type="text" name="firstname" size="20">
			Lastname:  <input type="text" name="lastname" size="20">
			<input type="button" onclick="formSubmit()" value="Submit">
		</form>
	</body>
</html>

关于 select 如何在 JS 中获取选中的值和选中的文本内容，在提交数据的时候，默认只会将select 中选中option的value值传递过去。

<form>    
	<select>        
		<option value="html">内容</option>        
		<option value="html">内容</option>        
		<option value="html">内容</option>        
		<option value="html">内容</option>        
		<option value="html">内容</option>    
	</select> 
</form>

form 是个什么样的概念？在Web 编程中，可以把 form 理解为一个数据集合（组），我们把这一组数据包裹在 form 中，统一提交后台，进行业务逻辑的处理，在一个页面中可以有多个 form 存在。但是在 AJAX 请求中，可以不要求有 form 存在。

4. 关于浏览器

浏览器就是能解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。我们一般说的浏览器是指包括：IE/Firefox/Chrome/Opera等等，其中Firefox/Chrome我们称之为标准浏览器，最符合W3C组织定义的相关技术规范。

5. 块级元素与内联元素

简单而言，块级元素就是第一个元素在第一行第二个元素就从第二行开始，内联元素是所有元素都在一行
①display:block就是将元素显示为块级元素。
block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

②display:inline就是将元素显示为内联行内元素。
　inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

③display:inline-block将对象呈递为内联块级对象。
　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
　准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

6. 背景图片的位置以及大小调整

图像在水平方向上平铺：background-repeat：repeat-x；
图像不平铺：background-repeat：no-repeat；

图像大小：background-size ：
100px(宽） 100px(高)；
cover (图片完全覆盖背景区域)；
25%(背景图片重复4张)；
50%（宽占一半） 100%（高占满背景图片框架）；

图像位置：background-position ：
center/right center；
50%(水平位置） 50% (垂直位置）
左上角为0% 0%，右下角为100% 100%；
10px(水平方向像素) 20px(竖直方向像素);
inherit(继承父元素的位置)；

boder-image属性：
border-image-source: url( );
border-image-slice: 50% 50%;(图像的边界向内偏移)
border-image-width: 30 30;(图像边界的宽度)
border-image-outset: 20px 20px 20px 20px( 边框上下左右离内部的距离)
border-image-repeat: stretch(默认值，拉伸图像来填充) /repeat(平铺)/round(缩放图像；来适应区域)

二. CSS

1. 什么是CSS？

层叠样式表：元素样式可以通过多种方式进叠加。
本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。

2. 如何书写定义元素样式？

在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做页面。
简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作。

3. 固定的应用

3.1 背景固定

.box{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -10000;
}

3.2 导航栏固定

.daohang{
	width: 100%;
	height:60px;
	top: 0;
	z-index: 100;
	position: fixed;
	margin-left: 0px;
	left: 0px;
}

4. 阴影效果

box-shadow：10px (向右边移动的阴影 ) 10px(向下边移动的阴影) 10px(虚化的距离) 10px（阴影大小）#888888(颜色) inset（从左上角开始阴影）

5. 选择器的优先级

元素样式优先级从低到高排序：
① 通用选择器（universal selector），用通配符表示，如* {boder:0px solid black}
② 元素选择器（element selector），如 div {boder:0px solid black}
③ 类、属性或者伪类选择器，如 .c10 {boder:0px solid black}，:hover {…}
④ ID选择器，如#i100 {boder:0px solid black}
⑤ HTML元素的style属性
⑥ 加了 !important的规则，如 #i100{border:6px solid black !important;}

6. 设置元素居中

给定宽元素设置margin:0 auto，出现设置无效的原因:

① float会导致margin:0 auto无效

② 必须要有width

给不定宽元素设置水平居中：

① 将要居中的元素加入到table标签中的td标签里面

② 将块级元素设置成内联元素，display:inline 然后利用内联元素的text-aligin:center

③ 设置父元素position:relative ，display:inline-block,margin-left:50%,子元素margin-left:-50%

三. JavaScript

1. 对于编程语言的认识

一门成熟的编程语言应该具备：变量、数据类型、运算符、控制语句（顺序结构、分支结构、循环结构）、自成体系的 API。

2 .JavaScript 的作用

①. 业务逻辑处理
②. 对 DOM 进行操作（DOM : Document Object Model）:通过事件驱动页面模型发生变化（DOM 树中元素的增删改查，特别是改：改内容，改样式），JavaScript 能操作 DOM 的原因在于 JavaScript 实现了 DOM 相关操作的接口，能满足对 DOM 的操作。

3. JavaScript 是弱类型语言

弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

  // 动态类型,随值的变化而变化    
  var flag = 'abc';    
  flag = 12;    
  flag = true;    
  flag = {
  	name : 'Tom'
  };    
  flag = function() {        
  	alert("Hello,JavaScript");    
  }

4. JavaScript 的判断条件

① 在条件表达式中，数字0和非0也可以表现为false和true
②. 分支结构的三种表示方式
③. 三目运算符是需要熟练掌握的，其本质就是个表达式

var age = 20;    
var str = age >= 18 ? '成年' : '未成年';    
console.log(str);

前端知识点

文章目录