xgq330409675

web前端知识点小结（一）

html标签含义

:定义注释

：定义文档类型

:html文档的总标签

:定义头部

:定义网页内容

添加alt属性，表示图片不可用时显示该文本,eg:

<div class="logo"><a href="#">"../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当作参数传入函数以便作为不同响应）

某一行中部分字体颜色改变可以使用,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


<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">
    
    <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>   
    
    <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>
    
    <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">Previousspan>
    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">Nextspan>
    a>
div> 

body>
html>

web前端知识点小结 （一）

html标签含义

你可能感兴趣的:(web前端)

web前端知识点小结（一）