Web内容复习

HTML

什么是HTML

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

什么是标签

理解什么是标签，标签对的组成：标签名，属性（名值对），内容。

属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力

例如：

<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>

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

• 表单标签form
  action：submit操作执行 的请求地址
  method：指定请求的类型get/post
  1.form表单提交是不一定通过submit操作的，可以通过Ajax请求序列化表单（serialize() ）的方式完成表单数据的提交。（Ajax的序列化是将from中的数据构件为名值对的字符串统一的提交到后台）
  2.通过form表单提交和Ajax方式提交数据是两个原理不一样的设计方式。
• 表单元素标签
  通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。

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

关于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存在。

标签的语义

H1/H2/H3表现大纲级别
div/span/p表现布局

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

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

关于浏览器

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

如果没有一个规范的定义，为了迎合不同厂商的浏览器，程序员将为此付出沉重的代价。但是即便如此，不同的浏览器之间还是有些细微的差异，这个一般是前端开发要注意的问题，要考虑浏览器的兼容性。
我们一般360，搜狗都是基于某个浏览器内核深度改造的。

CSS

叠层样式表：元素样式可以通过多种方式进行叠加。

本身HTML元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签有个默认样式

如何书写定义元素样式

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

需要掌握的内容

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

JavaScript

-对与编程语言的认识：
一门成熟的编程语言应该具备：变量，数据类型，运算符，控制语句（顺序结构，分支结构，循环结构），自成体系的API。
-JavaScript的作用
1.业务逻辑处理
2.对DOM进行操作（DOM：Document Object Model ）:通过驱动页面模型发生变化（DOM树中元素的增删改查，特别是改：改内容，改样式），JavaScript能操作DOM的原因 在于JavaScript实现了DOM相关操作的接口，能满足对DOM的操作。

需掌握的内容

JavaScript是弱类型语言，而且书写时比较随意的。
-弱语言体现在变量是没有准确的数据类型定义。通过var关键字定义。

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

##关于JavaScript的判断条件

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

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