FSWD_1_BasicHtmlCss

用户1147754

发布于 2019-05-29 15:56:52

4020

发布于 2019-05-29 15:56:52

文章被收录于专栏：YoungGy

本文是中国香港中文大学《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

tabl

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>