【045】HTML初学 - McDelfino

顺晟科技

2022-09-15 22:14:22

187

【045】HTML初学

●·● 表格（Table）：

数学物理数学物理数学数学理科综合

课程表
	星期一	星期二	星期三	星期四	星期五	星期六	星期日	第一节	第二节

化学物理

数学物理今天连上两节课

语文
英语

第三节数学物理数学物理数学第四节数学物理数学物理数学

上面实现代码：

View Code

    <table border="4" cellspacing="0" cellpadding="0" width="700" 
        bgcolor="#FF9933" style="font-family:微软雅黑" 
        background="http://img.blog.163.com/photo/OoY9IQpDIiARTzjN732F3Q==/2297117284936237964.jpg">
    <caption style="font-size:x-large; font-weight: bold;">课程表</caption>
        <tr>
            <th width="100" height="30">&nbsp;</th>
            <th width="100">星期一</th>
            <th width="120">星期二</th>
            <th width="100">星期三</th>
            <th width="100">星期四</th>
            <th width="200">星期五</th>
            <th width="100">星期六</th>
            <th width="100">星期日</th>
        </tr>
        <tr>
            <th align="center" height="25">第一节</th>
            <td align="center">数学</td>
            <td align="center">物理</td>
            <td align="center">数学</td>
            <td align="center">物理</td>
            <td align="center">数学</td>
            <td align="center" colspan="2" rowspan="4" 
            style="font-size:xx-large; font-weight: bold"
            background="http://img.article.pchome.net/00/31/50/87/pic_lib/wm/1415470.jpg">
            &nbsp;</td>
        </tr>
        <tr>
            <th align="center" height="60">第二节</th>
            <td align="center">数学</td>
            <td align="center">
            理科综合
                <table border="1" width="100">
                    <tr>
                        <td align="center">化学</td>
                        <td align="center">物理</td>
                    </tr>
                </table>
            </td>
            <td align="center">数学</td>
            <td align="center">物理</td>
            <td>今天连上两节课
                <ol>
                    <li>语文</li>
                    <li>英语</li>
                </ol>
            </td> 
        </tr>
        <tr>
            <th align="center" height="30">第三节</th>
            <td align="center">数学</td>
            <td align="center">物理</td>
            <td align="center">数学</td>
            <td align="center">物理</td>
            <td align="center">数学</td>
        </tr>
        <tr>
            <th align="center" height="25">第四节</th>
            <td align="center">数学</td>
            <td align="center">物理</td>
            <td align="center">数学</td>
            <td align="center">物理</td>
            <td align="center">数学</td>
        </tr>
    </table>

●·● 表单（Form）：

        <textarea rows="10" cols="30">写点东西吧...</textarea>

健康信息：

    <fieldset>
        <legend>健康信息：</legend>
        <form>
            <label>身高：<input type="text" /></label>
            <label>体重：<input type="text" /></label>
        </form>
    </fieldset>

●·● optgroup：

上面的实现代码：

<html>
<body>

<select size="9">
      <optgroup label="亚洲">
      <option value="china">中国</option>
      <option value="japan">日本</option>
      </optgroup>

      <optgroup label="美洲">
      <option value="america">美国</option>
      <option value="canada">加拿大</option>
      </optgroup>

      <optgroup label="欧洲">
      <option value="england">英格兰</option>
      <option value="france">法国</option>
      </optgroup>
</select>

</body>
</html>

●·● 标签选择器 & class选择器：

Good Morning~~~~

div-Class

Baidu a-Class

实现代码如下

<head>
    <title></title>
    <style type="text/css">
        a{font-family:Courier New;font-size:medium;color:Red;}
        .waring{background:Yellow;}
    </style>
</head>
<body>
    <a>Good Morning~~~~</a>
    <div class="waring">div-Class</div>
    <a href="http://www.baidu.com">Baidu</a>
    <br />
    <a class="waring">a-Class</a>
</body>
</html>

●·● 调用CSS文件：

Baidu

新建*.css文件

a:visited{text-decoration:none}
a:active{text-decoration:none}
a:link{text-decoration:none}　　
a:hover{text-decoration:underline}　　　　悬浮

调用上边的文件

<html>
<head>
    <title></title>
    <link type="text/css" rel="Stylesheet" href="/font.css" />　　<!--调用上面的文件-->
</head>
<body>
    <a href="http://www.baidu.com">Baidu</a>
</body>
</html>

●·● 定时刷新（meta）：

效果：http://www.w3school.com.cn/tiy/t.asp?f=html_redirect

实现如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh"
content="5;url=http://www.w3school.com.cn">
</head>

<body>
</body>
</html>

上一篇：html lang=\"zh-cn\ 下一篇：HTML练习

网站建设

Html