HTML基础知识（body标签3）

最新推荐文章于 2023-10-20 16:03:26 发布

叮定

最新推荐文章于 2023-10-20 16:03:26 发布

阅读量340

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/mooonk/article/details/115149667

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

HTML基础知识（body标签3）

列表标签–有序列表、无序列表、列表嵌套、定义列表
表格标签
输入标签
表单标签
框架标签

一、标签类型

–>order list 有序列表 ol，双标签，其中由列表项标签

列出，也是双标签
ol中使用type属性设置序列号形式：阿拉伯数字、古罗马数字大/小、英文字母大/小

<ol>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>大数据</li>
</ol>

在这里插入图片描述

type="A"

在这里插入图片描述
–>unorder list 无序列表
ul与ol相同，属性值type可以为circle、disc、square

<ul type="circle">
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>大数据</li>
</ul>

在这里插入图片描述
–>列表嵌套（以外层无序，内层有序为例）

<ul>
   <li>
    <ol>
        <li>C</li>
        <li>C++</li>
    </ol>
   </li>
</ul>

在这里插入图片描述
–>定义列表dl,子标签有dt和dd，dt中方图片，dd中放文字，都是双标签
列表前没有任何修饰

<dl >
    <dt><img src="img1.jpg" width="100px" height="50px"></dt>
    <dd>$1599</dd>
</dl>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210323231239787.png
–>表格标签table，子标签行tr，子标签单元格td，都是双标签，table中的border属性为表格添加边线，cellspacing确定表格之间的缝隙大小，无缝隙时属性值为0px
编写时先写行tr，在tr中写子标签td
thead表头、body表体、foot表尾，bgcolor调整这三部分的颜色，单行的背景颜色直接在tr中修改
th是自带加粗和剧中效果的td

<table border="2px" cellspacing="0px">
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
    <tr bgcolor="aqua">
        <td>100</td>
        <td>50</td>
        <td>25</td>
    </tr>
</table>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210324092449869.png
表格的跨行跨列
跨行：colspan=“ ”，跨列：rowspan=“ ”
表格嵌套，把tr或td换成table

<table border="2px" cellspacing="0px">
    <thead bgcolor="purple">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    </thead>
    <tbody bgcolor="pink">
    <tr >
        <td>张三</td>
        <td rowspan="2">100</td>
    </tr>
    <tr >
        <td>李四</td>


</table>    </tr>
<tr>
    <td>王五</td>
    <td>25</td>
</tr>
</tbody>

在这里插入图片描述
–>输入标签 input 单标签，type属性确定输入类型，属性值text：文字；password：密码（不显示）；radio：单选框；checkbox：复选框；file：文件框；
非type属性值：文本域textarea双标签，下拉框select双标签：子标签是option
1）text文本输入

姓名<input type="text">

在这里插入图片描述
2）密码输入

密码<input type="password">

在这里插入图片描述
3）单选框
如果单选框要求所选内容互斥，只能选择一个，那么要求给每个input添加name属性，且name属性值相同
不互斥：

性别<input type="radio">男<input type="radio">女

在这里插入图片描述
互斥：

性别<input type="radio" name="man">男<input type="radio" name="man">女

在这里插入图片描述
4）复选框

爱好<input type="checkbox">打篮球<input type="checkbox">打羽毛球<input type="checkbox">打乒乓球

在这里插入图片描述
5）下拉框
select外部使用，option子标签说明每一个选项
select默认第一个为默认选项，若要设置其他的，对应的option加上selected就行

学校<select>
    <option>-请选择学校-</option>
    <option>陕西科技大学</option>
    <option>西安工业大学</option>
    <option>西安医学院</option>

在这里插入图片描述
6）文本域
width和heigth设置大小

个人简介<textarea width="250px" heigth="250px"></textarea>

在这里插入图片描述
7）文件框

照片<input type="file">

在这里插入图片描述
–>表单标签（数据从页面传入到后台数据库的标签），在网页上不显示
form直接包裹想要提交的数据源码：通过action属性确定提交地址，属性值为服务器地址；method属性确定数据提交方式，get方式（数据通过地址传送）–>提交量有限、只能穿文字、不安全，post方式（数据包传送提交量大
准备提交按钮submit，在input中type属性生成
在input中，button只是简单的按钮，不具备提交功能；submit具备提交功能，但是submit必须在form表单内部

<input type="submit" value="提交">

在这里插入图片描述
还需要给提交的输入框添加name（标记左右）和value（输入值）属性
–>框架标签
1）iframe
将多个不同的页面组织显示在同一个页面上，就是可以在当前页面引入其他页面，双标签
src可以指向网络路径和本地路径
网络路径：

   <iframe src="http://www.baidu.com" width="50%" height="250px"></iframe>

在这里插入图片描述
本地路径：同级别的文件名

  <iframe src="ProDay1.html" width="50%" height="250px"></iframe>

在这里插入图片描述
若给iframe框架name属性赋值，新建超链接的target值为name属性值，则超链接在iframe框架内部跳转

2）frameset双标签，使用时不能有body标签。frame是frameset的子标签，控制每个组成部分，是单标签
组成结构：（1）上中下，用rows属性，属性值用逗号隔开
（2）左中右，用cols属性

<frameset rows="200px,*,200px">
    <frame src="ProDay1.html">
    <frame src="proday2.html">
    <frame src="pro3.html">
</frameset>

在这里插入图片描述

二、完整源代码及运行结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三次练习</title>
</head>
<body>
<!--有序列表-->
<ol type="A">
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>大数据</li>
</ol>
<!--无序列表-->
<ul type="circle">
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>大数据</li>
</ul>
<!--定义列表-->
<dl >
    <dt><img src="img1.jpg" width="100px" height="50px"></dt>
    <dd>$1599</dd>
</dl>
<!--有序、无序嵌套-->
<ul>
   <li>
    <ol>
        <li>C</li>
        <li>C++</li>
    </ol>
   </li>
</ul>
<sub>%</sub>10
<big>100</big>100
<!--表格标签-->
<table border="2px" cellspacing="0px">
    <thead bgcolor="purple">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    </thead>
    <tbody bgcolor="pink">
    <tr >
        <td>张三</td>
        <td>100</td>
    </tr>
    <tr >
        <td>李四</td>
        <td>50</td>

    </tr>
    <tr>
        <td>王五</td>
        <td>25</td>
    </tr>
    </tbody>
</table>
<!--表格的跨行跨列-->
<table border="2px" cellspacing="0px">
    <thead bgcolor="purple">
    <tr>
        <td>姓名</td>
        <td>成绩</td>
    </tr>
    </thead>
    <tbody bgcolor="pink">
    <tr >
        <td>张三</td>
        <td rowspan="2">100</td>
    </tr>
    <tr >
        <td>李四</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>25</td>
    </tr>
    </tbody>
</table>
<!--使用form提交数据-->
<form action="http://www.baidu.com" method="get">
<!--输入标签-->
姓名<input type="text">
<br>
密码<input type="password">
<br>
性别<input type="radio">男<input type="radio">女
<br>
性别<input type="radio" name="man">男<input type="radio" name="man">女
<br>
爱好<input type="checkbox">打篮球<input type="checkbox">打羽毛球<input type="checkbox">打乒乓球
<br>
学校<select>
    <option>-请选择学校-</option>
    <option>陕西科技大学</option>
    <option>西安工业大学</option>
    <option>西安医学院</option>
</select>
<br>
个人简介<textarea width="250px" heigth="250px"></textarea>
<br>
照片<input type="file">
    <br>
    <input type="submit" value="提交">
    <br>
    <iframe src="http://www.baidu.com" width="50%" height="250px"></iframe>
    <iframe src="ProDay1.html" width="40%" height="250px"></iframe>

</form>
</body>
</html>

在这里插入图片描述

frameset源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>frame标签</title>
</head>
<frameset rows="200px,*,200px">
    <frame src="ProDay1.html">
    <frame src="proday2.html">
    <frame src="pro3.html">
</frameset>
</html>

叮定

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识（body标签3）

HTML基础知识（body标签3）列表标签–有序列表、无序列表、列表嵌套定义列表表格标签输入标签和表单标签一、标签类型–>order list 有序列表 ol，双标签，其中由列表项标签列出，也是双标签ol中使用type属性设置序列号形式：阿拉伯数字、古罗马数字大/小、英文字母大/小<ol> <li>java</li> <li>python</li> <li>c++</li>
复制链接

扫一扫