Web前端知识复习

Web前端知识复习

markdown语法详解

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容器带有的一个标题
...

重要标签的说明

1. 表格标签 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都写出来

2. 表单标签 form
   action：submit操作执行请求地址
   method：指定请求的类型get/post
   1）form表单提交不一定是通过submit提交，可以通过Ajax请求序列化表单（serialize()）的方式完成表单数据的提交
   Ajax序列化即form的数据构建成名称值对的字符串统一提交到后台
   2）通过表单form提交和Ajax提交方式原理是完全不同的设计方式

3. 表单元素标签
   通过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元素本身不具备样式，但在不定义样式的情况下，不同标签也会表现出不同的显示样式 原因是浏览器对于不同标签是有默认的样式的

如何书写定义元素的样式

外部样式定义页面样式，降低代码之间的耦合，让设计师设计页面 简单理解为：可以让不同的人不在同一页面修改文件 各司其职

需要掌握的内容：

1. DIV+CSS布局基础 充分理解盒子模型
   box-sizing的使用

2. 样式选择器
   ID(#) Class(.) 标签(div a span)

JavaScript

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

2. 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的判断条件

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

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