- 了解什么是标记语言
- 了解HTML主要特性，主要变化以及发展趋势
- 了解HTML的结构标签
- 掌握HTML的主要标签（字体，图片，列表，链接，表单等标签）
网站信息页面
需求分析:
我们公司的需要一个对外宣传的网站介绍,介绍公司,公司的发展历史,公司的口号,公司的就业暗号;
技术分析:
HTML概述:
超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)
超文本: 比普通文本功能更加强大.
标记语言: 通过一组标签来对我们的内容进行修饰
HTML的主要作用:
他是用来设计网页的.
如何学习HTML
HTML语法规范
- 它是一个以.html 或者 .htm结尾的文件
- 这个文件它分为两部分,文件头和文件体两部分
- 它是通过一组标签来对我们的内容进行描述,并且这组标签,不区分大小写
- 标签由开始标签和结束标签组成,中间写上内容
步骤分析:
标题怎么做
<h1>标题</h1>下划线怎么做
<hr/>段落怎么做
<p></p>首段字体标红怎么做
<font></font>标签<font 属性名称="属性的值">要修饰的文字</font>
代码实现:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>公司简介</h3>
<hr />
<p>
<font color="red">“中关村黑马程序员训练营”</font>是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>
扩展:
<b>加粗</b>:加粗标签
<i>斜体</i>: 斜体标签
网站图片信息
步骤分析:
在我们的网站中通常我们需要显示LOGO图片,显示效果如下
代码实现
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img/logo2.png" width="300px" alt="图片加载貌似有问题" />
</body>
</html>
网站友情链接页面
需求分析
在我们的网站中,通常我们会显示友商公司的网站链接
技术分析;
列表标签
- 有序列表
- 标签
<!--有序列表--> <ol type="1" start="100"> <li>老干妈</li> <li>方便面</li> <li>奶茶</li> </ol>- 无序列表
- 标签
<!--无序列表--> <ul type="circle"> <li>张三</li> <li>李四</li> <li>王五</li> </ul>- 有序列表
网站首页
需求分析:
根据产品文档,完成公司首页,显示效果如图:
技术分析:
表格标签
行: 标签
列:标签
合并单元格:
colspan: 跨列操作
rowspan: 跨行操作
表格的嵌套:
在表格的单元格中还可以嵌套表格,例如:
<td><table></table></td>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--四行四列表格
四行
四列
-->
<table border="1px" width="400px" align="center">
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<table border="1px" width="100%">
<tr>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td colspan="2">43</td>
</tr>
</table>
</body>
</html>
步骤分析
- 创建一个8行1列的表格
- 第一行: 放置LOGO部分,
- 嵌套一个一行三列表格
- 第二行: 导航栏部分
- 第三行: 广告大图部分
- 第四行: 热门商品部分
- 嵌套三行七列的表格,需要跨行,还需要跨列
- 第五行: 放置一张广告图片
- 第六行: 参考第三行代码实现
- 第七行:广告图片
- 第八行: 页脚
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
</head>
<body>
<table border="0px" bordercolor="#00ff00" width="100%">
<!--网站Logo部分-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
</td>
<td>
<img src="../img/header.jpg" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--导航栏部分-->
<tr height="40px" bgcolor="black">
<td>
<a href="#"><font color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">香烟酒水</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
</td>
</tr>
<tr>
<td>
<img src="../img/1.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<table width="100%" height="500px" border="1px">
<tr>
<td colspan="7">
<font size="5">热门商品</font>
<img src="../img/title2.jpg"/>
</td>
</tr>
<tr>
<td rowspan="2" width="14%">
<img src="../products/hao/big01.jpg"/>
</td>
<td colspan="3" height="240px" width="42%">
<img src="../products/hao/middle01.jpg" height="100%" width="100%"/>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
</tr>
<tr>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
</tr>
</table>
</td>
</tr>
<!--广告图标-->
<tr>
<td>
<img src="../products/hao/ad.jpg" width="100%"/>
</td>
</tr>
<!--最新商品-->
<tr>
<td>
<table width="100%" height="500px" border="1px">
<tr>
<td colspan="7">
<font size="5">最新商品</font>
<img src="../img/title2.jpg"/>
</td>
</tr>
<tr>
<td rowspan="2" width="14%">
<img src="../products/hao/big01.jpg"/>
</td>
<td colspan="3" height="240px" width="42%">
<img src="../products/hao/middle01.jpg" height="100%" width="100%"/>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
</tr>
<tr>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
<td align="center" width="14%">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><del>原价:$1299</del></p>
<font color="red">现价:$299</font>
</td>
</tr>
</table>
</td>
</tr>
<!--页脚-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td align="center" height="100px">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>
网站注册页面:
需求分析:
编写一个HTML页面, 显示效果如图所示
技术分析:
表单标签
- form标签
常用的属性: method: //请求的方式 GET: 提交的数据都会在地址栏显示 提交的数据有大小限制 POST: 提交的数据不会再地址栏显示 提交的数据不会有大小限制 action: 跳转的链接- 文本框
<input type="text"/> 常用属性: name value size maxlength readonly- 密码框
<input type="password" />- 单选按钮
<input type="radio" /> checked 默认选中- 复选框
<input type="checkbox" /> checked 默认选中- 下拉列表
<select> <option></option> </select> selected : 默认选中 multiple : 全部显示- 文件上传项
<input type="file" />- 文本区
<textarea cols="" rows=""> </textarea>- 提交按钮
<input type="submit" value="重置" />- 重置按钮
<input type="reset" value="重置按钮" />- 普通按钮
<input type="button" value="普通按钮" />- 隐藏字段
<input type="hidden" name="id"/>
扫一扫
3872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
