html 快速入门之路 (续)

最新推荐文章于 2025-06-17 10:13:37 发布

炸鸡大叔

最新推荐文章于 2025-06-17 10:13:37 发布

阅读量324

点赞数

分类专栏： HTML 文章标签： html 标签

HTML 专栏收录该内容

6 篇文章

订阅专栏

4、列表标签
——比如现在显示这样的效果
传媒大学
国际传媒
传媒经济
国际新闻
** <dl></dl>:表示列表的范围
** 在dl里面 <dt></dt>: 上层内容
** 在dl里面 <dd></dd>:下层内容
——代码
<dl>
<dt>传媒大学</dt>
<dd>国际传媒</dd>
<dd>传媒经济</dd>
<dd>国际新闻</dd>
</dl>
—— 比如想要实现有序的排序效果：
1.国际传媒
2.传媒经济
3.国际新闻

a.国际传媒
b.传媒经济
c.国际新闻

i.国际传媒
ii.传媒经济
iii.国际新闻
**<ol></ol>: 有序的列表范围
—— 属性 type :设置排序方式 1 （默认） a i
** 在 ol 标签里面 <li>具体内容</li>
—— 代码
<ol type="a">
<li>国际传媒</li>
<li>传媒经济</li>
<li>国际新闻</li>
</ol>

—— 显示这样的效果
特殊符号（方框）国际传媒

** <ul></ul>: 表示无序列表的范围
属性： type ：空心圆 circle 、实心圆 disc（默认）、实心方块square ，
——代码
<ul>
<li>国际传媒</li>
<li>传媒经济</li>
<li>国际新闻</li>
</ul>
5、图像标签
* <img src="图片的路径">
—— src : 图片的路径
—— width : 图片的宽度
—— height : 图片的高度
—— alt : 鼠标停留图片上面的时候会显示文字。
6、路径的介绍
* 分类：两类
** 绝对路径
—— http://www.baidu.com
** 相对路径
—— 一个文件相对于另一个文件的位置。
—— 三种：
** html 文件和图片在一个路径下，可以直接写文件名称。
** 图片在Html 的下层目录
** 图片在html 的上层目录
表示上层路径的方法： ../

7、超链接标签
— <a href="链接到资源的路径" >显示在页面上的内容</a>
** href ：链接的资源地址
** target: 设置打开的方式，默认是在当前页面打开
—— _blank: 在一个新窗口打开
—— _self : 在当前页打开默认
—— 当超链接不需要到任何的地址在href 里面加 #
— <a href ="#">这是一个超链接</a>

* 定位资源
** 如果想要定位资源：定义一个位置
<a name="top">顶部</a>
** 回到这个位置
<a href= "#top">回到顶部</a>
8、表格标签
* 可以对数据进行格式化，是数据显示更加清晰
* <table></table>:表示表格的范围
—— border :表格线
—— bordercolor:表格线的颜色
—— cellspacing :单元格直接的距离
—— width : 表格的宽度
—— height: 表格的高度
**在table 里面 <tr></tr>
**在tr里面<td></td>

<tr>用来定义一行，<td>用来定义一个单元格

** 表格的标题
<caption>表格标题</caption>
** 合并单元格
—— rowspan:跨行
<td rowspan="3">呵呵</td>
—— colspan: 跨列
<td colspan="3">哈哈</td>

9、表单标签（很重要）
* <form></form>: 定义一个表单的范围
* * 输入项：可以输入的内容或选择内容的部分
—— 大部分的输入项使用<input type="输入的类型">
比如普通输入项：手机号码：<input type="text"/>
密码输入项：输入密码：<input type="password"/>
单选输入项：性别： <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女
_在里面需要加属性name ,name属性值必须一样
** 复选输入框：爱好：<input type="checkbox" name="love"/>读书<input type="checkbox" name="love"/> 音乐<input type="checkbox" name="love"/> 游戏
** 文件输入项： <input type="file"/>
** 下拉输入项（不是在input标签里面的）
生日：<select name="birth">
<option value="1">请选择</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
** 文本域
描述：<textarea cols="20" rows="20"></textarea>
** 隐藏项
<input type="hidden"/>
** 提交按钮
<input type="submit" value="注册">

** 使用图片提交

<input type="image" src="图片路径"/>
** 重置按钮：回到输入项的初始状态
<input type="reset"/>
** 普通按钮
<input type="button" value=""/>
10、案例：使用标签实现注册页面

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<h2 align="center">注册csdn的账号</h2>
<table width="100%">
<tr>
<td align="right">注册邮箱: </td>
<td><input type="text" name="mail"></td>
</tr>
<tr>
<td> </td>
<td>你可以使用<a href="#">账号<a/>或者<a href="#">手机号<a/>来注册</td>
</tr>
<tr>
<td align="right">真实姓名：</td>
<td><input type="text" name="realname"></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td align="right">生日：</td>
<td>
<select name="year">
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>年
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>月
<select name="day">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我现在：</td>
<td>
<select name="now">
<option value="study">我正在上学</option>
<option value="work">我正在工作</option>
</select>

</td>
</tr>
<tr>
<td align="right">验证码：</td>
<td>
<input type="text" name="verycode"/>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
效果图：