HTML标记

一、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>