黑马程序员WEB01-HTML篇笔记
第1章WEB01-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的体标签【HTML的字体标签】
标签:HTML中的字体标签.
使用：文字
* 标签的属性:
* <标签属性名=”属性值”属性名=”属性值”>
* 属性:
* color属性:字体颜色
* 英文单词设置:black,red,green,blue...
* 使用16进制数设置:#FF FF FF , #F F F
* size属性:字体的大小
* face属性:字体
* 基本使用：
我是HTML!
我是HTML！
我是小红！
我是小绿！
我是小蓝！
【HTML的排版标签】
标题标签：h标签
...
一级标题
二级标题
三级标题
段落标签：p标签
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
字体加粗标签：b标签
黑马训练营
字体斜体标签：i标签
黑马训练营
字体下划线：u标签
黑马训练营
居中标签：
1.1.
2.2步骤分析:
【步骤一】创建一个HTML的文档
【步骤二】设置标题
【步骤三】设置四个段落
【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.
1.1.3代码实现:
公司简介
“中关村黑马程序员训练营”是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、开放和协作，努力打造高质量的IT人才服务平台。
1.1.4总结:
HTML有标准:
* HTML4
*
* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
*
标签：原生标签.
标签：横线.1.2案例二：网站图片页面显示：
1.2.1需求：
在一个页面中往往图文并茂.想在HTML中引入一个图片如何处理?
效果如下:
1.2.2分析:
1.2.2.1技术分析:
【HTML的图片标签】
图片标签:
* 属性:
* src :图片的来源.
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
图片的引入的路径问题:
* 路径：相对路径.
* 如果引入的图片和html文件在同一级路径。
* 直接写文件名或者./文件名
* 如果引入的图片在html文件的上一级路径。
*
* 如果引入的图片在html文件的下一级路径。
*
1.2.2.2步骤分析:
【步骤一】创建一个html的文档
【步骤二】引入两张图片显示到页面
1.2.3代码实现：
1.3案例三：网站列表页面的显示1.3.1需求：
在网站的友情链接页面显示网站的所有的友情链接.
1.3.2分析：
1.3.
2.1技术分析：
【HTML的列表标签】
●有序列表
●无序列表
【HTML的超链接标签】
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口1.3.2.2步骤分析：
【步骤一】创建一个html的文档
【步骤二】创建一个无序列表
【步骤三】在无序列表中添加超链接标签.
1.3.3代码实现：
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的表格标签】
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left
* center
* right
* 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的表单标签：
生日
关于我们 联系我们招贤纳士法律声明 友情链接 支付方式配送方式服务声明广告声明
Copyright ? 2005-2016 传智商城版权所有
1.5.4总结：
1.5.4.1HTML5扩展的表单标签.(*****h5不是所有浏览器都支持)
1.6案例六：网站的后台页面的显示：
1.6.1需求：
一个网站需要有后台页面,后台页面设计：
1.6.2分析：
1.6.
2.1技术分析：
【HTML的框架标签】
框架标签: