Web前端知识复习
HTML
什么是HTML
HTML本质:超文本标记语言
表现如文字、视频、音频程序等复杂元素
什么是标签
标签的组成:标签名、属性名(名称值对的形式)、内容
属性类似是给这个标签的内容加了个装备,让这些标签具有一些特殊的能力
例如:<a href="www.baidu.com">百度</a>
常用标签的说明
<p>段落自带行间距</p>表示段落
<hr/>换行
<br/>横线
<a href="/">超链接</a>
<a href="/" target="_block">添加target=_block的属性后,新的页面将另开session来显示 页内定位</a>
<h1></h1>标题标签
<ul><li></li></ul>无序列表
<ol><li></li></ol>有序列表
<iframe></iframe>在页面的一个框体中展示url的网页内容
<link rel="stylesheet" type="text/css" href="/" />定义文档与外部资源的关系
<figure></figure>用作文档中插图的图像的容器
<figcaption></figcaption>用作figure容器带有的一个标题
...
重要标签的说明
- 表格标签 table
thead tr th 头部
tbody tr th 身体/内容
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<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隐藏域,reset重置,file选择文件)
<select> 下拉框标签
<textarea>
<filedset>获得有名字的边框
关于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>
</selcet>
</form>
在Web编程中,可以把form理解为一个数据的集合(组),我们把这一个组数据包裹在form中,统一提交后,进行业务逻辑的处理,一个页面也可以有多个form表单,但Ajax请求可以不要求有form存在
标签的语义
H1/H2/H3表示大纲级别,类似word标题
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(.) 标签(div a span)
JavaScript
-
对于编程语言的认识:
一门成熟的编程语言应该具备:变量、数据类型、运算符、控制语句(顺序结构、分支结构、循环结构)、自成体系的API -
JavaScript的作用:
(1)业务逻辑处理
(2)对DOM进行操作(DOM:Document Object Model):通过事件驱动页面模型发生变化(DOM树中元素的增删改查,特别是改:改内容、改样式),JavaScript能操作DOM的原因在于JavaScript实现了DOM相关操作的接口,能满足对DOM的操作
需要掌握的内容
JavaScript是弱类型语言,而且书写时比较随意的
(1)弱语言体现在变量是没有准确的数据类型定义 通过var关键字定义
//动态类型,随值的变化而变化
var flag='abc';
flag=12;
flag=true;
flag={name:'Tom'};
flag=function(){
alert("Hello,JavaScript!");
}
(2)关于JavaScript的判断条件
- 在条件表达式中,数字0和非0也可以表现为false和true
- 分支结构的三种表示方式
- 三目运算符是需要熟练掌握的,其本质就是个表达式
var age=20;
var flag=age>=18?'成年':'未成年';
console.log(str);