博客列表 >20190830-作业

20190830-作业

王长中的博客
王长中的博客原创
2019年09月05日 10:06:19565浏览

   一、 标签

    在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>

运行实例 »

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


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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议