alex_bn_lee

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

【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）：

1. 表单（form）是一个容纳表单元素的区域。

2. HTML <input>标签：通过 type 来定义不同的样式。

  • type="text"：文本框！value 属性的内容为文本框内显示内容。
  • type="radio"：单选按钮！通过 name 属性来分组。
  • type="checkbox"：复选框！通过 name 属性来分组。
  • type="submit"：提交按钮！
  • type="button"：普通按钮！value 属性的内容为显示内容。
  • type="password"：密码框！
  • type="image"：图片按钮！src 属性为图片地址。
  • type="reset"：重置按钮！

 举例：

　　文本框：
　　密码框：
　　单选按钮1：
　　单选按钮2：
　　复选按钮1：
　　复选按钮2：
代码实现：
　　View Code

3. 简单的下拉列表：TIY1 TIY2

  • <select>：下拉列表。size 为显示的项数。
  • <optgroup>：分组。
  • <option>：单个选项，selected 属性表示此项为默认选择。value 属性为真正唯一的值。

4. 多行文本框：<textarea rows="10" cols="30">你好</textarea>

5. 控件组：TIY

First Name:

Last Name: 


        <p>First Name: <input type="text" name="fname" /></p>
        <p>Last Name: <input type="text" name="lname" /></p>
        <input type="submit" value="Submit" style="font-family:微软雅黑; font-size:20px"/>


        <input type="radio" name="sex" id="male"/>
        <label for="male">Male</label>
        <br />
        <input type="radio" name="sex" id="female"/>
        <label for="female">Female</label>

复制代码
        <select name="cars" style="font-family:微软雅黑; font-size:20px">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat" selected="selected">Fiat</option>
            <option value="audi">Audi</option>
        </select>
复制代码




复制代码
        <input type="checkbox" name="hobby" id="basketball" />
        <label for="basketball">Basketball</label>
        <br />
        <input type="checkbox" name="hobby" id="football" />
        <label for="football">Football</label>
        <br />
        <input type="checkbox" name="hobby" id="volleyball" />
        <label for="volleyball">Volleyball</label>
        <br />
        <input type="checkbox" name="hobby" id="badminton" />
        <label for="badminton">Badminton</label>
复制代码
        <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>
复制代码

 

posted on   McDelfino  阅读(225)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛