简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 20190830-作业
Blogger Information
Blog 23
fans 0
comment 0
visits 13494
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20190830-作业
王长中的博客
Original
558 people have browsed it

   一、 标签

    在HTML中，我们把用尖括号包起来的对象叫做标签，比如“<p></p>"， 标签是HTML中最基础的也是最重要的组成单位，一般都具有以下几个特点：

● 它是由一对尖括号包起来的，比如<head>。

● 一般是成对出现的，标签中的第一个标签是开始标签，第二个是结束标签，比如<p></p>标签中，<p>是开始标签，</p>是结束标签。

● 也有单独出现的标签，如<img>标签。

● 在成对的标签间，写入内容，而单标签里会写入属性。比如：<p>这是一句话。</p>     <img scr="美女.jgp" alt="小美女">

● 标签对大小写不敏感，但一般用小写。

   二、元素

    以开始标签开始，以结束标签结束，之间的内容，称之为元素。

● 块元素：自动换行 如<div></div>

● 行内元素：不会另起一行，如<span></span>

● 没有内容的元素称为空元素，以开始标签结束。如：<br>,<hr>

● 大多数元素可以嵌套。如:

实例

<body>
      <p>
         欢迎来到php中文网
      </p>
</body>

运行实例 »

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


   在HTML文档中，<html>元素定义了整个HTML文档；

   <head>元素定义了文档的头部，给浏览器读取字符集等信息，后面引用的css文件和javascript文件也写在这里；

   <body>元素定义了文档的主体，将文本、图片等网页内容呈现给网页浏览者。

   三、属性

   属性为HTML元素提供附加信息，写在开始标签中，属性以名称/值的样式成对出现。

    四、列表

    在HTML中，列表分为无序列表、有序列表、自定义列表三种。

实例

<body>

    <h3>
        <p>无序列表：无序列表是一个项目的列表，列表前面用小圆点或小黑点标记。</p>
    </h3>
        <ul>

        <li>看视频</li>
                <li>自己操作几遍</li>
                <li>预习CSS</li>
    </ul>

   
    <h3>
        <p>有序列表：有序列表也是一个项目的列表，列表项目用数字标记。</p>
    </h3>
    <ol>

        <li>看视频</li>
                <li>自己操作几遍</li>
                <li>预习CSS</li>
    </ol>
    <h3>
        <p>自定义列表：自定义列表也是一个项目的列表，由列表和列表注释组成。</p>
    </h3>
    <dl>

        <dt>抽烟</dt>

        <dd>抽烟有害健康。</dd>

        <dt>喝酒</dt>

        <dd>少喝怡情，喝多伤身</dd>

</body>

运行实例 »

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

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

   表格是由tabel标签定义的，含有若干行（tr标签定义）和若干列（td定义）组成的，能直观的显示多列多行的数据，列表适用于单列多行的数据。

 六、商品清单实例

实例

<body>
<table border="1" width="500px" cellspacing="0">
<caption>
<h3>购物车</h3>
</caption>
<thead bgcolor="lightblue">
<tr align="center">
<th>供应商</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tr align="center">
<td rowspan="3">前进车灯厂</td>
<td>灯罩</td>
<td>20</td>
<td>10</td>
<td>200</td>
</tr>
<tr align="center">
<td>装饰框</td>
<td>30</td>
<td>15</td>
<td>450</td>
</tr>
<tr align="center">
<td>后壳</td>
<td>15</td>
<td>30</td>
<td>450</td>
</tr>
<tr align="center">
<td colspan="3" align="center">合计</td>
<td>55</td>
<td>1100</td>
</tr>



</table>

</body>

运行实例 »

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

七、表单标签

实例

<body>
<form>
    <h3>注册信息表</h3>
    <p> <label for="name">姓名</label>
        <input type="text" name="name" id="name" placeholder="请输入用户名">
    </p>
    <p>
        <label for="psd">密码</label>
        <input type="password" name="password" id="psd" placeholder="请输入密码">
    </p>
    <p>
        <label for="sex">性别</label>
        <input type="radio" name="sex" id="male" checked>男
        <input type="radio" name="sex" id="female">女
    </p>
    <p>
        <label for="age">年龄</label>
        <input type="number" name="age" id="age" min="16" max="100">
    </p>
    <p>
        <label for="search">学历</label>
        <select name="search" id="search">
            <option value="请选择">请选择</option>
           <option value="本科">本科</option>
           <option value="大专">大专</option>
           <option value="高中">高中</option>
       </select>
    </p>
    <p><label for="email">邮箱</label>
        <input type="email" name="email" id="email" placeholder="xxx@xx.com">
    </p>
    <input type="button" value="提交">
    </form>
</body>

运行实例 »

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


       表单标签一般用在用户注册的时候，为了规范用户的输入信息。

Correction status：qualified

Teacher's comments：表单是用于收集用户信息, 并不是为了规范, 检测用户输入是通过一些属性或正则或js来处理
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！