您的位置：首页 > Web前端 > JavaScript

前端基础 HTML+CSS+JavaScript

2018-03-25 18:49 761 查看

前端基础 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>
4000
;定义式列表
<dd>
</dl>

4.特殊字符

在html中><&”这几个符号是html的控制码所以标示方式需要改变：

< 在屏幕上<
> 在屏幕上>
& 在屏幕上&
" 在屏幕上"

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航