前端基础 HTML+CSS+JavaScript

小白前端熟悉基础 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对象相关
1. JS内置对象：
  String，Math，Array，Date
  String： String对象的属性只有一个length用来统计字符串的个数，String对象的方法还是比较多。
  Math：这是一个静态对象，不需要创建实例就可以直接使用，如var num=Math.sqrt(9)Math的属性和方法也很多。
  Array：数组对象，若在创建数组时不给出数组元素个数，则数组大小在饮用数组时确定，数组下标从0开始。常用属性length，常用方法join()返回数组中所有元素连接而成的字符串，reverse()将数组元素逆转排列，sort()对数组重元素进行排序。
  Date：主要用于对日期操作，没有属性但是有多种方法。
2. 浏览器内置对象：
  Window：下层有location history document等，其中最主要的是document对象。是内置对象中最顶层的对象，每个Window对象就是一个浏览器窗口。他有一些属性，还有一些方法，如alert()等控制浏览器窗口的方法。
  document： Window对象下层中最主要的对象，即HTML文档对象模型，有Window→document和其他对象，又有document→form对象和其他各种对象，form→各种标签。document对象主要用来设置当前下载的HTML文件中的基本数据和字符串的显示效果。
  location：包含当前网页的url，可以设置当前网页的地址。
  hisrory：包含以前访问网页的记录url，可以实现前进后退。
  form：为document下层对象，为处理表单界面提供属性和方法。
3. JavaScript自定义对象
  JS可以根据需要创建自定义对象。步骤：先定一个对象，创建带对象的实例。比如：
```
function 对象名称(属性列表){
    this.属性1=参数1
    this.属性2=参数2
    ...

    this.方法1=函数1
    this.方法2=函数2
    ...
}
```
  对象定以后应用关键字new创建对象实例：
```
对象实例名=new 对象名称(属性值列表)
```
4.JQuery
1. 简介：
  JQuery我们平常用的时候就是一个js文件，它是一个JS函数库，极大的简化了JS编程。JQuery是很流行的JS框架，当然还有其他很多前端框架，可以操作文档对象，制作动画效果，事件处理等，JQuery还提供了API让开发者编写插件。
2. 使用JQuery
  可以先从网上下载JQuery，有压缩版和未压缩版的。
  写法：<script type="text/javascript" src="jquery-版本号.js">
3. 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

前端基础 HTML+CSS+JavaScript

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

介绍

HTML

CSS

JavaScript

猜你喜欢