web-day1
第1章 WEB01-HTML篇
今日任务
- 网站信息页面案例
- 网站图片信息页面案例
- 网站友情链接页面案例
- 网站首页案例
- 网站注册页面案例
- 网站后台页面案例
教学导航
|
教学目标 |
了解什么是标记语言 了解HTML主要特性,主要变化及发展趋势 了解HTML的结构标签 掌握HTML的主要标签(字体,图片,列表,链接,表单等标签) |
|
教学方法 |
案例驱动法 |
1.1 案例一：网站信息页面的显示：
1.1.1 需求：
在网页中显示网站的信息的页面：效果如下：
1.1.2 分析:
1.1.2.1 技术分析：
【HTML的概述】
- 什么是HTML
HTML:Hyper Text Markup Language --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.
- HTML的作用
HTML是用来制作页面(静态页面).
- HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.
【HTML的使用】
- HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
* 01.html
- HTML的结构标签
* 跟标签:<html></html>
* <head> -- html的头标签
* <body> -- html的体标签
【HTML的字体标签】
- <font>标签:HTML中的字体标签.
使用：<font>文字</font>
* <font>标签的属性:
* <标签 属性名=”属性值” 属性名=”属性值”></标签>
* 属性:
* color属性:字体颜色
* 英文单词设置:black,red,green,blue...
* 使用16进制数设置:#FFFFFF , #FFF
* size属性:字体的大小
* face属性:字体
* 基本使用：
<font>我是HTML!</font> <br/>
<font color="red">我是HTML！</font><br/>
<font color="#FF0000" size="1">我是小红！</font><br/>
<font color="#00FF00" size="7">我是小绿！</font><br/>
<font color="#0000FF" size="100">我是小蓝！</font><br/>
【HTML的排版标签】
- 标题标签：h标签<h1>...<h6>
<!-- HTML的标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
- 段落标签：p标签
<p>
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
</p>
<p>
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
</p>
- 字体加粗标签：b标签
<b>黑马训练营</b>
- 字体斜体标签：i标签
<i>黑马训练营</i>
- 字体下划线：u标签
<u>黑马训练营</u>
- 居中标签：<center>标签
<center>内容</center>
1.1.2.2 步骤分析:
【步骤一】创建一个HTML的文档
【步骤二】设置标题
【步骤三】设置四个段落
【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.
1.1.3 代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站信息页面</title>
</head>
<body>
<h1>公司简介</h1>
<hr />
<p>
<font color="red">“中关村黑马程序员训练营”</font>是由<b>传智播客</b>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>
1.1.4 总结:
HTML有标准:
* HTML4
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
* <!DOCTYPE html>
<pre>标签：原生标签.
<hr/>标签：横线.
1.2 案例二：网站图片页面显示：
1.2.1 需求：
在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?
效果如下:
1.2.2 分析:
1.2.2.1 技术分析:
【HTML的图片标签】
图片标签:<img>
* 属性:
* src :图片的来源.
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
图片的引入的路径问题:
* 路径：相对路径.
* 如果引入的图片和html文件在同一级路径。
* 直接写文件名或者./文件名
<img src="cs10006.jpg" />
<img src="./cs10006.jpg" />
* 如果引入的图片在html文件的上一级路径。
* <img src="../cs10006.jpg" />
* 如果引入的图片在html文件的下一级路径。
* <img src="img/cs10006.jpg" />
1.2.2.2 步骤分析:
【步骤一】创建一个html的文档
【步骤二】引入两张图片显示到页面
1.2.3 代码实现：
<img src="logo2.png" height="50" width="200"/>
<img src="header.png" height="50" width="250"/>
1.3 案例三：网站列表页面的显示
1.3.1 需求：
在网站的友情链接页面显示网站的所有的友情链接.
1.3.2 分析：
1.3.2.1 技术分析：
【HTML的列表标签】
l 有序列表
<ol>
<li></li>
</ol>
l 无序列表
<ul>
<li></li>
</ul>
【HTML的超链接标签】
HTML的超链接标签：<a>
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口
1.3.2.2 步骤分析：
【步骤一】创建一个html的文档
【步骤二】创建一个无序列表
【步骤三】在无序列表中添加超链接标签.
1.3.3 代码实现：
<ul>
<li><a href="../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html">传智播客</a></li>
<li><a href="http://www.baidu.com" target="_self">百度</a></li>
<li><a href="http://www.163.com" target="_blank">网易</a></li>
<li>百合</li>
</ul>
1.3.4 总结：
无序列表的属性:
* type属性
* disc ：实心点.
* circle ：空心圆
* square ：方块.
有序列表的属性:
* type属性:
* 1 ：数字类型
* a ：英文类型
* i ：罗马字符
* start属性:从哪开始
超链接的target属性:
* _self
* _blank
* _parent
1.4 案例四：网站的首页的显示：
1.4.1 需求：
网站的首页的设计：
1.4.2 分析：
1.4.2.1 技术分析：
【HTML的表格标签】
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left
* center
* right
<td>的属性:
* colspan=”列数”
* rowspan=”行数”
1.4.2.2 步骤分析：
【步骤一】创建一个html的页面
【步骤二】创建一个8行1列的表格
【步骤三】为每行内容填充数据.
1.4.3 代码实现:
1.5 案例五：网站的注册页面的显示：
1.5.1 需求：
使用HTML完成注册页面的设计：
1.5.2 分析：
1.5.2.1 技术分析
【HTML的表单标签（*****）】
HTML的表单标签：<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
***** GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素：
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
* <select> :下拉列表.
* <textarea> :文本域.
1.5.2.2 步骤分析：
【步骤一】创建一个html的文档
【步骤二】使用表格布局页面
【步骤三】在页面中使用表单标签完成注册页面
1.5.3 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="90%" align="center">
<tr>
<td>
<!--Logo部分-->
<table width="100%" border="1">
<tr>
<td>
<img src="img/logo2.png" />
</td>
<td>
<img src="img/header.png" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1" bgcolor="black" height="100%">
<tr>
<td>
<a href="">首页</a>
<a href="">手机数码</a>
<a href="">电脑办公</a>
<a href="">烟酒糖茶</a>
<a href="">鞋靴箱包</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="400" background="img/regist_bg.jpg">
<td>
<form action="../案例四：网站的首页的显示/案例四：网站首页.html" method="post">
<table border="5" width="60%" align="center" bgcolor="white">
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" value="" size="20" maxlength="6" >
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword"/>
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td>
<input type="text" name="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="name"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>
爱好
</td>
<td>
<input type="checkbox" name="hobby" value="篮球" checked>篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</td>
</tr>
<tr>
<td>
籍贯
</td>
<td>
<select name="province">
<option>--请选择--</option>
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</td>
</tr>
<tr>
<td>
头像
</td>
<td>
<input type="file" name="upload">
</td>
</tr>
<tr>
<td>
简介
</td>
<td>
<textarea cols="20" rows="4" name="info">我是：</textarea>
</td>
</tr>
<tr>
<td>
生日
</td>
<td>
<input type="text" name="birthday"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"/><input type="reset" value="重置"/><input type="button" value="我是按钮">
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td height="70">
<img src="img/footer.jpg" width="100%" height="100%">
</td>
</tr>
<tr>
<td align="center">
<a href="../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html">关于我们</a> 联系我们 招贤纳士 法律声明 <a href="../案例三：网站列表页面的显示/案例三：网站列表页面的显示.html">友情链接</a> 支付方式 配送方式 服务声明 广告声明 <br/>
Copyright © 2005-2016 传智商城 版权所有
</td>
</tr>
</table>
</body>
</html>
1.5.4 总结：
1.5.4.1 HTML5扩展的表单标签.(*****h5不是所有浏览器都支持)
<input type=”email”>
<input type=”date”>
<input type=”number”>
<input type=”color”>
1.6 案例六：网站的后台页面的显示：
1.6.1 需求：
一个网站需要有后台页面,后台页面设计：
1.6.2 分析：
1.6.2.1 技术分析：
【HTML的框架标签】
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用<frame>标签，frame代表切分的每个部分.
1.6.2.2 步骤分析:
【步骤一】创建一个html的页面
【步骤二】将整个页面分成上下两个部分.
【步骤三】将页面的下半部分分成左右两个部分.
【步骤四】在左侧页面中添加一些链接.
【步骤五】点击左侧链接,将页面的内容显示到右侧.
1.6.3 代码实现：
<frameset rows="15%,*">
<frame src="top.html" name="top"/>
<frameset cols="15%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
1.6.4 总结：
1.6.4.1 特殊字符的标签：
空格 :
< :<
> :>
web-day1的更多相关文章
- Day1 了解web前端
Day1 了解web前端 一.职业发展路线: 前端页面制作.前端开发.前端架构师 二.1)前端工程师主要职责: 利用HTML/CSS/JavaScript等各种Web技术进行客户端产品的开发.完 ...
- [红日安全]Web安全Day1 - SQL注入实战攻防
本文由红日安全成员: Aixic 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目起了一个名 ...
- 撩课-Web大前端每天5道面试题-Day1
1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码,获取所有被声明的变量: 2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到 ...
- Web大前端面试题-Day1
1. var的变量提升的底层原理是什么? JS引擎的工作方式是:1) 先解析代码,获取所有被声明的变量:2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到代码 ...
- 实践作业4：Web测试----细化分工DAY1.
会议时间:2017年12月23日 会议地点:东九教学楼教师休息室 主持人:吴辉 参会人员:吴辉.刘思佳.郜昌磊.王俊杰.吴慧杰 记录人:刘思佳 会议议题:本次作业的分工以及初期安排 工具选择 软件测试 ...
- 0、Web基本概念
一.Web的概念: 本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思. 二.Web的分类:Internet上供外界访问的Web资源分为静态Web资源和动态Web资源两种. 1.静态Web资源:W ...
- Web前端学习笔记1
Day1. 1.Windows常用快捷键. 快捷键 功能 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切(复制和剪切后都可以粘贴) ctrl+a 全选 ctrl+s 保存 ctrl+tab ...
- [译]36 Days of Web Testing(一)
[前言]最近负责的一次迭代发布中,一个小需求涉及前端JS改动,在测试这个需求的过程中忽略了浏览器兼容性测试,导致了一个线上bug.恶补下web测试,<36Days of web testing& ...
- 学习《Spring 3.x 企业应用开发实战》Day-1
Day-1 记录自己学习spring的笔记 提要:根据<Spring 3.x 企业应用开发实战>开头一个用户登录的例子,按照上面敲的. 1.项目分层
- Day1 - Python基础1 介绍、基本语法、流程控制
Python之路,Day1 - Python基础1 本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼 ...
随机推荐
- 哪些intel 网卡支持SR-IOV
哪些英特尔®以太网适配器和控制器支持 SR-IOV? 英特尔®以太网融合网络适配器 X710 系列 英特尔®以太网聚合网络适配器 X710-da2 英特尔®以太网聚合网络适配器 X710-da4 英特 ...
- OSX.PackageManager-Homebrew
How to install pip on mac? http://stackoverflow.com/questions/12092306/how-to-install-scipy-with-pip ...
- git clone时出现:"diffie-hellman-group1-sha1 "
解决办法1:在用户配置目录下添加一个ssh配置文件 vim /root/.ssh/config 内容如下: Host * KexAlgorithms +diffie-hellman-group1-s ...
- Centos安装配置Postfix邮件服务器--网址
http://www.haiyun.me/archives/centos-install-postfix.html http://blog.csdn.net/liuyunfengheda/articl ...
- PS故障风海报制作技术分享
1.首先找一张看起来很酷的图(也可以选择自己喜欢的图片): 2. 复制图层,点击添加图层样式,选择混合选项,在高级混合里面的通道选项,有R.G.B三个通道选项,默认是全部勾选的状态,选择其中一个勾掉( ...
- Spring IOC（六）依赖查找
Spring IOC(六)依赖查找 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring BeanFactory ...
- Hadoop的本地库（Native Libraries）介绍
Hadoop是使用Java语言开发的,但是有一些需求和操作并不适合使用java,所以就引入了本地库(Native Libraries)的概念,通过本地库,Hadoop可以更加高效地执行某一些操作. 目 ...
- IOS初级：UIAlertController
- (IBAction)signOutAction:(id)sender { //初始化,StyleActionSheet是对话框的样式 UIAlertController *alert = [UIA ...
- 【C#】详解C#委托
目录结构: contents structure [+] 委托语法 泛型委托 委托链 lambda表达式 揭秘委托 类库中的委托 委托和反射 1.委托语法 本文会详细阐述委托的使用,以及实现,想必读者 ...
- spring学习 四 对象的创建
spring中,有三种创建对象的方式 (1)构造创建 (2)实例工厂构造 (3)静态工厂构造 一 构造器创建 在构造器创建对象时,有无参构造和有参构造 两种 (1)在spring中,默认的是无参构造 ...