html常用标签介绍

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

1：标签

标签用来标记内容块，也用来标明元素的内容及语义

标签有两种形式：成对出现的标签和单独出现的标签

a、成对出现的标签

成对出现的标签包括开始标签和结束标签，<开始标签>内容</结束标签>

<title>链接标签</title>

<p>内容</p>

b、单独出现的标签

<area><base><basefont><br><col><frame><hr><img><input><param><link><meta><br>

2：元素

HTML元素可以分为“块元素”和“行元素”

<p>是块元素，浏览器会单独用一行来显示块元素

<b>元素和<input>元素是行元素

3：属性

与元素相关的特性叫做属性，可以为属性赋值

<元素 属性='值'>内容</元素>

<元素 属性='值' />

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

列表有三种。有序列表、无序列表、定义列表

1、有序列表

<ol>
       <li>有序列表1</li>
       <li>有序列表2</li>
       <li>有序列表3</li>
</ol>

2、无序列表

<ul>
       <li>无序列表1</li>
       <li>无序列表2</li>
       <li>无序列表3</li>
</ul>

3、定义列表

<dl>
       <dt>定义列表</dt>
       <dd>定义列表 ... ...</dd>
       <dt>定义列表</dt>
       <dd>定义列表 ... ...</dd>
</dl>

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

tr是表格行，ul是列表

tr必须在table标签里，里面的标签是td

如：<table><tr><td></td></tr><table>

ul里的标签为li

如：<ul><li></li><ul>和<ol><li></li><ol>

<table border="1" width="50">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<table>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>

列表比较适合单列显示，比如文章列表

表格比较适合多列数据展现，比如学校网站要在页面显示学生的成绩，后台数据展示，某些时候就可以使用表格

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

    <ul>
        <li>1、09：00检查各网站是否异常</li>
        <li>2、09：30处理任务系统工作任务</li>
        <li>3、18：00上报工作日志</li>
    </ul>
    <ol>
        <li>09：00检查各网站是否异常</li>
        <li>09：30处理任务系统工作任务</li>
        <li>18：00上报工作日志</li>
    </ol>
    <dl>
        <dt>第一</dt>
        <dd>09：00检查各网站是否异常</dd>
        <dt>第二</dt>
        <dd>09：30处理任务系统工作任务</dd>
        <dt>第三</dt>
        <dd>18：00上报工作日志</dd>
    </dl>

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

<table border="1" width="500" cellspacing="0" cellpadding="5">
        <caption><h3>购物车</h3></caption>
        <thead>
            <tr bgcolor="#f90">
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tr>
            <th>1</th>
            <th>荣耀20 PRO</th>
            <th>￥3199.00</th>
            <th>1</th>
            <th>￥3199.00</th>
        </tr>
        <tr>
            <th>2</th>
            <th>华为 HUAWEI P30 Pro</th>
            <th>￥4988.00</th>
            <th>1</th>
            <th>￥4988.00</th>
        </tr>
        <tr>
            <th>3</th>
            <th>华为HUAWEI MateBook X Pro 2019款</th>
            <th>￥7999.00</th>
            <th>1</th>
            <th>￥7999.00</th>
        </tr>
        <tr>
            <th colspan="3">合计</th>
            <th>3</th>
            <th>￥16186.00</th>
        </tr>
    </table>

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

<h2>用户注册</h2>
<form action="login.php" method="post">
<p>
<label for="username">账号：</label>
<input type="text" name="username" value="vchengzhi" />
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" placeholder="请输入6-12位之间" />
</p>
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" placeholder="example@email.com" />
</p>
<p>
<label for="age">年龄：</label>
<input type="number" name="age" min="16" max="90" />
</p>
<p>
<label for="">课程</label>
<select name="" id="">
<option value="">请选择</option>
<optgroup label="前端">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JavaScript</option>
</optgroup>
<optgroup label="后端">
<option value="">PHP</option>
<option value="">MySql</option>
<option value="">Laravel</option>
</optgroup>
</select>
</p>
<p>
<label for="">爱好：</label>
<input type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">玩游戏</label>
<input type="checkbox" name="hobby[]" value="programme" id="programme" /><label for="programme">撸代码</label>
<input type="checkbox" name="movies[]" value="movies" id="movies" /><label for="movies">看电影</label>
</p>
<p>
<label for="male">性别：</label>
<input type="radio" name="gender" id="male" /><label for="male">男</label>
<input type="radio" name="gender" id="female" /><label for="female">女</label>
<input type="radio" name="gender" id="secrecy" /><label for="secrecy">保密</label>
</p>
<p>
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" />
<input type="button" name="button" value="保存" />
<button type="button">注册</button>
</p>
</form>

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

<title>：指定整个网页的标题，在浏览器最上方显示。

<base>：为页面上的所有链接规定默认地址或默认目标。

<meta>：提供有关页面的基本信息

<body>：主体标签，定义HTML文档所要显示的内容。我们所写的代码必须放在此标签內。

<link>：定义文档与外部资源的关系。

容器级标签

p、span、a、b、i标签等，容器级标签中可以放置任何东西。

文本级标签

div、h系列、li、dt、dd标签等，文本级标签只能放置文字、图片、表单元素。

图片标签：<img>

列表标签：<ul>、<ol>、<dl>

表格标签：<table>

表单标签：<form>

滚动字幕标签：<marquee>