html常用知识总结--2019年8月30日 20点

一、html标签、元素与属性

html标签一般是成对出现，有开头和结尾，比如 <h1></h1>、<p></p>等叫做双标签，还有比如<hr>、<br>等单标签。

html元素可以描述网页的构成，比如标识标题的<h1></h1>，标识图片的<img />， 标识段落的<p></p>。

hmtl元素还有自己的属性，比如<img />标签家加上src属性<img src="" />，用来表明图片的地址，比如给<a>标签加上

src属性<a href=""></a>可以表明要跳转的地址。

二、列表

列表有无序列表<ul>、有序列表<ol>、定义列表<dl>

有序列表定义方式

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

无序列表定义方式

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

定义列表

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

三、列表与表格

列表是对信息的逐条展示，表格是对每条信息进行归类整理逐条展示。表格是在列表基础上进行逐条信息的提取归类整理划分。

当展示某类的信息的单一属性比如只展示所有文章的标题这一属性，就可以用列表，是对单一属性展示不需要区分。

而当要展示出某类信息的所有属性比如所有文章的标题、描述、写作时间等，这时用表格，因为需要在每条信息中对属性区分。

四、编程实现工作计划，分别用ul、ol、dl实现

ul实现

<ul>
    <li>第一天用编写ul列表</li>
    <li>第二天用编写table表格</li>
    <li>第三天用编写form表单</li>
</ul>

ol实现

<ol>
    <li>第一天用编写ul列表</li>
    <li>第二天用编写table表格</li>
    <li>第三天用编写form表单</li>
</ol>

dl实现

<dl>
    <dt>第一天</dt>
    <dd>编写ul列表</dd>
    <dt>第二天</dt>
    <dd>编写table表格</dd>
    <dt>第三天</dt>
    <dd>编写from表单</dd>
</dl>

五、商品清单表格

实例

<table border="1" width="500" cellspacing="0" cellpadding="5">
        <caption>
            <h3>购物清单</h3>
        </caption>
        <!-- 头部 -->
        <thead>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>金额</th>
            <th>分类</th>
        </thead>
        <!-- 表体 -->
        <tr>
            <td>1</td>
            <td>Html5精通</td>
            <td>100</td>
            <td>1</td>
            <td>100</td>
            <td rowspan="4">大前端</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Css3精通</td>
            <td>100</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td>JavaScript精通</td>
            <td>100</td>
            <td>2</td>
            <td>200</td>
        </tr>
        <!-- 页脚 -->
        <tr>
            <td colspan="3" align="center">总计：</td>
            <td>4</td>
            <td>400</td>
        </tr>
    </table>

六、 注册表单

实例

<form action="" method="POST">
        <p>
            <label for="username">账号：</label>
            <input type="text" id="username" name="username" placeholder="请输入账号" />
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" />
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="example@qq.com" />
        </p>
        <p>
            <label for="">性别：</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="secrecy" name="sex" checked /><label for="secrecy">保密</label>
        </p>
        <p>
            <label for="">爱好：</label>
            <input type="checkbox" id="run" name="fonds[]" /><label for="run">跑步</label>
            <input type="checkbox" id="work" name="fonds[]" /><label for="work">写代码</label>
            <input type="checkbox" id="music" name="fonds[]" /><label for="music">听音乐</label>
        </p>
        <p>
            <label for="">课程：</label>
            <select name="" id="">
                    <option value="">请选择</option>
                <optgroup label="后端">
                    <option value="">php</option>
                    <option value="">mysql</option>
                    <option value="">laravel</option>
                </optgroup>
                <optgroup label="前端">
                    <option value="">html</option>
                    <option value="">css</option>
                    <option value="">javascript</option>
                </optgroup>
            </select>
        </p>
        <p>
            <input type="submit" name="submit" value="提交" />
            <input type="reset" name="reset" value="重置" />
            <input type="button" name="button" value="按钮" />
        </p>
        <p>
            <button type="">按钮</button>
        </p>
    </form>

七、总结

1、<a>标签常用来表示链接跳转，<h>标签用来表示文章标题，<img>标签用来表示图片。

2、列表中的<ul>无序列表比较常用，主要用来展示信息，比如新闻列表。

3、table表格经常会用到，比如购物清单、公司员工清单等。

4、form表单经常用到，在网站的登录、注册等。

5、form表单中很多的控件像<input type="text" />输入框、单选框<input type="radio" />、多选框<input type="checkbox" />、下拉框<select>、提交按钮<input type="submit" />、重置按钮<input type="reset" />、按钮<button>，都是经常用到的。