一、 标签
在HTML中,我们把用尖括号包起来的对象叫做标签,比如“<p></p>", 标签是HTML中最基础的也是最重要的组成单位,一般都具有以下几个特点:
● 它是由一对尖括号包起来的,比如<head>。
● 一般是成对出现的,标签中的第一个标签是开始标签,第二个是结束标签,比如<p></p>标签中,<p>是开始标签,</p>是结束标签。
● 也有单独出现的标签,如<img>标签。
● 在成对的标签间,写入内容,而单标签里会写入属性。比如:<p>这是一句话。</p> <img scr="美女.jgp" alt="小美女">
● 标签对大小写不敏感,但一般用小写。
二、元素
以开始标签开始,以结束标签结束,之间的内容,称之为元素。
● 块元素:自动换行 如<div></div>
● 行内元素:不会另起一行,如<span></span>
● 没有内容的元素称为空元素,以开始标签结束。如:<br>,<hr>
● 大多数元素可以嵌套。如:
在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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表单标签一般用在用户注册的时候,为了规范用户的输入信息。