HTML+CSS
Website consists of three components: structure(HTML), representation(CSS), action(Javascript). XHTML is a strict version of HTML. The structure of webpage is previously done based on table, but currently via CSS.
Escape character in HTML source code:
<:<,>:>, :space<p>:paragraph,<br>:break,<blockquote>:indented paragraph,<b>:bold,<i>:italic,<u>:underline,<s>:deleteline,<strong>:emphasize,<ul><li>:unordered list,<ol><li>:ordered list.<a href="" target="_blank"></a>:hyperlink.<a href="mailto:ustcnewly@gmail.com"></a>. An area on the image can also be used to establish hyperlink based on<map>and<ared>.Use
<frameset>and<frame>to split webpage. Note<frameset>and<frame>belong to the the same level as<body>.<frameset cols="30%, 30%, *"><frame src=left.html>.<frame>is obsolete in HTML5.<table border="1" cellpadding="4" cellspacing="6" ><tr><td></td><tr></tr></table>. Don’t miss any<tr>or<td>, otherwise the table will be messy. Use<colspan>or<rowspan>to merge cells. For professional table, we can use<caption>,<thead>,<tbody>, and<tfoot>.<table>is now rarely used for layout design.Insert multimedia elements:
- image:
<img src="a.jpg" height="200" width="200" alt="desc"/> - flash:
<embed src="a.swf" width="490" height="400" wmode="transparent" ></embed> - bgmusic:
<audio src="a.mp3" hidden="true" autoplay="true" loop="true"></audio> - bgtile:
<body background="a.png"></body>
- image:
Css: object, attribute, and value. Refer to official website for details.
1
2
3
4
5
6
7
8
9
10
11
12
13
14h1{
font-family:Calibri;
}
.myclass{
font-family:Calibri;
}
<p class="myclass"></p>
#myid{
font-family:Calibri;
}
<p id="myid"></p>
# one id name should be used only once in one html file.Methods to use Css.
a. Directly insert contents into
<style></style>.b.
<link href="mycss.css" type="text/css" rel="stylesheet">c.
<style type="text/css">@import "mycss.css"</style>. One html file can import more than one Css files. A Css file can also import other Css files.The priority of a is higher than b/c. The more special, the higher priority. For the methods with equal priority, override principle is applied. The difference between b and c is that c loads all the Css codes while b only loads the corresponding Css code when necessary.
Some special usage of Css.
- class for specific tag:
p.special{} - union of multiple tags:
h1,h2,p{} - embeded tags:
p span{}for descendents andp>span{}for child. complex embedding mixing tags, classes, and ids:td.out .inside strong{}. The easiest way to recognize this kind of embedding is “(tag)(.class) (tag)(#id)” - consecutive tags:
th+td+td+td{}, the style is applied to the thirdtd.
- class for specific tag:
Css formats for some commonly used tags.
- body:
1
2
3
4
5
6
7
8body{
background-image:a.jpg;
background-repeat:no-repeat;
background-position:200px 100px;
background-attachment:fixed;
background-size: 20% 100%;
cursor:pointer;
} - text:
1
2
3
4
5
6
7
8
9
10
11
12
13p{
float:left;
font-family:Calibri;
font-size:15px;
font-style:italic;
font-weight:bold;
color:red;
text-indent:2em;
text-decoration:underline;
text-transform:lowercase; #capitalize
text-align:justify;
margin:5px 0px #top/down margin left/right margin
} - image:
1
2
3
4
5img{
float:left;
border:1px #9999CC dashed;
margin:5px; #margin-left/right/top/bottom
}
- body:
<div>box layout from inside to outside: content, padding, border, margin. Notewidthandheightare for content instead of the whole box. margin can be assigned negative values. Assigning attribute values in clock-wise order. Missing values are equal to the values of opposite side. We should first understand the standard flow without the constraints of boxes.- block-level (vertical arrangement):
<ul>,<li>,<div> inline (horizontal arrangement):
<strong>,<a>,<span><div>and<span>are both blocks.<div>is vertial while<span>is horizontal.<span>can be used where no other proper tags can be used,s for instance,<span><img src="a.jpg"></span>.when using
<div>, the margin between the top block and bottom block is max(top_block.bottom_margin,bottom_block.top_margin). when using<span>, the margin between the top block and bottom block is top_block.bottom_margin+bottom_block.top_margin.
- block-level (vertical arrangement):
floating box: Arrange the non-floating boxes first and then float the floating box to the left or right in the father content. The stuff in the non-floating boxes surrounds the floating box. For floating box:
float:left. For non-floating box:clear:left.box location: static(default), relative, absolute
relative:
position:relative; left:30px; top:30px. Relative shift from original position. Relative has no impact on father box and sibling box.absolute:
position:absolute; top:0px; right:0px. Absolute coordinate in the nearest non-static ancestor. Other boxes treat this absolute box as non-existence.
<div style="display:inline"></div>,<span style="display:block"></span>, use display to modifiy the vertical or horizontal order. Set asnoneto make it invisible.For hyperlink,
ahas pseudo classes:link,visited,hover, for example:1
2
3
4
5#navigation li a:link, #navigation li a:visited
{
background-color:#1136c1;
color:#FFFFFF;
}Use
divto split columnsabsolute method: left column uses absolute position (Note to change the position of father div to relative) and right column use left margin. The drawback is that bottom row will ignore the left column.
float method: float left and float right. It is easy for fixed width or fixed ratio. For the mixed width such as
100%-30px, use the wrapper trick (negative margin).
JavaScript
1 | <script> |
variable types
null: empty variable- string:
parseFloat(string),parseInt(string),str.substring(0,3),str.slice(3,5),str.charAt(0),str.bold(),str.fontcolor("red"),str.length - number:
Math.PI,Math.max,isNaN(value), - bool:
trueorfalse Array: can be a mixture of numbers and strings,
var a = new Array(10, 20, "newly")1
2
3
4for(n in actorAry)
{
document.write("<li>"+actorAry[n]);
}myarr.toString(),myarr.join('-'),myarr.concat(tailarr),myarr.reverse(),myarr.sort(cmpfunc),slice,splice
stack&&queue operations:myarr.push("newstr"),myarr.pop(),myarr.shift()(dequeue),myarr.unshift()(pushfront)Structure: There is no concept: class. Use function to construct an object.
var mycard = Card("newly", 20),showCardInof.call(mycard,arg1,arg2)ormycard.showCardInfo(arg1,arg2),mycard=null1
2
3
4
5
6
7
8
9
10
11
12
13function showCardInfo(arg1,arg2)
{
document.write(this.owner);
}
function Card(owner, rate)
{
this.owner = owner;
this.rate = rate;
this.showCardInfo=function(arg1,arg2)
{
document.write(this.owner);
}
}type related:
nameList instanceof Array,typeof("newly")
commonly used built-in functions or classes
alert dialogue:
alert("msg")input diaglogue:
var age=prompt("Input your age", "0")confirm dialogue:
confirm("Are you sure?")Date and time:
1
2
3var cur = new Date();
cur.setYear(2016);
var seconds = cur.getSeconds();- Error:
1
2var e = new Error();
document.write(e.number&0xFFFF+e.description);
operate on the html elements
<img src="./images/web_fig.jpg" width=500px>The whole HTML page is a DOM tree.
Visit the DOM elements
1
2
3
4
5document.myform.elements[0].value //myform is the form name
document.getElementById("myid").childNodes[0].nodeName/nodeValue/nodeType
document.getElementById("myid").childNodes[0].getAttribute("attr")/setAttribute("attr","attval")
document.getElementsByTagName("tag")
document.getElementsByName("name")Since
idis unique, we use single form element forId, but plural form elements forNameandTagName.Change the DOM elements
1
2
3
4
5var docBody = document.getElementById("DocBody");
var imgObj = document.createElement("<img>");
var newTextNode = document.createElement("content");
imgObj.src = url;
docBody.appendChild(imgObj);
use Javascript to modify the CSS style,
document.vlinkColor,document.linkColor,document.alinkColor,document.bgColor,document.fgColor,document.body.text,name1.vspace,name1.hspace.event handling: we can set event triggering function for certain element or a class of elements.
- commonly used events (case insensitive):
onblur,onchange,onclick,onfocus,onload,onmouseover,onmouseout,onmousedown,onmouseup,onselect,onsubmit,onunload. Form-related events:myform.onReset,myform.onSubmit,myform.action="mailto:ustcnewly@gmail.com" - three approaches to trigger event function
a) directly embed function scripts:onlick="javascript:alert("msg")"//javascript:can be eliminated
b) call the event function:onkeyup = "OnKeyUp()"c) set the event attribute for certain elements:1
2
3
4
5
6
7
8function OnKeyUp(_e)
{
var e = _e?_e:window.event;
if (event.keyCode==13)
{
alert("Your input is "+Text1.value);
}
}1
2
3
4<script for="document" event="oncontextmenu">
window.event.returnValue = false;
document.oncontextmenu = hideContextMenu2;
</script>;
- commonly used events (case insensitive):
time control:
to=window.setTimeout("func()",3000),clearTimeout(to),tm=setInterval("func()",1000),clearInterval(tm)redirect href location or set anchor point:
window.location.href="www.baidu.com",<a name="anchor1"></a>history:
history.back(),history.forward(),history.go(n), n>0 means go back n pages, otherwise go forward n pages.cookie contains key-value pairs:
document.cookie="user=newly;passwd=hehe;"