文章目录



小白前端熟悉基础 HTML+CSS+JavaScript

介绍

html作为超文本标记语言

<!-- 注释部分 -->
<html>
  <head>
    <title>
      ...
    </title>
  </head>
  <body>
    ...
  </body>
</html>

在网页中输入如：file://E:\example\test.html即可用浏览器运行查看html文件。

css样式是html的扩展，对页面风格更新时，只要更改css样式即可。css选择符有三种：html的标记符h1{}，​​class选择符.am​​{}和id选择符#am{}

JS为一种嵌入在HTML中具有跨平台，安全性，基于对象和事件驱动的解释性编程脚本语言。JS脚本程序显示被嵌入到HTML文档中一同下载到客户端应用中，当浏览器读HTML文档时，就会解释执行并显示其中的元素，读取html文档并分辨其中元素的过程叫做解析。JS是一种基于对象，安全的（不允许访问本地硬盘），跨平台，动态的脚本语言。

HTML

  • ​1.常见字体标记元素​
<b>粗体
<i>斜体
<blink>闪烁 
<sub>下标 
<sup>上标 
<address>地址格式 
<pre>预设字体


​2.水平标记​​<hr>​​ 此元素不需要以结尾，它可以划出一条分割线。



​3.列表标记元素 3.1无序列表 < ul >
3.2有序列表 < ol >
3.3定义式列表 < dl >



<ul>
  <li>无序列表
  <li>
</ul>

<ol>
  <li>有序列表
  <li>
<ol>

<dl>
  <dt>定义式列表
  <dd>
</dl>
  • ​4.特殊字符 在html中><&"这几个符号是html的控制码所以标示方式需要改变：
&lt 在屏幕上<
&gt 在屏幕上>
&amp 在屏幕上&
&quot 在屏幕上"
  • ​5.HTML标记元素​
<a href="www.baidu.com"> 链接跳转网站 </a>
<a href="#clients"> 链接跳转段落 </a>
<img src="test.gif" alt="图片显示前的文字叙述"> 插入图像
  • ​6.表格​
<table border>
  <tr>行
    <td>列</td>
    <td></td>
  </tr>
</table>
  • ​7.框架 从html3.0开始加入了对框架的支持，可以将屏幕分成好几块，每一块对应一个html文件，个框架链接浏览独立运行。
<frameset rows="...">
  <frameset cols="...">
    <frameset src="...">
    <frameset src="...">
  </frameset>
  <frameset cols="...">
    <frameset src="...">
    <frameset src="...">
  </frameset>
</frameset>
  • ​8.html5的内容 html5第五次重大改进版本，从2010年正式推出，它使用了新的语义定义标签，拥有本地存储特性不需要依赖第三方插件，具有更有效的连续工作效率，拥有更有效的服务器推送技术，支持网页多媒体等。
新标签如下：

canvas
<canvas> 定义图形，基于js的绘图api

多媒体
<audio> 音频
<video> 视频
<source> 多媒体资源
<embed> 嵌入插件
<trace> 媒介规定外部文本轨道

表单
<datalist> 选项列表，与input配合使用
<keygen> 表单密钥对生成器字段
<output> 不同类型输出

语义与结构
<article> 侧边栏
<aside> 页面内痛之外的内容
<bdi> 设置一文本脱离父元素文本方向
<command> 命令按钮
<details> 描述文档细节
<dialog> 提示框
...

CSS

  • ​1.css常见属性​
文字样式属性
font-family 字体类型
font-size 字体大小（绝对大小：xx-small small medium large x-large xx-large 相对大小：large small）
font-weight 字体粗细（normal bold bolder lighter 100-900）
font-variant 字体变形（normal small-caps）
font-style 字体效果（normal italic oblique）
颜色背景属性
color 定义前景色（color:red）
background-color 定义背景色
background-image 定义背景图像url
css支持的常见单位
相对：
em 相对字符高度（margin:4 em）
ps 以像素为单位（font-size:16 px）
绝对：
in 英寸（font-size:0.6 in）
cm 厘米（font-size:0.6 cm）
mm 毫米（font-size:6 mm）
pt 点数（font-size:40 pt）
pc 印刷单位（font-size:4 pc）
  • ​2.应用css样式4种方式​
第一种直接在html标记中插入
<h1 style="color:red;text-align:center">
</h1>

第二种在html文档中定义内部样式表
<style type="text/css">
  选择符 a1,a2,...{
    样式属性1:属性值;
    样式属性2:属性值;
    ...
  }
</style>

第三种嵌入外部样式表
<style type="text/css">
  @import url("外部样式文件名")
</style>

第四种链接外部样式表
<link type="text/css" rel=stylesheet href="外部样式文件名">
  • ​3.css布局理念 无论表格布局还是css，网页布局都是把网站分成各块，css最常用来组织内容的是​​<div>​​，当使用css布局主要把他用在div标签上。

JavaScript

  • ​1.JS使用方式​
方式一
<script language="javascript">
  document.write("<h1> hello world! </h1>")
</script>

方式二
<script src="test.js"> </script>
  • ​2.JS基本语法 JS区分大小写，且可以没有行结束标志也可以用;表示
    注释方法和c++相同
    基本数据类型：int float string boolean null
    用var声明变量，如​​​var array=new Array();​​ 用function来声明函数，如下
function 函数名(参数列表){
  函数体
}
JS事件：onClick onChange onFocus onBlur ... 如下：
<html>
  <head>
    <title>...</title>
  <script language="JavaScript">
    function hello(){
      alert("hello world");
    }
  </script>
  </head>
  <body>
    <a href="test.html" onMouseOver="hello()">悬停</a>
  </body>
</html>
  • ​3.JS对象相关​


​JS内置对象： String，Math，Array，Date
​String：​ String对象的属性只有一个length用来统计字符串的个数，String对象的方法还是比较多。
**Math：**这是一个静态对象，不需要创建实例就可以直接使用，如​​var num=Math.sqrt(9)​​Math的属性和方法也很多。
**Array：**数组对象，若在创建数组时不给出数组元素个数，则数组大小在饮用数组时确定，数组下标从0开始。常用属性length，常用方法join()返回数组中所有元素连接而成的字符串，reverse()将数组元素逆转排列，sort()对数组重元素进行排序。
**Date：**主要用于对日期操作，没有属性但是有多种方法。



​浏览器内置对象： **Window：**下层有location history document等，其中最主要的是document对象。是内置对象中最顶层的对象，每个Window对象就是一个浏览器窗口。他有一些属性，还有一些方法，如alert()等控制浏览器窗口的方法。
​document：​ Window对象下层中最主要的对象， 即HTML文档对象模型，有Window→document和其他对象，又有document→form对象和其他各种对象，form→各种标签。document对象主要用来设置当前下载的HTML文件中的基本数据和字符串的显示效果。
**location：**包含当前网页的url，可以设置当前网页的地址。
**hisrory：**包含以前访问网页的记录url，可以实现前进后退。
**form：**为document下层对象，为处理表单界面提供属性和方法。



​JavaScript自定义对象 JS可以根据需要创建自定义对象。步骤：先定一个对象，创建带对象的实例。比如：

```
 function 对象名称(属性列表){
  this.属性1=参数1
  this.属性2=参数2
  ...

  this.方法1=函数1
  this.方法2=函数2
  ...
 }
 ```


对象定以后应用关键字new创建对象实例：

```
  对象实例名=new 对象名称(属性值列表)
  ```
  • ​4.JQuery​


​简介： JQuery我们平常用的时候就是一个js文件，它是一个JS函数库，极大的简化了JS编程。JQuery是很流行的JS框架，当然还有其他很多前端框架，可以操作文档对象，制作动画效果，事件处理等，JQuery还提供了API让开发者编写插件。



​使用JQuery 可以先从网上下载JQuery，有压缩版和未压缩版的。
写法：​​<script type="text/javascript" src="jquery-版本号.js">​​



​JQuery写法 JQuery语法是为html元素的选取编制的，可以对元素执行某些操作，一般形式为​​$(this).hide() 或者 $("p").hide() 或者 $(".test").hide() 或者 $("#test").hide()​​如下：

```
 <script type="text/javascript">
  $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      })
  })
 </script>
 ```


后端基础见下一篇blog