前端之HTML，CSS（二）

前端之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>

　　有序列表：闭标签，由<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>

　　自定义列表：闭标签，由<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>

　　上述列表的效果展示建议保存至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>

表格属性
属性名 属性值 描述
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>

　　注意：对单元格内容居中对齐可以使用<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>

　　标题标签：作为表格的标题，像<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>

　　合并单元格：表格中会常出现单元格合并，可以单元多行合并，也可以多列合并。单元格属性：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>

　　表单标签

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

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>

　　注意：<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>

　　文本域标签：闭标签，<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>

　　下拉菜单：闭标签，<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>

　　在<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>

　　表单域：闭标签，用于包裹多个表单控件，格式：<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>

　　文档查阅

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

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

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

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

时间： 2024-10-04 16:42:32

前端之HTML，CSS（二）的相关文章

重修课程day48（前端三之css二）

一 伪类选择器 伪类选择器就是在查找的后面加上冒号和状态 hover:悬浮到上面就会变化一种状态 link:没有接触的状态 active:点击是触发的状态 visited:点击后的状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{

前端学习之css二

首先我们说一下各种属性: 1.水平对齐方式属性: left:把文本排列在左边.默认值:由浏览器决定 right:把文本排列在右边 center:把文本排在中间  justify:实现两端对齐文本效果 2.用于调图标的属性 font family:调节字体  font weight:调节粗细  font size:调节字体大小 lighter/bold/border/  text indent:首行缩进   font-stye:italic 文字样式   lettrt-spacing:字母间距  

前端学习（十二）：CSS排版

进击のpython 前端学习--CSS排版 本节主要介绍网页排版中主要格式化元素属性 帮助开发者把css技术与网页排版紧密联系到一起,来更好的实现网页设计效果 字体属性 字体 在日常工作中,我们会用到word来编写内容,比如可以对我们需要设置的内容设置字体.字号.颜色等设置 那么我们在网页中使用css样式时,同样也能做相关的设置 那我们可以试着为网页中的文字设置字体为微软雅黑 body{font-family:'微软雅黑'} 这里要注意不要设置不常用的字体,比如你给我来个'菲律宾体' 因为如果用

前端之DIV+CSS布局

刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识也不可逃避,之前总觉的前端是记忆的东西,遵循常规套路即可,总感觉繁琐,现在逼着自己学习了DIV+CSS,感觉是自己以前多虑了,什么东西只要你肯学,就不是问题,任何困难在坚持的态度下都会迎刃而解.现在来讲下前端的DIV+CSS: 1.之前的网页布局设计 以前我们依赖于强大的Dreamweaver图形化

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

前端开发：css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

作为一个前端工程师，CSS是最基本的入门课，你都能做出来吗？

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

【译】设计师/后端工程师也能马上实践！前端设计（CSS设计）的技巧

本文是我在众成翻译平台上认领并翻译的:设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧 ,正文内容如下: 大家好,我是2015年的应届毕业生小原,职位是前端工程师.不久前我加入了新业务的开发,负责前端的设计和实现.我想在回顾当时做法的同时,总结出一套能够轻松实现的前端编程设计方法. 什么是高灵活性的前端开发设计 不论开发什么样的业务,都可能面临界面样式没有完全确定,或者今后还需要增加或改变功能点的情况.因此代码开发与业务构思一样,都需要具备高度的灵活性,对变化频繁的前端来说更是如此.