Nick's Blog

网页基础教程第二讲 HTML基础2

这里是901站为大家带来的网页基础教学。版权所有。

第二讲:HTML基础2

本篇将主要介绍HTML中的字体修饰(strong, em),列表(list),表格(table),CSS(字形,颜色,大小简单介绍),

本教程会针对实用性进行讲解,唯一目的就是教会你如何用HTML制作网页。

1. 字体修饰

<p>This is test paragraph</p>是一行文字,在HTML中显示如下:

This is test paragraph

如果在文字前后加上strong,字体会加粗:

<strong><p>This is test paragraph</p></strong>
This is test paragraph

如果在文前后加上em,会变成斜体

<em><p>This is test paragraph</p></em>
This is test paragraph

2. 列表

列表分为有序排列(ordered list)和无序排列(unordered list)

a. 有序排列(ordered list)用<ol></ol>:

<strong><p>901站HTML教程</p></strong>
<ol>
<li>网页制作</li>
<li>网页美化</li>
<li>网页设计</li>
</ol>

901站HTML教程

  1. 网页制作
  2. 网页美化
  3. 网页设计

b. 无序排列(unordered list)用<ul></ul>

<strong><p>901站HTML教程</p></strong>
<ul>
<li>网页制作</li>
<li>网页美化</li>
<li>网页设计</li>
</ul>
901站HTML教程

3. 表格 (table)

写入表格的基本格式:

<table border=”1px”>
<tr>
<td>China City</td>
<td>Bei Jing</td>
</tr>
<tr>
<td>United States City</td>
<td>New York</td>
</tr>
<tr>
<td>United Kingdom City</td>
<td>London</td>
</tr>
</table>

China City Bei Jing
United States City New York
United Kingdom City London

4. css (字形,颜色,大小简单介绍)

字形用font-family来体现

<p style=”font-family: Arial Black”>This is test paragraph</p>

This is test paragraph

颜色用color来体现

<p style=”color: red”>This is test paragraph</p>

This is test paragraph

字体大小用font-size来体现

<p style=”font-size: 20px”>This is test paragraph</p>

This is test paragraph

作业:

编辑一个网页包含了图片,文字,有序列表和无序列表,表格和css样式

答案:

<!DOCTYPE html>

<html>

<head>

<title>My Name</title>

</head>

<body>

        <p style=”font-family: Arial black; font-size: 20px; color:Red”>My Proflies</p>

        <img src=”http://i1061.photobucket.com/albums/t480/ericqweinstein/ninja_zpsa5dbe37a.jpg” width=”100″ height=”75″/>

        <ul>

            <strong><li>Interests</li></strong>

                <em>

                <ol>

                    <li>computer</li>

                    <li>web design</li>

                </ol>

                </em>

            <li>Jobs</li>

                <ol>

                    <li>Teacher</li>

                    <li>Computer Engineer</li>

                </ol>

            <li>Favorite</li>

                <ul>

                    <li>Sports</li>

                    <li>Programming</li>

                </ul>

        </ul>

        <table border=1px>

            <tr>

                <td>China City</td>

                <td>Beijing</td>

            </tr>

            <tr>

                <td>US City</td>

                <td>New York</td>

            </tr>

        </table>

</body>

</html>

真实网页:

My Name

My Proflies

 

  1. computer
  2. web design

China City Beijing
US City New York