eb前端开发技术(山东联盟)知到章节测验答案
第一章 单元测试
1、设计JavaScript的公司是()。
A:Microsoft
B:Google
C:Netscape
D:Sun
答案: 【Netscape】
2、访问FTP站点使用的协议类型是()。
A:https
B:mailto
C:ftp
D:http
答案: 【ftp】
3、以下属于常用的主流浏览器软件的是()。
A:QQ
B:Firefox
C:Chrome
D:IE
答案: 【Firefox;
Chrome;
IE】
4、Web的特点主要有()。
A:与平台无关性
B:动态性
C:分布式结构
D:交互性
E:易导航和图形化的界面
答案: 【与平台无关性;
动态性;
分布式结构;
交互性;
易导航和图形化的界面】
5、超链接的目标必须是一个网页。
A:对
B:错
、 HTML语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language),它不是一种编程语言,而是一种使用一套标记标签(markup tag)来标记元素作用的标记语言,标记语言使用标记标签来描述网页的内容。标记标签不会出现在页面中,只有标签中的内容才会显示在页面上。
二、 HTML标签和HTML元素
HTML 标记标签通常被称为 HTML 标签 (HTML tag),是由一对尖括号括起来的关键词,称为标签名,如 <html>、<a>、<h1>。标签不区分大小写,但是推荐使用小写,(X)HTML 版本中强制使用小写,这样更加严谨。
标签的标记分为起始标签和结束标签。HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有内容。
起始标签用于标记对应HTML元素的开始位置,结束标签用于标记HTML元素的结束位置。
标签分为单标签和双标签,都需要起始标签和结束标签,不同的是单标签起始、结束标签都写在一个尖括号里而双标签则分别写在两个尖括号里。单标签又称为空标签,双标签又称为闭合标签。单标签的结束标签就是在标签的右尖括号前面一个反斜杠,如<br />就是一个单标签,双标签的结束标签就是在左尖括号后比开始标签多了一个反斜杠,如<html>和</html>就是一对开始标签和结束标签。
三、 HTML元素的分类
不同的HTML标签对应的HTML元素可以根据位置特征等分为两类:
四、 标签嵌套
双标签的开始标签和结束标签之间可以嵌套其他标签,不过需要遵循以下规则:
1、两个标签嵌套时必须确保开始标签和结束标签的层级是一致的,即开始标签在外层的结束标签必须在外层;
2、建议书写HTML文本时嵌套标签的内层标签相对外层标签进行缩进以体现嵌套关系;
3、块元素标签可以包含行元素标签,但行元素标签不能包含块元素标签,它们只能包含其它的行元素标签;
4、a标签想要用hover必须把它的路径写全;
5、伪类(hover/link/visited/active)只能加给a标签,在支持 CSS 的浏览器中,伪类表示链接的不同状态,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态:
1)link用在为访问的连接上;
2)visited用在已经访问过的连接上;
3)hover用于鼠标光标置于其上的连接;
4)active用于获得焦点(比如,被点击)的连接上。
6、块元素标签之间:
1)h1、h2、h3、h4、h5、h6、p、dt标签内不能再嵌套块标签;
2)li元素可以嵌入ul, ol, div;
3)div内可以再嵌套其他块元素;
4)块元素嵌套其他标签时,同一层级必须都是块元素,或必须都是行元素,不能一部分是块元素,一部分是行元素。如<div><span></span><p></p></div>这种模式是错误的,因为span是行元素,p是块元素,所以这个是错误的嵌套。
虽然标签可以嵌套,但为了提高浏览器的渲染效率,应该尽量少使用标签嵌套。
五、 标签的属性
HTML 标签可以拥有属性,属性为HTML元素提供的更多的附加信息, 属性只能在开始标签中使用,总是以名称/值对的形式出现,属性与属性之间需要用空格隔开,属性使用小写。常用的属性有class(样式类)、id(属性名)、style(显示风格)、title(标题)、align(对齐方式)、bgcolor(背景色)、color(颜色)。
如:
。
内容是《Web前端开发之Javascript视频》的课件,请配合大师哥《Javascript》视频课程学习。
在HTML中,任何元素都可以被编辑;启用编辑功能:HTML标签设置contenteditable属性,或者在Javascript中设置该元素的contentEditable属性;
<div id="editor" contenteditable>单击编辑</div>
<div id="mydiv">也可编辑</div>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
</script>
元素被设置成可编辑后,除了常规的插入删除等操作外,还可以使用document.execCommand()方法对当前选择的内容进行编辑,比如,设置文本的样式,如加粗、倾斜等;
另外,有些浏览器允许键盘快捷键(如Ctrl+B加粗)来加粗当前选中的文本,Firefox使用Ctrl+B和Ctrl+I;
contenteditable也存在着兼容问题,如,当回车换行时,不同的浏览器有不同有处理,标准浏览器一般会使用div,而IE会使用p来分段,有些会使用br;所以,可以使用一个替代的方案document.execCommand()方法;如:
mydiv.addEventListener("keydown", function(e){
if(e.keyCode == 13)
document.execCommand("defaultParagraphSeparator", false, "p");
});
HTMLElement.isContentEditable属性:
只读属性返回一个布尔值:如果当前元素的内容为可编辑状态,则返回true,否则返回false;
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
console.log(mydiv.isContentEditable);
浏览器有可能为表单控件和具有contenteditable元素支持自动拼写检查;在支持该功能的浏览器中,检查可能默认开启或关闭;为元素添加spellcheck属性来显式开启拼写检查,或设置为false来显式关闭该功能;
designMode属性:
将Document对象的designMode属性设置为”on”使得整个文档可编辑,设置为”off”将恢复为只读文档;designMode属性并没有对应的HTML属性;
window.onload = function(){
document.designMode = "on";
}
如,使<iframe>内部的文档可编辑;
<iframe id="editor" src="about:blank"></iframe>
<script>
window.onload = function(){
var editor = document.getElementById("editor");
editor.contentDocument.designMode = "on";
}
</script>
document.execCommand()方法:
浏览器定义了多个文本编辑命令,但大部分没有键盘快捷键;为了执行这些命令,可以使用Document对象的execCommand()方法;当HTML文档切换到designMode模式或存在可编辑元素或当前选择或给出范围,就可以使用此方法运行命令来操纵内容区域的元素;
语法:bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
其返回一个Boolean值,如果是false,则表示操作不被支持或未被启用;该方法需要三个参数:aCommandName命令名称,如”bold”、”subscript”、”justifycenter”和”insertimage”等之类的字符串;aShowDefaultUI是个布尔值,表示浏览器要不要提示用户输入所需要值,一般为false;aValueArgument为用户输入的值,默认为null;
<div id="mydiv">Web前端开发</div>
<button id="btnBold">加粗</button>
<button id="btnLink">插入链接</button>
<script>
var mydiv = document.getElementById("mydiv");
mydiv.contentEditable = true;
var btnBold = document.getElementById("btnBold");
btnBold.addEventListener("click",bold, false);
function bold(){
document.execCommand("bold");
}
var btnLink = document.getElementById("btnLink");
btnLink.addEventListener("click", link, false);
function link(){
var url = prompt("输入链接URL:");
if(url)
document.execCommand("createlink", true,url);
}
</script>
命令列表:
不同的浏览器实现不同的编辑命令;只有少部分命令得到了很好的支持,所以在使用之前一定要检测浏览器是否支持该命令;
document.queryCommandSupport(command)方法:传入command命令名,返回一个布尔值,用来查询浏览器是否支持该命令;
var selectAll = document.queryCommandSupported("selectAll");
console.log(selectAll);
doument.queryCommandEnable(command)方法:传入command命令名,返回一个布尔值,查询浏览器中指定的编辑指令是否可用;
mydiv.addEventListener("mouseup",function(e){
var createLink = document.queryCommandEnabled("createLink");
console.log(createLink);
},false);
document.queryCommandState(command)方法:用来判定命令的当前状态:有一些命令如”bold”和”italic”有一个布尔值状态,开或关取决于当前选区或光标的位置;这些命令通常用工具栏上的开关按钮表示;
var flag = document.queryCommandState("bold");
console.log(flag);
document.queryCommandValue()方法:查询相关联的值,有些命令如”fontname”有一个相关联的值,字体系列名;
var fontSize = document.queryCommandValue("fontSize");
console.log(fontSize); // 默认是3
var foreColor = document.queryCommandValue("foreColor");
console.log(foreColor); // rgb(0,0,0)
document.queryCommandIndeterm(command)方法:返回一个布尔值,用于检测指定的命令是否处于不确定状态;例如,如果当前选取的文本使用了两种不同的字体,使用该方法查询”fontname”的结果是不确定的;
需要注意的是,这些编辑器生成的HTML标记很可能是杂乱无章的;
另外,一旦用户编辑了某元素的内容,就可以使用innerHTML属性得到已经编辑内容的HTML标记;如何处理这些富文本,有多种方式,可以把它存储在隐藏的表单控件中,并通过提交该表单发送到服务器,也可以保存在本地;
示例:一个HTML编辑器:
<head>
<style>
*{margin:0;padding:0; box-sizing: border-box;}
#editor{width:600px;margin:100px auto;}
#editor #toolBar1,#editor #toolBar2{width:100%;background-color: lightgray;}
img.intLink{cursor:pointer;border:none;}
#toolBar1 select{font-size:16px;}
#textBox{width:100%; height:200px; border:1px solid;padding:10px; overflow:scroll;}
#textBox #sourceText{margin:0;padding:0; min-width:498px; min-height:200px;}
</style>
<script>
var oDoc, sDefTxt;
function initDoc(){
oDoc = document.getElementById("textBox");
sDefTxt = oDoc.innerHTML;
if(document.compForm.switchMode.checked)
setDocMode(true);
}
function formatDoc(sCmd, sValue){
if(validateMode()){
document.execCommand(sCmd, false, sValue);
oDoc.focus();
}
}
function validateMode(){
if(!document.compForm.switchMode.checked)
return true;
alert("Uncheck 'Show HTML");
oDoc.focus();
return false;
}
function setDocMode(bToSource){
var oContent;
if(bToSource){
oContent = document.createTextNode(oDoc.innerHTML);
oDoc.innerHTML = "";
var oPre = document.createElement("pre");
oDoc.contentEditable = false;
oPre.id = "sourceText";
oPre.contentEditable = true;
oPre.appendChild(oContent);
oDoc.appendChild(oPre);
document.execCommand("defaultParagraphSeparator", false, "div");
}else{
if(document.all)
oDoc.innerHTML = oDoc.innerText;
else{
oContent = document.createRange();
oContent.selectNodeContents(oDoc.firstChild);
oDoc.innerHTML = oContent.toString();
}
oDoc.contentEditable = true;
}
oDoc.focus();
}
function printDoc(){
if(!validateMode())
return;
var oPrintWin = window.open("","_blank","width=450,height=450,left=400,top=100,menubar=yes,toolbar=no,scrollbars=yes");
oPrintWin.document.open();
oPrintWin.document.write("<!doctype html><html><head><title>打印<\/title><\/head><body onload='print();'>" + oDoc.innerHTML + "<\/body><\/html>");
oPrintWin.document.close();
}
</script>
</head>
<body onload="initDoc()">
<div id="editor">
<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML; return true;}return false;">
<input type="hidden" name="myDoc">
<div id="toolBar1">
<select onchange="formatDoc('formatblock',this[this.selectedIndex].value); this.selectedIndex=0;">
<option selected>-文本格式-</option>
<option value="h1">标题1 <h1></option>
<option value="h2">标题2 <h2></option>
<option value="h3">标题3 <h3></option>
<option value="h4">标题4 <h4></option>
<option value="h5">标题5 <h5></option>
<option value="h6">标题6 <h6></option>
<option value="p">段落 <p></option>
<option value="pre">预定义 <pre></option>
</select>
<select onchange="formatDoc('fontname', this[this.selectedIndex].value); this.selectedIndex=0;">
<option class="heading" selected>-字体-</option>
<option>Arial</option>
<option>Arial Black</option>
<option>Courier New</option>
<option>Times New Roman</option>
</select>
<select onchange="formatDoc('fontsize',this[this.selectedIndex].value); this.selectedIndex=0;">
<option class="heading" selected>-字号-</option>
<option value="1">非常小</option>
<option value="2">小</option>
<option value="3">正常</option>
<option value="4">中大</option>
<option value="5">大</option>
<option value="6">非常大</option>
<option value="7">最大</option>
</select>
<select onchange="formatDoc('forecolor',this[this.selectedIndex].value); this.selectedIndex=0;">
<option class="heading" selected>-颜色-</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
<select onchange="formatDoc('backcolor',this[this.selectedIndex].value); this.selectedIndex=0;">
<option class="heading" selected>-背景颜色-</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
</div>
<div id="toolBar2">
<img class="intLink" src="icons/clean.gif" onclick="if(validateMode()&&confirm('确定清除所有吗?')){oDoc.innerHTML = sDefTxt};" />
<img class="intLink" src="icons/print.png" onclick="printDoc();" />
<img class="intLink" src="icons/undo.gif" onclick="formatDoc('undo');" />
<img class="intLink" src="icons/redo.gif" onclick="formatDoc('redo');" />
<img class="intLink" src="icons/format.png" onclick="formatDoc('removeFormat');" />
<img class="intLink" src="icons/bold.gif" onclick="formatDoc('bold')" />
<img class="intLink" src="icons/italic.gif" onclick="formatDoc('italic')" />
<img class="intLink" src="icons/underline.gif" onclick="formatDoc('underline')" />
<img class="intLink" src="icons/justifyleft.gif" onclick="formatDoc('justifyleft')" />
<img class="intLink" src="icons/justifycenter.gif" onclick="formatDoc('justifycenter')" />
<img class="intLink" src="icons/justifyright.gif" onclick="formatDoc('justifyright')" />
<img class="intLink" src="icons/numberedlist.gif" onclick="formatDoc('insertorderedlist')" />
<img class="intLink" src="icons/dottedlist.gif" onclick="formatDoc('insertunorderedlist')" />
<img class="intLink" src="icons/quote.gif" onclick="formatDoc('formatblock','blockquote')" />
<img class="intLink" src="icons/outdent.gif" onclick="formatDoc('outdent')" />
<img class="intLink" src="icons/indent.gif" onclick="formatDoc('indent')" />
<img class="intLink" src="icons/hyperlink.gif" onclick="var sLnk=prompt('输入链接地址','http:\/\/'); if(sLnk&&sLnk!=''&&sLnk!='http:\/\/'){formatDoc('createlink',sLnk);}" />
<img class="intLink" src="icons/cut.gif" onclick="formatDoc('cut')" />
<img class="intLink" src="icons/copy.gif" onclick="formatDoc('copy')" />
<img class="intLink" src="icons/paste.gif" onclick="formatDoc('paste')" />
</div>
<div id="textBox" contenteditable="true"><p>富文本编辑器</p></div>
<p id="editMode">
<input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);">
<label for="switchBox">显示HTML</label>
</p>
<p><input type="submit" value="保存" /></p>
</form>
</div>
</body>
这些浏览器内置的编辑功能对用户输入少量的富文本来说,足够使用了;但要解决所有种类的文档的编辑来说,这些API还显得不足;在实际开发中,一般采用的是第三方的类库,比如百度UEditor和layui.layedit和Dojo,它们都包含了编辑器组件;
*请认真填写需求信息,我们会在24小时内与您取得联系。