Web前端基础（持续更新）

一、Html

1.概念

最基础的网页开发语言（Hyper Text Markup Language ）

​ （1）.超文本是用超链接的方法，将不同空间的文字信息组织在一起的网状文本

​ （2）.标记语言：由标签构成的语言，<标签名称>；

​ 标记语言不是编程语言；

(3).HTML5 ---->移动端

2.语法

​ （1）.后缀：.html/.htm

（2）.标签分类：
*围堵标签：有开始标签和结束标签，如

​ *自闭和标签：开始标签和结束标签在一起，如

​ （3）.标签可以嵌套：

​ 正确：

​ （4）.在开始标签中可以定义属性，属性由键值对构成，值需要用引号（单双都可）引起来；

​ （5）.html的标签不区分大小写，建议使用小写

3.标签学习

（1）.文件标签：构成html最基本的标签

​ *html:html文档的根标签

​ *head: 头标签,用于指定html文档的一些属性，引入外部的资源

​ *title:标题标签

• body:体标签

  *:html5中定义该文档是html文档

  （2）.文本标签：和文本有关的标签

  *注释：

  *

  to

  :标题标签

​ h1~h6：字体大小逐渐递减

*

：段落标签

​ *
换行标签

*

---

：展示一条水平线

​ 属性：

​ color:颜色

​ width:宽度

​ （1）数值：width=‘20’, 单位：默认px(像素)

​ （2）数值 %：相对于父元素的占比

​ size:高度

​ align:对齐方式

​ center:

​ left

​ right

• :字体加粗

• ：斜体

• :文本居中

• ：字体标签

​ 属性：

​ color:颜色

​ (1).red/blue/green

​ (2).rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)

​ （3）#值1值2值3 : 值的范围 ：00~FF 如 #FF00FF

​ size:大小

​ face:字体

（3.）图片标签：

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的

//浮动图像
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>
<p><b>注意:</b> 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

//创建图片链接
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>



/带有可点击区域的图像映射：
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map> 

（4）.列表标签

<!--无序列表-->
<ul type=""><!--默认disc  circle square-->
    <li> 上课</li>
    <li> 吃饭</li>
    <li>睡觉</li>
</ul>
<!--有序列表-->
<ol type=""><!--默认1(数字)  a A i I-->
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ol>

（5）.链接标签

<!--超链接-->
<a href="链接路径" target="目标窗口打开方式"><!--_self(默认) _blank  _top _parant-->
    链接内容
</a>

（6）.表格标签

<table border="2",bordercolor="black">
    <tr>
        <th bgcolor="red">星期一</th>
        <td>星期二</td>
    </tr>
    <tr>
        <td rowspan="">数据库</td>
        <td>JSP</td>
    </tr>
</table>

<td colspan="跨的列数">
    <td rowspan="跨的行数">

(6).表单

<form action="表单提交的地址" name="表单名称" method="get(默认)/post" enctype="multipart/form-data"><!--表单收集到信息后传递到的程序地址-->
    <input type="text" value="文本框默认显示值" name=""/>
    <input type="password" value="" name=""/>
    
    <input type="radio" value="" name="" checked/>选项1   <!--一组单选按钮的名称都相同-->
    
    <input type="checkbox" value="" name="" checked/>选项1 
    
    <input type="file"  name="文件域的名称" />
    
   <select name="下拉列表的名称" size="显示的项数" multiple>
       <option value="选项值1" selected="" selected/>选项1
       <option value="选项值2" selected="" />选项2
    </select>
        
    <textarea name="文本区的名称" cols="列数" rows="行数" >
    </textarea>
</form>
    

二、CSS

1.概念

• Cascading Style Sheets :层叠样式表 ( 页面美化和布局控制)；
• 层叠：多个样式作用在同一个html元素上，同时生效；

2.优点

• 功能强大
• 将内容展示和样式控制分离
  • 解耦：降低耦合度
  • 分工协作，提高开发效率

3.使用

CSS与html的结合方式

• 内联方式:在标签内使用style属性指定css代码(不常用)

  <div style="color:red;">hello css</div>
  

• 内部样式：在head标签内定义style标签，style标签的标签体内容就是css代码

  <style>
      div{
      color:blue;
      }
  </style>
  <div>hello css</div>
  

• 外部样式：

  (1).定义CSS资源文件；
  (2).在head标签内定义link标签，迎入外部的资源文件
  

  div{
      color:green;
   }//a.css文件：
  <link rel="stylesheet"href="cssResource/a.css">
  <div>hello css</div>
  或者：不用link
      <style>
          @import"cssResource/a.css";
      </style>
  

4.语法

选择器{
属性名1：属性值1；
属性名2：属性值2；
...
}

• 选择器：筛选具有相似特征的元素

• 注：每一对属性需要使用 ；隔开，最后一对可加可不加

5.选择器

6.属性

三、JavaScript:

1.概述

​ (1).客户端脚本语言；

（2).运行在客户端浏览器中，每一个浏览器都有JavaScript解析引擎；

（3).脚本语言：不需要编译，直接被浏览器解析执行；

（4).增强用户和html页面的交互过程，可以控制html元素，让页面有一些动态的效果，增强用户体验；

（5).前端表单校验

• 对浏览器事件做出响应。
• 读写HTML元素
• 在数据被提交到服务器之前验证数据。
• 嵌入动态文本于HTML页面。
• 检测访客的浏览器信息，控制cookies，包括创建和修改等
  • 基于Node.js技术进行服务器端编程。

JavaScript=ECMAScript+JavaScript自己特有（BOM+DOM）

ECMAScript:客户端脚本语言的标准

 ## 2.基本语法：

​ （1）.与html的结合方式

                      -  内部js:定义<script>,标签体内容就是js代码；

                    -  外部js: 定义<script>,通过src属性引入外部的js文件

​ 注意：1.

​ 2.

3.数据类型

​ （1）.原始数据类型（基本）

             - number： 整数、小数、NaN（not a number 一个不是数字的数字类型）
             - string : 字符串 "abc"  "a"   'abc'
             - boolean : true/false       
             - null: 一个对象为空的占位符
             - undefined：未定义，若一个变量没有初始化值，则会被默认赋值为undefined

​ （2）.引用数据类型:对象

4.变量

       - 变量:一小块存储数据的内存空间；
       - Java是强类型语言，JavaScript是弱类型语言；

• 强类型：在开辟变量存储空间时，定义了将来存储的存储数据类型，只能存储固定类型的数据；

• 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据；

• 语法：

  ​ var 变量名=初始化值；