前端三件套 基础常用知识点（复习）

HTML

• 行级元素

  标签分为行级元素与块级元素

  行级元素占据区域由其显示内容决定，如span，img(图片)，

  <a></a>（链接标签）

  基本格式: <a href="链接" target="_blank"></a>

  用于跳转到其他网站，target="_blank"使其跳转时会打开新窗口 值是下划线blank，否则会在原窗口打开链接），strong（加粗文字），em（斜体文字）等

• 块级元素

  块级元素会换行显示，并占据整行区域，如div（布局标签），h，p，form（表单标签）等

• 属性

        属性写在开始标签中，格式是键值对的形式，属性名：键；引号里的：值

表格标签

基本格式:  ​//表头​ // tr行 ​ // th列​ ……​​​ // 表体 ​​ // td列​ ……​​​ ……​​ ……​

<table>
     <thead> //表头
​       <tr> //tr行
​       	<th>……</th> //th列
​          	    ……
​       </tr>
​     </thead>
​     <tbody> //表体
​        <tr>
​            <td>……</td> //td列
​         ……
​        </tr>
​        <tr>
​          ……
​        </tr>
​          ……
​      </tbody>
</table>  

thead为表头，tbody为表体，tr为行，th为列名，td为列表中的数据

表格样式:表头1 表头2 ……

数据1 数据2 ……

<select> //带有选项的控件
	<option value="a">男</option>
    <option value="b">女</option>
    <option value="c">其他</option>
</select> 

布局标签

<header>	头部信息
<nav>	导航栏
<aside>	侧边栏
<main>	内容区域
<footer>	底部信息
<article>	文章详情
<section>	页面分区

br/：换行符

hr/：水平分割线

textarea：更大区域的输入控件

scope 是 HTML <th> 元素的一个属性，表示表头单元格的作用范围。该属性可以设置为以下值之

• col：表示该表头单元格适用于一整列。

• row：表示该表头单元格适用于一整行。

• colgroup：表示该表头单元格适用于一个列组。

• rowgroup：表示该表头单元格适用于一个行组。

锚链接

• 首先定义一个锚点：在标签中添加一个id属性；

• 超链接到锚点:

  <a href="#id属性名">跳转</a>

  span标签

  <span>标签被用来组合文档中的（块）行内元素，标签不会自动换行，span没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

• link标签

• 链接外部样式表文件<link rel="stylesheet" href="1.css">;

• 设置网站icon：<meta rel="icon" href="xxx.png">

音乐标签

<embed src="" hidden="true" />

• hidden设置为true时，隐藏音乐播放器，

  比audio标签多一块黑色的背景<embed src="" hidden="true" />。

跑马灯：页面自动滚动效果

• <marquee height="80" weight="200" bgcolor="red" behavior="alternate" direction="down">...</marquee>

• 中间的内容可以是文字、图片，也可以是由程序生成的文字或图片；

• behavior设置滚动的方式
• alternate表示在两端之间来回滚动
• scroll表示一端滚动到另一端（会重复）
• slide表示由一端滚动到另一端（不会重复）
• direction设置滚动方向: down表示向下滚动，left向左，right向右，up向上
• loop表示滚动的次数，-1时无限滚动
• scrollamount设置滚动速度，值越大滚动速度越快

高级标签

meta标签

• 编码格式，在meta标签里面设置charset，英语用ascll、ansi；日文、韩文用Unicode；中文的用gbk、gbk2312；台湾big5（繁体字符）；utf-8支持180到200个国家语言，所以用utf-8基本能解析所有国家语言<meta charset="utf-8">；

• 关键字：给搜索引擎看，主要用于SEO，<meta name="keywords" content="阳光,帅气,有担当,进步">(逗号使用英语格式的)；

• 网页描述：在搜索的时候会出现的描述：

  <meta name="description" content="江苏是一个好地方，有山有人妹子水灵">

• 网页重定向：

• <meta http-equiv="refresh" content="5;http://baidu.com">过5秒之后跳转到设定的页面;

• 告诉搜索引擎站点的作者：<meta name="author" content="姓名">（不常用）；

• <meta name="robots" content="all/none/index/noindex/follow/nofollow">（不常用，了解）：

• all：文件将被检索，且页面上的链接可以被查询；

• none：文件将不被检索，且页面上的链接不可以被查询；

• index：文件将被检索；

• noindex：文件将不被检索，但页面上的链接可以被查询；

• follow：页面上的链接可以被查询；

• nofollow：文件将不被检索，页面上的链接可以被查询。

文本输入框

<input type="text" maxlength="8" readonly="readonly" name="username" value="jiangjiang" placeholder="请输入用户名">

• maxlength：设置输入的最大字符长度；

• readonly：设置输入框为只读状态；

• value：设置默认值；

• placeholder：提示用户进行操作

• <input type="text" maxlength="8" disable="disable" name="username">

• disable：输入框没有激活；

• name：给输入框设置名字，以便进行区分；

• <input type="password" maxlength="8" disable="disable" name="username">

• 密码输入框：输入的信息会变成暗文，文本输入框的所有属性对密码输入框都有效；

单选框

• <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女

• 一组单选按钮必须要设置同样的name，否则单选无效；

• 通过checked来设置默认选中项；

多选框

<input type="checkbox" name="hobby" checked="checked">喝酒
<input type="checkbox" name="hobby">抽烟
<input type="checkbox" name="hobby">烫头发

多行文本框 

<textarea cols="30" rows="10"></textarea>

• cols：控制输入字符的长度；

• rows：控制输入的行数；

文件上传控件 <input type="file">

按钮

• 提交按钮：可以实现信息提交<input type="submit">;

• 普通按钮：不能提交，通常配合js使用<input type="button" value="普通按钮">；

• 图片按钮：可实现信息提交功能<input type="image" src="xxx.jpg">;

• 重置按钮：将信息重置到默认状态<input type="reset">

• 将表单信息分组

• 将表单内一组的内容放到<field></field>中，表单名称放到<legend></legend>中

<form action="xxx" method="get/post">
<fieldset>
    <legend>个人信息提交</legend>
    用户名：<input type="text" name="username">
    密码：<input type="password" name="pwd">
    <input type="submit">
</fieldset>
</form>

表单的其它控件

1. 网址输入框：<input type="url">

会要求输入正确的网址格式，但是空也可以提交，以后会用js进行判断；

1. 日期控件：<input type="date">

2. 时间控件：<input type="time">

3. 邮件控件：<input type="email">

要求输入正确的邮件格式，但是空也可以提交；

1. 数字控件：<input type="number" step="2">

有一个上下的小三角，可以步进，每次调整的值的大小为2；

1. 滑块控件：<input type="range" step=20>

下拉列表

1. 普通下拉列表

<select multiple="multiple">
  <option>下拉列表选项1</option>
  <option>下拉列表选项2</option>
  <option selected="selected">下拉列表选项2</option>
</select>

2. 分组下拉列表：

<select>
  <optgroup label="江苏">
      <option>苏州</option>
      <option>无锡</option>
      <option>常州</option>
  </optgroup>
  <optgroup label="浙江">
      <option>杭州</option>
      <option>温州</option>
      <option>绍兴</option>
  </optgroup>
</select>

概述详细信息标签

​

简介

​

• action:处理信息；

• method：有两个值可取，get和post。

• get：通过地址栏提供（传输）信息，安全性差；

• post：通过xxx来处理信息，安全性相对较高。

• multiple:设置多选；

• selected:设置默认选中项，如果不设置，默认选择第一个选项；

CSS语法结构

内联样式：只对当前的html元素有效

直接写到html上面的，没有选择器只是声明

内部样式：写在head标签里

使用style标签，里面有一个或多个CSS规则，内部样式仅对当前的页面有效

外联样式（常用）：把link标签放在head标签内

然后指定link标签的href属性来指定外部css文件路径 来引入外部样式表，引入的样式也仅对当前的html页面有效

JS

常量与变量

let : 变量，可多次赋值

const : 常量,只能赋一次值，但const声明的是数组或对象时 其内部元素可以被改变 不过不能完全更改

字符串与常量拼接的写法：

或者

结果

模板字符串

"my name is" + name

'my name is ${name}'

分割字符串

最小的分割的形式

大一点的分割形式

数组

const numbers = new Array(1,2,3,4,5);

const fruits = ["apple",10,true];

从0开始排序

在末尾添加新元素fruits.push("name");

在头部添加fruits.unshift("");

删除末尾元素fruits.pop();

// 数组的简单定义

const number = ["asd0",'dwad','dwadasufg',true,null,10];

console.log(number);

console.log(number[0]);

// 在末尾加上

number.push("NewAdd");

// 在头部加上

number.unshift("Fornt");

// 删除末尾的

number.pop();

// 判断数据是否为数组

console.log(Array.isArray('hello'));

console.log(Array.isArray(number));

// 得到索引

console.log(number.indexOf("asd0"));

对象