HTML的概述
什么是HTML: Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本更加强大,能够定义许多文本样式
标记语言: 通过一组标签来对内容进行标记,并且修饰
-标签: < 关键字 >
为什么要学习HTML
它是网页设计的设计,基本上所有的网站都是用它开发的
如何来学习HTML
HTML语法规范
HTML是一个.html 或者 .htm结尾的文件
HTML文件中是头和体两部分
HTML是通过一组标签来对内容进行描述
这组标签是不区分大小写
<!DOCTYPE html>
<!--上面是文档声明-->
<!--HTML的根标签-->
<html>
<!--文件头-->
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--文件体
主要是编写HTML的内容
-->
<body>
</body>
</html>学习HTML中的标签
步骤分析
公司简介, 字体变大 如何实现
标题标签: n的取值范围: 1~6
<h1>张三</h1> <h2>李四</h2> <h3>王五</h3> <h4>赵六</h4> <h5>钱七</h5> <h6>老八</h6>水平分割线如何去做
<hr/>四个段落该怎么做
咏鹅<br /> <p>鹅鹅鹅,</p> <p>曲项向天歌,</p> <p>白毛拂绿水,</p> <p>红掌拨清波.</p>第一段字体部分字体要显示红色
<font 属性名称="属性值"></font> 常用属性: color: 改变字体颜色 size: 改变字体大小 ,取值范围1~7 超过7还是显示7的大小 face : 指定字体样式 <font color="goldenrod" size="1">特朗普</font> <font color="goldenrod" size="2">特朗普</font> <font color="goldenrod" size="3">特朗普</font> <font color="goldenrod" size="4">特朗普</font> <font color="goldenrod" size="5">特朗普</font> <font color="goldenrod" size="6">特朗普</font> <font color="goldenrod" size="7">特朗普</font> <font color="goldenrod" size="777">特朗普</font>使用标题标签
- 使用
创建分割线- 使用段落标签
创建四个段落
- 将第一段开头几个字颜色变为红色
<!--
1. 使用标题标签
2. 使用<hr/> 创建分割线
3. 使用段落标签<p> 创建四个段落
4. 将第一段开头几个字颜色变为红色
-->
<h1>公司简介</h1>
<hr />
<p>
<font color="#ff0000">“中关村黑马程序员训练营”</font>是由<b><i><u>传智播客</u></i></b>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>扩展标签:
加粗标签
斜体标签
网站图片信息页面
需求分析:
在我们的网站通常需要显示很多图片信息
技术分析
img标签:
常用属性:
- src: 指定图片路径
- width: 指定宽度
- height: 指定高度
- alt: 当图片加载失败的时候提示的信息
步骤分析:
- 创建img标签,指定src属性为logo图片
- 创建img标签 指定Src为网站声明图片
代码实现:
<body>
<!--
1. 创建img标签,指定src属性为logo图片
2. 创建img标签 指定Src为网站声明图片
-->
<img src="../img/logo2.png" />
<img src="../img/header.png" />
</body>路径注意事项
<!--
路径问题:
./ : 代表当前路径
../: 代表上一级目录
../01-网站信息页面/img/1-161104143944.gif
E:\source\WEB01-HTML\资料\WEB01\img\1.jpg 不允许加载本地图片
-->网站友情链接案例
需求分析:
通常都会链接一个友商的网址
技术分析
列表标签
无序列表
type: 改变样式
type disc square circle 不赞成使用。请使用样式取代它。规定列表的项目符号的类型。 - 有序列表
| start | number | 规定有序列表的起始值。 |
|---|---|---|
| type | 1 A a I i | 规定在 |
<body>
<ul>
<li><a href="http://www.baihe.com">百合网</a></li>
<li><a href="http://www.jiayuan.com">世纪佳缘</a></li>
<li><a href="http://www.zhenai.com">珍爱网</a></li>
</ul>
</body>a标签:
- 常用属性:
- href: 指定跳转的链接地址
- target: 指定跳转的方式
- _self: 默认值,在当前窗口打开
- _blank: 在一个新的标签页打开网页
网站首页案例
需求分析:
根据UI妹子给的效果,完成页面,显示效果如图所示:
技术分析:
表格标签: table
行标签:
列标签:
- 常用属性:
- bgColor: 背景颜色
- width: 指定宽度
- height: 指定高度
- align : 指定对齐的方式
表格合并:
跨行操作: rowspan
跨列操作: colspan
步骤分析:
- 总共有8部分内容,创建一个八行1列
- 第一行LOGO部分: 一行三列
- 第二部分: 导航栏, 直接写上内容
- 第三部分:广告大图,采用img标签引入图片
- 第四部分: 嵌套一个三行7列的表格
- 第一行:占满7列
- 第二行: 第一列要跨行操作,第二列要跨列操作,占三列
- 第三行:六列数据
- 第五部分: 放置一张图片
- 第六部分:参考第四部分
- 第七部分: 放置一张图片
- 第八部分: 放置一系列超链接
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1. 总共有8部分内容,创建一个八行1列
2. 第一行LOGO部分: 一行三列
3. 第二部分: 导航栏, 直接写上内容
4. 第三部分:广告大图,采用img标签引入图片
5. 第四部分: 嵌套一个三行7列的表格
1. 第一行:占满7列
2. 第二行: 第一列要跨行操作,第二列要跨列操作,占三列
3. 第三行:六列数据
6. 第五部分: 放置一张图片
7. 第六部分:参考第四部分
8. 第七部分: 放置一张图片
9. 第八部分: 放置一系列超链接
-->
<table width="100%">
<!--第1部分LOGO-->
<tr>
<td>
<table width="100%">
<tr>
<td width="33%">
<img src="../img/logo2.png" />
</td>
<td width="33%">
<img src="../img/header.png"/>
</td>
<td width="33%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--第二部分: 导航栏, 直接写上内容-->
<tr>
<td bgcolor="black" height="50px" >
<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>
<a href="#"><font color="white">香烟酒水</font></a>
</td>
</tr>
<!--第三部分:广告大图,采用img标签引入图片-->
<tr>
<td>
<img src="../img/1.jpg" width="100%"/>
</td>
</tr>
<!--
5. 第四部分: 嵌套一个三行7列的表格
1. 第一行:占满7列
2. 第二行: 第一列要跨行操作,第二列要跨列操作,占三列
3. 第三行:六列数据
LOGO-->
<tr>
<td>
<table width="100%">
<tr>
<td colspan="7">
<font size="5">最新商品</font>
<img src="../images/title2.jpg"/>
</td>
</tr>
<tr>
<td rowspan="2" width="206px" height="475px">
<img src="../products/hao/big01.jpg" width="206px" height="475px"/>
</td>
<td colspan="3" width="439px" height="236px" >
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第五部分: 放置一张图片-->
<tr>
<td>
<img src="../products/hao/ad.jpg" width="100%"/>
</td>
</tr>
<!-- 第六部分:参考第四部分-->
<tr>
<td>
<table width="100%">
<tr>
<td colspan="7">
<font size="5">热门商品</font>
<img src="../images/title2.jpg"/>
</td>
</tr>
<tr>
<td rowspan="2" width="206px" height="475px">
<img src="../products/hao/big01.jpg" width="206px" height="475px"/>
</td>
<td colspan="3" width="439px" height="236px" >
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
</tr>
<tr>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅</p>
<p><font color="red">$99.8</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第7部分LOGO-->
<tr>
<td>
<img src="../image/footer.jpg" width="100%"/>
</td>
</tr>
<!--网站信息 放置一系列超链接-->
<tr>
<td align="center">
<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>
网站注册页面
需求分析:
技术分析
form表单
- action : 提交的动作路径
- method: 提交的方法
- get: 提交的参数会出现在地址栏,提交参数有大小
- post: 提交的参数不会出现在地址栏
input 输入项
- 常用的属性:
- type:
- text: 文本输入框
- password: 密码输入框
- radio : 单选按钮, 注意: 如果需要互斥的话,需要指定相同的name属性
- date : html5 标签 ,指定日期格式输入项
- select : 选择框, 显示多行: multiple属性
- checkbox: 复选框,
- email: 不推荐使用
- hidden: 隐藏域,通常是在表单提交的时候,传送ID信息
- placeholder: 提示信息
- id : 指定输入项的ID
- name: 指定输入项名称
- class: 指定是类名, css相关
- 文本域:
- cols: 指定文本域的列数
- rows: 指定文本域的行数
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
创建一个5行一列
-->
<table border="1px" width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td width="33%">
<img src="../img/logo2.png" />
</td>
<td width="33%">
<img src="../img/header.png" />
</td>
<td width="33%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="black" height="50px">
<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>
<a href="#">
<font color="white">香烟酒水</font>
</a>
</td>
</tr>
<!--
注册模块
-->
<tr>
<td background="../image/regist_bg.jpg" height="700px" align="center">
<table border="4px" width="700px" height="500px" bgcolor="white" bordercolor="gray">
<tr>
<td>
<form>
<table border="1px" width="80%" height="90%" align="center">
<!--创建一个九行两列-->
<tr>
<td colspan="2">
<h3>会员注册</h3>
</td>
</tr>
<tr>
<td align="right">用户名:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td align="right">
邮箱:
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right">
姓名:
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right">
性别:
</td>
<td >
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td align="right">
出生日期:
</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td align="right">
验证码:
</td>
<td>
<input type="text" />
<img src="" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>网站后台管理页面
需求分析:
通常需要一个后台管理页面,商品管理, 分类管理, 订单管理, 物流管理,售后管理
技术分析:
步骤分析:
- 先将屏幕划分为上下两部分 rows
- 将下面部分,划分为左右两部分 cols
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
1. 先将屏幕划分为上下两部分 rows
2. 将下面部分,划分为左右两部分 cols
-->
<frameset rows="15%,*">
<frame src="head.html" />
<frameset cols="15%,*">
<frame src="left.html" noresize="noresize" />
<frame src="right.html" name="right" />
</frameset>
</frameset>
</html>
内容要点
网站信息页面:
- h1 标题标签
- hr 分割线
- p 段落标签
- font 字体标签
网站图片
- img:
- 相对路径问题, 不能使用本地图片
- alt : 当图片加载异常,给用户的一个提示信息
网站友情链接
无序列表 ul
有序列表ol
网站首页:
- table
- tr
- td
- colspan: 跨列
- rowspan 跨行
网站注册页面
- form
- action
- method
- input:
- type:
- text
- password
- button
- checkbox
- radio
- select
- hidden
- date
- submit
- reset
- id
- name
- class
- placeholder: 提示用户输入
- textarea : 文本域
网站后台
- frameset
- 注意:不能喝body标签共存
- frame
- src: 指定链接的html
- name: 指定当前框架的名称
快捷键
Ctrl Shift + R 向下复制
Ctrl + D 删除
Ctril + Enter 切换到下一行
Ctrl + / 注释
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
