一、页面js,style复用,命名规范

1.CSS的全称是什么?

Cascading Style Sheets
层叠样式表CSS是一种样式表语言,用于为HTML文档定义布局,对HTML进行美化,修饰HTML页面,提高用户体验,
例如,CSS涉及字体、颜色、边距、高 度、宽 度、背景图像、高级定位等方面

1.下载SinaEditor

二、注意标签缩进

2.CSS有几种引入方式? link 和@import 有什么区别?

2.JSP调用页面

三、将页面中的图片统一进行处理,合并,再使用style引入,获取指定图片位置中的内容

2.1 CSS总体来看有4种引入方式

  • 1.内联CSS(Inline CSS)exp:<h1 style=”color:blue;”>This is a
    Blue Heading</h1>
  • 2.内部CSS(Internal CSS)在html的head中加入style标签
    <style type=”text/css”>
    li {
    background-color:green;
    }
    </style>
  • 3.外部CSS(external
    CSS)在html中引入外部链接,要使用外部的样式表,在<head>
    添加一个链接到它的HTML页面的部分:
    exp:
    <link rel=”stylesheet” href=”styles.css”> </head>
  • 4.导入CSS@import url()
    @import url()

复制代码 代码如下:

<html>
<head>
<style>
.TCLogo { 
width:146px; 
height:36px; 
background-image:url(原图.png); 
background-attachment:fixed; 
background-position:-100px -87px; 
background-repeat:no-repeat; 
}
</style>
</head>
<body>
<div class='TCLogo'>
</div>
</body>
</html>

2.2 link与@import的区别

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别

  • 1.link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  • 2.加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时性能较差
  • 3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题
  • 4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

<textarea name=”problemBody” id=”content” style=”display:none;”
textarea>
<iframe src=”<%=request.getContextPath()
%>/edit/editor.htm?id=content&ReadCookie=0″ frameBorder=”0″
marginHeight=”0″ marginWidth=”0″ scrolling=”No” width=”621″
height=”457″></iframe>

原图.png (上传于2017-04-24
10:43:15)
澳门新葡萄京官网注册 1

3.以下这几种文件路径分别用在什么地方,代表什么意思?

  • 3.1.相对路径css/a.css 当前目录下的css文件夹中的a.css
    澳门新葡萄京官网注册,./css/a.css 当前目录中css文件夹中的a.css文件
    b.css 当前目录下的b.css文件
    ../imgs/a.png 上级目录中的imgs 文件夹中的a图片
  • 3.2.绝对路径(本地文件的绝对地址)/User/hunger/project/css/a.css
    本地绝对路径中的a.css文件
  • 3.3.网站路径/static/css/a.css
    网站中也可以使用相对路径http://cdn.jirengu.com/kejian1/8-1.png17
    网络中的路径

其中,src=”<%=request.getContextPath()
%>/edit/editor.htm表示下载的SinaEditor中的editor.htm文件路径;带绿色的两处ID须一致

效果图.png (上传于2017-04-24
10:43:15)
澳门新葡萄京官网注册 2

4.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

思路:将本地图片上传,通过浏览器加载server中文件夹内的图片上传完成后,当图片所在文件夹与html展示页面在同级目录中时,我们可以通过相对路径直接调用展示比如:img
src=”url” alt=”some_text”
style=”width:width;height:height;”这里的url是对应的相对路径比如html5.gif
如果在另外一台服务器中:img
src=”http://www.w3schools.comw3schools_green.jpg”
alt=”W3Schools.com”[图片上传中。。。(1)]
可采用网络路径直接引入

3.下载的editor下包含有img.htm和attach.htm,其中第一个为上传图片的,第二个是上传附件的,当然两个是一样的使用方法,都可看做上传文件的。

——————————– 作者在 2017-04-24 10:45:33 补充以下内容

原图和style引自百度问题

5.列出5条以上html和 css 的书写规范

  • 1.HTML的标签尽量使用有语义标签比如header,content,footer,img,p等,类别名layout,container,navigation等等
  • 2.不使用内联样式的style元素定义样式,建议采用外部css
  • 3.html标签嵌套应使用tab键缩进,嵌套结构清晰明了
  • 4.每套css用大括号{}包裹,间隔一行
  • 5.语句结束以分号(;)结束

4.下面是img.htm中上传图片的一个示例。做记载方便下次使用。

6.截图介绍 chrome 开发者工具的功能区

澳门新葡萄京官网注册 3

Paste_Image.png

转载自《饥人谷官网》

复制代码 代码如下:

function chk_imgpath () {
    if($(‘radio1’).checked==true){
   if($(“imgpath”).value == “http://” || $(“imgpath”).value == “”) {
    window.close();
    return;
   }
   LoadIMG($(“imgpath”).value);
    }else{
       if($(“file1”).value == “”) {
       alert(“请选择上传图片文件!”);
       return;
       }
       var filepath = j(“#file1”).val();
       var filetype = filepath.substring(filepath.lastIndexOf(‘.’));
       var regu = “.gif.jpg.png.jpge.GIF.JPG.PNG”;    

    if (regu.indexOf(filetype) == -1) {    
         alert(‘只允许上传.gif.jpg.png.jpge 类型文件!’);
         return ;   
     }
     var f = j(‘#form1’);
     j.ajaxFileUpload({
             type : ‘POST’,
             secureuri : false,
             fileElementId : ‘file1’,
             url : ‘/ask/fileUpload?type=img’,
             dataType : ‘String’,
             success : function(data){
              j(“#imgpath”).attr(“value”,data);
                  j(“#radio1”).attr(“checked”,”true”);
                   chk_imgpath();
                   $(‘divProcessing’).style.display=”;
             },
             error : function(data){
                 alert(‘文件上传失败’);
             }
           });
    }
  }

5.后台代码编写(不做叙述)

2.JSP调用页面 复制代码 代码如下:
textarea name=”problemBody” id=”content” style=”display:none;” textarea
iframe src=”%=request.getContextPath() %/edi…