本帖最后由 夕阳下的少年 于 2018-5-3 16:03 编辑
第1章 WEB01-HTML篇
1.1.2.1 技术分析：
[HTML]的概述
什么是HTML:
* HTML:Hyper Text Markup Language --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.
HTML的作用
HTML是用来制作页面(静态页面)
HTML在那些地方使用
【HTML的使用】
HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
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.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"/>
HTML的列表标签
1.有序列表
<ol>
<li></li>
</ol>
2.无序列表
<ul>
<li><li>
</ul>
HTML的超链接标签
HTML的超链接标签;<a>
属性:
href:链接路径
target:打开的方式
_aelf:
_blank:
HTML 的表格标签
<table>
<tr>
<><>
<><>
</tr>
网站的首页的显示
网站注册页面显示(重要):
HTML的表单标签:<form>
常用属性:
action属性: 提交的路径.默认提交到当前页面
method属性: 请求的方式.GET和POST.默认是GET
面试题:{GET方式和POST方式的区别?
GET:数据会显示到地址栏中.get方式提交是有大小限制
POST:数据不会显示到地址栏中.post方式提交是没有大小限制的}
表单元素:
<input type = "text"> :文本框
常用属性:
name :表单元素的名称,必须有name属性
value :文本框的默认值
size :文本框长度
maxlenth :文本框输入的最大长度
readdonly :不允许修改文本框
checked :
<input type = "password"> :密码框
<input type = "radio"> :单选按钮
<input type = "checkbox"> :复选按钮
<input type = "button"> :普通按钮,没有任何功能的按钮
<input type = "submit"> :提交按钮
<input type = "reset"> :重置按钮
<input type = "file"> :文件上传的表单项
<input type = "hidden"> :隐藏字段
<input type = "image"> :图片按钮
<select> :下拉列表
<textarea> :文本域
1.5.4 总结:
HTML5扩展的表单标签.(-----h5不是所有浏览器都支持)
<input type = "email"> 这个表示你必须输入的是邮箱格式,否则不会然你输入
<input typr = "date"> 这个可以自己生成一个日期
<input type = "numner"> 能形成一个数字式的姓名
<input type = "color"> 能形成一颜色式的姓名
|
|
收藏
淘帖
踩
