整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
HTML基础教程上篇介绍了HTML的基础知识及一些常用的标签，本篇文章主要介绍HTML的样式、表单、Table、框架等内容。下面我们就一起来了解吧！
所有的HTML可以通过设置其style属性来设置标签的样式，下面我们就来演示几个常用的HTML样式设置。
1）设置标签宽度与高度
我们创建一个div标签，然后设置其高度与宽度，但由于div标签默认没有颜色我们看不到效果，所以在设置其高度与宽度时，同时为其设置一个背景颜色，具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- 给div宽度设置为一个长宽都为400px的正方形块，同时背景色代码块为#46a6ff -->
9. <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>
10. </body>
11. </html> 2）设置字体类型与大小
我们在上面div块中加入文字，并给加入的文字设置字体类型与大小，同时为其加粗，具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- font-family是设置字体类型；font-size是设置字体大小；font-weight是给字体加粗 -->
9. <div style="width: 400px; height: 400px;
10. background-color: #46a6ff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold">
11. 我是div块
12. </div>
13. </body>
14. </html> 3）设置字体水平与垂直居中
上面我们给div加了字体样式但并没有居中，现在我们来看看怎么设置字体居中
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- text-align给文字设置水平居中；line-height将其值设为与height一致，文字内容就可以垂直居中 -->
9. <div style="width: 400px; height: 400px;
10. background-color: #46a6ff; font-family: 'Microsoft YaHei';
11. font-size: 40px; font-weight: bold;
12. text-align: center; line-height: 400px">
13. 我是div块
14. </div>
15. </body>
16. </html> 在HTML页面开发时我们经常会用到表格进行数据展示，HTML的表格是由标签<table>来定义的，每个表格均有若干行（<tr> 标签定义），每行被分割为若干单元格（由<td> 标签定义）。表格中常用的标签与样式属性如下：
下面我们创建两个表格示列，分别设置上述属性具体如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- 表格示列1 -->
9. <table border="1" bordercolor="black" width="450" height="100">
10. <caption>表格示列1</caption>
11. <tr bgcolor="red" > <!-- tr为一行的起始与结束 -->
12. <th>Column 1</th> <!-- 表格头 -->
13. <th>Column 2</th>
14. <th>Column 3</th>
15. </tr>
16.
17. <tr bgcolor="cyan"> <!-- 设置表格背景色 -->
18. <td>Data 1</td> <!-- td单元格 -->
19. <td>Data 2</td>
20. <td>Data 3</td>
21. </tr>
22.
23. <tr bgcolor="yellow">
24. <td colspan="2">New Data 1</td> <!-- 设置该单元格合并这一行上的两列 -->
25. <td>New Data 2</td>
26. </tr>
27. </table>
28.
29. <!-- 表格示列2 -->
30. <table border="1" bordercolor="black" width="80%" height="100"> <!-- 设置单元格宽与高为百分比 -->
31. <caption> 表格示列2</caption>
32. <tr bgcolor="red" >
33. <th>Column 1</th>
34. <th>Column 2</th>
35. <th>Column 3</th>
36. </tr>
37.
38. <tr>
39. <td rowspan="2">Data 1</td> <!-- 设置该单元格合并这一列上的两行 -->
40. <td>Data 2</td>
41. <td>Data 3</td>
42. </tr>
43.
44. <tr>
45. <td>Data 2</td>
46. <td>Data 3</td>
47. </tr>
48. </table>
49. </body>
50. </html> HTML 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。HTML表单在我们日常浏览网页时很常见，比如各网站的登录页面，就是典型的HTML表单应用。HTML表单常用的标签元素有如下几种：
1）Text input：字符输入框，一般账户与密码输入都是用的该标签
2）Text area：文本输入框，一般需要输入较多文本内容使用
3）Radio button：单选框
4）Checkbox：多选框
5）Select box：选择框
6）File select：文件选择框
7）Buttons：按钮
表单元素常用的属性及值设置如下表所示：
结合上表我们创建一个表单示列，按照上表的属性值进行设置，具体操作如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <form>
9. <h4>Input输入框</h4>
10. 用户名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="10"><br>
11. 密码 : <input type="password" name="user_pass" ><br>
12. <h4> Radio单选框:（name值设置时必须一致）</h4>
13. <input type="radio" name="r_gender"> Male
14. <input type="radio" name="r_gender"> Female
15. <input type="radio" name="r_gender" checked> Infant
16. <h4> Check box多选框 :（name值设置时必须不一样）</h4>
17. <input type="checkbox" name="c_male" checked> Male
18. <input type="checkbox" name="c_female"> Female
19. <input type="checkbox" name="c_infant"> Infant
20. <h4> Select box :选择框（单选）</h4>
21. <select name="s_box">
22. <option value="s_male">Male</option>
23. <option value="s_female" selected>Female</option>
24. <option value="s_infant">Infant</option>
25. </select>
26. <h4> Select box :择框（多选）</h4>
27. <!-- 选择项默认展示4个，其它的选择内容需要通过鼠标滚动 -->
28. <select name="s_box" size="4" multiple>
29. <option value="s_male" selected>Male</option>
30. <option value="s_female" selected>Female</option>
31. <option value="s_infant">Infant 1</option>
32. <option value="s_infant" selected>Infant 2</option>
33. <option value="s_infant">Infant 3</option>
34. <option value="s_infant">Infant 4</option>
35. </select>
36. <h4> Text文本输入框</h4>
37. <textarea rows="10" cols="80" name="txt_area">文本框
38. HTML基础教程
39. 表单示列
40. </textarea>
41. </form>
42. </body>
43. </html>下面我们再创建一个button的表单示列，具体如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 设置表单提交方式为get, 跳转的url为"http://www.baidu.com" -->
10. <form method="get" action="http://www.baidu.com">
11. <h4> Buttons按钮表单示列</h4>
12. 用户名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="16"><br>
13. 密码 : <input type="password" name="user_pass" ><br>
14. <!-- 点击在游览器上方显示Say Hello -->
15. <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>
16. <!-- 点击跳转到百度 -->
17. <input type="submit" name="b_submit" value="百度走起"/>
18. <!-- 点击重置会重置表单内输入的内容 -->
19. <input type="reset" name="b_reset" value="重置"/><br>
20. </form>
21.
22. </body>
23. </html> 使用HTML框架可以在同一个浏览器窗口中显示多个页面，iframe的语法格式如下所示
1. <iframe src="URL">
2. <!-- URL指向不同的页面 -->
3. </iframe>
我们现在创建一个iframe框架使用示列具体如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>iframe使用示列一(简单的iframe使用)</h4>
10. <!-- 给iframe显示区域设置宽度为800，高度为200，同时去掉其边框 -->
11. <iframe src="http://www.baidu.com" width="800" height="200" frameborder="0"></iframe>
12.
13. <br/>
14. <br/>
15.
16. <h4>iframe使用示列二(通过点击指定链接在iframe中显示)</h4>
17. <!-- a标签中的target名称必须与iframe的name一致都为qq -->
18. <a href="http://www.qq.com" target="qq">点击我在iframe中显示qq页面</a>
19. <iframe name="qq" width="800" height="200" frameborder="0"></iframe>
20. </body>
21. </html> 至此我们《HTML基础教程》就全部讲完了，有任何问题都可以在文章后面留言。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><ul>
<li></li>
<li></li>
</ul>霍格沃兹的测试管理班是专门面向测试与质量管理人员的一门课程，通过提升从业人员的团队管理、项目管理、绩效管理、沟通管理等方面的能力，使测试管理人员可以更好的带领团队、项目以及公司获得更快的成长。提供 1v1 私教指导，BAT 级别的测试管理大咖量身打造职业规划。
长之家(ChinaZ.com) 9月2日 消息:近日，百度官方搜索资源平台对很多开发者提出对百度搜索标题设置还存在部分疑问进行了解答。
官方从"如何设置标题"、"标题设置的规范原则"等等指导开发者进一步学习如何正确设置百度搜索标题信息。
（1）标题是对网页内容的准确且简明扼要的描述。
符合规范的标题源码示例
2、标题对于搜索用户来说，能够帮助用户快速洞察网页的内容以及该网页与搜索需求的相关性。它通常是用来决定用户点击哪个结果的主要信息。
所以，使用高质量的网页标题对网站来说至关重要。
1 标题设置的原则
（1）网站应确保该站点下的每个页面都有指定的标题，且同一站点的不同网页应分别使用不同的标题。
（2）源码中标题、落地页内的实际标题，需与备案时填写的网站名称保持一致。
（3）页面标题应准确概括页面内容，避免使用模糊和不相关的描述。
（4）页面标题应简明扼要，避免使用冗长的标题，避免关键词堆砌。
（5）页面标题的符号使用正确，建议参考百度建议的标题符号用法
2 不允许出现的标题类型
标题存在以下恶劣问题时，会对这类结果做相应的搜索结果展现限制。
标题内容虚假
虚假官网
指非官方网站，但标题表述为官网的情况。
无法满足用户需求
如:标题中标明可下载或在线阅读小说txt，但是页面中不提供下载服务或诱导用户下载APP;
或在标题中说明有百度云下载、支持在线观看，但是页面既不能下载，又不能在线观看。
负面案例:实际页面无下载服务。
标题表述部分虚假
如:某网页标题中标明有江苏一本大学排名，但页面只有大学名单，而没有排名相关的内容。
标题重复、堆砌
指网站通过网页标题过度重复或堆砌等手段，获取不正当流量的情况。
类型1: 标题关键词大量重复。
类型2: 标题大量堆砌语义相近的关键词标签 。
负面案例:标题关键词堆砌。
优质的网页标题，不仅能明确表达网页的主旨目的，更能给搜索用户有效的引导，吸引目标用户点击。
对符合优质规范的标题，百度将会给予更多的展现优待。
*请认真填写需求信息，我们会在24小时内与您取得联系。
