网页基础教程第二讲 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样式

答案：

真实网页：

My Name

My Proflies

 

• Interests

1. computer
2. web design

• Jobs
  1. Teacher
  2. Computer Engineer

• Favorite
  • Sports
  • Programming

China City	Beijing
US City	New York