整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
午说了CSS字体的颜色属性，下午来说下字体的文本对齐text-align和文本装饰text-decoration
text-align属性用于设置元素内文本内容的水平对齐方式。语法规则如下:
div {
text-align:center;
}
除了有center属性外，还有另外两个属性:
left 左对齐(默认值)
right 右对齐
先看下居中效果:
对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
然后是文案左对齐，看下效果:
对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-align: left;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
最后是右对齐，看下效果:
对应的代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
text-align: right;
}
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
如果不写文字对齐的属性，看下默认应该都是左对齐，效果如下:
对应代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div {
text-align: right;
} */
</style>
</head>
<body>
<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>
</body>
</html>
可以看到已经将text-align代码注释掉了，默认展示就是左对齐
今天先到这里，大家学习工作辛苦了~
ava程序员学习HTML，表格和表单是用得比较多的，掌握好这2个标签的详细用法会对你非常有益！
一、table表格
表格由table标签表示，里面嵌套tr，表示一行，而tr里面嵌套td和th，表示一行有多少列。它们的具体属性和使用方法如下：
注意点：table、tr和td都有align属性，但含义不同。其中table的align表示整个表格居中对齐，而在tr中表示整行中所有的单元格中的内容居中对齐，在td中则表示该单元格中的内容剧中对齐。此外td和th还有跨行和跨列的功能。现在利用这个知识点实现一个具有层次结构的表格：
代码：
<html>
<head>
<TITLE>first page!!</title>
</head>
<body>
<table border="1" width="700px" align="center">
<tr>
<th>待执行项目</th>
<th> </th>
<th>正在执行项目</th>
</tr>
<tr>
<td valign="top">
<table border="1" width="100%" >
<tr>
<th>
<input type="checkbox" />
</th>
<th>项目名</th>
<th>花费</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
<td align="center">
<input type="button" value="移入>>" /><br/><br/>
<input type="button" value="<<移出" />
</td>
<td valign="top">
<table border="1" width="100%">
<tr>
<th>
<input type="checkbox" />
</th>
<th>项目名</th>
<th>花费</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代码运行效果：
二、form表单
对于javaEE程序员，我们日常输入用户名和密码，然后提交表单，可是对表单总是懵懵懂懂，现在超详细精炼总结如下，希望可以帮到你！
希望你照着我给出的模板，每一个都去测试一下，你便会豁然开朗，从此表单提交不再困惑！
技术等级】初级
【承接文章】《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教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
*请认真填写需求信息，我们会在24小时内与您取得联系。
