-
网站信息页面案例
-
网站图片信息页面案例
-
网站友情链接页面案例
-
网站首页案例
-
网站后台页面案例
教学目标
-
了解什么是标记语言
-
了解HTML的框架标签
-
掌握HTML的主要标签(字体,图片,列表,链接,表格等标签)
案例一：网站信息页面案例
二，技术分析
1.什么是html
-
超文本标记语言
-
超文本: 超出了文本的范畴, 功能要比文本强大
-
标记语言 : 语法由标签组成的
-
学习HTML核心就是标签
2.html可以做什么
-
设计页面,做网页
-
扩展名是html或者htm
-
html标签不区分大小写
-
html由头(head)和体(body)组成
-
标签是可以嵌套的,标签里面可以放标签
-
标签一般由起始标签开始，结束标签终止。但是如果标签不修饰内容，可以在标签里结束。eg: <br/> <hr/>
-
4.标签属性
-
属性是属于标签的，修饰标签，让标签有更多的效果
-
属性一般定义在起始标签里面。
-
属性一般以 属性=属性值的形式存在
-
属性值一般用 ‘’或者“ ”括起来。 不加引号也是可以的.(不建议使用)
5.html入门demo
IDE快捷键
-
复制上一行：Ctrl+Shift+R
-
删除一行:Ctrl+D
-
格式化:Ctrl+Shift+F
-
注释:Ctrl+Shift+/
2)字体标签
<font color="red" size="3" face="微软雅黑">hello world!!!</font> <font color="red" size="1">hello world!!!</font> <font color="red" size="7">hello world!!!</font>
常用属性：
-
color:字体颜色
-
size：字体大小,取值1~7
-
face:字体类型
<hn>标题<hn> n取值1~6
2)段落标签
<p>段落</p>
注意：
-
段落之间自动进行换行
3)粗体标签
<b>内容</b>
4)斜体标签
<i>内容</i>
5)下划线标签
<hr/>
-
创建一个html页面
-
创建一个标题标签
-
创建一个下划线标签
-
创建四个段落标签
-
在第一个段落前面几个文字嵌套一个字体标签, 设置color属性为red
四，代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--1.创建一个html页面 2.创建一个标题标签 3.创建一个下滑线标签 4.创建4个段落标签 5.在第一个段落前面几个文字,嵌套一个font标签,设置color属性为red--> <body> <h1>公司简介</h1> <hr /> <p><font color="red">“中关村XXX程序员训练营”</font>是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“中关村XXX程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。</p> <p>XXX程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。XXX程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“XXX程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，XXX程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。</p> <p>中关村XXX程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p> <p>一直以来，XXX程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p> </body> </html>