HTML列表、表格、表单基本使用方法 - 2019年8月30日

1、HTML标签、元素、属性的理解

HTML标签是HTML语言中最基本的单位，HTML标签的大小写无关的，例如<p>跟<P>表示的意思是一样的。HTML标签通常是成对出现的，比如 <div> 和 </div>，但也有单独呈现的标签，如：<img src="1.jpg" />等。

HTML标签包含许多元素，如html元素（HTML文档根元素）、head（HTML头部）元素、body（HTML主体）元素、title(HTML标题)元素和p（段落）元素等，这些元素都是通过尖括号“<>”组成的标签形式来表现的。HTML元素又可以分为块元素、行内元素。

HTML属性提供了对HTML元素的描述和控制信息，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。

2、HTML列表定义

HTML列表有三种：无序列表、有序列表、定义列表

无序列表实例

<ul>
	<li>1、这是无序列表项</li>
	<li>2、这是无序列表项</li>
	<li>3、这是无序列表项</li>
</ul>

有序列表实例

<ol>
	<li>这是有序列表项</li>
	<li>这是有序列表项</li>
	<li>这是有序列表项</li>
</ol>

定义列表实例

<dl>
	<dt>这是定义列表项</dt>
	<dd>列表项定义</dd>
	<dt>这是定义列表项</dt>
	<dt>这是定义列表项</dt>
</dl>

3、列表与表格的区别与联系

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

表格的HTML基本语法

<table>...</table> - 定义表格

<tr> - 定义表行

<th> - 定义表头

<td> - 定义表元(表格的具体数据)

如：

列表是指在网页中将相关资料以条目的形式有序或者无需排列而形成的表。一般分为有序、无序和定义列表。

一般表示少量并列内容时可以用列表，表示记录之类的大量内容时，考虑使用表格，视觉效果会美观些。

4、列表使用

实例

<span>好好学习</span>

    <h3>学习计划</h3>
    <p>无序列表</p>
    <ul>
        <li style="list-style: none">1.前端学习</li>
        <li style="list-style: none">2.PHP学习</li>
        <li style="list-style: none">3.CMS学习</li>
        <li style="list-style: none">4.自主开发CMS</li>
    </ul>
    <p>有序列表</p>
    <ol>
        <li>前端学习</li>
        <li>PHP学习</li>
        <li>CMS学习</li>
        <li>自主开发CMS</li>
    </ol>
    <p>定义列表</p>
    <dl>
        <dt>1.前端学习</dt>
        <dt>2.PHP学习</dt>
        <dt>3.CMS学习</dt>
        <dt>4.自主开发CMS</dt>
    </dl>

5、表格的使用

无序列表比较常用，无需列表可以通过样式控制代替有序列表。

实例

<table border="1" cellspacing="0" width="480px" style="text-align:center">
        <caption>商品表单</caption>
        <thead>
            <tr bgcolor="#999">
                <th>名称</th>
                <th>产地</th>
                <th>数量</th>
                <th>单价</th>
            </tr>
        </thead>
        <tr>
            <td rowspan='2'>苹果</td>
            <td>泰国</td>
            <td>2</td>
            <td>14</td>
        </tr>
        <tr>
            <td>国产</td>
            <td>2</td>
            <td>30</td>
        </tr>
        <tr>
            <td>橘子</td>
            <td>国产</td>
            <td>9</td>
            <td>4</td>
        </tr>
        <tr>
            <td>李子</td>
            <td>国产</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>榴莲</td>
            <td>国产</td>
            <td>1</td>
            <td>20</td>
        </tr>
        <tr>
            <td colspan='3'>合计</td>
            <td>72</td>
        </tr>
    </table>

6、表单使用

实例

<h3>用户注册</h3>
    <form action="res.php" method="get">
        <p>
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username" placeholder="请输出中文用户名">
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" name="password" id="password">
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="example@hotmail.com">
        </p>
        <p>
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" min="10" max="50" value="16">
        </p>
        <p>
            <label for="male">性别：</label>
            <input type="radio" id="male" name="sex"><label for="male">男</label>
            <input type="radio" id="female" name="sex"><label for="female">女</label>
            <input type="radio" id="secret" name="sex" checked><label for="secret">保密</label>
        </p>
        <p>
            <label for="">爱好：</label>
            <input type="checkbox" id="sport" name="hobby[]"><label for="sport">运动</label>
            <input type="checkbox" id="sleep" name="hobby[]"><label for="sport">睡觉</label>
            <input type="checkbox" id="eat" name="hobby[]"><label for="sport">吃饭</label>
        </p>
        <p>
            <label for="">学历：</label>
            <select name="school" id="">
                <option value="">请选择</option>
                <optgroup label="国内">
                    <option value="">高中</option>
                    <option value="">大专</option>
                    <option value="">本科</option>
                </optgroup>
                <optgroup label="国外">
                    <option value="">野鸡大学</option>
                    <option value="">***大学</option>
                </optgroup>
            </select>
        </p>
        <input type="submit" name="submit" value="提交">
    </form>

注意：单选radio请注意保持name值一致

7、常用标签总结

<head>头部标签：头部标签里面元素主要是给搜索引擎查看，<head>标签中，可以定义标题、字符格式、语言、兼容性、关键字、描述等信息。

<body>标签：用户可以看到的内容，<body>标签中可以添加各种标签、元素，实现华丽的视觉效果。

h标签：是网页html 中对文本标题所进行的着重强调的一种标签，以标签<h1>、<h2>、<h3>到<h6>定义，从小到大标签权重逐渐递减，一般一个页面中只允许一个<h1>标签。

<p>标签：一般用于文章内容中，表示段落。

<div> 标签：该标签是没有任何内容上的意义，但可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。