HTML常用标签的定义与解释-8月30日作业

作业:

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

答：html语言是超文本标记语言，标签是用于标记文本类型的，例如：

“<p>这是一个标签</p>就是一个标签“;

html元素是指一个标签块，标签标记了元素，例如：

“<div><p>这是一个元素</p></div>”;

属性是用来描述元素的，例如：

“<input type="select" id="button" name="button">”；

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

答：列表有三种，分别是：无序列表、有序列表、定义列表；

无序列表，<ul></ul>、<li></li>，有序列表，<ol></ol>、<li></li>,区别是有序 列表会自动的在列表项前面加上序号；

定义列表，<dl></dl>、<dt></dt>、<dd></dd>、“dl“标签相当于是“ul“，用以标记列表 项，“dt“是标记列表项的标题，“dd”用于标记列表项的上一个“dt”标记标题的内容或描述。

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

答：列表只能标记单列内容，表格可以标记有多个列的内容。

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

实例-<ul>

<ul>
   <h3>
        工作计划“ul”
        </h3>
    <li><p>
        1、上班
        </p></li>
    <li><p>
        2、下班
        </p></li>
</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例-<ol>

<ol>
    <h3>
        工作计划“ol”
    </h3>
    <li><p>
        上班
        </p></li>
    <li><p>
        下班
        </p></li>
</ol>

实例-<dl>

<dl>
    <h3>
        工作计划“dl”
    </h3>
   <dt>第一件事</dt>
    <dd>上班</dd>
    <dt>第二件事</dt>
    <dd>下班</dd>
</dl>

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

实例-<table>表格

<table border="5" width="500" align="center">
    <caption><h2>
        购物车
        </h2></caption>
    <thead align="center">
        <tr bgcolor="yellow">
        <th bgcolor="black"></th>
        <th>名称</th>
        <th>规格(ml)</th>
        <th>数量(瓶)</th>
        <th>单价(元)</th>
        </tr>
    </thead>
        <tr>
        <td rowspan="4" align="center">好酒</td>
    	</tr>
    <tr>
        <td>啤酒</td>
        <td>550</td>
        <td>3</td>
        <td>10</td>
    </tr>
    <tr>
    	<td>白酒</td>
        <td>500</td>
        <td>2</td>
        <td>50</td>
    </tr>
    <tr>
    	<td>黄酒</td>
        <td>300</td>
        <td>7</td>
        <td>50</td>
    </tr>
     <tr>
    	<td colspan="3" align="center">合计</td>
        <td>12</td>
        <td>480</td>
      </tr>
</table>

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

实例-<form>用户注册表单

<h3>
    用户注册
</h3>
<form action="login.php" method="get">
    <p>
    	<label for="username">账号：</label>
    	<input id="username" name="username" type="text" placeholder="请用中文">   
    </p>
    <p>
        <label for="password">密码：</label>
        <input id="password" name="password" type="password" placeholder="6位纯数字"
    </p>
    <p>
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email" placeholder="ex@mail.com">
    </p>
    <p>
        <label for="">性别：</label>
        <input type="radio" id="male" name="sex" value="male"><label for="male">男生</label>
        <input type="radio" id="female" name="sex" value="female"><label for="female">女生</label>
        <input type="radio" id="none" name="sex" value="none"><label for="none">不告诉你</label>
    </p>
    <p>
        <label for="age">年龄：</lable>
        <input type="number" min="16" max="60" name="age" id="age">
    </p>
    <p>
        <label for="">愿望：</label>
        <select id="wish" name="wish">
            <optgroup label="个人的">
            	<option value="请选择" >请选择</option>
            	<option value="money">用不完的钱</option>
           		<option value="beauty">美女</option>
           		<option value="liveforever">永生</option>
            </optgroup>
            <optgroup label="所有人的">
            	<option value="peace">世界和平</option>
           		<option value="health">健康</option>
            </optgroup>
        </select>
    </p>
    <p>
        <label for="fav">兴趣：</label>
        <input type="checkbox" id="game" name="game" value="game"><label for="game">玩游戏</label>
        <input type="checkbox" id="music" name="music" value="music"><label for="music">听音乐</label>
        <input type="checkbox" id="movies" name="movies" value="movies"><label for="movies">看电影</label>
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="清空表单">
        <input type="button" name="button" value="一个按钮">
        <button type="submit" name="botton">button提交</button>
    </p>
</form>

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

"<h>",双标签，标记标题，浏览器有预置的样式，预置了加粗、字号

“<a>”单标签，标记超链接，属性有:src="链接地址",target="打开位置self;blank;top"

"<p>"双标签，标记段落，可以自动换行

"<img>"单标签，标记图片，属性有:src="图片位置",alt="图片描述"

"<ul>,<ol>,<dl>,<li>,<dt>,<dd>"，见作业第二题，有序列表和无序列表可以用于新闻列表、定义列表可用于网站底部友情链接

"<table>,<thead>,<th>,<tr>,<td>,<caption>"表格标签，thead标记表头，th和td都指列，th用于第一列加粗，tr指行，包括属性rowspan合并行,colspan合并列,border描述边框，caption标记表格名称

"<form>"双标签，标记表单

"<label>"可以把文本标签和其他标签进行定义绑定

"<input>"

输入标签，属性type="类型(text文本、number数字、checkbox复选项，radio单选项，password密码，email邮箱，sumbit提交，reset重置)",id="ID"，name="名称",value="值"；

"<select>,<optgroup>,<option>"

select下拉列表，属性有id="ID",name="名称"

optgroup下拉列表的选项组

option下拉列表的选项，属性value="值"，必须要给选项赋值

"<button>"

按钮标签，可以用type属性中定义按钮的行为，可以用javascript来定义按钮行为，比input好用，好像便于用css定义样式