Web前段基础复习

Web前段基础复习

---

HTML

什么是HTML

HTML(Hyper Text Markup Language)：超文本标记语言

HTML是用来描述网页的一种语言

HTML标签

HTML文档由HTML标签组成

开始标签	元素内容	结束标签
	内容
	内容

HTML标签语法

• HTML 元素以开始标签起始
• HTML 元素以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性

HTML标签的属性

属性是 HTML 元素提供的附加信息。

• HTML 元素可以设置属性
• 属性可以在元素中添加附加信息 about an element
• 属性一般描述于开始标签
• 属性总是以名称/值对的形式出现，比如：name="value"

大多数HTML标签的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style） title text 规定元素的额外信息（可在工具提示中显示）
title	描述了元素的额外信息 (作为工具条使用)

重要标签

• table（表格标签）

  thead tr th

  tbody tr th

  <table border="1">
      <thead>
      	<tr>
          	<th>表头1th>
              <th>表头2th>
          tr>
      thead>
      <tbody>
      	<tr>
          	<th>内容1th>
              <th>内容2th>
          tr>
      tbody>
  table>
  

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

• form（表单标签）

  属性：

  • action：submit操作执行的请求地址
  • method：指定请求的类型get/post

  注意：

  1. form表单提交不一定要通过submit操作，可以通过Ajax请求序列化表单（serialized）的方式完成表单数据的提交。
  2. 通过form表单提交和Ajax请求方式提交数据是两个原理完全不听的两个设计方式。

• 表单元素标签

  通过submit提交，浏览器会把表单元素的数据以名值对的形式提交给服务器。

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

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

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

  标签的语义

  h1/h2/h3表现大纲级别

  div/span/p表现布局

  使用带语义的标签可以让搜索引擎快速的进行收录

  虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制

  ---

  CSS

  CSS(Cascading Style Sheets)：层叠样式表

  元素样式可以通过多种方式进行叠加

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

  盒子模型

  所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  不同部分的说明：

  • Margin - 清除边框区域。Margin没有背景颜色，它是完全透明

  • Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

  • Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

  • Content - 盒子的内容，显示文本和图像

    ***注意：***当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距

实例：

width:220px;
padding:10px;
border:5px solid gray;
margin:0px; 

• 元素的总宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
• 元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

---

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 : 'JO'};
flag = function() {
    alert("Hello World!");
}

• 关于JavaScript的判断条件

  1. 在条件表达式中，数字0和非0也可以表现为true和false

   var flag = 1;
   if(flag) {
       alert("true");
   }
  

  2. 分支结构的三种表示方式

  3. 三目运算符是需要熟练掌握的，其本质就是个表达式

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