0. 语法格式

    <a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>
   

   属性	作用
   href（必需属性）	链接目标的URL地址
   target	用于指定目标页面的弹出方式，_self 为默认值 _blank为在新窗口中打开

1. 链接分类

   0. 外部链接：地址必须以 http://开头。

   1. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。

   2. 空链接：没有确定链接目标时

       <a href = "#">还没想好链接到哪儿</a>
      

   3. 下载链接：如果 href 里面地址是一个文件或者压缩包，点击就会下载这个文件。

   4. 网页元素链接：各种网页元素例如文本、图像、表格、音频等都可以添加超链接。

       <a href = "http://www.baidu.com"><img src = "img.jpg"></a>
      

   5. 锚点链接：点击链接可以快速定位到页面中的某个位置。

      • 设置链接文本的属性 href 为 #名字 的形式，如：

         <a href ="#job"> 任职经历 </a>
        

      • 找到目标位置标签，并添加一个 id 属性 = 上面命名的名字，如：

        <h3 id = "job">
            任职经历简介
        </h3>
        

表格标签

0. 表格的主要作用

   用于显示、展示数据，提高数据的可读性。

1. 表格的基本语法

   <table>
       <tr>
           <td>这是一个单元格</td>
           ...
       </tr>
       ...
   </table>
   

   0. table用于定义表格。
   1. tr 用于定义表格中的一行，必须嵌套在 table 中。
   2. td 用于定义表格中的单元格，必须嵌套在 tr 中。
   3. td 指的是 table data 表格数据，即数据单元格中的内容。

2. 表头单元格标签

   一般位于表格的第一行或第一列，里面的文本内容会加粗居中显示。

   th 标签表示 HTML 表格的表头部分（ table head ）

   <table>
       <tr>
           <th>姓名</th>
           ...
       </tr>
       ...
   </table>
   

3. 表格属性

实际开发中并不常使用，后面通过CSS来设置。

0. 表格结构标签

当表格很长时，为了更好的表示单元格的语义，可以将表格分割成表格头部和表格主体两大部分。用 thead 表示头部区域、 tbody 表示主体区域 。

0. 合并单元格

   特殊情况下，把多个单元格合并成一个单元格

   0. 合并单元格的方式

      • 跨行合并：rowspan = “合并单元格的个数”
      • 跨列合并：colspan = “合并单元格的个数”

   1. 目标单元格

      • 跨行：最上侧为目标单元格
      • 跨列：最左侧为目标单元格

   2. 合并单元格的步骤

      0. 确定跨行还是跨列
      1. 找到目标单元格，写上 ：合并方式 = 合并单元格的数量，如:

      <td colspan = "3"></td>
      1
      

      0. 删除多余的单元格

列表标签

表格是用来显示数据的，列表是用来布局的，因为它最大的特点就是整齐有序。分为无序列表、有序列表和自定义列表。

无序列表

（一般用用于导航栏）

<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项用<li>标签定义。
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

注意：

0. 无序列表各个表项之间没有顺序级别之分。
1. <ul></ul> 中只能嵌套 <li></li>，但是 <li></li>中可以容纳所有元素。
2. 无序列表会带有自己的样式属性，但在实际使用时，通过CSS来设置。

有序列表

（一般用于编写文本）

<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    ...
</ol>

注意事项和无序列表基本一致，在实际开发中使用并不多。

自定义列表

使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
    <dt>联系方式</dt>
    <dd>微信</dd>
    <dd>QQ</dd>
</dl>

注意：

0. <dl></dl>里面只能包含 <dt></dt> 和 <dd></dd>
1. dt 和 dd 没有个数限制

表单标签

表单的目的是为了收集用户信息。

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

0. 表单域 包含表单元素的区域，在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素提交给服务器。

   <form action = "url地址" method = "提交方式" name = "表单名称">
       各种表单元素控件
   </form>
   

   常用属性：

   属性	属性值	作用
   action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
   method	get/post	用于设置表单数据的提交方式。
   name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

1. 表单控件（表单元素）

<input>表单元素

• type属性值：

  属性值	描述
  button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
  checkbox	复选框
  file	定义输入字段和"浏览"按钮，供文件上传
  hidden	定义隐藏的输入字段
  image	图像形式的提交按钮
  password	密码字段，该字段中的字符被掩码
  radio	单选按钮
  reset	重置按钮，会清除表单中的所有数据
  submit	提交按钮，会把表单数据发送到服务器
  text	单行的输入字段，可在其中输入文本，默认宽度为20个字符

• 除 type 属性外，<input>标签还有其他很多属性，常用属性如下：

  属性	属性值	描述
  name	自定义	定义input元素的名称
  value	自定义	规定input元素的值
  checked	checked	规定此input元素首次加载时应当被选中
  maxlength	正整数	规定输入字段中的字符的最大长度

  注意：

  0. name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
  1. name 表单元素的名字，要求 单选按钮和复选框都要有想同的 name 值

<label>标签

为 input 元素定义标签，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择到对应的表单元素上，用来增加用户体验。

<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />

核心：<label>标签的 for 属性要与相关元素的 id 属性相同。

<select>下拉表单元素

使用场景： 有多个选择项并且想要节约页面空间。

<form>
籍贯：
<select name = "jiguan">
    <option>广东</option>
    <option selected = "selected">湖南</option>
    <option>浙江</option>
    ...
</select>
</form>

注意：

0. <select>中至少包含一对<option>
1. 在<option>中定义 selected = “selected” 时，选项变为默认选项

<textarea>表单元素

使用场景： 当输入内容较多的情况下，可以使用<textarea>标签，常见于留言板、评论。

<textarea rows = "3" cols = "20" name = "pinglun">
    文本内容
</textarea>

0. 通过<textarea>标签可以轻松地创建多行文本输入框
1. cols = “每行中的字符数” ，rows = “显示的行数”，但在实际开发中不会使用，都是用CSS来改变大小

HTML中的注释和特殊字符

0. 注释

<!--注释语句-->

0. 特殊字符

空格： 
大于号>：>
小于号<：&lt;

CSS语法：

• 命名一般为小写英文字母。
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格。
• 每条声明语句的 : 后应该插入一个空格。
• 所有声明语句都应当以分号结尾。 最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如， .5 代替 0.5 ； -.5px 代替 -0.5px ）。
• 十六进制值应该全部小写，例如， #fff 。
• 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff 。
• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px; 。

CSS的引入：

CSS的引入一般有三种，标签内嵌，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

Css的命名规范(BEM,OOCSS)：

什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。

命名约定如下：

.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。

优点：

BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。

缺点：

这样类名过于长，且复杂。

什么是OOCSS（面向对象CSS）：

OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。

OOCSS的优点：

• 减少CSS代码。
• 具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。
• 语义标记，有助于SEO。
• 更好的页面优化，更快的加载时间（因为有很多组件重用）。
• 可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。
• 能轻松构造新的页面布局，或制作新的页面风格。

OOCSS的缺点：

OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。

基本语法:

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器

常用的选择器： 标签选择器：通过标签选择器可以选择页面中的所有指定标签 语法：标签名 {} 类选择器：通过标签的class属性值选中一组标签 语法：.class属性值{} id 选择器：通过标签的id属性值选中唯一的一个标签 语法： #id属性值 {} 选择器组合：通过选择器分组可以同时选中多个选择器对应的标签 语法：选择器1,选择器2,选择器N{} 通配选择器:可以用来选中页面中的所有的标签 语法：*{}

选择器的优先级: 最低到高: 通配选择器<标签选择器<类选择器<id选择器

常用的选择器： 后代选择器：选中指定标签的指定后代标签 语法： 祖先标签 后代标签{} 子标签选择器：选中指定父标签的指定子标签 语法： 父标签 > 子标签 选中指定标签的相邻标签 语法：选择相邻选择器：器 + 相邻{} 兄弟选择器：选中指定标签的兄弟标签 语法：选择器 ~ 兄弟{}

标签之间的关系 父标签：直接包含子标签的标签 子标签：直接被父标签包含的标签 祖先标签：直接或间接包含后代标签的标签，父标签也是祖先标签 后代标签：直接或间接被祖先标签包含的标签，子标签也是后代标签 兄弟标签：拥有相同父标签的标签叫做兄弟标签

基础样式属性：

color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing可以指定字符间距
text-indent用来设置首行缩进 em表示单位

background-color背景颜色
background-image背景图片
background-repeat背景重复 norepeat表示不重复图片
background-size背景尺寸
background- position 背景位置

定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）

列表属性：

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。

list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

list-style 简写属性。

伪类：

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类 。

伪类的语法：
:link表示普通的链接（没访问过的链接）
:visited表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
使用visited伪类只能设置字体的颜色
:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
注意：:visited放在:hover之前
:active 必须被置于 :hover 之后，才是有效的
:hover和:active也可以为其他标签设置
:focus向拥有键盘输入焦点的标签添加样式。

display：

可选值：
block ：设置标签为块标签
inline ：设置标签为行级标签
inline-block ：设置标签为行级块标签
none ：隐藏标签（标签将在页面中完全消失）

盒子模型：

–内容区(content)
–内边距(padding)
–边框(border)
–外边距(margin)

border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）

浮动：

浮动使用float属性。
可选值：
none ：不浮动
left ：向左浮动
right ：向右浮动

清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动

JavaScript语法：

基本语法：

• JavaScript 中必须严格区分大小写，例如变量 handleClick 和 HandleClick 是不同的，test 和 Test 是不同的。
• JavaScript 语句中每一行代码都要以英文的分号 ; 结尾，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。
• JavaScript 中会自动忽略多个空格和换行，所以可以使用空格和换行对代码进行格式化。
• JavaScript 是弱类型语言，声明变量时可以不需要指定变量的类型。

JavaScript 注释

注释顾名思义就是对代码的解释和说明，可以让我们能够轻松的了解代码。注释可以提高代码的可读性，且注释不会被计算机编译。每个语言中的注释格式可能不太一样，我们来看一下 JavaScript 语言的注释。

JavaScript 语言中的注释其实很简单，在需要注释的语句前面添加双斜杠// 即可，例如：

// 单行注释

双斜杠后面的内容会被浏览器忽略，且一般我们写注释时，双斜杠与内容之间会有一个空格。

上面的双斜杠是我们最常用的注释方法，我们可以称之为单行注释，除此之外，还有一种注释叫做多行注释，格式如下所示：

/*
多行注释
多行注释
多行注释
*/

字面量

JavaScript 中的字面量是指不可以改变的值，如数字 1、2、3 等。字面量都是可以直接使用的，但是一般都不会直接使用字面量的。

• 数字（Number）字面量可以是整数或者是小数，或者是科学计数。
• 字符串（String）字面量可以使用单引号''或双引号""包围。
• 数组（Array）字面量定义一个数组[1,2,3,4]。
• 对象（Object）字面量定义一个对象{name:”QzFrato”,age:”24”}。
• 函数（Function）字面量定义一个函数function qzFrato(){}。

变量

JavaScript 中变量可以用来保存字面量，变量的值是可以任意改变的，在开发中通常都是使用变量来保存一个字面量。

在 JavaScript 中我们可以使用关键字 var 来声明一个变量。

关键字及用法

保留字