wbx20010705

博客园 首页 新随笔 联系 订阅 管理

今日重点

1.字体与插入 

2.超链接

3.列表

4.表格

5.实例

6.作业任务

 

学习心得

今天是作为小白学习的第一天,零基础的我在学习过程中很艰难,还好有老师的耐心讲解和同学们的悉心帮助,希望以后的学习中可以每天都有自己的进步,完成自己的目标!

 

 学习内容

1.字体与插入  (了解

    <b>加粗 </b>没加粗
    <code>代码</code>
    <em>强调文本</em>
    <i>斜体</i>
    <kbd>键盘输入</kbd>
    <pre>预格式
    </pre>
    <small>更小的字体</small>
    <strong>加粗</strong>
    <abbr>缩写
    </abbr>
    <address>地址</address>
    <bdo>文字方向</bdo>文字方向
    <blockquote>从另一个源引入</blockquote>
    <cite>工作</cite>
    log<sub>10</sub>下标文本
    m <sup>2</sup>
    <ins>插入文本</ins>
    <del>删除文本</del>
2.超链接  (了解)(经常使用)
    锚机链接<a href="#tips">锚机链接</a>
    普通的链接 <a href="http://www.baidu.com">百度</a><br>
    内部<a href="html03.html">3</a><br>
    目标<a href="html03.html" target="_blank">3.1</a>新建窗口<br>
    目标<a href="html03.html" target="_self">3.2</a>当前窗口<br>
    目标<a href="html03.html" target="_parent">3.3</a>直接父容器窗口<br>
    目标<a href="html03.html" target="_top">3.4</a>最顶级父容器窗口<br>
    标题<a href="html03.html" title="点我">3.4</a><br>
    图片链接<a href="http://www.baidu.com"><img src="img/2.jpg" height="200" alt=""></a>
3.列表  (了解)
  无序列表
    <ul type="circle">
        <li>我是无序列表</li>
    </ul>
    有序列表
    <ol>
        <li>我是有序列表</li>
     
    </ol>
    自定义列表
    <dl>
        <dt>项目1</dt>
        <dd>描述</dd>
     </dl>
4.表格  (理解,运用不熟练)(重要)
 生成一个5乘5的表格
快捷方法:tr*5>td*5
    <table border="1" cellspacing="0" cellpadding="10" bgcolor="red2" align="left">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>

    </table>
5.实例:制作报名表(理解)
代码:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
    <table border="10" cellspacing="10" cellpadding="10" align="center">
        <tr>
            <td>用户名</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="gender" checked><input type="radio" name="gender"></td>
        </tr>
        <tr>
            <td>爱好</td>
            <td><input type="checkbox" checked>游泳
                <input type="checkbox">足球
                <input type="checkbox">篮球
            </td>
        </tr>
        <tr>
            <td>家庭住址</td>
            <td><select>
                    <option>吉林省</option>
                    <option>辽宁省</option>
                </select>
                <select>
                    <option>长春市</option>
                    <option>沈阳市</option>
                </select>
                <select>
                    <option>朝阳区</option>
                    <option>皇姑区</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="email"></td>
        </tr>
        <tr>
            <td>生日</td>
            <td><input type="date"></td>
        </tr>
        <tr>
            <td>薪水</td>
            <td><input type="number" min="0" max="100"></td>
        </tr>
        <tr>
            <td>头像</td>
            <td><input type="file"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="注册">
                <input type="reset" value="重置">
                <input type="button" value="自定义">
            </td>

        </tr>


    </table>
</form>
</body>

</html>

效果图:

 

感受:第一次自己单独做出一个内容,经历很多困难,在同学的帮助下完成,不太熟练,仍需努力!

 

 

6.作业任务:制作诗词和歌曲的网页

第一次:

界面:  分类杂乱,整体杂乱无章,功能十分简陋,无法达到老师和我自己的要求。

 

 效果图

 

 回寝室后,在同学指导之下,对HTML有了一点新的理解,重新做出了第二版。

第二次:

界面  学会了文件夹分类设置,和一些简单界面切换。

 

 效果图

 

 

 

posted on 2022-07-12 19:01  王斌旭  阅读(18)  评论(0编辑  收藏  举报