2020.12.22马海龙

1.知识内容总结

1.列表

1.有序列表

<ol  type="1"></ol>

2.无序列表

<ul type="circle"></ul>

3.描述列表/定义列表

<dl>
    <dt></dt>
    <dd></dd>
</dl>

2.表格

<table border="1" width="800px" cellspacing="0" cellpadding="0">
<!--
        表格中 tr 表示行  td 表示列/单元格
          border 表格边框
          width  宽度
          cellspacing  单元格之间的空隙
          cellpadding  单元格内边距/内填充
         -->
    <th></th><!--  标签中的th会默认加粗居中-->
    <td></td><!-- 比较常用
                合并单元格
                colspan 合并列
                rowspan 合并行-->

3.表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        
        <form action="#" method="get">
            <!-- input 输入框, type用来指定其类型
                value 用于指定其值 readonly 属性表示只读 disabled禁用
                required 必填  placeholder 默认提示文字
                -->
            文本框:<input type="text" value="123" readonly="readonly" disabled="disabled"/>   <br />
            密码框:<input type="password" required="required" placeholder="请输入密码"/> <br />
            颜色:<input type="color" /> <br />
            <!-- 单选或者多选框,通过名称将多个input 绑定成一组 -->
            <!-- checked属性,默认选中 -->
            单选框:<input type="radio" name="gender"/>男
                    <input type="radio" name="gender" checked="checked"/>女
                    <br/>
            多选框:<input type="checkbox" name="hobby"/>看书
                    <input type="checkbox" name="hobby" />打游戏
                    <input type="checkbox" name="hobby" checked="checked" />写代码
                    <br />
            下拉列表:<select>
                        <!-- option 是每一个选项 -->
                        <option>青海省</option>
                        <option selected="selected">陕西省</option>
                        <option>山东省</option>
                    </select>   
                    <br/>
            文本域:<textarea cols="20" rows="5"></textarea>        
            <br/>
            <button type="button">普通按钮</button>
            <input type="button" value="普通按钮" />
            <br />
            <button type="submit">提交按钮</button>
            <input type="submit" value="提交按钮" />
            <br />
            <!-- 重置为初始状态,并不是清空 -->
            <button type="reset">重置按钮</button>
            <input type="reset" value="重置按钮" />
        </form>
    </body>
</html>

4.图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片</title>
    </head>
    <body>
        <!--jpg/jpeg  png  gif  bmp -->
        
        <!-- src 属性用于定义图片的源 title 鼠标悬停显示的文字  alt 图片加载不出来,显示的文字
            width/height 指定图片的宽/高,如果只指定一个 图片会等比例进行适应
        -->
        <img src="kedaya.jpeg" title="可达鸭啊" alt="这是只可达鸭" width="200px" height="500px"/>
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2907558350,3984484335&fm=26&gp=0.jpg" />
        <img src="data:image/png;base64,(省略)" />
    </body>
</html>

5.音/视频

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>音/视频</title>
        <style>
            marquee{
                font-size: 30px;
                font-weight: bold;
                color: red;
            }
        </style>
    </head>
    <body>
        
        <!-- audio表示音频  src 指定音频源 controls播放器控制按钮 
            autoplay 自动播放 chrome浏览器在新的版本中禁用了网页自动播放
            muted 静音
        -->
        <audio src="zhuiguangzhe.mp3" controls autoplay="autoplay" muted="muted">
            当前浏览器不支持此标签
        </audio>
        
        
        <video src="01.mp4" controls="controls"></video>
        
        <marquee>弹幕</marquee>
        
    </body>
</html>

2.心得体会

今天又是哇塞的一天,跟以前学的课程一比更加有趣,而且老师讲的也不算太快,基本都能跟得上,练习的时候也基本能做出来,更加能激发出我们学习的兴趣,现在对制作网页有了更多的兴趣了。就是今天练习的时候自己弄的有点慢,以至于老师再将后面的内容我听得有点跟不上,下午的时候老师讲Examplesg感觉是听懂了,练习的时候个别能弄出来,复杂的那种还是不会弄,而且还不知道问题出在哪了,所以就很烦。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1