HTML表单、标签、属性作业及心得-19年8月30

1. 谈谈你对html标签, 元素与属性的理解, 并举例说明

    html常用标签有 P A H  分别代表段落 链接 标题

h段落

实例

<h1>我最大</h1>
<h2>我第二</h2>
<h3>我第三</h3>

     

 a链接

实例

<a href="www.baidu.com">百度一下</a>

p段落

实例

<p>换行</p>

html元素一般分为三部分  html   head和body

HTML部分  就是标题部分

head部分 这里面是写给浏览器看的

body部分 用户输入  写给用户看的  输入内容  可以显示在页面里面

       html属性 常见属性有class src   属性写在开始标签里面，应用场景不一样，用来描述标签，表述不同的样式，class用来定义属性，src是用来链接图片的，不管是链接内部文件图片或者外部链接图片都是可以的。

实例

<h2 class="red"><a href="www.baidu.com">百度一下你就知道了</a></h2>

实例

 <img src="https://www.php.cn/static/images/index_banner9.jpg" alt="phpstudy正式发布">

2、列表有几种, 如何定义?

   一共有三种  无序列表 有序列表和定义列表

无序列表

实例

<h3>中国男篮</h3>
<ul>
<li>易建联</li>
<li>郭艾伦</li>
<li>周琦</li>
<li>王哲林</li>

</ul>

有序列表

实例

<h3>中国男篮</h3>
<ol>
<li>易建联</li>
<li>郭艾伦</li>
<li>周琦</li>
<li>王哲林</li>

</ol>

定义列表

实例

<h3>中国男篮</h3>
<dt>加油</dt>
<dd>易建联</dd>
<dd>郭艾伦</dd>
<dd>周琦</dd>
<dd>王哲林</dd>

3. 列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?

列表只能显示一列，当东西过多时无法分辨的很仔细，而表格就不一样了，表格可以弄成多行多列，肉眼看起来更美观。

当项目过多，需要进行分类的时候使用表格，反而简单的，不太复杂的就使用列表。

4. 编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次: <ul><ol><dl>

实例

<h3>学习工作计划</h3>
<dt>第一阶段前端</dt>
<ul>
<li>html</li>
<li>css</li>
<li>javaScript</li>
</ul>

<dt>过程</dt>
<ol>
<li>端正自己的学习态度</li>
<li>认真听讲、做笔记</li>
<li>不会的地方多看几遍视频</li>

</ol>

 

5. 编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan

实例

 <table border="1" cellspacing="0" width="500" cellpadding="5">
        <caption>
            <h3>中国男篮</h3>
        </caption>
        <thead>
            <tr bgcolor="red">
                <td style="color: white">序号</td>
                <td style="color: white">姓名</td>
                <td style="color: white">位置</td>
                <td style="color: white">身高</td>
            </tr>
        </thead>



        <tr>
            <td>1</td>
            <td>易建联</td>
            <td>大前锋</td>
            <td>213</td>
        </tr>

        <tr>
            <td>2</td>
            <td>周琦</td>
            <td>中锋</td>
            <td>216</td>
        </tr>



        <tr>
            <td>3</td>
            <td>郭艾伦</td>
            <td>控球后卫</td>
            <td>192</td>
        </tr>

        <tr>
            <td>4</td>
            <td>丁彦雨航</td>
            <td>小前锋</td>
            <td rowspan="2">伤病</td>
        </tr>
        <tr>
            <td>5</td>
            <td>周鹏</td>
            <td>小前锋</td>
        </tr>

        <tr>
            <td colspan="3" align="center">教练：</td>
            <td>李楠</td>
        </tr>

    </table>

 

6. 编程实一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义

实例

<form action="#" method="POST">
        <P>
            <label for="username">姓名</label>
            <input type="username" id="username" name="username" placeholder="">
        </P>

        <P>
            <label for="password">密码</label>
            <input type="password" id="password" password="name" placeholder="不能超过11个数字">
        </P>

        <P>
            <label for="email">邮箱</label>
            <input type="email" id="email" password="email" placeholder="example@email.com">
        </P>

        <P>
            <label for="age">年龄</label>
            <input type="number" id="age" password="age" placeholder="未满18不能注册" min="18" max="60">
        </P>



        <P>
            <label for="">课程</label>

            <select name="" id="">

<optgroup id="前端">
<option value="">请选择</option>
<option value="">Html</option>
<option value="">css</option>
<option value="">javaScript</option>
</optgroup>

<optgroup id="后端">
        <option value="">请选择</option>
        <option value="">PHP</option>
        <option value="">MYSQL</option>
        <option value="">laravel</option>
        </optgroup>
</select>
        </P>
        
    <p>
            <label for="">plmm</label>
            <select name="" id="">

<optgroup id="年纪分段">
<option value="" aria-checked="checked">18-25</option>
<option value="">18-25</option>
<option value="">26-35</option>
<option value="">36-45</option>


</optgroup>

</select>
        </p>    
        
        
        
        <p>
            <label for="">爱好</label>
            <input type="checkbox" name="hobby[]" id="name" value="name"> <label for="game">玩游戏</label>
            <input type="checkbox" name="hobby[]" id="programe" value="programe"> <label for="programe">撸代码</label>
            <input type="checkbox" name="hobby[]" id="movies" value="movies" checked> <label for="movies">看电影</label>
        </p>

        
        <p>
            <label for="">运动</label>

            <input type="checkbox" id="ball" name="hobby[]" value="ball"> <label for="ball">打篮球</label>
            <input type="checkbox" id="pingpang" name="hobby[]" value="pingpang"> <label for="pingpang">打乒乓</label>
            <input type="checkbox" id="swimming" name="hobby[]" value="swimming"> <label for="swimming">游泳</label>


        </p>
        
        <p>

            <label for="">性别</label>
            <input type="radio" name="male" id="male" checked><label for="male">男生</label>
            <input type="radio" name="female" id="female"><label for="female">女生</label>
            <input type="radio" name="gender" id="gender"><label for="secrecy">保密</label>

        </p>

        <p>

                     <input type="submit" name="submit" value="提交">
            <input type="reset" name="reset" value="重置">
            <input type="button" name="reset" value="我是有颜色的按钮" style="background: yellow; width: 150px;">
        </p>

    </form>

 7. 写出总结, 对于这些常用标签的应用场景进行分析

cellspacing标签用于让表格线变细   cellpadding标签使其移动几个单位   bgcolor标签应用于表格背景  colspan 跨几列使其合并    rowspan跨几行使其合并   input字符表情   label定义文本标签    min标签最小值  max最大值   下拉列表select