html标签含义
<!–…–>:定义注释
<!DOCTYPE> :定义文档类型
<html>:html文档的总标签
<head>:定义头部
<body>:定义网页内容
<script>:定义脚本
<div>:division,定义分区,容器标签
<p>:paragraph,定义段落
<a>:定义超链接
<span>:定义文本容器
<br>:换行
<form>:定义表单
<table>:定义表格
<th>:定义表头
<tr>:表的行
<td>:表的列
<b>:定义粗体字
<img>:定义图片
标签使用注意点
在head中引入css和javascript,eg:
<head>
<script src=”../static/service_url.js”></script>
<script src=”../static/registUtil.js”></script>
<script src=”../static/httpUtil.js”></script>
<link rel=”stylesheet” media=”all” href=”../static/loginStyle.css” />
</head>
<img>添加alt属性,表示图片不可用时显示该文本,eg:
<div class="logo"><a href="#"><img src="../static/tusvision.jpg" alt="Logo" /></a></div>
使用before/after伪元素时可以插入字体图标,可以使用icomoon将指定图标生成字体,如下为在内容前显示字体图标
.ic-user:before {
content: “\E65E”
}
div与span区别:
div:指定渲染HTML的容器
span:指定内嵌文本容器
通俗地讲就是如果里面还有其他标签的时候就用div,如果里面只有文本就应该用span
div是一个块级元素,用来为HTML文档内大块的内容提供结构和背景
span是行内元素,在行内定义一个区域(也就是一行内可以被划分好几个区域)
div标签中可以镶嵌span标签,(div可以看做是一个大容器,span是一个小容器,大容器当然可以放下一个小容器啦
实现标签的可见与不可见:
1.标签不占布局
style.display = “block”;
style.display = “none”;
2.标签占布局
style.visibility = “visible”;
style.visibility = “hidden”;
javascript中定义全局变量的方法:
1.创建config.js,其中内容如下:
var serviceBaseURL = 'https://host:domain/path/fileName';
localStorage.setItem('serviceBaseURL',serviceBaseURL);
2.在其他js中直接调用
localStorage.getItem('serviceBaseURL')
XMLHttpRequest发送请求时可以将函数作为参数传进去,等接收到响应时调用该函数-实现回调函数功能。
document.getElementsByClassName(className)返回所有声明了className的标签,即返回的是标签数组。
可以将标签的id当作参数传入函数以便对该标签进行访问(适用于同种类型的标签-如标签和name均一样,但是id不一样,可以定义同一个点击函数,将id当作参数传入函数以便作为不同响应)
某一行中部分字体颜色改变可以使用<span>,eg:
<span >注:标记</span>
<span style="color: red">*</span>
<span>的为必填项!</span>
javascript不支持重载,如果在javascript中定义了两个名字相同的函数,则该名字只属于后定义的函数。
使用XMLHttpRequest发送http请求,若返回响应数据为json或json数组,需要进行转换,方法如下:
1.返回json数据,将text转换为Json:
var data_json = eval('(' + text + ')');
var str1 = data_json.title
var str1 = data_json.content
2.返回json数组,将text转换为JsonArray:
var datas = eval(response);
for(var i=0;i< datas.length;i++){
var str1 = adatas[i].title;
var str2 = adatas[i].content;
}
实现部分布局不随网页滚动而改变位置(如导航菜单保持不变):
style="position:fixed; z-index: 20;"
不随网页滚动后的导航兰刚进入网页时会遮挡下面部分内容,可以在两者间添加如下代码:
.blank{ clear:both; overflow:hidden; display:block; overflow:hidden;}
<span class="blank" style="height:70px;"></span>
html中使用轮播图:
如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>