前端之HTML,CSS(二)

  HTML标签

  列表标签

  无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表。格式:<ul><li>content</li><li>content</li>...</ul>,<ul>标签中只能嵌套<li>标签,<li>标签作为容器,包含内容,内容可以是文本或者其他元素。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表标签-测试</title>
</head>
<body>
<ul>
<li>Python</li>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>Ruby</li>
<li>PHP</li>
<li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
</body>
</html>

  有序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表。格式:<ul><li>content</li><li>content</li>...</ul>,<ul>标签中只能嵌套<li>标签,<li>标签作为容器,包含内容,内容可以是文本或者其他元素。与无序列表之间只是<ul>换成了<ol>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表标签-测试</title>
</head>
<body>
<ol>
<li>Python</li>
<li>Java</li>
<li>C</li>
<li>C++</li>
<li>Ruby</li>
<li>PHP</li>
<li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
</ol>
</body>
</html>

  自定义列表:闭标签,由<dl><dt></dt><dd></dd><dd></dd>...</dl>组合而成,效果成纵向无标记符号列表。格式:<dl><dt>content</dt><dd>content</dd>...</dl>,<dl>标签中嵌套一组<dt>标签,<dd>标签作为容器,包含内容,内容可以是文本或者其他元素,<dd>标签内容是对<dt>标签内容的扩展和说明。

 !DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表标签-测试</title>
</head>
<body>
<dl>
<dt>中国</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dd>深圳</dd>
</dl>
</body>
</html>

  上述列表的效果展示建议保存至list.html文件,使用浏览器打开查看一下。

  表格标签

  表格标签由<table></table>表示整体外框(不显示,只是界定范围),<tr></tr>表示表格的行标签,<td>content</td>表示单元格标签,表格中的内容嵌入<td></td>单元格标签中。所以,表定义为一个表格范围,划分为多个行,行又划分为多个单元格,每个单元记录内容。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table>
<tr>
<td>Python</td>
<td>PHP</td>
<td>Perl</td>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
表格属性
属性名 属性值 描述
border 数字 设置表格边框,默认为0,无边框
width 像素 设置表的宽度,注意是表整体
height 像素 设置表的高度,注意是表整体
align left,center,right 设置表的位置,注意是表整体,默认为左对齐
cellspacing 像素 设置单元格与单元格之间的距离,注意表整体的外部边框是一个大单元格。默认为2px
cellspadding 像素 设置单元格与单元格中内容的距离,默认为1px

  表格属性效果(一般推荐设置border,cellspacing,cellspadding属性值设置为0.)

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table border="1", width="100", height="100", align="center", cellspacing="3", cellpadding="3">
<!--尝试去改动上述属性值验证效果 -->
<tr>
<td>Python</td>
<td>PHP</td>
<td>Perl</td>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>

  注意:对单元格内容居中对齐可以使用<tr align="center">或者<td align="center">,推荐是用CSS调整。

  表头标签:一种对单元格内容加粗和居中的表示,一般去取表格的首行或者首列作为表头。闭标签,使用<th></th>标签,格式:<th>content</th>,取代<td></td>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table>
<tr>
<th>Python</th>
<th>PHP</th>
<th>Perl</th>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>

  标题标签:作为表格的标题,像<tr><td><th>一般嵌入<table>标签中。闭标签,效果居中显示,格式:<caption>title</caption>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table>
<caption>编程语言</caption>
<tr>
<th>Python</th>
<th>PHP</th>
<th>Perl</th>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>C#</td>
</tr>
</table>
</body>
</html>

  合并单元格:表格中会常出现单元格合并,可以单元多行合并,也可以多列合并。单元格属性:rowspan,行合并;colspan,列合并。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签-测试</title>
</head>
<body>
<table border="1">
<tr>
<th>X</th>
<th>X</th>
<th>X</th>
</tr>
<tr>
<td rowspan="2">X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td colspan="2">X</td>
</tr>
</table>
</body>
</html>

  表单标签

  表单的组成:表单控件、提示信息、表单域。

input控件:开标签,<input type="" />

表单控件属性
属性 属性值 描述
type text 单行文本框
password 密码输入框
radio 单选按钮框
checkbox 多选按钮框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像提交按钮
file 文件域
name 用户自定义文本 控件名称
value 用户自定义文本 控件默认值
checked checked 控件默认选项

  input控件效果

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签-测试</title>
</head>
<body>
<table border="0", cellpadding="0", cellspacing="0", align="center">
<caption>个人信息表</caption>
<tr>
<td>用户名</td>
<td><input type="text", value="Bellamy" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex", checked="checked" />
女<input type="radio" name="sex" />
</td>
</tr>
<tr>
<td>爱好</td>
<td>
运动<input type="checkbox", checked="checked" />
游戏<input type="checkbox" />
阅读<input type="checkbox" />
音乐<input type="checkbox" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="data:images/submit.jpg">
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" /></td>
</tr>
</table>
</body>
</html>

  注意:<input type="radio", name="xx">单选框按钮,必须在多个选项中添加相同的name属性值,将其归类为一组选择项,从中选择一项。

  label标签:闭标签,效果扩大点击输入范围,格式:<label>用户名:<input type="text" /></label>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>label标签-测试</title>
</head>
<body>
<!-- 点击用户名,文本框无光标输入提示 -->
用户名:<input type="text" />
<br />
<!-- 点击用户名,文本框有光标输入提示 -->
<label>用户名:<input type="text" /></label>
</body>
</html>

  注意:<label>标签应用于两个<td>标签时,无法达到扩大点击输入范围,可以使用<label for="id">中的for属性指定。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签-测试</title>
</head>
<body>
<table>
<tr>
<td>
<label for="user_name">用户名</label>
</td>
<td>
<input type="text", value="Bellamy", id="user_name" />
</td>
</tr>
</table>
</body>
</html>

  文本域标签:闭标签,<textarea></textarea>,效果可以输入多行文本,即文本可以换行输入,格式:<textarea>content</textarea>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea标签-测试</title>
</head>
<body>
<table>
<tr>
<td>留言</td>
<td>
<textarea>此处显示默认文本</textarea>
</td>
</tr>
</table>
</body>
</html>

  下拉菜单:闭标签,<select><option></option>...</select>,效果点击出现下来选项,格式:<select><option>选项</option><option>选项</option>...</select>。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单-测试</title>
</head>
<body>
<table>
<tr>
<td>出生年月</td>
<td>
<select>
<option>请选择年</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>...</option>
</select>
<select>
<option>请选择月</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>...</option>
</select>
</td>
</tr>
</table>
</body>
</html>

  在<option>设置selected="selected"属性可以设置默认显示选项。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单-测试</title>
</head>
<body>
<table>
<tr>
<td>出生年月</td>
<td>
<select>
<option>请选择年</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option selected="selected">1993</option>
<option>...</option>
</select>
<select>
<option>请选择月</option>
<option>1月</option>
<option>2月</option>
<option selected="selected">3月</option>
<option>4月</option>
<option>5月</option>
<option>...</option>
</select>
</td>
</tr>
</table>
</body>
</html>

  表单域:闭标签,用于包裹多个表单控件,格式:<form action="URL", method="提交方式" />,其中action属性指定接受处理表单的服务器URL地址,method指提交表单的方式,一般取HTTP方法的get或者post方法。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签-测试</title>
</head>
<body>
<form action="demo.php", method="post">
<table border="0", cellpadding="0", cellspacing="0", align="center">
<caption>个人信息表</caption>
<tr>
<td>用户名</td>
<td><input type="text", value="Bellamy" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex", checked="checked" />
女<input type="radio" name="sex" />
</td>
</tr>
<tr>
<td>爱好</td>
<td>
运动<input type="checkbox", checked="checked" />
游戏<input type="checkbox" />
阅读<input type="checkbox" />
音乐<input type="checkbox" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="data:images/submit.jpg">
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="注册" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>

  文档查阅

  HTML标签还有很多,博客中提到的是我们常用标签,其他标签的使用和学习可以查阅W3C和MDN。

  W3C:https://www.w3cschool.cn/

  MDN:https://www.w3cschool.cn/

认识HTML中表格、列表标签以及表单控件的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  2. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  3. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  4. Bootstrap_表单_表单控件

    一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...

  5. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  6. HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  7. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  8. HTML入门(列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签)

    一.列表 1.作用:默认显示方式为从上到下的显示数据 2.列表的组成 列表类型和列表项 3.列表的分类:有序列表   无序列表   自定义列表 无序列表语法为ul>li, 语法:ul代表列表,l ...

  9. Excel中的表单控件和active控件

    EXCEL中有两种控件:表单控件和active控件 表单控件是excel5和excel95开始使用的,从excel97开始,active控件开始出现 关于表单控件和active控件的区别和使用范围,网 ...

随机推荐

  1. Luogu 4844 LJJ爱数数

    LOJ 6482 设$d = gcd(a, b)$,$xd = a$,$yd = b$,因为$\frac{1}{a} + \frac{1}{b} = \frac{a + b}{ab} = \frac{ ...

  2. Luogu 4254 [JSOI2008]Blue Mary开公司

    BZOJ 1568 学习了一波李超线段树. 大佬blog 这个东西专门用来维护插入一条线段和区间/单点的最大/最小值. 插入的时候讨论: 1.如果当前结点上没有线段,那么直接插入. 2.如果当前结点上 ...

  3. Tomcat 与 数据库连接池 的小坑

    连接池的优点众所周知. 我们可以自己实现数据库连接池,也可引入实现数据库连接池的jar包,按要求进行配置后直接使用. 关于这方面的资料,好多dalao博客上记录的都是旧版本Tomcat的配置方式,很可 ...

  4. 【Web API2】ASP.NET Web API Security

    实现安全的方式既可以是host提供,也可以框架提供. 1,HTTP Module 方式,工作在IIS上,所以web api要托管在IIS上才行.其作用于HTTP管道的最前端,所以这种方式影响的是全局, ...

  5. 编写高质量代码改善C#程序的157个建议——建议25:谨慎集合属性的可写操作

    建议25:谨慎集合属性的可写操作 如果类型的属性中有集合属性,那么应该保证属性对象是由类型本身产生的.如果将属性设置为可写,则会增加抛出异常的几率.一般情况下,如果集合属性没有值,则它返回的Count ...

  6. MVC5中 在更新 Microsoft.Aspnet.Identity 后编译器错误

    环境:vs2013预览版chs,我试着创建vb.net web应用,从对话框中选择MVC和WebAPI.编译ok了.通过NuGet管理器更新了Microsoft.Aspnet.Identity.Cor ...

  7. fabric Clone

    记录下: var newObj = fabric.util.object.clone(obj); decDoc.dropCanvas.add(newObj., top: }));

  8. windows phone之山寨win8圆形进度条

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  9. 简单使用postman

    一.get请求 获取学生信息接口文档内容: 简要描述: 获取学生信息接口 请求URL: http://ip/api/user/stu_info 请求方式: get 参数: 参数名 必选 类型 说明 s ...

  10. rsync入门

    rsync是Linux/unix下一个用于远程文件(目录)同步的一个精巧的小工具程序,有很多文章讨论了其功能和实现原理,本文主要就不赘述了. 主要介绍下实践时使用的一些方法和细枝末节留作工作笔记以便日 ...