HTML入门基础2

目录

         无序列表

有序列表

自定义列表

table表格

iframe内联框架

input标签

新增input标签

---

• 无序列表

     无序列表的特性 :

1. 没有顺序，每个li标签独占一行（块元素）
2. 默认li标签项前面有个实心小圆点
3. 一般用于无序类型的列表，如导航、侧边栏新闻、 有规律的图文组合模块

<!-- 1无序列表 -->
<ul>
	<li><a href="#">第一行</a></li>
	<li>第二行</li>
	<li>第三行</li>
	<li>第四行</li>
</ul>

 

• 有序列表

     有序列表的特性 :

1. 有顺序，每个li标签独占一行（块元素）

2. 默认li标签项前面有顺序标记

3. 一般用于排序类型的列表，如试卷、问卷选项等

<!-- 2有序列表 -->
<ol>
	<li><a href="#">第一行</a></li>
	<li>第二行</li>
	<li>第三行</li>
	<li>第四行</li>
</ol>

• 自定义列表

     定义列表的特性 :

1. 没有顺序，每个li标签、li标签独占一行（块 元素）

2. 默认没有标记

3. 一般用于一个标题下有一个或多个列表项的情况

<!-- 3自定义列表 -->
<dl>
    <dt>山</dt>
    <dd>黄山</dd>
    <dd>大别山</dd>
    <dd>天柱山</dd>
    <dd>大蜀山</dd>
    <dd>老家的山</dd>
    <dd>九华山</dd>
</dl>

  列表对比：

• table表格

表格基本标签：

标签： table tr td

说明： 表格 行 单元格

表格结构标签

标签： thead    tbody     tfoot         th

说明：  表头     表身      表尾    表头单元格

表格基本结构：<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。

<table border="1">
    <tr>
        <td>我是单元格</td>
        <td>我是单元格</td>
    </tr>
    <tr>
        <td>我是单元格</td>
        <td>我是单元格</td>
    </tr>
</table>

表格完整结构：表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。

表格语义化之后，使得代码更清晰和更利于后期维护。

<table border="1">
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <!--表尾-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

合并行和列：合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。就是说rowspan是上下方向合并，从来colspan是左右方向合并。

合并行：语法：<td rowspan = "合并的行数">

<table border="1">
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td rowspan="2">标准单元格1</td>
        <td>标准单元格2</td>
    </tr>
    <tr>
​
        <td>标准单元格2</td>
    </tr>
    <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
    </tr>
</table>

合并列：语法：<td colspan = "合并的列数">

<table border="1">
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td colspan="2">标准单元格1</td>
    </tr>
    <tr>
        <td>标准单元格2</td>
        <td>标准单元格2</td>
    </tr>
    <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
    </tr>
</table>

补充：

1. align代表水平方向 left center right
2. valign代表垂直方向 top middle bottom

<table border="1px" width="500" height="300px" bgcolor="orange">
    <!-- 第一行 -->
    <tr height="50px" bgcolor="yellow">
        <th>表头</th>
        <th>表头</th>
        <th width="200px">表头</th>
    </tr>
    <!-- 第2行 -->
    <!-- align代表水平方向  left  center  right -->
    <tr>
        <!-- colspan是左右方向单元格的合并 -->
        <td colspan="2" align="center">2-1水平居中      </td>
        <!-- rowspan是上下方向的单元格合并 -->
        <td align="right" rowspan="3">2-3右对齐</td>
    </tr>
    <!-- 第3行 -->
    <!-- valign代表垂直方向  top middle bottom -->
    <tr>
        <td valign="top">3-1</td>
        <td>3-2</td>
    </tr>
    <!-- 第4行 -->
    <tr>
        <td valign="bottom">4-1</td>
        <td>4-2</td>
    </tr>
</table>

• iframe内联框架

语法：<iframe src = "引用页面的地址" name = "框架标识名"></iframe>

iframe属性（实现页面间的相互跳转）

1. 在被打开的框架上加name属性

2. 在超链接上设置target目标窗口属性为希望显示的 框架窗口

<h1>使用if嵌套网页</h1>
<a href="http://www.so.com" target="if">打开360页面</a>
<a href="03细线表格.html" target="if">打开细线表格页面</a>
<a href="01列表标签.html" target="if">返回默认的列表页面</a>
<br><br>
<iframe name="if" src="http://www.so.com" width="500" height="400"></iframe>

 

• input标签

type属性： text    password     radio    checkbox     submit      reset       button

说明：      文本框     密码框      单选框      多选框      提交按钮   重置按钮   普通按钮

还有一些属性：

type： file 单文件选择

如果<input type = "file" multiple > file后面加 multiple就会变多文件选择

• 新增input标签

 

placeholder表单属性：提示文本（占位符）

<!-- 文本域 -->
姓名:<input type="text" name="userName" placeholder="请输入你的名字："/>