任务一:零基础HTML编码

学到的知识:

&nbsp 空格

colspan 

<input type="checkbox" name="hobby" value="科学">科学

textarea属性:

    <textarea name="个人描述" id="" cols="20" rows="2">这是一个多行输入框,输入您的个人描述</textarea>



<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style>
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <h1>网站以及标题</h1>
    <ul>
        <li><<a href="#" title="导航链接">导航链接</a></li>
        <li><<a href="#" title="导航链接">导航链接</a></li>
        <li><<a href="#" title="导航链接">导航链接</a></li>
        <li><<a href="#" title="导航链接">导航链接</a></li>
    </ul>
    <article>
        <h1>文档一级标题</h1>
        <h2>文档二级标题</h2>    
        <p>文章作者 &nbsp文档发表时间</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>
        <img src="img/0001.jpg" alt="好看的图片">
        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>
        <h1>另一篇文章一级表题</h1>
        <h2>文章二级标题</h2>
        <p>文档作者&nbsp 文档发表时间</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p>
        <p>这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>
        <img src="img/0001.jpg" alt="好看的图片">
        <ul>
            <li>列表项目</li>
            <li>列表项目</li>
            <li>列表项目</li>
        </ul>
        <h1>图片</h1>
        <ul style="list-style: none;">
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
            <li>好看的图片<br><img src="img/0001.jpg" alt="好看的图片"></li>
        </ul>
        <h1>最后一篇文档标题</h1>
        <h2>文档二级标题</h2>
        <p>文档作者&nbsp文档发表时间</p>
        <ol type="1">
            <li>排名</li>
            <li>排名</li>
            <li>排名</li>
        </ul>
        <p>下面是一个表格。给表格加一个border="1"好让你看出是一个表格</p>
        <table border="1">
            <thead>
                <tr>
                    <td>表头</td>
                    <td>表头</td>
                    <td>表头</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表内容单元格</td>
                    <td>表内容单元格</td>
                    <td><a href="#">操作</a></td>
                </tr>
                <tr>
                    <td>表内容单元格</td>
                    <td>表内容单元格</td>
                    <td><a href="#">操作</a></td>
                </tr>
                <tr>
                    <td>表内容单元格</td>
                    <td>表内容单元格</td>
                    <td><a href="#">操作</a></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>总计</td>
                    <td colspan="2">1000</td>
                </tr>
            </tfoot>
        </table>
        <h3>这里以后是一个侧栏,这是侧栏的标题</h3>
        <h3>侧栏注册窗口标题</h3>
    </article>
    <form>
        <label for="input_text_1">请输入邮箱地址</label>
        <input type="text" placeholder="这是一个文本输入框" id="input_text_1">
        <p>邮箱地址请按要求格式输入</p>
        <label for="input_pw_1">请输入密码</label>
        <input type="password" placeholder="这是一个文本输入框" id="input_pw_1">
        <label for="input_pw_2">请重复输入密码</label>
        <input type="password" placeholder="这是一个文本输入框" id="input_pw_2">
        <p>密码请为6-16位英文数字</p>
        <label for="sex">性别</label>
        <input type="radio" name="sex" value="male" checked />male
        <input type="radio" name="sex" value="female" />female
        <label for="city">城市</label>
        <select name="city" id="city">
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
            <option value="gz">广州</option>
            <option value="sh">深圳</option>
            <option value="hn">河南</option>
        </select>
        <label for="hobby">爱好:</label>
        <input type="checkbox" name="hobby" value="运动">运动
        <input type="checkbox" name="hobby" value="艺术">艺术
        <input type="checkbox" name="hobby" value="科学">科学
        <label for="person">个人描述</label>
        <textarea name="个人描述" id="" cols="20" rows="2">这是一个多行输入框,输入您的个人描述</textarea>
        <input type="submit" placeholder="提交">
    </form>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值