博客列表 >HTML标记

HTML标记

葛佬的博客
葛佬的博客原创
2019年09月02日 15:49:36707浏览

一、html标签、元素与属性       

        HTML文档是由各种HTML元素组成的,如html、head、body等。HTML标签是由一对尖括号<>及标签名组成的。标签分为“起始标签”和“结束标签”两种,两者的标签名称是相同的,只是结束标签多了一个斜杠“/”。

        HTML的元素属性提供了对HTML元素的描述和控制信息,HTML元素的属性放置在元素的起始标签内,属性分为属性名称和属性值。

        例如:<p>(起始标签)和</p>(结束标签)是HTML元素,<img src='1.jpg'>中的src是属性,1.jpg是属性值。

二、列表

       HTML中有序、无序和定义列表三种。

1、无序列表始于 <ul> 标签。每个列表项始于 <li>。

例如:

实例

<ul>
<li>啊啊啊</li>
<li>不不不</li>
</ul>

运行实例 »

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

2、有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

例如:

实例

<ol>
<li>啊啊啊</li>
<li>不不不</li>
</ol>

运行实例 »

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

3、自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

例如:

实例

<dl>
<dt>网址</dt>
<dd>www.php.cn是网址</dd>
<dt>电话</dt>
<dd>13312345678是手机号码</dd>
</dl>

运行实例 »

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

3、列表与表格

       表格中tr是表格行,td是单元格。tr必须在table标签里,td必须在tr标签里。如:<table><tr><td></td></tr><table>。ul里的标签为li。如:<ul><li></li><ul>,同样<ol><li></li><ol>。列表与表格从显示效果上来说显示的样式不同。一般在分类不明显时可以使用列表,而在分类明晰或者按照某种定义可以划分为行或列的情况就要使用表格。而且使用表格可以进行简单的页面布局。

4、列表制作工作计划

例如:

实例

包含:<ul>
 <li>时间
  <ol>时间格式要求:
   <li>按照年-月-日记录</li>
   <li>内容简明扼要</li>
  </ol>
</li>
 <li>内容</li>
</ul>
时间格式要求:<ol>
 <li>按照年-月-日记录</li>
 <li>内容简明扼要</li>
</ol>
示例:<dl>
 <dt>2019-9-1</dt>
  <dd>9:00 公司晨会</dd>
  <dd>10:40 约见客户</dd>
 <dt>2019-8-31</dt>
  <dd>10:00 提交部门总结</dd>
  <dd>14:40 部门工作协调</dd>
</dl>

运行实例 »

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

5、表格显示商品清单

实例

<table border="1">
    <tr>
        <td>编号</td>
        <td>商品名称</td>
        <td>规格</td>
        <td>价格</td>
        <td>***数量</td>
    </tr>
    <tr>
        <td>1001</td>
        <td rowspan="2">复印纸</td>
        <td>200张/包</td>
        <td>15</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>100张/包</td>
        <td>10</td>
        <td>4</td>
    </tr>
<tr>
        <td colspan="4">1001</td>
        <td>140</td>
    </tr>
</table>

运行实例 »

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

6、注册表单

实例

<form action="." method="post">
   姓名:<input type="text" id="userName" name="userAge" placeholder="请输入用户名"><br>
   密码:<input type="password" id="userPwd" name="userAge" placeholder="请输入密码">
        <input type="password" id="userPwd2" name="userAge" placeholder="请再次输入密码"><br>
   性别:<input type="radio" id="userSexMan" name="sex" value="男">男
        <input type="radio" id="userSexWoman" name="sex" value="女">女<br>
   年龄:<input type="number" id="userAge" name="userAge" placeholder="请选择年龄"><br>
   学历:<select name="grade" id="grade">
           <option value="博士及以上">博士及以上</option>
           <option value="博士及以上">硕士</option>
           <option value="博士及以上">本科</option>
           <option value="博士及以上">专科</option>
        </select><br>
   <input type="submit" id="reg" name="reg" value="注册">&nbsp;&nbsp;
   <input type="reset" id="reset" name="reset" value="重置">
</form>

运行实例 »

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

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