web前端高级 第一课

web复习

HTML

什么是HTML

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

什么是标签

标签是由一对尖括号，里面包含着字母或单词，例： <input>，标签对的组成：标签名、属性（名值对）、内容。

• 属性类似是给这个标签的内容加个装备，让这些标签具有一些特殊的能力
• 例如：<a href=“www.baidu.com”>百度</a>

重要标签说明

• 表格标签 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>

建议在定义表格的时候，把thead,tbody都描述出来

• 表单标签form
  action:submit 操作执行的请求地址
  method:指定请求的类型 get/post

1. form 表单提交是不一定要通过 submit 操作的，可以通过 AJAX 请求序列化表单（serialize()）的方式完成表单数据的提交。AJAX 序列化就是将 form 中的数据构建为明值对的字符串统一的提交到后台。
2. 通过 form 表单提交和 AJAX 请求方式提交数据是两个原理完全不一样的设计方式。

• 表单元素标签
  submit是将表单元素的数据以名值对的方式提交给服务器。

例：

<input>:type(text,password,radio,checkbox,hidden) 
<select>

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

<form>
	<select> 
		<option value="html">内容1</option>
	 	<option value="html">内容2</option> 
		<option value="html">内容3</option> 
	    <option value="html">内容4</option> 
	    <option value="html">内容5</option> 
	</select>
 </form>

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

标签的语义

h1,h2,h3 表现标题
div/span/p 表现布局

使用带语义的标签可以让搜索引擎快速的进行收录
虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制

以下标题1和标题2所展示的效果相同：

<style>
	 .hstyle { display: block; 
	 		   font-size: 2em; 
	 		   font-weight: bold; 
	 		 } 
</style> 
<h1>标题1</h1> 
<span class="hstyle">标题2</span>

关于浏览器

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

不同的浏览器存在一些细微的差别，开发者在开发时要考虑浏览器的兼容性。

CSS

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

样式表的元素选择器选择越精确，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高。
如果要让某个样式的优先级变高，可以使用!important来指定。（不推荐）

如何书写定义元素样式

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

• DIV + CSS 布局基础，充分理解盒子模型
  box-sizing需要注意
• 样式选择器：ID(#) Class(.) 标签（a div span）

JavaScript

• 对于编程语言的认知：
  一门成熟的编程语言应该具备：变量、数据类型运算符、控制语言（顺序结构、分支结构、循环结构）、自成体系的API。
• JavaScript的作用
  1.业务逻辑处理。2.对DOM进行操作：通过事件驱动页面模型发生变化（DOM树种元素的增删查改）。

需要知道的

JavaScript是弱类型语言，而且书写是比较随意的。

• 弱语言体现在变量是没有准确地数据类型定义，通过var关键词进行定义。

var flag = 'bird';
flag = 22;
flag = true;
flag = {name: 'marry'};
flag = function(){
	alert("hello,world");
}

• 关于JavaScript的判断条件
  1 在条件表达式中，数字0和非0可以表现为false和true；
  2 分支结构的三种表达方式
  3 三目运算符是需要熟练掌握的，其本质就是表达式。

var grade = 81;
var str = age >=60 ? '及格'：'未及格'；
console.log(str);