前端学习记录 dy01

简答题

1.列举出常见的文本标签有哪些?

  标题标签:h1-h6
分割线标签:<hr/>
段落标签:<p></p>
段落缩进标签:<blockquote></blockquote>
换行:<br>
滚动标签:<marquee></marquee>
加粗标签:<strong></strong>  <b></b>
斜体标签 :<i></i>  <em></em>
pre标签: <pre></pre>
上下标标签: <sup></sup>  <sub></sub>
居中标签:<center></center>        

    

2.超链接标签的href可以指定某个url地址,请描述关于url地址协议如果是http协议,它的的执行流程?

       

超链接 href属性="http://192.168.0.1:端口号/后端接口地址"        
图像标签 src属性="http://ip或者域名:端口号/服务器端存储的验证码接口"

都属于"浏览器行为",浏览器----->发送请求----->被服务器接收
                浏览器        <----    响应 <--- 解析完数据
    http协议的执行流程:先去本地磁盘上c:\windows\system32\drivers\etc-->hosts文件
    
            localhost    127.0.0.1  回环地址
        
   找到了,直接访问;找不到,就需要调用网卡驱动---->联网---->访问DNS服务器(网络运营商)
                   记录大量常用的网站域名以及ip地址
                   www.baidu.com  10.12.156.18
                   
 dns服务器访问---百度服务器---->回显给用户"首页"

3.表格标签的常用属性有哪些?

border="表格边框大小"
cellspacing="单元格的边框和table边框的距离"
width和height:表格宽度和高度像素或百分比
bgcolor:背景颜色
合并行(行合并)rowspan="所占的单元格的数量"
合并列(列合并)colspan="单元格的数量"

4.图形标签的属性有哪些?

src属性:链接到图片资源地址 (相对路径)
title:图像的标题文字提示
width和height 单位为px或者是权重百分比%
alt:替代文本 (当图片连接失效了,给文字提示信息)
align:左右浮动,left(左对齐)right(右对齐)

实践题

1.使用表格标签完成一个页面的简单布局,一行一列的表格中进行表格嵌套(参考今天表格嵌套写法)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格嵌套</title>
    </head>
    <body>
        <!-- 大的表格 一行一列 -->
        <table>
            <tr>
                <td>
                    <!-- 第一部分 -->
                    <table bgcolor="black" width="1500px" height="100px" >
                        <tr>
                            <td>
                                <img src="img/qflogo.png" width="500px" height="200px">
                            </td>
                            <td >
                                <a href="#">首页</a>
                                <a href="#">课程</a>
                                <a href="#">走进千锋</a>
                                <a href="#">双选会</a>
                                <a href="#">千锋教育</a>
                                <a href="#">好程序员</a>
                                <a href="#">扣丁课堂</a>
                                <a href="#">APP外包</a>
                                <a href="#">培训服务</a>
                                <a href="#">创业孵化</a>
                            </td>
                        </tr>
                    </table width="1500px" height="100px">
                        <!-- 第二部分 -->
                    <table>
                        <tr>
                            <td>
                                <img src="img/bg.png" width="1500px">
                            </td>
                        </tr>
                    </table>
                    <!-- 第三部分 -->
                    <table align="center">
                        <tr >
                            <td>
                                <img src="img/c_0012.jpg" >
                                <h2>移动产业</h2>
                                <p>国内互联网开发提供平台</p>
                                <p>精准高效的人才匹配</p>
                                <p>专业多样的招聘平台</p>
                                <p>覆盖全国的优质资源</p>
                            </td>
                            <td>
                                <img src="img/c_0013.jpg" >
                                <h2>千锋教育</h2>
                                <p>IT职业教育良心品牌</p>
                                <p>专业的师资团队</p>
                                <p>完善的课程体系</p>
                                <p>前沿的企业内训</p>
                            </td>
                            <td>
                                <img src="img/c_0014.jpg" >
                                <h2>项目研发</h2>
                                <p>国内互联网开发提供平台</p>
                                <p>实力雄厚的研发团队</p>
                                <p>高效优质的产品质量</p>
                                <p>全面完善的售后服务</p>
                            </td>
                            <td>
                                <img src="img/c_0015.jpg" >
                                <h2>创业孵化</h2>
                                <p>卓越的互联网孵化基地</p>
                                <p>行业知名的“天使投资”导师</p>
                                <p>国内配套的资源支持</p>
                                <p>助力实现创新idea</p>
                            </td>
                        </tr>
                    </table>
                    <!-- 第四部分 -->
                    <table align="center">
                        <tr>
                            <td>
                                <img src="img/imgqf.jpg">
                            </td>
                            <td>
                                <h2>新闻动态</h2>
                                <p>千锋教育220个产学合作协同育人项目获教...</p>
                                <p class="data">产学合作协调育人项目立项名单,千锋教育220个项目获批立项...</p>
                                <ul>
                                    <li>>相惠2019 千锋新年钜惠大盘点</li>
                                    <li>>千锋互联网大前端标准化研究院在京揭牌成立</li>
                                    <li>>重磅!千锋教育PMP❤课程强势推出 为您的职...</li>
                                    <li>>千锋2月就业榜发布:共就业487人平均月薪8...</li>
                                </ul>
                            </td>
                            <td>
                                <h2>
                                    与我洽谈
                                </h2>
                                <div class="tu"></div>
                                <h1>400-811-9990</h1>
                                <ul>
                                    <li>培训咨询:010-82790226/7</li>
                                    <li>招聘咨询:010-82790226/7-800</li>
                                    <li>网站合作:010-82790226/7-815</li>
                                    <li>企业洽谈:010-82790226/7-803</li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

2.预习下昨天发的帮助文档中有一个w3c离线手册,html---表单元素,完成登录页面(文本输入框和密码输入框)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录页面</title>
    </head>
    <body>
        <table align="center">
            <br><br><br>
            <tr>
                <td>
                    <from>
                        请输入用户名:<input type="text">
                    </from>
                </td>
            </tr>
            <tr>
                <td>
                    <from>
                    请输入密码:&ensp;&ensp;<input type="password">
                    </from>
                </td>
            </tr>
            <tr>
                <td>
                    <from>
                        确认登录密码:<input type="password">
                    </from>
                </td>
            </tr>
            <tr>
                <td>
                    <from action="">
                        证件类型:&ensp;&ensp;&ensp;
                        <select>
                            <option value ="">中国居民身份证</option>
                        </select>
                    </from>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        姓名:&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="text">
                    </form>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        证件号码:&ensp;&ensp;&ensp;&ensp;<input type="text">
                    </form>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        性别:&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="radio" name="gander">男
                        <input type="radio" name="gander">女
                    </form>
                </td>
            </tr>
        </table>
        <hr/>
        <table align="center">
            <tr>
                <td>
                    <form>
                        邮箱:&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<input type="text">
                    </form>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        手机号码:&ensp;&ensp;<input type="text">
                    </form>
                </td>
            </tr>
        </table>
        <hr/>
        <table align="center">
            <tr>
                <td>
                    <input type="submit" value="登录">
                </td>
            </tr>
        </table>
    </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值