网络开发概述
- 网络结构
- html的发展
- svg
- html的结构
html
- deal with oldBroser
- general elements
- links
- picture
- sound
- video
- void
- table
- form
- grouping
css
- anchor
- style properties
- pseudo classes
homework
推荐工具资料

本文是香港中文大学《Full Stack Web Development》系列课程中的笔记

网络开发概述

网络结构

html一般用于组织网页的文字、图片、视频
css是组织html的格式
JavaScript负责网页的动态交互

html的发展

传统的html与spa(singular page application)的不同
spa(single page application) ask for data not for page.

svg

comparision

svg: graph approach, few libraries
html: text approach,many libraries

html的结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" name="description" content="an example"><title>Document</title><link rel="stylesheet" href="stylerules.css">   <style>body  {background-color:yellow}</style><script>function surprise() {alert("Hello");}</script><script src="mycode.js"></scrpt>
</head><body>
</body></html>

html

deal with oldBroser

general elements

links

<a href="" id="" >gmail</a>
<a href=""><img src=".jpg"></a>
<a name="#here">go here</a>
<a name="webpage.html#here">go here</a>

备注：
关于id和name属性，一般情况下建议用id，只有在与表单form交互时必须用name，另外上面代码中的网页内锚点也用name。

picture

<img src=".jpg" width="300" height="50%">

备注：
1. width的单位是像素
2. 只设置height的百分比的话保证原图的比例

sound

< audio src=".mp3" autoplay controls loop alt="description">< /auto>

video

备注：
1. h1有被误用的情况，即被用来调整字体大小。但其本身是表示语意的，因此有了section。
2. i和em都有倾斜的效果，但是第二个有语意强调的意思。同理，b和strong都有加粗的效果，但是后者也有强调的意思。这些对于搜索引擎的检索式很有用的。

< video src=".mpr" autoplay controls loop alt="for disabled people">< /vidio>

void

void element

<meta name="description" content="an example" charset="UTF-8">
<br>
<wbr>
<hr>
<img>
<input>

注意：
1. hr带有水平分割线，wbr适合将比较长的单词智能分开
2. input处理forms

table

form

form这里需要注意一下几点：
1. action=”.php”指向form操作的程序
2. method有get和post两种，默认采用get，一般来说，get不传输文件，并且get的信息不保密，会在url上显示。
3. 传输文件的时候要加上enctype="multipart/form-data"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="url" method="get">
<!-- checkbox --><input type="checkbox" name="items1" value="a">a<br><input type="checkbox" name="items2"  value="b">b<br><input type="checkbox" name="items3" value="c">c<br>
<!-- radio --><input type="radio" name="ip" value="a">a<br><input type="radio" name="ip" value="b">b<br><input type="radio" name="ip" value="c">c<br>
<!-- password --><input type="password" name="pw"><br>
<!-- select --><select name="cities" id=""><option value="hk">HK</option><option value="vc">C</option><option value="sf">SF</option></select><br>
<!-- attributes --><label for="firstname">First Name:</label><input type="text" name="firstname" value="dave" autofocus><br><label for="lastname">Last Name</label><input type="text" name="lastname" placeholder="placeholder"><br><label for="age">age</label><input type="text" name="age" required><input type="submit">
</form><!-- file upload -->
<form action=".php" method="post" enctype="multipart/form-data"><p>select the file</p><input type="file" name="fileLoad"><p>press the button to send it</p><input type="submit" value="upload the file">
</form><!-- html5 input -->
<form action=""><label for="age">your age</label><input type="number" min="0" max="99" step="1" value="18" name="age" required><br><label for="birthday">your birthday</label><input type="date" name="birthday"><br><label for="wakeup">You wnat to wakeup at</label><input type="time" name="wakeup"><br><label for="color">your favorite color</label><input type="color" name="color"><br><label for="mood">your mood</label>Bas <input type="range" min="0" max="100" step="5" value="50" name="mood"> Good<br><input type="submit" value="submit!"><br>
</form></body>
</html>

grouping

fieldset
legend

fieldset可以将不同的部分用框框起来，并且每一个可以设置legend。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><fieldset><legend>Personal Information</legend>First name<input type="text" name="firstname"> <br>Last name<input type="text" name="lastname"> <br>
</fieldset> <br>
<fieldset><legend>Favorite things</legend>F cartoon?<input type="text" name="fc"><br>F pizza<input type="text" name="ln"><br>
</fieldset><br></body>
</html>

css

1 css file, multiple web pages
In the header, add the link to the css.

There are three different ways to add css style.

<link href="x.css" rel="stylesheet" type="text/css"><style>
body  {background-color:yellow}
</style><p style="text-align:right">lala</p>

href 值为外部资源地址，这里是css的地址
rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type 规定被链接文档的 MIME 类,这里是值为text/css

anchor

id #id
class .class
multiclass class=”c1 c2”

style properties

pseudo classes

h1:hover {color:red}
a:link
a:visited
a:active
p:empty

div for a large area
span for a small words

position:
abso
relative

form
action
method(get)
bing搜索的例子（get you can see what you type ,seeing the form in url）
cannot keep any secrets
can only handle small transmission

<form action="url" method="get"><p>please enter</p><h1></h1><textarea name="feedback" id="" cols="60" rows="3">please enter you text here</textarea><br><input type="submit" value="Send">
</form>

<form action="url" method="get">
<!-- checkbox --><input type="checkbox" name="items1" value="a">a<br><input type="checkbox" name="items2"  value="b">b<br><input type="checkbox" name="items3" value="c">c<br>
<!-- radio --><input type="radio" name="ip" value="a">a<br><input type="radio" name="ip" value="b">b<br><input type="radio" name="ip" value="c">c<br>
<!-- password --><input type="password" name="pw">
<!-- select --><select name="cities" id=""><option value="hk">HK</option><option value="vc">C</option><option value="sf">SF</option></select>
<!-- attributes --><label for="firstname">First Name:</label><input type="text" name="firstname" value="dave" autofocus><br><label for="lastname">Last Name</label><input type="text" name="lastname" placeholder="placeholder"><br><label for="age">age</label><input type="text" name="age" required><input type="submit">
</form><!-- file upload -->
<form action=".php" method="post" enctype="multipart/form-data"><p>select the file</p><input type="file" name="fileLoad"><p>press the button to send it</p><input type="submit" value="upload the file">
</form><!-- html5 input -->
<form action=""><label for="age">your age</label><input type="number" min="0" max="99" step="1" value="18" name="age" required><br><label for="birthday">your birthday</label><input type="date" name="birthday"><br><label for="wakeup">You wnat to wakeup at</label><input type="time" name="wakeup"><br><label for="color">your favorite color</label><input type="color" name="color"><br><label for="mood">your mood</label>Bas <input type="range" min="0" max="100" step="5" value="50" name="mood"> Good<br><input type="submit" value="submit!"><br>
</form>

homework


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Dating Website</title><style>fieldset {background:lightyellow;border:10px solid yellow;margin-bottom:10px;width:720px;}label {width:180px;display:inline-block;text-align:right;}.Wauto {width:auto;}.s1 {text-align:center;background: red;}.s2 {text-align:center;background: purple;}textarea {width:360px; height:50px;}label:hover {font-size:40px;}input:hover {font-size:40px;}</style></head>
<body><h1>Please Enter Your Details For Our Dating Website</h1><form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post" enctype="multipart/form-data"><fieldset><legend>Your Face</legend><label for="fileLoad">Your image:</label><input type="file" name="fileLoad" required> <br><label for="">Image preview:</label><img src="" alt="" id="preview"> <br></fieldset></form><form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="get"><fieldset><legend>Your General Details</legend><label for="name">Name:</label><input type="text" name="name" required placeholder="your full name" ><br><label for="gender">Gender:</label><input type="radio" name="gender" class="Wauto" value="male" required>Male<input type="radio" name="gender" class="Wauto" value="female" required>Female<br><label for="age">Age:</label><input type="number" name="age" required><br><label for="birthday">Date of birth:</label><input type="date" name="birthday"><br><label for="color">Favorite color:</label><input type="color" name="color"><br><label for="country">Which Counrey:</label><select name="country" id=""><option value="hk">HK</option><option value="vc">C</option><option value="sf">SF</option><option value="cn">CN</option><option value="us">US</option><option value="uk">UK</option></select><br></fieldset><fieldset><legend>Your Indicators</legend><label for="h">Height: </label><span class="s1">Short</span><input name="h" type="range" min="0" max="100"><span class="s2">Tall</span><br><label for="s">Salary:</label><span class="s1">Poor</span><input name="s" type="range" min="0" max="100"><span class="s2">Rich</span></fieldset><fieldset><legend>Your Contact Information</legend><label for="email">Email:</label><input type="email" name="email" required><br><label for="mb">Mobile:</label><input type="tel" name="mb"><br><label for="ad">Address:</label><textarea name="ad" id="" ></textarea><br><label for="mtcy">Method to contact you:</label><input type="checkbox" name="mtcy" class="Wauto">Email<input type="checkbox" name="mtcy" class="Wauto">Whatsapp<input type="checkbox" name="mtcy" class="Wauto">in-app chat<b class="Wauto"r></fieldset><input type="submit" value="Submit"></form><script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js"></script>
</body>
</html>

FSWD_1_BasicHtmlCss