`

web前端开发之html5,css与jQuery

 
阅读更多

在web前端开发中，利用WebStorm编程软件 我们经常会用到html5，css与jQuery

 

我们大多会用html5来进行页面框架的搭建，通过引入css来满足网页越来越丰富的表现力，通过引入javascript来实现事件，从而做出漂亮的网页

 

一  html

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">//在head下引入css，js文件
    <title></title>//网页标题
</head>
<body>
//html主体内容
</body>
</html>

 

在html中，标签分为有语义与无语意之分，比如 div 与 span 是无语意的，我们推荐使用语意化标签：

 

传统的布局方式是在Dreamweaver 中拖拽表格来布局，门槛不高，并不需要手写代码，并不需要工程师来做，设计师足以胜任，生成网页速度很快，但是缺点很明显：

 

通过这种方式生成的代码量非常大，含有大量的table，tr，td 标签，我们看不到页面真正需要的语意，只能通过视觉效果可以判断内容的语意，但是搜索引擎只看代码，所以这种布局搜索引擎对其并不友好，随着人们迫切需要网页更强的表现力，我们需要使用 div+css 布局：

 

二  css

 

css布局代码量少，结构精简，语意清晰，对搜索引擎更友好。css很强大，一般情况下，我们可以随心所欲的控制页面内几乎所有可见元素的样式

 

1,link标签引入

 

<link type="text/css" href="css/Bootstrap-v3.3.2.css" rel="stylesheet">
//引入本地css文件

 

2,写在style标签里（一般写在head 标签里）

 

<head>
    <style>
        h1 {
          font-size: 12px;
        }
    </style>
</head>

 

3,内联属性（直接在标签里控制样式）

 

<h1 style="font-size: 12px;">我的字号被修改了</h1>

 

判断网页标签是否语意良好的简单方法：

 

去掉样式，看网页结构是否组织良好有序，是否具有良好的可读性。

 

三  jQuery

 

jQuery是目前最受欢迎的javascript库，它解决了跨浏览器的兼容问题，简化了HTML与javascript之间的操作

 

1,引入jQuery库

 

<script type="text/javascript" src="fream/jquery-2.1.3.js"></script>
//引入本地jQuery库
<script type="text/javascript" src="script/addProperty.js"></script>
//引入本地js文件

 

2,jQuery选择器与事件绑定

 

<button>我是一个按钮</button>

$('button').on('click',function(){ //click表示鼠标点击操作
    alert('点击成功'); //这里是当鼠标点击该按钮后，将要执行的程序
})

 

我们也可以在引入js文件后，可以利用script标签调用我们写好的js代码

 

 

<script>
    addPrototypeMain();//调用js文件中的函数
</script>
 

 

在编写js代码时候，我们需要使用一些方法来简化我们的代码，我们需要引用这些js库文件

 

<script type="text/javascript" src="fream/underscore-min.js"></script>//引入underscore

 

 

分享到：
| clean code 之代码格式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics