第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/>

【HTML的排版标签】

标题标签：h标签<h1>...<h6>

段落标签：p标签

<p>

一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容

</p>

<p>

一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容

</p>

字体加粗标签：b标签

<b>黑马训练营</b>

字体斜体标签：i标签

<i>黑马训练营</i>

字体下划线：u标签

<u>黑马训练营</u>

居中标签：<center>标签

1.1.2.2 步骤分析:

【步骤一】创建一个HTML的文档

【步骤二】设置标题

【步骤三】设置四个段落

【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.

1.1.3 代码实现:

<!DOCTYPE html>

<html>

<head>

<title>网站信息页面</title>

</head>

<body>

<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文件在同一级路径。

* 直接写文件名或者./文件名

* 如果引入的图片在html文件的上一级路径。

* <img src="../cs10006.jpg" />

* 如果引入的图片在html文件的下一级路径。

* <img src="img/cs10006.jpg" />

1.2.2.2 步骤分析:

【步骤一】创建一个html的文档

【步骤二】引入两张图片显示到页面

1.2.3 代码实现：

1.3 案例三：网站列表页面的显示

1.3.1 需求：

在网站的友情链接页面显示网站的所有的友情链接.

1.3.2 分析：

1.3.2.1 技术分析：

【HTML的列表标签】

l 有序列表

<ol>

</ol>

l 无序列表

<ul>

</ul>

【HTML的超链接标签】

HTML的超链接标签：<a>

* 属性:

* href :链接的路径

* target :打开的方式

* _self :在自身页面打开

* _blank :新打开一个窗口

1.3.2.2 步骤分析：

【步骤一】创建一个html的文档

【步骤二】创建一个无序列表

【步骤三】在无序列表中添加超链接标签.

1.3.3 代码实现：

<ul>

</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>

</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>

</head>

<body>

<tr>

<td>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

<td>

<tr>

<td>

用户名

</td>

<td>

</td>

</tr>

<tr>

<td>

密码

</td>

<td>

</td>

</tr>

<tr>

<td>

确认密码

</td>

<td>

</td>

</tr>

<tr>

<td>

邮箱

</td>

<td>

</td>

</tr>

<tr>

<td>

姓名

</td>

<td>

</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>

</td>

</tr>

<tr>

<td>

头像

</td>

<td>

</td>

</tr>

<tr>

<td>

简介

</td>

<td>

</td>

</tr>

<tr>

<td>

生日

</td>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<a href="../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html">关于我们</a> 联系我们招贤纳士法律声明 <a href="../案例三：网站列表页面的显示/案例三：网站列表页面的显示.html">友情链接</a> 支付方式配送方式服务声明广告声明 <br/>

</td>

</tr>

</table>

</body>

</html>

1.5.4 总结：

1.5.4.1 HTML5扩展的表单标签.(*****h5不是所有浏览器都支持)

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>

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是个什么鬼 ...

随机推荐

金老师的经典著作《一个普通IT人的十年回顾》
学习人生 -------一个普通IT人的十年回顾(上)序从1994到2003,不知不觉之间,我已在计算机技术的世界里沉浸了十年.有位哲人说过:如果一个人能用十年的时间专心致志地 ...
转换 transform
转换定义: 1.转换是使元素改变形状.尺寸和位置的一种效果 2.又称为变形,即,可以向元素应用 2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 3.2D转换:使元素在 X 轴和 Y 轴平 ...
UML 图C#
继承关系(类1继承类2) 代码: class Class1:Class2 { } class Class2 { } 实现(实现接口) 代码: interface interface1 { void s ...
在IP网络中，P、PE、CE代表意思
1.ce , pe属于mpls vpn里的概念.VPN概念中,把整个网络中的路由器分为三类:用户边缘路由器(CE).运营商边缘路由器(PE)和运营商骨干路由器(P):其中,PE充当IP VPN接入路由 ...
linux内核中hlist_head和hlist_node结构解析
hlist_head和hlist_node用于散列表,分表表示列表头(数组中的一项)和列表头所在双向链表中的某项,两者结构如下: 1 2 3 struct hlist_head { struct hl ...
789A Anastasia and pebbles
A. Anastasia and pebbles time limit per test 1 second memory limit per test 256 megabytes input stan ...
python入门科普IDE工具和编译环境
应友人之邀,今天来讲述python的一些入门内容.本次讲解的并不是语法或者某个模块. python下载安装大多数 Linux 发行版在默认安装的情况 ...
Can I win LT464
In the "100 game," two players take turns adding, to a running total, any integer from 1.. ...
GOIP connects with Elastix through “config by line”
GOIP connects with Elastix through “config by line” By grace Liu on May 17, 2013 in Elastix, Gateway ...
scrapy爬取网址，进而爬取详情页问题
1.最容易出现的问题是爬取到的url大多为相对路径,如果直接将爬取到的url进行二次爬取就会出现以下报错: raise ValueError('Missing scheme in request ur ...

web-day1

第1章 WEB01-HTML篇

1.1 案例一：网站信息页面的显示：

1.1.1 需求：

1.1.2 分析:

1.1.2.1 技术分析：

1.1.2.2 步骤分析:

1.1.3 代码实现:

1.1.4 总结:

1.2 案例二：网站图片页面显示：

1.2.1 需求：

1.2.2 分析:

1.2.2.1 技术分析:

1.2.2.2 步骤分析:

1.2.3 代码实现：

1.3 案例三：网站列表页面的显示

1.3.1 需求：

1.3.2 分析：

1.3.2.1 技术分析：

1.3.2.2 步骤分析：

1.3.3 代码实现：

1.3.4 总结：

1.4 案例四：网站的首页的显示：

1.4.1 需求：

1.4.2 分析：

1.4.2.1 技术分析：

1.4.2.2 步骤分析：

1.4.3 代码实现:

1.5 案例五：网站的注册页面的显示：

1.5.1 需求：

1.5.2 分析：

1.5.2.1 技术分析

1.5.2.2 步骤分析：

1.5.3 代码实现

1.5.4 总结：

1.5.4.1 HTML5扩展的表单标签.(*****h5不是所有浏览器都支持)

1.6 案例六：网站的后台页面的显示：

1.6.1 需求：

1.6.2 分析：

1.6.2.1 技术分析：

1.6.2.2 步骤分析:

1.6.3 代码实现：

1.6.4 总结：

1.6.4.1 特殊字符的标签：

web-day1的更多相关文章

随机推荐

热门专题