Web前端复习（HTML、CSS、JavaScript）

一，HTML

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

2，什么是标签
标签对的组成：标签名、属性（名值对）、内容。
属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力。

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>

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

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

（3）表单元素标签
通过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 存在。

4,标签的语义
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>

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

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

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

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

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

(1)需要掌握的内容
• DIV + CSS 布局基础，充分理解盒子模型
• box-sizing需要注意
• 样式选择器：ID(#) Class(.) 标签（A DIV SPAN）

8，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");
}

• 关于JavaScript 的判断条件

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

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

Cherry19

发布了1 篇原创文章 · 获赞 0 · 访问量 14

私信关注

Web前端复习（HTML、CSS、JavaScript）

一，HTML

猜你喜欢