您的位置：首页 > Web前端 > HTML

HTML基础入门

2016-11-21 00:44 323 查看

了解什么是标记语言

了解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"/>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航