html基础

2018-10-14  本文已影响0人  kathyb24

------------- 《HTML&CSS设计与构建网站》 -----------------

1. 页面结构

网页访问机制

  1. User通过Internet服务提供商（ISP），通过域名访问网站。
  2. 计算机连接到DNS的服务网络
  3. DNS服务器返回相应网页的托管Web服务器的IP

基本概念

  1. HTML页面是文本文档。
  2. 标签通常成对使用。
  3. 起始标签可以附带特性。

结构代码

<html>
<head>
    <title>This is the Title of the Page</title>
</head>
<body>
    <h1>This is the Body of the Page</h1>
    <p lang="en-us">Anything within the body of a web page is displayed in the main browser window.</p>
    <p lang="es">Es espanol.</p>

</body>
</html>

2. 文本

语义化标记：不影响网页结构，但是为页面添加额外信息，使描述更加准确

标签

example

<html>
<head>
    <title>Text</title>
</head>
<body>
    <h1>The Story in the Book</h1>
    <h2>Chapter 1</h2>
    <p>Molly had been staring out of her window for about an hour now. On her desk, lying between the copies of <i>Nature</i>, <i>New Scientist</i>, and all the other scientific journals her work had appeared in, was a well thumbed copy of <cite>On The Road</cite>. It had been Molly's favourite book since college, and the longer she spent in these four walls the more she felt she needed to be free.</p>
    <p>She had spent the last ten years in this room, sitting under a poster with an Oscar Wilde quote proclaiming that <q>Work is the refuge of people who have nothing better to do</q>. Although many considered her pioneering work, unraveling the secrets of the llama <abbr title="Deoxyribonucleic acid">DNA</abbr>, to be an outstanding achievement, Molly <em>did</em> think she had something better to do.</p>
</body>
</html>

3. 列表

列表注意有序列表，无序列表和定义列表的使用。

<html>
<head>
    <title>Lists</title>
</head>
<body>
    <h1>Scrambled Eggs</h1>
    <p>Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs.</p>
    <h2>Ingredients</h2>
    <ul>
        <li>2 eggs</li>
        <li>1tbs butter</li>
        <li>2tbs cream</li>
    </ul>
    <h2>Method</h2>
    <ol>
        <li>Melt butter in a frying pan over a medium heat</li>
        <li>Gently mix the eggs and cream in a bowl</li>
        <li>Once butter has melted add cream and eggs</li>
        <li>Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)</li>
        <li>When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)</li>
    </ol>
</body>
</html>

4. 表格

注意

example

<html>
<head>
    <title>Tables</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th scope="col">Home starter hosting</th>
                <th scope="col">Premium business hosting</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Disk space</th>
                <td>250mb</td>
                <td>1gb</td>
            </tr>
            <tr>
                <th scope="row">Bandwidth</th>
                <td>5gb per month</td>
                <td>50gb per month</td>
            </tr>
            <tr>
                <th scope="row">Email accounts</th>
                <td>3</td>
                <td>10</td>
            </tr>
            <tr>
                <th scope="row">Server</th>
                <td>Shared</td>
                <td>VPS</td>
            </tr>
            <tr>
                <th scope="row">Support</th>
                <td>Email</td>
                <td>Telephone and email</td>
            </tr>
            <tr>
                <th scope="row">Setup</th>
                <td>Free</td>
                <td>Free</td>
            </tr>
            <tr>
                <th scope="row">FTP accounts</th>
                <td>1</td>
                <td>5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td colspan="2">Sign up now and save 10%!</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

5. 链接

用法

example

<html>
<head>
    <title>Links</title>
</head>
<body>
    <h1 id="top">Film Folk</h1>
    <h2>Festival Diary</h2>
    <p>Here are some of the film festivals we will be attending this year.<br />Please <a href="mailto:filmfolk@example.org">contact us</a> if you would like more information.</p>
    <h3>January</h3>
    <p><a href="http://www.sundance.org">Sundance Film Festival</a><br />Park City, Utah, USA<br />20 - 30 January 2011</p>
    <h3>February</h3>
    <p><a href="http://www.tropfest.com">Tropfest</a><br />Sydney, Australia<br />20 February 2011</p>
    <h3>March</h3>
    <p><a href="http://sxsw.com">South by Southwest</a><br />Austin, Texas, USA<br />11 - 20 March 2011</p>
    <h3>April</h3>
    <p><a href="http://www.londonindependent.org">London Independent Film Festival</a><br />London, UK<br />15 - 24 April 2011</p>
    <h3>May</h3>
    <p><a href="http://www.festival-cannes.com">Cannes International Film Festival</a><br />Cannes, France<br />11 - 22 May 2011</p>
    <h3>June</h3>
    <p><a href="http://www.sff.org.au">Sydney Film Festival</a><br />Sydney, Australia<br />8 - 19 June 2011</p>
    <h3>July</h3>
    <p><a href="http://www.miff.com.au">Melbourne International Film Festival</a><br />Melbourne, Victoria, Australia<br />22 July - 7 August 2011</p>
    <h3>August</h3>
    <p><a href="http://www.nzff.co.nz">New Zealand International Film Festival</a><br />Dunedin, New Zealand<br />4 - 25 August 2011</p>
    <h3>September</h3>
    <p><a href="http://www.labiennale.org/en/cinema">Venice Film Festival</a><br />Venice, Italy<br />31 August - 10 September 2011</p>
    <h3>October</h3>
    <p><a href="http://www.bfi.org.uk/lff/">London Film Festival</a><br />London, UK<br />12 - 27 October 2011</p>
    <h3>November</h3>
    <p><a href="http://www.idfa.nl/industry.aspx">International Documentary Film Festival Amsterdam (IDFA)</a><br />Amsterdam, Netherlands<br />16 - 27 November 2011</p>
    <h3>December</h3>
    <p><a href="http://whistlerfilmfestival.com">Whistler Film Festival</a><br />Whistler, BC, Canada<br />30 November - 4 December 2011</p>
    <p><a href="about.html">About Film Folk</a></p>
    <p><a href="#top">Top of page</a></p>
</body>
</html>

6. 图片

7. 表单

8. Flash，视频，音频

9. 其他

上一篇 下一篇

猜你喜欢

热点阅读