整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
技术等级】初级
【承接文章】《CSS文本属性，让你的段落更加美观，前端之路更进一步》
本文重点讲解CSS技术中文本样式的text-align属性以及”块级元素”和“内联元素”的使用。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
一、设置对齐方式：
CSS技术利用text-align属性来设置对齐方式
首先，在使用该属性的同时，要明确这是谁相对于谁的对齐方式。让我们一起来看下列代码。
<div>
<p style=”text-align:center”></p>
</div>
上述代码中使用了text-align属性的标记对是<p></p>标记对。那么，是谁相对于谁垂直居中了呢？下面列举了两种可能的情况：
<p>标记对相对于它的容器<div>标记对垂直居中
<p>标记对的内容（即“”文字）相对于<p>标记对本身垂直居中。
请大家仔细想一想，应该是上述那种情况？
正确答案是第二种。也就是说：使用了text-align属性的标记对，是这个标记对的内容在该标记对内部实现了对齐效果，而不是这个标记对在其容器内部实现了对齐效果。
其次，要想实现文本相对于自身的对齐方式，那么自身的标记对必须具备一定的宽度和高度。以上述代码来说，<p>标记对默认情况下的宽度为整个页面的宽度，也就是说这个标记对自身是有一定的宽度的，同时内部的文本数量又比较少，所以text-align在使用的过程中是可以看到效果的。
综合上述的内容，可以说text-align属性在使用时要注意以下两点：
对齐效果是自身内部的文本内容相对于自身这个容器的对齐方式。
标记对自身必须具备一定的宽度。
text-align属性可以有多种取值：
left，左对齐。内部文本在自身容器中左对齐
center，居中对齐。内部文本在自身容器中居中对齐。
right，右对齐。内部文本在自身容器中右对齐。
justify，两端对齐。内部文本在自身容器中两端对齐，即整个段落的左侧是整齐的，右侧也是整齐的。这种对齐方式和左对齐是有区别的。左对齐可以明显的观察出段落的右侧是不整齐的。
左对齐和两端对齐的区别
从上图中可以看出，两端的最右侧，也就是深色直线比对的位置。采用的左对齐的段落这条线附近的段落文本是没有对齐的；而采用了两端对齐的这条线附近的段落文本是对齐的。
二、块级元素与内联元素
我们将HTML的各个标记，根据在页面中展示内容的外观，分为两类：一类叫做“块级元素”，另一类叫做“内联元素”。
典型的“块级元素”是<div></div>标记对。
典型的“内联元素”是<span></span>标记对。
这两个标记对本身没有任何外观效果，内部可以盛放任何HTML标记对，是网页布局时常用的两个容器。 默认情况下，<div></div>标记的宽度为页面的整宽，即一个<div></div>标记占一行，被称为“块级元素”。<span></span>标记的宽度为内部内容的宽度，多个<span></span>标记的内容可以在一行内显示，被称为“行内元素”或“内联元素”。
常用的块级元素标记还包括：<p></p> <ul></ul> <ol></ol> <li></li> <table></table> <form></form>
常用的内联元素标记还包括：<a></a> <img /> <input /> <select></select> <textarea></textarea>
三、块级元素与内联元素的区别：
块级元素和内联元素的的区别可以从下图中看到。
“块级元素”和“内联元素”的区别
四、学习两个新的CSS属性
我们这里学习两个简单的CSS属性，分别为width和height属性。
width，为块级元素设置宽度。
height，为块级元素设置高度。
这两个属性的取值必须是带有单位的数值。
例：div{width:200px; height:30px;}
上述代码将页面中所有的<div></div>标记对都设置为了宽度200像素、高度30像素的矩形。也就是说这样一来，<div></div>标记对再也不占有整个页面的整宽了，但是仍然为独占一行的情况。
这两个属性是用来设置元素的宽度和高度的，但是只能适用于块级元素。这也是内联元素没有宽度的一个重要原因：因为利用width属性为内联元素设置宽度是没有效果的。
下一篇文章中，小海老师会为大家从细节上深入剖析line-height属性以及该属性的用法。对于渴望在前端开发道路上前进的你一定不能错过！
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
、 结构
一、标记<Html> 建立HTML文档
<Head> 设置网页头部和其它信息
<Body> 设计文件格式及内文所在<Body> 元素的属性
Text 设置页面文字的送顔色 Bgcolor 设置页面背景的顡色
Background 设置页面的背景图像 Link设置页面黙认的顔色
Bgproperties 设置页面的背景图像为固定，不随页面的滚动而滚动
Alink 设置鼠标正在单击时候的链接顔色 Vlink 设置访问过后的链接顔色
Topmargin 设置页面的上边距 Leftmargin 设置页面的左边距
二、头部
标记 <Base> 当前文档的URL全称 <Title>设置显示在浏览器在上方的标题内容
<Isindex> 表明该文档是一个可用于检索的网关脚本
<Meta> 有关文档本身的信息，例如用于查询的关键词，用于获取该文档的有效期等
<Style> 设置CSS层叠样式表的内容
<link> 设置外部文件的链接 <script> 设置页面中程序脚本的内容
<Mate> 标记属性
Http-Equiv 生成一个HTTP标题域，它的取值与另一个属性相同，
例如Http-Equiv=Expires，实际取值由Content确定
Name 如果元数据是以关键字/取值的形式出现的，Name 表示键字,
如Author或ID
Content 关键字/取值的内容
三、文字
文字标记 <HNumber>……<1HNumber> Number=1.2.3.4.5.6
分别指1至6级标题
<Font>文字
文字的修饰标记 <B>/<strong> 粗体 <I>/<Em>/<cite> 斜体
<Sup>上标 <sub>下标 <Big>大字号 <small>小字号
<U>下划线 <S>/<strike>删除线 <Address>地址
<Tt>打字机文字 <Blink>闪烁文字（只适用于Netscape浏览器）
<Code>/<samp>等宽 <kbd>键盘输入文字 <Var>声明变量
<Fant>标记的属性
Face 字体 Size字号 Color顔色
四.列表
列表标记 <Ul>无序列表 <Ol>有序列表 <Dir>回录列表 <Dl>定义列表
<Meru>菜单列表 <Dt>·<Dd>定义列表的标记 <Li>列表项目的标记
<Ul><Ol>标记的属性 Type设置列表类型 start设置列表起始属性
Type的属性值 1 数字 a 小写字母 A 大写字母 i小写罗马数字
I 大写罗马数字 Disc ● Circle ○ square □
五.链接
链接标记 <A> 链接
<A>标记的属性 Href 指定链接地址 Name给链接命名
Title设置链接提示文字 Target指定链接的目标窗口
Target属性值 -parent在上一级窗口中打开。一般使用分帧的框架页会经常使用
-bank在新窗口中打开
-self在同一个帧或窗口中打开.这项一般不用设置
Href属性值 http:// 进入万维网站点 news://启动新闻讨论
ftp:// 进入文件传输服务器 mailto:// 启动新闻讨论组
telnet:// 启动telnet方式 gopher://访问一个gopher服务器
六.图片
图片标记 <Img>图片 <Map>图像映射 <Area>图像映射中定义区域
<lmg>标记的属性 src图像的源文件 Alt提示文字 Width宽度
Height高度 Vspace垂直间距 Hspace水平间距 Align排列 Border边框
Align属性值 Top文字的中间线居于图片上方 Middle文字的中间线居于图片中间
Bottom文字的中间线居于图片底部 Left 图片在文字的左侧
Right图片在文字的右侧 Absbottom文字的底线居于图片底部
Absmiddle文字的底线居于图片中间 Baseline英文文字基线对齐
Texttop英文文字上边线对齐
Shape属性值
Rect矩形区域 Circle椭圆形区域 Poly多边形区域
七.表格
1.表格标记 <Table>…</Table>表格标记 <Tr>…</Tr>行标记
<Td>…</Td>单元格标记 <Th>表头标记
<Table>标记属性 Bordercolor 表格边框色 Borde表格边框的宽度
Bordercolorlight 表格边框亮边框色（左上边框顔色）
Bordercolordark 表格暗边框色（右下边框顔色）
Bordercolor 行的边框顔色 Width表格的宽度 Height表格的高度
Bgcolor表格的背景顔色 Background表格的背图像
<Tr>标记属性 Align行内容的水平对齐 Valign 行内容的垂直对齐
Bgcolor 行的背景顔色 Background 行的背景图像
Bordercolor 行的边框顔色 Bordercolorlight 行的亮边框顔色
Bordercolordark 行的暗边框顔色
<Td>标记属性 Align单元内容的水平对齐 Valign单元格内容的垂直对齐
Bgcolor 单元格的背景顔色 Background 单元格的背景图像
Bordercolor单元格的背景顔色 Bordercorlorlight单元格的亮边框顔色
Brodercolordark 单元格的暗边框顔色 Width 单元格的宽度
Height单元格的高度
<Th>标记属性 Align表头内容的水平对齐 Valign表头内容的垂直对齐
Bgcolor 表头的背景顔色 Background表头的背景图像
Bordercolor表头的边框顔色 Bordercolorlight 表头的亮边框顔色
Bordercolordark 表头的暗边框顔色 Width 表头的宽度 Height 表头的高度
八.表单
1.表单标记 <Form>表单标记 <Input>表单输入标记
<select>菜单和列表标记 <Option>菜单和列表项目标记
2.属性 <Form> Name表单的名称
Method 定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get,post
Action 用来定义表单处理程序（一个Asp,CGI等程序）的位置（相对地址或绝对地址）
<lnput>标记属性 Name 域的名称 Type域的类型
Maxlength 域的最大输入字符数 size域的宽度 Value 域的默认值
<Select>标记属性 Name 菜单和列表的名称 size 显示的选项数目
Multiple 列表中的项目多选 Value 选项值 selected默认选项
<Texrarea>标记属性 Name 文字域的名称 Rows文字域的行数
Cols 文字域的列数 Value 文字域的默认值
Type属性值 Text 文字域 Password 密码域 File 文件域
Checkbox复选框 Redio单选框 Button普通按扭
Submit 提交按钮 Reset重置按钮 Hidden隐藏域Image图像域
九.滚动
滚动标记 <Marquee>
<Marquee>标记属性 Direction 滚动方向 up 文字向上滚动 Left文字向左滚动
Behavior 滚动方式 Scroll 循环往复
Side 只做一次滚动
Alternate 交替进行滚动
ScrollAmount 滚动速度
ScrollDelay 滚动延迟
Trim函数用来剔除首尾空格
十.框架
1.标记 <Frameset> 框架边框标记 <Frame> 框架标记 <Iframe>浮动框架标记
<Frameset>标记属性 Cols列 Rows行
<Frame> 标记属性 src框架中显示页面源文件的路径
FrameBorder 框架边框显标属性 FrameSpacing框架边框宽度属性
Scrolling框架滚动条显示属性 NoResize 框架尺寸调整属性
BorderColor 框架边框顔色属性 MarginWidt 框架边框缘宽度属性
MarginHerght框架边缘高度属性
<1frame> 标记属性 src浮动框架中显示页面源文件的路径
Width 浮动框架的宽度 Height 浮动框架的高度
Name 浮动框架的名称
Align 浮动框架的排列方式 Left表示居左 Center表示居中 Right表示居右
FrameBorder 框架边框显示属性 FrameSpacing 框架宽度属性
Scrolling 框架滚动条显示属性 ( yes显示 No不显示 Auto根据页面的长度自动判断是否晶粒示滚动条
NoResize 框架尺寸调整属性 BorderColor框架的顔色
MarginWidth 框架边缘宽度属性 MarginHeight 框架边缘高度属性
插入刷新
步骤：1.选择"查看/文件头内容"
2.在插入面板上，打开HTML选项卡
优化代码
打开文件窗口，执行"命令、清理HTML"命令
文本换行：Enter 行距较大
Enter + Shift 行距较小
插入水平线设置顔色：单击属性面板中的快捷标签编辑器按钮
在代码中键入"color = #顔色值"
当图像无法显示时将显示这段文字：
图像属性中的替代→输入文字
插入鼠标经过图像:准备两张图像
在文件窗口中，将光标放置于需要翻转图像位置→插入工具栏中单击鼠标经过图像
Ⅱ.使用导航条：
在"常用"对象组中，单击"图像"小三角→导航条
插入图像占位符：图像小三角→图像占位符
Flash动画的背景实现透明 参数wmode 值 transparent
插入 Java Applet
插入表单
插入表单域：对象面板上"表单"→插入表单
插入文本域：单击面板上的插入文本域. 初始值 = 打开时显于的文字
插入密码框：在属性面板上选择密码
插入多行文本域：在类型后选择多行
插入隐藏域：对象面板→插入隐藏域
插入按钮：标签用来设置按钮上显示的文本
插入图像提交按钮=图像域：
插入文件上传按钮=文件域：
插入单选框
插入单选按钮组：Label文字说明 Value 单选按钮的值
插入复选框
菜单/插入列表：列表值→
插入跳转菜单：(
制作网页链接
URL统一资源定位器
目标：_blank在一个新的未命名的浏览器窗口中打开
_parent如果是嵌套的框架，链接会在父框架或窗口中打开，否则=_top
_top在完整的浏览器中打开
创建搜索页
运行中输入:
Inetmgr (IIS
Odbcad32 (odbc
Asp对象
Applicatipn 在给定的应用程序的所有用户间共享信息,并在服务器运行期间持久地保存数据。
集合： Contents
staticObjects
Item（变量值）=设置资料变量的值
Key（变量名称）=设置资料变量的名称
Count（变量资料的数量）=表示
Coutents集合中资料的总数量
方法： Lock
Unlock
事件： Applicatipn_Onstart
Application_OnEnd
Session 存储特定的用户会话所需的信息
属性：CodePage
LCID
SessionID
Timeout
集合：Contents
StaticObjects
方法：Abandon
事件：Session_Onstart
Session_OnEnd
Response 用来控制发送给用户的信息，包括直接发送信息给浏览器，重定位浏览器到另一个URL或设置Cookie值
属性： Buffer
CacheControl
Charset
ContentType
Expires
ExpiresAbsolute
IsClientConnected
PICS
Status
集合： Cookies
方法： AddHeader
AppendToLog
BinaryWrite
Clear
End
Flush
Redirect
Write
Request 访问任何基于HTTP请求传递的信息，常见的有从HTML表单用Post方法或Get方法传递的参数，Cookie或用户认证等。
属性： TotalBytes
集合： ClientCertificate
Cookies
Form
QueryString
ServerVaiables
方法： BinaryRead
Server 提供对服务器方法和属性的访问
属性： ScriptTimeout
集合： 无
方法： CreatObject
HTMLEncode
MapPath
URLEncode
Recordset
MoveNext 将前数据记录移至下一条
MovePrevious 将当前数据记录移至上一条
MoveFirst 将当前数据记录移至第一条
MoveLast 将当前数据记录移至最后一条
AbsolutePosition=N 将当前数据记录移至第N条
EOF 当前数据记录是否移过了最后一条（发生于向下移动时）
BOF 当前数据记录是否移过了第一条 （发生于向上移动时）
VBScript 运算符
算术运算符
指数 取负 乘法 除法 加法 减法 取模 连接 整数除法
∧ － * ／ ﹢ ﹣ Mod & \
比较运算符
相等 不相等 小于 大于 小于或等于 大于或等于 对象相象
= <> < > <= >= IS
逻辑运算符
逻辑非 逻辑与 逻辑或 异或 逻辑等于 逻辑蕴含
Not And Or Xor Eqv Imp
Html是Hyper Text Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。
Html中标签分为 ：成对标签和自闭合标签【空标签】
成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头
语法：
<font>内容</font>
只有一个标签，用斜杠结束，斜杠也可以省略
语法：
<br/>
注意事项：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式：
<!DOCTYPE html>
html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文
head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。
meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码
<meta charset="utf-8"></meta>
body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。
html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：
<!-- 注释的内容 -->
注：属性是标签的辅助作用。
属性 描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片
设置网页的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的属性</title>
</head>
<body bacolor="pink">
</body>
</html>
我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径
路径分为：
设置网页的背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<title>html的属性</title>
</head>
<body background="../images/10.jpg">
</body>
</html>
注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径
网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。
标签 描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线 属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落
标签 描述 font 设置字体，需要借助属性设置
属性 描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格
<font size="2" color="red" face="黑体"></font>
标签 描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html文本格式化标签</title>
</head>
<body>
<b>粗体文本</b>
<i>倾斜文本</i>
<em>着重文本</em>
<small>小号字</small>
<strong>加重语气</strong>
<sub>上标</sub>
<sup>下标</sup>
<ins>插入字</ins>
<del>删除字</del>
</body>
</html>
在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。
标签 描述 img 图片标签
属性 描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本
注意事项：不建议设置图片大小，容易失真
在Html中，声音由标签定义。
标签 描述 audio 声音标签
属性 描述 src 指定声音地址
<audio src="nice.mp3">对不起，您的浏览器不支持</audio>
在Html中，视频由video标签定义
标签 描述 video 视频标签
属性 描述 src 指定视频地址
<video src="美女.mp4">对不起，您的浏览器不支持</video>
a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
语法：
<a href="链接目标">点击内容</a>
属性 描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式 属性值 描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】
超链接分类：
列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。
有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。
<!-- 有序列表 -->
<ol type="a">
<li>新闻一</li>
<li>新闻二</li>
<li>新闻三</li>
</ol>
属性 描述 type 设置符号类型 值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】
<!-- 有序列表 -->
<ol type="a" start="4">
<li>新闻一</li>
<li type="1" value="1">新闻二</li>
<li>新闻三</li>
</ol>
无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。
<!-- 无序列表 -->
<ul>
<li>童装</li>
<li>男装</li>
<li>女装</li>
</ul>
属性 描述 type 用于设置符号类型，默认：实心圆 值：空心圆、正方形 【用于ul、li】
<!-- 无序列表 -->
<ul type="square">
<li>童装</li>
<li type="circle">男装</li>
<li>女装</li>
</ul>
描述列表指每个列表项有单独的标题。
<!-- 描述列表 -->
<dl>
<dt>开源产品</dt>
<dd>Java封装库</dd>
<dd>Web组件库</dd>
<dt>网站导航</dt>
<dd>mrliujava.com</dd>
<dd>mrliuweb.com</dd>
</dl>
表格在网页开发中使用频率非常高，尤其是数据展示的时候。
标签 描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部
属性 描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程师</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页：1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
属性 说明 rowspan 行合并 colspan 列合并
下面是行合并：
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td rowspan="2">JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页：1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
下面是列合并：
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程师</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">傻蛋</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页：1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。
表单需要使用表单标签来设置：
<!-- 表单 -->
<form>
input元素
</form>
属性 说明 action 后台地址 method 提交方式GET或POST
GET和POST区别：
1.GET
2.POST
<form action="后端接口" method="POST">
<input type="text">
<input type="password">
</form>
使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。
<form action="后端接口" method="POST">
<label for="username">用户名</label>
<input type="text" id="username">
<label for="password">密码</label>
<input type="password" id="password">
</form>
也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。
文本框用于输入单行文本使用，下面是常用属性与示例。
属性 说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型 比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera
<form action="后端接口" method="POST">
<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>
当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.
<form action="后端接口" method="POST">
<label for="file">上传文件</label>
<input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>
通过设置表单的type字段可以指定不同的输入内容.
类型 说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮
隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.
<input type="hidden" name="id" value="1">
创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.
a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.
<input type="submit" name="submit" value="提交表单">
b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.
<button type="submit">提交表单</button>
通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端
<input type="text" value="数据" readonly>
表单可以通过设置pattern属性指定正则验证.
属性 说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件
<form action="">
<label for="username">用户名</label>
<input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
<button>提交表单</button>
</form>
<script>
function validate(message){
alert(message);
}
</script>
文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.
属性 说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)
<textarea cols="30" rows="3">请踩踩我......</textarea>
下拉列表项可用于多个值中的选择.
属性 说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值
<form action="">
<select multiple size="10">
<option value="">选择课程</option>
<optgroup label="后端">
<option value="">JAVA</option>
<option value="">PHP</option>
<option value="">LINUX</option>
</optgroup>
<optgroup label="前端">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">JAVASCRIPT</option>
</optgroup>
</select>
</form>
单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密 只能选择一个.
属性 说明 checked 选中状态
<form action="">
<input type="radio" name="" id="boy" checked>
<label for="boy">男</label>
<input type="radio" name="" id="girl">
<label for="girl">女</label>
</form>
复选框指允许选择多个值的表单
属性 说明 checked 选中状态
<form action="">
<input type="checkbox" name="JAVA" id="java">
<label for="java">JAVA</label>
<input type="checkbox" name="WEB" id="web">
<label for="web">WEB</label>
</form>
文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.
属性 说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif
<form action="" enctype="multipart/form-data">
<input type="file">
<input type="submit" value="上传">
</form>
属性 说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月
a.日期选择
<h1>日期选择</h1>
<form action="">
<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
</form>
b.周选择
<h1>周选择</h1>
<input type="week" name="" id="">
c.月份选择
<h1>月选择</h1>
<input type="month" name="" id="">
d.日期与时间
<h1>日期与时间</h1>
<input type="datetime-local" name="" id="">
input表单的输入值选项列表
<form action="">
<label for="username">用户名</label>
<input type="text" name="" id="usernmae" list="less">
<datalist id="less">
<option value="JAVA">后台管理语言</option>
<option value="CSS">美化网站页面</option>
<option value="MYSQL">掌握数据库使用</option>
</datalist>
</form>
frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。
注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。
标签 说明 frameset 框架集 frame 框架
属性 说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html垂直框架</title>
<frameset cols="50%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
</frameset>
</head>
<body>
</body>
</html>
12.2 水平框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html水平框架</title>
<frameset rows="50%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
</frameset>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html混合框架</title>
<frameset rows="20%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frameset cols="20%,*">
<frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
<frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html美女</title>
</head>
<body>
<img src="../images/10.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html野兽</title>
</head>
<body>
<img src="../images/timg.gif" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html动物</title>
</head>
<body>
<img src="../images/4.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html链接</title>
</head>
<body>
<a href="Html美女.html" target="view">美女图片</a>
<a href="Html野兽.html" target="view">野兽图片</a>
<a href="Html动物.html" target="view">动物图片</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html垂直框架</title>
<frameset rows="20%,*" >
<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
<frameset cols="20%,*">
<frame src="Html链接.html" frameborder="0" scrolling="no"></frame>
<frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
</frameset>
</frameset>
</head>
<body>
</body>
</html>
iframe元素会创建包含另外一个文档的内联框架。
属性 说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框
*请认真填写需求信息，我们会在24小时内与您取得联系。
