什么是HTML: Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本更加强大,能够定义许多文本样式
标记语言: 通过一组标签来对内容进行标记,并且修饰
-标签: < 关键字 >
它是网页设计的设计,基本上所有的网站都是用它开发的
HTML语法规范
HTML是一个.html 或者 .htm结尾的文件
HTML文件中是头和体两部分
HTML是通过一组标签来对内容进行描述
这组标签是不区分大小写
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
body>
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>
使用标题标签
- 使用
创建分割线- 使用段落标签
创建四个段落
- 将第一段开头几个字颜色变为红色
<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>
<img src="../img/logo2.png" />
<img src="../img/header.png" />
body>
通常都会链接一个友商的网址
列表标签
无序列表
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标签:
根据UI妹子给的效果,完成页面,显示效果如图所示:
表格标签: table
行标签:
列标签:
跨行操作: rowspan
跨列操作: colspan
- 总共有8部分内容,创建一个八行1列
- 第一行LOGO部分: 一行三列
- 第二部分: 导航栏, 直接写上内容
- 第三部分:广告大图,采用img标签引入图片
- 第四部分: 嵌套一个三行7列的表格
- 第一行:占满7列
- 第二行: 第一列要跨行操作,第二列要跨列操作,占三列
- 第三行:六列数据
- 第五部分: 放置一张图片
- 第六部分:参考第四部分
- 第七部分: 放置一张图片
- 第八部分: 放置一系列超链接
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<table 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>
<img src="../img/1.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.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
tr>
<tr>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>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.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
tr>
<tr>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
<td align="center">
<img src="../products/hao/small08.jpg"/>
<p>高压锅p>
<p><font color="red">$99.8font>p>
td>
tr>
table>
td>
tr>
<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表单
input 输入项
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<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
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<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 + / 注释