码迷,mamicode.com
首页 > Web开发 > 详细

前端之HTML,CSS(二)

时间:2019-02-21 00:15:38      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:有序列表   cell   spl   嵌套   reset   ima   closed   label   cbe   

前端之HTML,CSS(二)

  HTML标签

  列表标签

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>无序列表标签-测试</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>Python</li>
10         <li>Java</li>
11         <li>C</li>
12         <li>C++</li>
13         <li>Ruby</li>
14         <li>PHP</li>
15         <li>
16             <ul>
17                 <li>HTML</li>
18                 <li>CSS</li>
19                 <li>JavaScript</li>
20             </ul>
21         </li>
22     </ul>
23 </body>
24 </html> 
View Code

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>无序列表标签-测试</title>
 6 </head>
 7 <body>
 8     <ol>
 9         <li>Python</li>
10         <li>Java</li>
11         <li>C</li>
12         <li>C++</li>
13         <li>Ruby</li>
14         <li>PHP</li>
15         <li>
16             <ol>
17                 <li>HTML</li>
18                 <li>CSS</li>
19                 <li>JavaScript</li>
20             </ol>
21         </li>
22     </ol>
23 </body>
24 </html> 
View Code

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

技术图片
 1 !DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>无序列表标签-测试</title>
 6 </head>
 7 <body>
 8     <dl>
 9         <dt>中国</dt>
10         <dd>北京</dd>
11         <dd>上海</dd>
12         <dd>广州</dd>
13         <dd>深圳</dd>
14     </dl>
15 </body>
16 </html> 
View Code

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

  表格标签

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>表格标签-测试</title>
 6 </head>
 7 <body>
 8     <table>
 9         <tr>
10             <td>Python</td>
11             <td>PHP</td>
12             <td>Perl</td>
13         </tr>
14         <tr>
15             <td>C</td>
16             <td>C++</td>
17             <td>C#</td>
18         </tr>
19     </table>
20 </body>
21 </html> 
View Code
表格属性
属性名 属性值 描述
border 数字 设置表格边框,默认为0,无边框
width 像素 设置表的宽度,注意是表整体
height 像素 设置表的高度,注意是表整体
align left,center,right 设置表的位置,注意是表整体,默认为左对齐
cellspacing 像素 设置单元格与单元格之间的距离,注意表整体的外部边框是一个大单元格。默认为2px
cellspadding 像素 设置单元格与单元格中内容的距离,默认为1px

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>表格标签-测试</title>
 6 </head>
 7 <body>
 8     <table border="1", width="100", height="100", align="center", cellspacing="3", cellpadding="3">
 9 <!--尝试去改动上述属性值验证效果 -->
10         <tr>
11             <td>Python</td>
12             <td>PHP</td>
13             <td>Perl</td>
14         </tr>
15         <tr>
16             <td>C</td>
17             <td>C++</td>
18             <td>C#</td>
19         </tr>
20     </table>
21 </body>
22 </html> 
View Code

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

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>表格标签-测试</title>
 6 </head>
 7 <body>
 8     <table>
 9         <tr>
10             <th>Python</th>
11             <th>PHP</th>
12             <th>Perl</th>
13         </tr>
14         <tr>
15             <td>C</td>
16             <td>C++</td>
17             <td>C#</td>
18         </tr>
19     </table>
20 </body>
21 </html> 
View Code

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>表格标签-测试</title>
 6 </head>
 7 <body>
 8     <table>
 9         <caption>编程语言</caption>
10         <tr>
11             <th>Python</th>
12             <th>PHP</th>
13             <th>Perl</th>
14         </tr>
15         <tr>
16             <td>C</td>
17             <td>C++</td>
18             <td>C#</td>
19         </tr>
20     </table>
21 </body>
22 </html> 
View Code

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>表格标签-测试</title>
 6 </head>
 7 <body>
 8     <table border="1">
 9         <tr>
10             <th>X</th>
11             <th>X</th>
12             <th>X</th>
13         </tr>
14         <tr>
15             <td rowspan="2">X</td>
16             <td>X</td>
17             <td>X</td>
18         </tr>
19         <tr>
20             <td colspan="2">X</td>
21         </tr>
22     </table>
23 </body>
24 </html> 
View Code

  表单标签

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

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

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

  input控件效果

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>表单标签-测试</title>
 6 </head>
 7 <body>
 8     <table border="0", cellpadding="0", cellspacing="0", align="center">
 9         <caption>个人信息表</caption>
10         <tr>
11             <td>用户名</td>
12             <td><input type="text", value="Bellamy" /></td>
13         </tr>
14         <tr>
15             <td>密码</td>
16             <td><input type="password" /></td>
17         </tr>
18         <tr>
19             <td>性别</td>
20             <td>
21<input type="radio" name="sex", checked="checked" />
22<input type="radio" name="sex" />
23             </td>
24         </tr>
25         <tr>
26             <td>爱好</td>
27             <td>
28                 运动<input type="checkbox", checked="checked" />
29                 游戏<input type="checkbox" />
30                 阅读<input type="checkbox" />
31                 音乐<input type="checkbox" />
32             </td>
33         </tr>
34         <tr>
35             <td></td>
36             <td>
37                 <input type="button" value="注册" />
38                 <input type="submit" value="提交" />
39                 <input type="reset" value="重置" />
40             </td>
41         </tr>
42         <tr>
43             <td></td>
44             <td>
45                 <input type="image" src="images/submit.jpg">
46             </td>
47         </tr>
48         <tr>
49             <td>上传头像</td>
50             <td><input type="file" /></td>
51         </tr>
52     </table>
53 </body>
54 </html> 
View Code

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

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>label标签-测试</title>
 6 </head>
 7 <body>
 8     <!-- 点击用户名,文本框无光标输入提示 -->
 9     用户名:<input type="text" />
10     <br />
11     <!-- 点击用户名,文本框有光标输入提示  -->
12     <label>用户名:<input type="text" /></label>
13 </body>
14 </html> 
View Code

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>textarea标签-测试</title>
 6 </head>
 7 <body>
 8     <table>
 9         <tr>
10             <td>留言</td>
11             <td>
12                 <textarea>此处显示默认文本</textarea>
13             </td>
14         </tr>
15     </table>
16 </body>
17 </html> 
View Code

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>下拉菜单-测试</title>
 6 </head>
 7 <body>
 8     <table>
 9         <tr>
10             <td>出生年月</td>
11             <td>
12                 <select>
13                     <option>请选择年</option>
14                     <option>1990</option>
15                     <option>1991</option>
16                     <option>1992</option>
17                     <option>1993</option>
18                     <option>...</option>
19                 </select>
20                 <select>
21                     <option>请选择月</option>
22                     <option>1月</option>
23                     <option>2月</option>
24                     <option>3月</option>
25                     <option>4月</option>
26                     <option>5月</option>
27                     <option>...</option>
28                 </select>
29             </td>
30         </tr>
31     </table>
32 </body>
33 </html> 
View Code

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>下拉菜单-测试</title>
 6 </head>
 7 <body>
 8     <table>
 9         <tr>
10             <td>出生年月</td>
11             <td>
12                 <select>
13                     <option>请选择年</option>
14                     <option>1990</option>
15                     <option>1991</option>
16                     <option>1992</option>
17                     <option selected="selected">1993</option>
18                     <option>...</option>
19                 </select>
20                 <select>
21                     <option>请选择月</option>
22                     <option>1月</option>
23                     <option>2月</option>
24                     <option selected="selected">3月</option>
25                     <option>4月</option>
26                     <option>5月</option>
27                     <option>...</option>
28                 </select>
29             </td>
30         </tr>
31     </table>
32 </body>
33 </html> 
View Code

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

技术图片
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>表单标签-测试</title>
 6 </head>
 7 <body>
 8     <form action="demo.php", method="post">
 9         <table border="0", cellpadding="0", cellspacing="0", align="center">
10             <caption>个人信息表</caption>
11             <tr>
12                 <td>用户名</td>
13                 <td><input type="text", value="Bellamy" /></td>
14             </tr>
15             <tr>
16                 <td>密码</td>
17                 <td><input type="password" /></td>
18             </tr>
19             <tr>
20                 <td>性别</td>
21                 <td>
22<input type="radio" name="sex", checked="checked" />
23<input type="radio" name="sex" />
24                 </td>
25             </tr>
26             <tr>
27                 <td>爱好</td>
28                 <td>
29                     运动<input type="checkbox", checked="checked" />
30                     游戏<input type="checkbox" />
31                     阅读<input type="checkbox" />
32                     音乐<input type="checkbox" />
33                 </td>
34             </tr>
35              <tr>
36                 <td></td>
37                 <td>
38                     <input type="image" src="images/submit.jpg">
39                 </td>
40             </tr>
41             <tr>
42                 <td>上传头像</td>
43                 <td><input type="file" /></td>
44             </tr>
45             <tr>
46                 <td></td>
47                 <td>
48                     <input type="button" value="注册" />
49                     <input type="submit" value="提交" />
50                     <input type="reset" value="重置" />
51                 </td>
52             </tr>
53         </table>
54     </form>
55 </body>
56 </html>
View Code

  文档查阅

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

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

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

前端之HTML,CSS(二)

标签:有序列表   cell   spl   嵌套   reset   ima   closed   label   cbe   

原文地址:https://www.cnblogs.com/snow-lanuage/p/10389744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!